[STORY] 대시보드에 게임 카테고리 추가

[DDINGJOO]

Parent Epic

• [EPIC] 캐치마인드 게임 분리 및 UI/UX 전면 개선 #177 [EPIC] 캐치마인드 게임 분리 및 UI/UX 전면 개선

개요

대시보드에 게임 카테고리를 추가하여, 사용자가 캐치마인드 게임 로비에 쉽게 접근할 수 있도록 합니다.

화면 설계

대시보드 카드 추가

┌─────────────────────────────────────────────────────────────┐
│  대시보드                                                    │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────────┐  ┌─────────────────────┐          │
│  │ 🎤 말하기 연습       │  │ ✍️ 글쓰기 연습       │          │
│  │                     │  │                     │          │
│  │ OPIC | AI 대화      │  │ 채팅 | 작문 연습    │          │
│  └─────────────────────┘  └─────────────────────┘          │
│                                                             │
│  ┌─────────────────────┐  ┌─────────────────────┐          │
│  │ 📚 단어 암기        │  │ 🎮 게임 (NEW)        │          │
│  │                     │  │                     │          │
│  │ 매일 단어 | 퀴즈    │  │ 캐치마인드          │          │
│  └─────────────────────┘  └─────────────────────┘          │
│                                                             │
└─────────────────────────────────────────────────────────────┘

게임 카드 확장 시

┌─────────────────────────────────────┐
│ 🎮 게임                              │
│ 재미있게 영어를 배워보세요            │
├─────────────────────────────────────┤
│                                     │
│  ┌─────────────┐  ┌─────────────┐  │
│  │ 🎨          │  │ 🔜          │  │
│  │ 캐치마인드   │  │ Coming Soon │  │
│  │ 그림 맞추기  │  │             │  │
│  └─────────────┘  └─────────────┘  │
│                                     │
└─────────────────────────────────────┘

기술 스택

• 파일: src/App.jsx (Dashboard 컴포넌트)
• 라우팅: /games/catchmind 추가

Tasks

• App.jsx의 learningModes 배열에 게임 카테고리 추가
• 게임 카드 아이콘 및 색상 정의
• 캐치마인드 서브 메뉴 추가
• /games/catchmind 라우트 추가
• 게임 도메인 폴더 구조 생성 (src/domains/games/)
• 사이드바/네비게이션에 게임 메뉴 추가 (선택)

디자인 가이드

게임 카테고리 색상

{
  id: 'games',
  title: '게임',
  description: '재미있게 영어를 배워보세요',
  icon: SportsEsportsIcon,
  color: '#8B5CF6',      // 보라색
  bgColor: '#F3E8FF',    // 연보라
  children: [
    {
      id: 'catchmind',
      title: '캐치마인드',
      icon: BrushIcon,
      path: '/games/catchmind',
      description: '그림으로 단어 맞추기'
    }
  ]
}

아이콘

• 게임 카테고리: SportsEsports (MUI)
• 캐치마인드: Brush 또는 Palette

완료 조건 (AC)

• 대시보드에 게임 카드 표시됨
• 게임 카드 hover 시 캐치마인드 메뉴 표시
• 캐치마인드 클릭 시 /games/catchmind로 이동
• 게임 카테고리 색상이 다른 카테고리와 구분됨

[github-actions]

Jira: MESP-210

[DDINGJOO]

✅ PR #187에서 구현 완료 - 사이드바/네비게이션에 게임 메뉴 추가