feat: Add streak optimistic update on lesson completion

레슨 완료 시 스트릭이 즉시 업데이트되도록 구현

Changes:
- store.ts: streak를 전역 상태로 추가
- TopBar.tsx: useStreak 대신 store 사용
- LessonPage.tsx: 레슨 완료 후 refreshStreak() 호출

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: jammy0903

packages/frontend/src/features/courses/LessonPage.tsx

@@ -267,7 +267,7 @@ export function LessonPage() {
   }>();
 
   const queryClient = useQueryClient();
-  const { setPageTitle, appUser } = useStore();
+  const { setPageTitle, appUser, refreshStreak } = useStore();
 
   // TanStack Query: 레슨 데이터 + 챕터 데이터
   const { data: lesson, isLoading, isError, error } = useLesson(lessonId);
@@ -524,6 +524,8 @@ export function LessonPage() {
         // 캐시 무효화로 UI 즉시 업데이트
         queryClient.invalidateQueries({ queryKey: ['progress', appUser?.id] });
         queryClient.invalidateQueries({ queryKey: ['language'] }); // 챕터 progress도 업데이트
+        // 스트릭 업데이트 (백엔드에서 이미 업데이트되었으므로 UI만 refresh)
+        await refreshStreak();
       } catch (err) {
         console.error('[Progress] Failed to save:', err);
       }

packages/frontend/src/layouts/TopBar.tsx

@@ -7,10 +7,11 @@ import { motion } from 'framer-motion';
 import { Code2, Sparkles, Menu } from 'lucide-react';
 import { useStore } from '@/stores/store';
 import { Link } from 'react-router-dom';
-import { StreakCard, useStreak } from '@/features/gamification';
+import { StreakCard } from '@/features/gamification';
 import { LanguageBadge } from '@/components/ui/LanguageBadge';
 import { useIsMobile } from '@/hooks'; // useIsMobile import
 import type { SupportedLanguage } from '@/types/simulator'; // SupportedLanguage import
+import { useEffect } from 'react';
 
 // 언어 정보 (LanguageCoursePage.tsx에서 가져옴)
 const getLanguageInfo = (lang: SupportedLanguage | null) => {
@@ -25,12 +26,16 @@ const getLanguageInfo = (lang: SupportedLanguage | null) => {
 };
 
 export function TopBar() {
-  const { sidebarOpen, toggleSidebar, pageTitle, pageSubtitle, pageLanguage, appUser } = useStore();
-  const { streak, loading: streakLoading } = useStreak();
+  const { sidebarOpen, toggleSidebar, pageTitle, pageSubtitle, pageLanguage, appUser, streak, streakLoading, refreshStreak } = useStore();
   const isMobile = useIsMobile(); // isMobile 훅 사용
 
   const langInfo = pageLanguage ? getLanguageInfo(pageLanguage) : null;
 
+  // 초기 로드 및 appUser 변경 시 스트릭 로드
+  useEffect(() => {
+    refreshStreak();
+  }, [appUser, refreshStreak]);
+
   return (
     <header
       className="shrink-0 backdrop-blur-xl overflow-visible shadow-sm"

packages/frontend/src/stores/store.ts

@@ -7,6 +7,9 @@ import { create } from 'zustand';
 import type { User as FirebaseUser } from 'firebase/auth';
 import type { Message, RunResult, Step } from '@/types/index';
 import type { SupportedLanguage } from '@/types/simulator';
+import type { StreakStatus } from '@/services/gamification';
+import { getStreak } from '@/services/gamification';
+import { logger } from '@/utils/logger';
 
 // App User 타입 (우리 DB의 User)
 export interface OAuthAccountInfo {
@@ -44,6 +47,11 @@ interface Store {
   authLoading: boolean;
   setAuthLoading: (loading: boolean) => void;
 
+  // === 스트릭 (Gamification) ===
+  streak: StreakStatus | null;
+  streakLoading: boolean;
+  refreshStreak: () => Promise<void>;
+
   // === 채팅 ===
   messages: Message[];
   isAiLoading: boolean;
@@ -102,6 +110,28 @@ export const useStore = create<Store>((set, get) => ({
   authLoading: true,
   setAuthLoading: (loading) => set({ authLoading: loading }),
 
+  // === 스트릭 (Gamification) ===
+  streak: null,
+  streakLoading: false,
+  refreshStreak: async () => {
+    const { appUser } = get();
+
+    // 로그인 안 된 상태
+    if (!appUser) {
+      set({ streak: null, streakLoading: false });
+      return;
+    }
+
+    try {
+      set({ streakLoading: true });
+      const data = await getStreak();
+      set({ streak: data, streakLoading: false });
+    } catch (error) {
+      logger.error('Failed to fetch streak:', error);
+      set({ streak: null, streakLoading: false });
+    }
+  },
+
   // === 채팅 ===
   messages: [],
   isAiLoading: false,