feat: 뉴스 영어 학습 기능 및 단어장 연동 (#189)

src/domains/badge/components/BadgeCard.jsx

@@ -3,7 +3,10 @@ import {Box, Fade, LinearProgress, Tooltip, Typography,} from '@mui/material'
 import {EmojiEvents as TrophyIcon, Lock as LockIcon,} from '@mui/icons-material'
 import {useSettings} from '../../../contexts/SettingsContext'
 import {useThemeMode} from '../../../contexts/ThemeContext'
-import {BADGE_CATEGORY_COLORS, BADGE_DESCRIPTIONS_EN, BADGE_NAMES_EN,} from '../constants/badgeConstants'
+import {BADGE_CATEGORY_COLORS, BADGE_DESCRIPTIONS_EN, BADGE_NAMES_EN, NEWS_BADGE_TYPES,} from '../constants/badgeConstants'
+
+// 뉴스 뱃지 색상
+const NEWS_BADGE_COLOR = '#10b981'
 
 export default function BadgeCard({badge, size = 'medium'}) {
     const {isKorean} = useSettings()
@@ -13,6 +16,8 @@ export default function BadgeCard({badge, size = 'medium'}) {
 
     const isEarned = badge.earned
     const progress = Math.min((badge.progress / badge.threshold) * 100, 100)
+    const isNewsBadge = NEWS_BADGE_TYPES.includes(badge.badgeType) || badge.badgeType?.startsWith('NEWS_')
+    const badgeColor = isNewsBadge ? NEWS_BADGE_COLOR : BADGE_CATEGORY_COLORS[badge.category]
 
     // Size configurations
     const sizes = {
@@ -66,7 +71,7 @@ export default function BadgeCard({badge, size = 'medium'}) {
                             backgroundColor: '#e5e7eb',
                             '& .MuiLinearProgress-bar': {
                                 borderRadius: 3,
-                                background: `linear-gradient(135deg, ${BADGE_CATEGORY_COLORS[badge.category]} 0%, ${BADGE_CATEGORY_COLORS[badge.category]}99 100%)`,
+                                background: `linear-gradient(135deg, ${badgeColor} 0%, ${badgeColor}99 100%)`,
                             },
                         }}
                     />
@@ -143,11 +148,11 @@ export default function BadgeCard({badge, size = 'medium'}) {
                         justifyContent: 'center',
                         position: 'relative',
                         background: isEarned
-                            ? `linear-gradient(135deg, ${BADGE_CATEGORY_COLORS[badge.category]}20 0%, ${BADGE_CATEGORY_COLORS[badge.category]}10 100%)`
+                            ? `linear-gradient(135deg, ${badgeColor}20 0%, ${badgeColor}10 100%)`
                             : isDark ? '#3f3f46' : '#f3f4f6',
-                        border: isEarned ? `3px solid ${BADGE_CATEGORY_COLORS[badge.category]}` : '3px solid #d1d5db',
+                        border: isEarned ? `3px solid ${badgeColor}` : '3px solid #d1d5db',
                         boxShadow: isEarned
-                            ? `0 8px 24px -4px ${BADGE_CATEGORY_COLORS[badge.category]}40`
+                            ? `0 8px 24px -4px ${badgeColor}40`
                             : 'none',
                         overflow: 'hidden',
                     }}
@@ -171,7 +176,7 @@ export default function BadgeCard({badge, size = 'medium'}) {
                         <TrophyIcon
                             sx={{
                                 fontSize: config.icon,
-                                color: isEarned ? BADGE_CATEGORY_COLORS[badge.category] : '#9ca3af',
+                                color: isEarned ? badgeColor : '#9ca3af',
                                 filter: isEarned ? 'none' : 'grayscale(100%)',
                                 opacity: isEarned ? 1 : 0.4,
                             }}

src/domains/badge/constants/badgeConstants.js

@@ -20,6 +20,21 @@ export const BADGE_TYPES = {
     QUICK_GUESSER: 'QUICK_GUESSER',
     PERFECT_DRAWER: 'PERFECT_DRAWER',
     MASTER: 'MASTER',
+    // 뉴스 관련 뱃지
+    NEWS_FIRST_READ: 'NEWS_FIRST_READ',
+    NEWS_10_READ: 'NEWS_10_READ',
+    NEWS_50_READ: 'NEWS_50_READ',
+    NEWS_100_READ: 'NEWS_100_READ',
+    NEWS_QUIZ_FIRST: 'NEWS_QUIZ_FIRST',
+    NEWS_QUIZ_PERFECT: 'NEWS_QUIZ_PERFECT',
+    NEWS_QUIZ_10: 'NEWS_QUIZ_10',
+    NEWS_QUIZ_50: 'NEWS_QUIZ_50',
+    NEWS_WORDS_10: 'NEWS_WORDS_10',
+    NEWS_WORDS_50: 'NEWS_WORDS_50',
+    NEWS_WORDS_100: 'NEWS_WORDS_100',
+    NEWS_STREAK_7: 'NEWS_STREAK_7',
+    NEWS_STREAK_30: 'NEWS_STREAK_30',
+    NEWS_MASTER: 'NEWS_MASTER',
 }
 
 // 배지 카테고리
@@ -35,8 +50,22 @@ export const BADGE_CATEGORIES = {
     QUICK_GUESSES: 'QUICK_GUESSES',
     PERFECT_DRAWS: 'PERFECT_DRAWS',
     ALL_BADGES: 'ALL_BADGES',
+    // 뉴스 관련 카테고리
+    NEWS_READ: 'NEWS_READ',
+    NEWS_QUIZ: 'NEWS_QUIZ',
+    NEWS_WORDS: 'NEWS_WORDS',
+    NEWS_STREAK: 'NEWS_STREAK',
+    NEWS_MASTER: 'NEWS_MASTER',
 }
 
+// 뉴스 뱃지 타입 목록 (초록색 테두리 적용용)
+export const NEWS_BADGE_TYPES = [
+    'NEWS_FIRST_READ', 'NEWS_10_READ', 'NEWS_50_READ', 'NEWS_100_READ',
+    'NEWS_QUIZ_FIRST', 'NEWS_QUIZ_PERFECT', 'NEWS_QUIZ_10', 'NEWS_QUIZ_50',
+    'NEWS_WORDS_10', 'NEWS_WORDS_50', 'NEWS_WORDS_100',
+    'NEWS_STREAK_7', 'NEWS_STREAK_30', 'NEWS_MASTER',
+]
+
 // 배지 카테고리 라벨 (한국어)
 export const BADGE_CATEGORY_LABELS_KO = {
     FIRST_STUDY: '첫 시작',

src/domains/games/theme/gameTheme.js

@@ -4,10 +4,10 @@
  */
 
 export const GAME_COLORS = {
-    // 브랜드
-    primary: '#8B5CF6',
-    primaryLight: '#A78BFA',
-    primaryBg: '#F3E8FF',
+    // 브랜드 (청록색 - 사이드바와 통일)
+    primary: '#06b6d4',
+    primaryLight: '#22d3ee',
+    primaryBg: '#ecfeff',
 
     // 게임 상태
     status: {

src/domains/news/index.js

@@ -0,0 +1,9 @@
+// Pages
+export { default as NewsListPage } from './pages/NewsListPage'
+export { default as NewsDetailPage } from './pages/NewsDetailPage'
+export { default as NewsQuizPage } from './pages/NewsQuizPage'
+export { default as NewsWordsPage } from './pages/NewsWordsPage'
+export { default as NewsStatsPage } from './pages/NewsStatsPage'
+
+// Services
+export * from './services/newsService'