• 보드게임판 데이터를 어떻게 가지고 있다가 그려줄까?

  1. 전체 배열 하나로 0 ~ 23 순서대로 칸 정보

  2. 라인별로 관리

  3. 특수칸, 기업칸들 칸 정보 따로

• 기업칸 표시 정보

  • 테마 → 그에 맞는 칸 색깔 적용
  • 기업이름
  • 기업로고
  • 1 주당 가격
  • (잔여량?)

• 그 외 특수 칸들

  • 이름이랑 그에 맞는 이미지나 아이콘만 있으면 될 듯

기업칸에서 1주당 가격은 계속해서 변동되는 정보이므로 서버에서 전체현황판 업데이트 이후 바뀐 수치가 렌더링 되어야 함. (+ 가격변동이 일어난 기업의 주식을 가지고 있는 모든 플레이어들의 개인현황판도 다 각각 업데이트 되어야 함) → 이걸 프론트에서 처리하는게 맞을까?

플레이어 말을 이동시킬 때 for문 내부 로직이 어떻게 순서대로 하나씩 실행되게 할까?

• 반복문에서 한칸씩 이동시키는 방식으로 로직을 짜고 있는데 그냥 for문을 돌리면 꺾이는 부분에서 x, y 좌표가 동시에 변경되면서 transform: translate(X, Y)를 적용할 때 대각선으로 이동하는 것처럼 보인다.

해결법: moveToken() 함수 자체를 async를 이용해 비동기 함수로 만들고 for문 끝에 await로 딜레이를 추가

const moveToken = async (주사위눈: number) => {
  for (let i = 주사위눈; i > 0; i--) {
    // ... 나머지 코드 ...
    // 비동기 대기 (1초)
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
};

변경 전

변경 후

이동로직 중복 줄이기

• 리팩터링 전 코드 기록
  • switch 문이 가독성을 해친다

const moveToken = async (주사위눈: number) => {
    for (let i = 주사위눈; i > 0; i--) {
      switch (direction.current) {
        case 'top':
          tokenCoordinates.current.y -= 6;
          tokenRef.current!.style.transform = `translate(${tokenCoordinates.current.x}rem, ${tokenCoordinates.current.y}rem)`;
          break;
        case 'right':
          tokenCoordinates.current.x += 6;
          tokenRef.current!.style.transform = `translate(${tokenCoordinates.current.x}rem, ${tokenCoordinates.current.y}rem)`;
          break;
        case 'bottom':
          tokenCoordinates.current.y += 6;
          tokenRef.current!.style.transform = `translate(${tokenCoordinates.current.x}rem, ${tokenCoordinates.current.y}rem)`;
          break;
        case 'left':
          tokenCoordinates.current.x -= 6;
          tokenRef.current!.style.transform = `translate(${tokenCoordinates.current.x}rem, ${tokenCoordinates.current.y}rem)`;
          break;
        default:
          break;
      }
      currentCell.current = (currentCell.current + 1) % 24;
      const isCorner = currentCell.current % 6 === 0; // 0, 6, 12, 18 칸에서 방향 전환

      if (isCorner) {
        direction.current = changeDirection(direction.current);
      }

      await delay(200);
    }
  };

• 리팩터링 후

const moveToken = async (
    주사위눈: number,
    token: RefObject<HTMLDivElement>
  ) => {
    const move = (x: number, y: number) => {
      tokenCoordinates.current.x += x;
      tokenCoordinates.current.y += y;
      token.current!.style.transform = `translate(${tokenCoordinates.current.x}rem, ${tokenCoordinates.current.y}rem)`;
    };

    const directions = {
      top: { x: 0, y: -6 },
      right: { x: 6, y: 0 },
      bottom: { x: 0, y: 6 },
      left: { x: -6, y: 0 },
    };

    for (let i = 주사위눈; i > 0; i--) {
      const directionData = directions[direction.current];
      move(directionData.x, directionData.y);

      currentCell.current = (currentCell.current + 1) % 24;
      const isCorner = currentCell.current % 6 === 0; // 0, 6, 12, 18 칸에서 방향 전환

      if (isCorner) {
        direction.current = changeDirection(direction.current);
      }

      await delay(200);
    }
  };