Feature/web worker time sync

apps/backend/src/quiz-zone/quiz-zone.controller.spec.ts

@@ -81,8 +81,11 @@ describe('QuizZoneController', () => {
             stage: 'LOBBY',
             playerCount: 1,
             maxPlayers: 8,
+            serverTime: 0,
         };
 
+        Date.now = jest.fn().mockReturnValue(0);
+
         it('퀴즈존 정보를 성공적으로 조회한다', async () => {
             const session = { id: 'sessionId' };
             mockQuizZoneService.getQuizZoneInfo.mockResolvedValue(mockQuizZoneInfo);

apps/backend/src/quiz-zone/quiz-zone.controller.ts

@@ -68,12 +68,16 @@ export class QuizZoneController {
         @Session() session: Record<string, any>,
         @Param('quizZoneId') quizZoneId: string,
     ) {
-        const quizZoneInfo = this.quizZoneService.getQuizZoneInfo(
+        const serverTime = Date.now();
+        const quizZoneInfo = await this.quizZoneService.getQuizZoneInfo(
             session.id,
             quizZoneId,
             session.quizZoneId,
         );
         session['quizZoneId'] = quizZoneId;
-        return quizZoneInfo;
+        return {
+            ...quizZoneInfo,
+            serverTime,
+        };
     }
 }

apps/frontend/src/blocks/QuizZone/QuizInProgress.tsx

@@ -3,11 +3,13 @@ import ContentBox from '@/components/common/ContentBox';
 import Input from '@/components/common/Input';
 import ProgressBar from '@/components/common/ProgressBar';
 import Typography from '@/components/common/Typogrpahy';
-import { useState } from 'react';
+import { useTimer } from '@/hook/useTimer';
+import { CurrentQuiz } from '@/types/quizZone.types';
+import { useEffect, useState } from 'react';
 
 interface QuizInProgressProps {
     playTime: number | null;
-    currentQuiz: any;
+    currentQuiz: CurrentQuiz;
     submitAnswer: (e: any) => void;
 }
 
@@ -17,6 +19,17 @@ const QuizInProgress = ({ currentQuiz, submitAnswer }: QuizInProgressProps) => {
     const MAX_TEXT_LENGTH = 100;
     const MIN_TEXT_LENGTH = 1;
 
+    const playTime = currentQuiz.playTime;
+
+    const { start, time } = useTimer({
+        initialTime: playTime / 1000,
+        onComplete: () => {},
+    });
+
+    useEffect(() => {
+        start();
+    }, []);
+
     const handleSubmitAnswer = () => {
         if (answer.length >= MIN_TEXT_LENGTH && answer.length <= MAX_TEXT_LENGTH) {
             submitAnswer(answer);
@@ -25,7 +38,7 @@ const QuizInProgress = ({ currentQuiz, submitAnswer }: QuizInProgressProps) => {
 
     return (
         <div className="w-full h-full flex flex-col items-center justify-center gap-4">
-            <ProgressBar deadlineTime={currentQuiz.deadlineTime} onTimeEnd={() => {}} />
+            <ProgressBar time={time} playTime={playTime} onTimeEnd={() => {}} />
             <ContentBox className="w-full flex flex-col gap-4 bg-white shadow-lg">
                 <Typography
                     text={`Q. ${currentQuiz.question}`}

apps/frontend/src/blocks/QuizZone/QuizZoneInProgress.tsx

@@ -27,7 +27,7 @@ const QuizZoneInProgress = ({ quizZoneState, submitAnswer, playQuiz }: QuizZoneI
             return (
                 <QuizInProgress
                     playTime={playTime!}
-                    currentQuiz={currentQuiz}
+                    currentQuiz={currentQuiz!}
                     submitAnswer={submitAnswer}
                 />
             );

apps/frontend/src/components/common/ProgressBar.stories.tsx

@@ -13,7 +13,8 @@ type Story = StoryObj<typeof ProgressBar>;
 
 export const Default: Story = {
     args: {
-        deadlineTime: Date.now() + 30000,
+        playTime: 30000,
+        time: Date.now(),
         onTimeEnd: () => {
             alert('time end');
         },

apps/frontend/src/components/common/ProgressBar.tsx

@@ -1,83 +1,39 @@
-import { Progress } from '../ui/progress';
-import { useState, useEffect, useRef } from 'react';
+import { Progress } from '@/components/ui/progress';
 import Typography from './Typogrpahy';
 
 export interface ProgressBarProps {
-    deadlineTime: number; // ISO string or Date object
+    playTime: number;
+    time: number;
     onTimeEnd?: () => void;
 }
 
 /**
  * @description
- * ProgressBar 컴포넌트는 주어진 마감 시간까지 남은 시간을 시각적으로 표시합니다.
- * 현재 시간과 마감 시간 사이의 진행도를 보여주며, 시간이 다 되면 콜백을 실행합니다.
+ * ProgressBar 컴포넌트는 주어진 플레이 시간과 현재 시간을 기반으로 진행도를 시각적으로 표시합니다.
  *
  * @example
  * <ProgressBar
- *   deadlineTime={new Date(Date.now() + 30000)}
+ *   playTime={30}
+ *   time={25}
  *   onTimeEnd={() => console.log('Time ended!')}
  * />
  */
-const ProgressBar = ({ deadlineTime, onTimeEnd }: ProgressBarProps) => {
-    const totalDurationRef = useRef(deadlineTime - Date.now());
+const ProgressBar = ({ playTime, time, onTimeEnd }: ProgressBarProps) => {
+    // 진행도 계산 (남은 시간 / 전체 시간 * 100)
+    const progress = Math.max(0, Math.min(100, (time / playTime) * 100000));
 
-    const calculateInitialProgress = () => {
-        const now = Date.now();
-        const totalDuration = totalDurationRef.current;
-        const remaining = deadlineTime - now;
-        const progress = Math.max(0, (remaining / totalDuration) * 100);
-        return progress;
-    };
+    // 시간이 다 되었을 때 콜백 실행
+    if (time <= 0) {
+        onTimeEnd?.();
+    }
 
-    const calculateInitialSeconds = () => {
-        const now = Date.now();
-        return Math.max(0, (deadlineTime - now) / 1000);
-    };
-
-    const [progress, setProgress] = useState(calculateInitialProgress());
-    const [remainingSeconds, setRemainingSeconds] = useState<number>(calculateInitialSeconds());
-
-    useEffect(() => {
-        const startTime = Date.now();
-        const totalDuration = totalDurationRef.current;
-
-        // deadlineTime이 이미 지난 경우
-        if (deadlineTime <= startTime) {
-            setProgress(0);
-            setRemainingSeconds(0);
-            onTimeEnd?.();
-            return;
-        }
-
-        const updateProgress = () => {
-            const currentTime = Date.now();
-            const remaining = deadlineTime - currentTime;
-
-            if (remaining <= 0) {
-                setProgress(0);
-                setRemainingSeconds(0);
-                onTimeEnd?.();
-                return false;
-            }
-
-            // totalDurationRef.current를 사용하여 일정한 비율로 감소
-            const newProgress = (remaining / totalDuration) * 100;
-            setProgress(Math.max(0, Math.min(100, newProgress)));
-            setRemainingSeconds(remaining / 1000);
-
-            return true;
-        };
-
-        const interval = setInterval(updateProgress, 100);
-
-        return () => clearInterval(interval);
-    }, [deadlineTime, onTimeEnd]);
+    console.log(progress);
 
     return (
         <div className="w-full flex justify-center flex-col items-center gap-2">
             <Progress value={progress} max={100} className="max-w-[60%]" />
             <Typography
-                text={`남은시간 ${Math.max(0, remainingSeconds).toFixed(0)}초`}
+                text={`남은시간 ${Math.max(0, time).toFixed(0)}초`}
                 size="xl"
                 color="black"
                 bold={true}

apps/frontend/src/hook/quizZone/useQuizZone.test.ts

@@ -0,0 +1,102 @@
+import { renderHook, act } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { QuizZone } from '@/types/quizZone.types';
+import useQuizZone from './useQuizZone';
+
+// useWebSocket 모킹
+vi.mock('@/hook/useWebSocket', () => ({
+    default: () => ({
+        beginConnection: vi.fn(),
+        sendMessage: vi.fn(),
+        closeConnection: vi.fn(),
+        messageHandler: vi.fn(),
+    }),
+}));
+
+// env 모킹
+vi.mock('@/utils/atob', () => ({
+    default: vi.fn((str) => str),
+}));
+
+describe('useQuizZone', () => {
+    const mockQuizZoneId = 'test-quiz-zone-id';
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('초기 상태가 올바르게 설정되어야 합니다', () => {
+        const { result } = renderHook(() => useQuizZone(mockQuizZoneId));
+
+        expect(result.current.quizZoneState).toEqual({
+            stage: 'LOBBY',
+            currentPlayer: {
+                id: '',
+                nickname: '',
+            },
+            title: '',
+            description: '',
+            hostId: '',
+            quizCount: 0,
+            players: [],
+            score: 0,
+            submits: [],
+            quizzes: [],
+            chatMessages: [],
+            maxPlayers: 0,
+            offset: 0,
+            serverTime: 0,
+        });
+    });
+
+    it('playQuiz 액션이 상태를 올바르게 업데이트해야 합니다', () => {
+        const { result } = renderHook(() => useQuizZone(mockQuizZoneId));
+
+        act(() => {
+            result.current.playQuiz();
+        });
+
+        expect(result.current.quizZoneState.stage).toBe('IN_PROGRESS');
+        expect(result.current.quizZoneState.currentPlayer.state).toBe('PLAY');
+    });
+
+    it('init 액션이 상태를 올바르게 업데이트해야 합니다', () => {
+        const { result } = renderHook(() => useQuizZone(mockQuizZoneId));
+
+        const mockQuizZone: Partial<QuizZone> = {
+            stage: 'LOBBY',
+            currentPlayer: {
+                id: 'player1',
+                nickname: 'Player 1',
+                state: 'WAIT',
+            },
+            title: 'Test Quiz',
+            description: 'Test Description',
+            hostId: 'host1',
+            quizCount: 5,
+            serverTime: Date.now(),
+        };
+
+        act(() => {
+            result.current.initQuizZoneData(mockQuizZone as QuizZone, Date.now());
+        });
+
+        expect(result.current.quizZoneState.title).toBe('Test Quiz');
+        expect(result.current.quizZoneState.currentPlayer.id).toBe('player1');
+        expect(result.current.quizZoneState.quizCount).toBe(5);
+    });
+
+    describe('state transitions', () => {
+        it('LOBBY에서 IN_PROGRESS로 상태 전환이 올바르게 되어야 합니다', () => {
+            const { result } = renderHook(() => useQuizZone(mockQuizZoneId));
+
+            expect(result.current.quizZoneState.stage).toBe('LOBBY');
+
+            act(() => {
+                result.current.playQuiz();
+            });
+
+            expect(result.current.quizZoneState.stage).toBe('IN_PROGRESS');
+        });
+    });
+});

apps/frontend/src/hook/quizZone/useQuizZone.tsx

@@ -2,6 +2,7 @@ import { useReducer } from 'react';
 import useWebSocket from '@/hook/useWebSocket.tsx';
 import {
     ChatMessage,
+    InitQuizZoneResponse,
     NextQuizResponse,
     Player,
     QuizZone,
@@ -12,7 +13,7 @@ import {
 import atob from '@/utils/atob';
 
 export type QuizZoneAction =
-    | { type: 'init'; payload: QuizZone }
+    | { type: 'init'; payload: InitQuizZoneResponse }
     | { type: 'join'; payload: Player[] }
     | { type: 'someone_join'; payload: Player }
     | { type: 'someone_leave'; payload: string }
@@ -39,23 +40,19 @@ const quizZoneReducer: Reducer<QuizZone, QuizZoneAction> = (state, action) => {
 
     switch (type) {
         case 'init':
+            const { quizZone, now } = payload;
+            const receiveTime = new Date().getTime();
             return {
                 ...state,
-                stage: payload.stage,
-                title: payload.title,
-                description: payload.description,
-                quizCount: payload.quizCount,
-                hostId: payload.hostId,
-                currentPlayer: payload.currentPlayer,
-                chatMessages: payload.chatMessages,
+                ...quizZone,
                 currentQuiz:
-                    payload.currentQuiz !== undefined
+                    quizZone.currentQuiz !== undefined
                         ? {
-                              ...payload.currentQuiz,
-                              question: atob(payload.currentQuiz?.question ?? ''),
+                              ...quizZone.currentQuiz,
+                              question: atob(quizZone.currentQuiz?.question ?? ''),
                           }
                         : undefined,
-                maxPlayers: payload.maxPlayers,
+                offset: quizZone.serverTime - (now + receiveTime) / 2,
                 players: [],
             };
         case 'join':
@@ -121,8 +118,8 @@ const quizZoneReducer: Reducer<QuizZone, QuizZoneAction> = (state, action) => {
                     question: atob(nextQuiz.question),
                     currentIndex: nextQuiz.currentIndex,
                     playTime: nextQuiz.playTime,
-                    startTime: nextQuiz.startTime,
-                    deadlineTime: nextQuiz.deadlineTime,
+                    startTime: nextQuiz.startTime - state.offset,
+                    deadlineTime: nextQuiz.deadlineTime - state.offset,
                     quizType: 'SHORT',
                 },
                 currentQuizResult: {
@@ -162,7 +159,7 @@ const quizZoneReducer: Reducer<QuizZone, QuizZoneAction> = (state, action) => {
                 submits: payload.submits,
                 quizzes: payload.quizzes,
                 ranks: payload.ranks,
-                endSocketTime: payload.endSocketTime,
+                endSocketTime: payload.endSocketTime - state.offset,
             };
         case 'chat':
             return {
@@ -241,6 +238,8 @@ const useQuizZone = (quizZoneId: string, handleReconnect?: () => void) => {
         quizzes: [],
         chatMessages: [],
         maxPlayers: 0,
+        offset: 0,
+        serverTime: 0,
     };
 
     const [quizZoneState, dispatch] = useReducer(quizZoneReducer, initialQuizZoneState);
@@ -267,8 +266,8 @@ const useQuizZone = (quizZoneId: string, handleReconnect?: () => void) => {
     });
 
     //initialize QuizZOne
-    const initQuizZoneData = async (quizZone: QuizZone) => {
-        dispatch({ type: 'init', payload: quizZone });
+    const initQuizZoneData = async (quizZone: QuizZone, now: number) => {
+        dispatch({ type: 'init', payload: { quizZone, now } });
         beginConnection();
         joinQuizZone({ quizZoneId });
     };