[7주차 과제] - 카드 맞추기 리펙토링

[gunom]

✨ 구현 기능 명세

• ts로 변경.
• recoil로 state 전역 관리.

🌼 PR Point

import { atom } from "recoil";
import cardImageList from "../assets/cardImageList";
import { generateCards, shuffleCard } from "../utils/generateCardUtils";

export const cardListState = atom({
    key: "cardListState",
    default: shuffleCard(generateCards(cardImageList, 5))
});

import { atom } from "recoil";

export const difficultyState = atom({
    key: "difficultyState",
    default: "EASY",
});

import { atom } from "recoil";

export const scoreState = atom({
    key: "scoreState",
    default: 0,
});

atom으로 CardList, Difficulty, Score를 전역으로 분리했습니다.

import { selector } from "recoil";
import { difficultyState } from "../atoms/Difficulty";

const EASY_COUNT = 5;
const NORMAL_COUNT = 7;
const HARD_COUNT = 9;

export const countState = selector({
    key: "countState/get",
    get: ({ get }) => {
        switch (get(difficultyState)) {
            case "EASY":
                return EASY_COUNT;
            case "NORMAL":
                return NORMAL_COUNT;
            case "HARD":
                return HARD_COUNT;
            default:
                return EASY_COUNT;
        }
    }
});

총 맞춰야할 카드 개수인 count는 selector로는 difficulty atom에 따라 값을 리턴하게 했습니다.

🥺 소요 시간, 어려웠던 점

• 5h

🌈 구현 결과물

[gunom]

제출 깜빡 이슈...^^