[ 7주차 기본과제 ] 🎈리액트 카드게임 TS 변환 및 Recoil 상태관리

[yesongoget]

✨ 구현 기능 명세

1️⃣ jsx → tsx 로 모두 변환해주세요!

jsx → tsx로 변환 ✔

2️⃣ recoil로 카드 게임에서 필요한 상태를 관리해주세요!

selectLevel (게임 난이도 선택) ✔
matchedCount (게임에서의 정답 수) ✔
isModalOpen (모달 오픈 여부) ✔
cardPairs (게임에서의 카드 짝 수) ✔
choiceOne, choiceTwo (사용자가 선택한 카드) ✔

🌼 PR Point

게임 로직에서 필요한 상태들을 모아둔 cardMatched,
레벨을 선택하는 상태를 정의한 gameLevel,
모달오픈상태를 정의한 modalOpen 총 3분류로 atom파일을 분리시켜주었습니다.

요로코롬~

export const matchedCountStateAtom = atom<number>({
    key: "matchedCountState",
    default: 0,
});

export const cardPairsStateAtom = atom<number>({
    key: "cardPairsState",
    default: 5,
});

그리고 여러 컴포넌트에서 자주 사용되는 카드 인터페이스를 따로 파일로 분리시켜 import 해줌으로써 중복을 최소화시켜줬습니다!

interface Card {
    id: number;
    title: string;
    src: string;
    matched: boolean;
}

export default Card;

++ 자잘한 스타일에 변화를 줬어요!
헤더 색상 분리, 카드 가운데 정렬 등!

• ~ 부분 이렇게 구현했어요, 피드백 부탁해요!

🥺 소요 시간, 어려웠던 점

• 10h
• jsx에서 tsx로 migration하는 과정에서 index src를 main.tsx로 안바꿔주는 바람에 렌더링이 게속 안되는 바보같은 경험을 했답니다~ 사라진 몇시간,,,!
• 그리고 정확히 어떤 상태를 recoil을 통해 전역 상태관리하면 좋은 것일지 아직 명확히 정의가 잡히지 않은 것 같아서 더 보완해보고 싶어요!

🌈 구현 결과물

week7.1.mp4