주루마블 기본 알고리즘 생성중.

- 시작위치 생성
- 각 위치별 추가 이벤트시 사용될 이벤트 알고리즘
- Rapier, Three.js를 통한 주사위.

app/game/chessman-piece.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+const DEFAULT_CHESSMAN_SRC = '/chessman/default.png';
+
+/** 주사위판 그리드 위에 올리는 말 표시. public/chessman/*.png 로 커스텀 가능. */
+export default function ChessmanPiece({
+  x,
+  y,
+  hopKey,
+  src = DEFAULT_CHESSMAN_SRC,
+}: {
+  x: number;
+  y: number;
+  /** 칸이 바뀔 때마다 증가시켜 hop 애니메이션을 다시 재생한다. */
+  hopKey: number;
+  /** public/chessman 하위 이미지 경로. 기본값: /chessman/default.png */
+  src?: string;
+}) {
+  return (
+    <div
+      aria-label="chessman"
+      style={{
+        gridColumn: x + 1,
+        gridRow: y + 1,
+        zIndex: 5,
+        pointerEvents: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        key={hopKey}
+        src={src}
+        alt="chessman"
+        draggable={false}
+        className="drinkmarble-chessman-token"
+        style={{
+          width: '58%',
+          height: '58%',
+          minWidth: 22,
+          minHeight: 22,
+          objectFit: 'contain',
+          filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.35))',
+          animation: hopKey > 0 ? 'drinkmarble-chessman-hop 220ms ease-out' : undefined,
+        }}
+      />
+    </div>
+  );
+}