Skip to content

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

Description

@DDINGJOO

Parent Epic

개요

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

화면 설계

대시보드 카드 추가

┌─────────────────────────────────────────────────────────────┐
│  대시보드                                                    │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────────┐  ┌─────────────────────┐          │
│  │ 🎤 말하기 연습       │  │ ✍️ 글쓰기 연습       │          │
│  │                     │  │                     │          │
│  │ 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로 이동
  • 게임 카테고리 색상이 다른 카테고리와 구분됨

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions