Refactor/overalls

[thisisWooyeol]

변경 이유

1. utils/Map2048.ts 를 기능별로 분리: constants.ts, utils/helpers.ts, utils/rule.ts

2. utils/localStorage.ts를 repositories/storage.ts 로 이동. 일반적인 로컬 저장을 포괄적으로 포함하도록 함

3. 2048 게임 구현과 게임 로직 인터페이스를 분리. 모듈화를 강화

변경 내용

1. utils/rule.ts:

type Rule2048 = {
  resetGame: () => State2048;
  move: (state: State2048, direction: Direction) => State2048;
};

다음과 같이 2048 게임 조작을 move, reset으로 구현하고, 게임 진행 상태는 State2048로 통일
utils/helpers.ts 에는 rule 구현을 위한 보조 함수가 있으며 constants.ts는 앱 전반에서 사용하는 상수를 모아둠.

2. repositories/storage.ts

type Storage2048 = {
  loadGameState: () => State2048 | undefined;
  saveGameState: (state: State2048) => void;
};

Storage2048에서 중간저장 기능 수행. IO type을 State2048로 통일

3. 게임 로직의 활용 - src/App.tsx

const { resetGame, move } = getRule2048({
  NUM_ROWS: 4,
  NUM_COLS: 4,
  WINNING_SCORE: 2048,
});

게임 리셋과 move 처리 함수는 상수(NUM_ROWS, NUM_COLS, WINNING_SCORE)과 독립적임. 해당 상수는 초기 1회만 제공해주면 됨.

const keyPressHandler = useCallback(
  (key: string) => {
    // ...(생략)

    const newState2048 = move(state2048, direction);

    setState2048(() => newState2048);

    // alert win or lose
    if (newState2048.gameStatus === 'win') console.info('You win!');
    if (newState2048.gameStatus === 'lose') console.info('You lose!');
  },
  [state2048],
);

모듈화로 간결한 상태 처리 가능

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
2048-clone-by-wylee	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 23, 2024 2:56pm