윷짝놀이 : 윷 판 구현

윷 판은 이렇게 생겼다.

각 칸은 컴포넌트화 할것이다.

윷 판 index

각 칸을 이동하는 방식으로 구현을 하고 싶어서
백엔드랑 회의 후에 각 칸에 index를 부여하고

윷 말을 이동할때 이동 경로를 서버가 계산해서 프론트로 주면
프론트는 받은 경로대로 움직이기로 했다.

백엔드에서 정의한 각 칸의 index

0번 5번, 10번, 15번, 22/27번 칸은 모서리이고
5번, 10번, 22/27번에서는 어느 방향으로 갈지 정할 수 있다.

윷 판 그리기

1. 윷 판 container

div에 border와 background-image로 대각선 라인을 그렸다.

2. 모서리 그리기

container를 기준으로 모서리 컴포넌트를 absolute로 위치 지정

3. 작은 칸 그리기

container borer에 들어가는 흰 칸들은 justify-content: space-between로 정렬해줬고
대각선의 칸들은 하나하나 container 기준으로 position 지정

(이벤트 칸은 내가 아니라 다른분이 css 작업을 하셨다)

윷 칸 컴포넌트 구현

각 윷 칸에는 해당 위치인 윷 말을 렌더링되어야 해서
내부적으로 윷 말 배열을 렌더링한다.

// 모서리 칸 컴포넌트
interface CornerPointCompoProps {
  id: number;            // 칸의 index
  type: string;          // corner 색깔을 구분하기 위해서
  point: string;         // 모서리 위치(leftTop, rightTop, center)
  pieceList: Array<YutPieceCompoProps>;
}

const CornerPoint = ({ id, type, point, pieceList }: CornerPointCompoProps) => {
  return (
    <style.CornerPoint type={type} className={point}>
      <div></div>
      // 현재 칸에 있는 윷 말 렌더링
      {pieceList?.map((piece) => (
        <YutPieceCompo key={`${piece.userId}-${piece.pieceId}`} {...piece} />
      ))}
    </style.CornerPoint>
  );
};

작은 칸들도 위와 같은 방식으로 구현되었다.

리뷰

id가 칸의 index를 나타낼거면 변수명도 다른 컴포넌트에서 쓰는걸로 통일했으면 좋지 않을까는 아쉬움이 있다

그리고 윷 판 컴포넌트의 css가 너무 난해해서 내가 아니면 읽기 힘들거 같다

코드가 궁금하다면? - github