[STORY] 게임 UI/UX 디자인 시스템 구축

[DDINGJOO]

Parent Epic

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

개요

게임 전용 디자인 시스템을 구축하여 일관된 UI/UX를 제공합니다.

디자인 토큰

색상 팔레트

const GAME_COLORS = {
  // 브랜드
  primary: '#8B5CF6',      // 보라 (게임 카테고리)
  secondary: '#10B981',    // 민트 (게임 진행)
  
  // 상태
  waiting: '#10B981',      // 대기중 - 민트
  playing: '#F59E0B',      // 게임중 - 앰버
  finished: '#6B7280',     // 종료 - 그레이
  
  // 게임 내
  correct: '#F59E0B',      // 정답 - 골드
  wrong: '#EF4444',        // 오답 - 레드
  timer: {
    normal: '#10B981',
    warning: '#F59E0B',    // 30초 이하
    danger: '#EF4444',     // 10초 이하
  },
  
  // 캔버스
  canvasBorder: {
    normal: '#E5E7EB',
    active: '#10B981',
    danger: '#EF4444',
  },
  
  // 비눗방울
  bubble: {
    normal: 'linear-gradient(135deg, #E0F2FE, #BAE6FD)',
    correct: 'linear-gradient(135deg, #FEF3C7, #FDE68A)',
  }
}

타이포그래피

const GAME_TYPOGRAPHY = {
  // 제시어
  word: {
    fontFamily: 'Pretendard',
    fontWeight: 700,
    fontSize: '28px',
  },
  
  // 타이머
  timer: {
    fontFamily: 'JetBrains Mono, monospace',
    fontWeight: 600,
    fontSize: '24px',
  },
  
  // 점수
  score: {
    fontFamily: 'JetBrains Mono, monospace',
    fontWeight: 700,
    fontSize: '16px',
  },
  
  // 채팅
  chat: {
    fontFamily: 'Pretendard',
    fontWeight: 400,
    fontSize: '14px',
  }
}

애니메이션

const GAME_ANIMATIONS = {
  // 비눗방울
  bubble: {
    duration: '3s',
    easing: 'ease-out',
    keyframes: `
      0% { transform: translateY(0) scale(1); opacity: 1; }
      100% { transform: translateY(-200px) scale(1.3); opacity: 0; }
    `
  },
  
  // 타이머 펄스
  timerPulse: {
    duration: '1s',
    easing: 'ease-in-out',
    keyframes: `
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    `
  },
  
  // 정답 컨페티
  confetti: {
    duration: '3s',
    // canvas-confetti 라이브러리 사용
  },
  
  // 라운드 전환
  roundTransition: {
    duration: '0.5s',
    easing: 'ease-in-out',
  }
}

레이아웃

const GAME_LAYOUT = {
  // Split View 비율
  splitView: {
    canvas: '65%',
    chat: '35%',
  },
  
  // 캔버스 크기
  canvas: {
    width: 540,
    height: 360,
  },
  
  // 간격
  spacing: {
    header: 56,
    toolbar: 48,
    gap: 16,
  }
}

Tasks

• 게임 디자인 토큰 파일 생성 (src/theme/gameTheme.js)
• 색상 팔레트 정의
• 타이포그래피 정의
• 애니메이션 keyframes 정의
• 레이아웃 상수 정의
• 공통 게임 컴포넌트 스타일 (버튼, 카드, 뱃지)
• canvas-confetti 라이브러리 설치 및 설정

참고

• 기존 src/theme/theme.js의 DESIGN_TOKENS 패턴 따름
• 게임 전용 토큰은 별도 파일로 분리

완료 조건 (AC)

• gameTheme.js 파일 생성됨
• 모든 게임 컴포넌트에서 토큰 사용
• 일관된 색상/타이포그래피 적용
• 애니메이션 keyframes 정의됨

[github-actions]

Jira: MESP-212

[DDINGJOO]

✅ PR #187에서 구현 완료 - gameTheme.js 디자인 시스템 구축