[Feat/#89] 만다르트 전체 뷰

[Leeyoonji23]

💡 Summary

close #89

✅ Tasks

• 만다라트 전체 81칸 UI 구현
• 가운데 9칸 타입 생성
• MandalartGrid.tsx- 3x3 그리드 로직을 별도 컴포넌트로 분리 -> 그리드 렌더링 로직 재사용 가능하도록 개선했습니다.
• Layout 스타일 - backgroundColor: colors.black01 추가했습니다.

👀 To Reviewer

MandalartGrid.tsx 추가했습니다.
생각한 로직은
큰 3x3 그리드 (전체 보기)
각 칸 안에 또 3x3 그리드 (개별 만다라트)
이 구조에서 반복되는 부분, "3x3 그리드를 그리고 각 칸에 무언가를 넣는" 부분을 재사용 가능한 컴포넌트로 분리했습니다.

왜 만들었을까요:

1. children prop으로 함수를 받아 각 인덱스에 대한 렌더링을 위임합니다.
2. gridSize prop으로 그리드 크기를 유연하게 조절 가능 (기본값 9) -> 그럴리가 없겠지만 혹시나 나중에 바뀔 경우의 수를 고려했을 때.
3. className prop으로 스타일링 자유도를 보장하도록 했습니다.

리뷰 시 확인 부탁드릴 사항:

• 컴포넌트 분리가 적절한지
• prop 구조가 충분히 유연한지
• 현재 구조에서 추가로 개선할 부분이 있는지

봐주시면 감사할 것 같습니다.

const CENTER_INDEX = 4; 얜 따로 상수로 빼려고 했는데... 한 줄이라 굳이 분리하지 않았습니다. 참고해주세요.

• 수정하기 버튼 이거 머지 되면 다시 이슈 파서 박겠습니다.

📸 Screenshot

2025-07-12.3.47.26.mov

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.