Board.jsx UI 분리 필요

[kyngre]

이슈 요약

Board 컴포넌트 내의 색상 선택 카드 UI, 게임 종료 팝업, 게임 종료 결과 대시보드 UI를 별도의 컴포넌트로 분리하여 Board 컴포넌트의 역할과 가독성을 개선합니다.

상세 설명

현재 Board.jsx 컴포넌트는 특정 UI 요소 (돌 색상 선택 카드, 게임 종료 팝업, 게임 종료 결과 대시보드)를 직접 포함하고 있습니다. 이는 컴포넌트의 크기를 증가시키고, 코드의 이해도와 유지보수성을 저하시킵니다. 따라서, 이러한 UI 관련 JSX를 별도의 컴포넌트로 분리하여 Board 컴포넌트를 더욱 간결하고 핵심적인 바둑판 상태 관리 및 게임 흐름 관리에 집중하도록 리팩토링해야 합니다.

재현 방법

src/components/Board.jsx 파일을 열어 코드를 확인합니다.
다음 JSX 부분을 확인합니다.

• 게임 시작 전 색상 선택 카드 UI (if (!choice) { ... } 블록)
• 게임 종료 팝업 ({gameOver && showPopup && ( ... )})
• 게임 종료 결과 대시보드 ({gameOver && !showPopup && ( ... )})

기대 동작/결과

UI 관련 JSX 코드들이 별도의 컴포넌트 파일로 분리됩니다.

---

참고 자료

현재 src/components/Board.jsx 파일의 코드