-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[ 7주차 기본 과제 ] 카드게임 리팩토링 #12
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
솔직히 ts 저 응앱니다 많이 배워갑니데이
<> | ||
{onModal && <ModalFrame setOnModal={setOnModal}>🌷축하합니다🌷</ModalFrame>} | ||
<ResetButton /> | ||
<MainHeader correct={correct} setOnModal={setOnModal} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
옹 모달이나 카드는 프롭으로 유지했구나?
|
||
export const cardsLevel = atom({ | ||
key: 'cardsLevel', | ||
default: levelType.EASY, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
크 levelType.EASY
return ( | ||
<CardBoxWrapper onClick={reverseCard}> | ||
<CardBox $isReverse={selectCards[idx].selected}> | ||
<CardImgFrontWrapper $isReverse={selectCards[idx].selected}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
$ 붙여주는 건 뭔지 궁금해요!
✨ 구현 기능 명세
1️⃣ jsx → tsx 로 모두 변환해주세요!
2️⃣ recoil로 카드 게임에서 필요한 상태를 관리해주세요!
🌼 PR Point
스타일드 컴포넌트에서 props를 내려주면 잘 작동되지만 위와 같은 props warning이 날 때가 많습니다! 그래서 Transient props($)를 이용해 warning이 나는 것을 막아주었어요.
${({ $isReverse }) => $isReverse && 180}
사실 타입스크립트는 자동으로 타입을 인식하는 친구이기 때문에, 그러한 특징을 활용하고 싶어서 useState에서 초기값을 설정해준 경우 등, 타입을 자동으로 잘 인식하는 부분의 경우는 타입 명시를 생략했어요!
🥺 소요 시간, 어려웠던 점
2h
🌈 구현 결과물
https://youtu.be/naI35EoQvEs