refactor: Extract game logic to hooks/game (#55)

* refactor: Eliminate socket handler core duplication

- Created helper function to handle common socket operations
- Added namespace-specific wrapper functions (sendGameMessage, sendChatMessage, sendDrawingMessage)

* refactor: Extract game chat logic into custom hook 'useChat'

* refactor: Extract game result logic into useGameResult hook

* refactor: Extract game start logic into useGameStart hook

* refactor: Extract game settings logic into useGameSetting hook

* refactor: Extract quiz stage UI logic into useQuizStageUI hook

* refactor: Extract role and round end modal logic into custom hooks

* refactor: Extract player role display logic into usePlayers hook

* feat: Add getRemainingTime function to useTimer hook

* refactor: Unify mouse and touch events using PointerEvent

Author: choiseona

client/src/components/canvas/CanvasUI.tsx

@@ -95,7 +95,6 @@ interface CanvasProps extends HTMLAttributes<HTMLDivElement> {
   inkRemaining: number;
   maxPixels: number;
   canvasEvents: CanvasEventHandlers;
-  isHidden: boolean;
   showInkRemaining: boolean;
 }
 
@@ -119,7 +118,6 @@ const Canvas = forwardRef<HTMLDivElement, CanvasProps>(
       inkRemaining,
       maxPixels,
       canvasEvents,
-      isHidden,
       showInkRemaining,
       ...props
     },
@@ -131,7 +129,6 @@ const Canvas = forwardRef<HTMLDivElement, CanvasProps>(
         className={cn(
           'relative flex w-full max-w-screen-sm flex-col border-violet-500 bg-white',
           'sm:rounded-lg sm:border-4 sm:shadow-xl',
-          isHidden && 'hidden',
           className,
         )}
         {...props}

client/src/components/canvas/GameCanvas.tsx

@@ -1,5 +1,5 @@
-import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef } from 'react';
-import { PlayerRole, RoomStatus } from '@troublepainter/core';
+import { PointerEvent, useCallback, useEffect, useRef } from 'react';
+import { PlayerRole } from '@troublepainter/core';
 import { Canvas } from '@/components/canvas/CanvasUI';
 import { COLORS_INFO, DEFAULT_MAX_PIXELS, MAINCANVAS_RESOLUTION_WIDTH } from '@/constants/canvasConstants';
 import { handleInCanvas, handleOutCanvas } from '@/handlers/canvas/cursorInOutHandler';
@@ -13,12 +13,10 @@ import { getCanvasContext } from '@/utils/getCanvasContext';
 import { getDrawPoint } from '@/utils/getDrawPoint';
 
 interface GameCanvasProps {
-  isHost: boolean;
   role: PlayerRole;
   maxPixels?: number;
   currentRound: number;
-  roomStatus: RoomStatus;
-  isHidden: boolean;
+  isDrawable: boolean;
 }
 
 /**
@@ -50,7 +48,7 @@ interface GameCanvasProps {
  *
  * @category Components
  */
-const GameCanvas = ({ role, maxPixels = DEFAULT_MAX_PIXELS, currentRound, roomStatus, isHidden }: GameCanvasProps) => {
+const GameCanvas = ({ maxPixels = DEFAULT_MAX_PIXELS, currentRound, isDrawable }: GameCanvasProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const cursorCanvasRef = useRef<HTMLCanvasElement>(null);
   const { convertCoordinate } = useCoordinateScale(MAINCANVAS_RESOLUTION_WIDTH, canvasRef);
@@ -73,7 +71,7 @@ const GameCanvas = ({ role, maxPixels = DEFAULT_MAX_PIXELS, currentRound, roomSt
     redo,
     makeCRDTSyncMessage,
     resetCanvas,
-  } = useDrawing(canvasRef, roomStatus, {
+  } = useDrawing(canvasRef, isDrawable, {
     maxPixels,
   });
 
@@ -120,7 +118,7 @@ const GameCanvas = ({ role, maxPixels = DEFAULT_MAX_PIXELS, currentRound, roomSt
   }));
 
   const handleDrawStart = useCallback(
-    (e: ReactMouseEvent<HTMLCanvasElement> | ReactTouchEvent<HTMLCanvasElement>) => {
+    (e: PointerEvent<HTMLCanvasElement>) => {
       if (!isConnected) return;
 
       const { canvas } = getCanvasContext(canvasRef);
@@ -136,7 +134,7 @@ const GameCanvas = ({ role, maxPixels = DEFAULT_MAX_PIXELS, currentRound, roomSt
   );
 
   const handleDrawMove = useCallback(
-    (e: ReactMouseEvent<HTMLCanvasElement> | ReactTouchEvent<HTMLCanvasElement>) => {
+    (e: PointerEvent<HTMLCanvasElement>) => {
       const { canvas } = getCanvasContext(canvasRef);
       const point = getDrawPoint(e, canvas);
       const convertPoint = convertCoordinate(point);
@@ -152,7 +150,7 @@ const GameCanvas = ({ role, maxPixels = DEFAULT_MAX_PIXELS, currentRound, roomSt
   );
 
   const handleDrawLeave = useCallback(
-    (e: ReactMouseEvent<HTMLCanvasElement> | ReactTouchEvent<HTMLCanvasElement>) => {
+    (e: PointerEvent<HTMLCanvasElement>) => {
       const { canvas } = getCanvasContext(canvasRef);
       const point = getDrawPoint(e, canvas);
       const convertPoint = convertCoordinate(point);
@@ -202,8 +200,7 @@ const GameCanvas = ({ role, maxPixels = DEFAULT_MAX_PIXELS, currentRound, roomSt
     <Canvas
       canvasRef={canvasRef}
       cursorCanvasRef={cursorCanvasRef}
-      isDrawable={(role === 'PAINTER' || role === 'DEVIL') && roomStatus === 'DRAWING'}
-      isHidden={isHidden}
+      isDrawable={isDrawable}
       colors={colorsWithSelect}
       brushSize={brushSize}
       setBrushSize={setBrushSize}

client/src/components/chat/ChatInput.tsx

@@ -1,54 +1,12 @@
-import { FormEvent, memo, useMemo, useRef, useState } from 'react';
-import { PlayerRole, RoomStatus, type ChatResponse } from '@troublepainter/core';
+import { memo, useRef } from 'react';
 import { Input } from '@/components/ui/Input';
-import { chatSocketHandlers } from '@/handlers/socket/chatSocket.handler';
-import { gameSocketHandlers } from '@/handlers/socket/gameSocket.handler';
+import { useChat } from '@/hooks/game/useChat';
 import { useShortcuts } from '@/hooks/useShortcuts';
-import { useChatSocketStore } from '@/stores/socket/chatSocket.store';
-import { useGameSocketStore } from '@/stores/socket/gameSocket.store';
-import { useSocketStore } from '@/stores/socket/socket.store';
 
 export const ChatInput = memo(() => {
-  const [inputMessage, setInputMessage] = useState('');
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  // 개별 Selector
-  const isConnected = useSocketStore((state) => state.connected.chat);
-  const currentPlayerId = useGameSocketStore((state) => state.currentPlayerId);
-  const players = useGameSocketStore((state) => state.players);
-  const roomStatus = useGameSocketStore((state) => state.room?.status);
-  const roundAssignedRole = useGameSocketStore((state) => state.roundAssignedRole);
-  // 챗 액션
-  const chatActions = useChatSocketStore((state) => state.actions);
-
-  const shouldDisableInput = useMemo(() => {
-    const ispainters = roundAssignedRole !== PlayerRole.GUESSER;
-    const isDrawing = roomStatus === 'DRAWING' || roomStatus === 'GUESSING';
-    return ispainters && isDrawing;
-  }, [roundAssignedRole, roomStatus]);
-
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault();
-    if (!isConnected || !inputMessage.trim()) return;
-    void chatSocketHandlers.sendMessage(inputMessage);
+  const { submitMessage, checkDisableInput, changeMessage, inputMessage } = useChat();
 
-    const currentPlayer = players?.find((player) => player.playerId === currentPlayerId);
-    if (!currentPlayer || !currentPlayerId) throw new Error('Current player not found');
-
-    const messageData: ChatResponse = {
-      playerId: currentPlayerId as string,
-      nickname: currentPlayer.nickname,
-      message: inputMessage.trim(),
-      createdAt: new Date().toISOString(),
-    };
-    chatActions.addMessage(messageData);
-
-    if (roomStatus === RoomStatus.GUESSING) {
-      void gameSocketHandlers.checkAnswer({ answer: inputMessage });
-    }
-
-    setInputMessage('');
-  };
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   useShortcuts([
     {
@@ -68,13 +26,13 @@ export const ChatInput = memo(() => {
   ]);
 
   return (
-    <form onSubmit={handleSubmit} className="mt-1 w-full">
+    <form onSubmit={submitMessage} className="mt-1 w-full">
       <Input
         ref={inputRef}
         value={inputMessage}
-        onChange={(e) => setInputMessage(e.target.value)}
+        onChange={changeMessage}
         placeholder="메시지를 입력하세요"
-        disabled={!isConnected || shouldDisableInput}
+        disabled={checkDisableInput()}
         autoComplete="off"
       />
     </form>

client/src/components/chat/ChatList.tsx

@@ -6,7 +6,7 @@ import { useGameSocketStore } from '@/stores/socket/gameSocket.store';
 
 export const ChatList = memo(() => {
   const messages = useChatSocketStore((state) => state.messages);
-  const currentPlayerId = useGameSocketStore((state) => state.currentPlayerId);
+  const playerId = useGameSocketStore((state) => state.currentPlayerId);
   const { containerRef } = useScrollToBottom([messages]);
 
   return (
@@ -17,7 +17,7 @@ export const ChatList = memo(() => {
       </p>
 
       {messages.map((message) => {
-        const isOthers = message.playerId !== currentPlayerId;
+        const isOthers = message.playerId !== playerId;
         return (
           <ChatBubble
             key={`${message.playerId}-${message.createdAt}`}

client/src/components/lobby/StartButton.tsx

@@ -1,21 +1,31 @@
 import { Button } from '@/components/ui/Button';
-import { useGameStart } from '@/hooks/useStartButton';
+import { useGameStart } from '@/hooks/game/useGameStart';
+import { useShortcuts } from '@/hooks/useShortcuts';
 import { cn } from '@/utils/cn';
 
 export const StartButton = () => {
-  const { isHost, buttonConfig, handleStartGame, isStarting } = useGameStart();
+  const { startGame, checkCanStart, getStartButtonStatus, isStarting } = useGameStart();
+  const { disabled, title, content } = getStartButtonStatus();
+
+  useShortcuts([
+    {
+      key: 'GAME_START',
+      action: () => startGame(),
+    },
+  ]);
+
   return (
     <Button
-      onClick={handleStartGame}
-      disabled={buttonConfig.disabled || isStarting}
-      title={buttonConfig.title}
+      onClick={startGame}
+      disabled={disabled || isStarting}
+      title={title}
       className={cn(
         'h-full rounded-none border-0 text-xl',
         'sm:rounded-2xl sm:border-2 lg:text-2xl',
-        !isHost && 'cursor-not-allowed opacity-50 hover:bg-violet-500',
+        !checkCanStart() && 'cursor-not-allowed opacity-50 hover:bg-violet-500',
       )}
     >
-      {isStarting ? '곧 게임이 시작됩니다!' : buttonConfig.content}
+      {isStarting ? '곧 게임이 시작됩니다!' : content}
     </Button>
   );
 };

client/src/components/modal/RoleModal.tsx

@@ -1,17 +1,11 @@
-import { useEffect } from 'react';
 import { Modal } from '@/components/ui/Modal';
 import { PLAYING_ROLE_TEXT } from '@/constants/gameConstant';
-import { useModal } from '@/hooks/useModal';
+import { useRoleModal } from '@/hooks/game/useRoleModal';
 import { useGameSocketStore } from '@/stores/socket/gameSocket.store';
 
 const RoleModal = () => {
-  const room = useGameSocketStore((state) => state.room);
+  const { isModalOpened, closeModal, handleKeyDown } = useRoleModal();
   const roundAssignedRole = useGameSocketStore((state) => state.roundAssignedRole);
-  const { isModalOpened, closeModal, handleKeyDown, openModal } = useModal(5000);
-
-  useEffect(() => {
-    if (roundAssignedRole) openModal();
-  }, [roundAssignedRole, room?.currentRound]);
 
   return (
     <Modal

client/src/components/modal/RoundEndModal.tsx

@@ -1,81 +1,21 @@
-import { useEffect, useState } from 'react';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
-import { PlayerRole, RoomStatus } from '@troublepainter/core';
 import roundLoss from '@/assets/lottie/round-loss.lottie';
 import roundWin from '@/assets/lottie/round-win.lottie';
-import gameLoss from '@/assets/sounds/game-loss.mp3';
-import gameWin from '@/assets/sounds/game-win.mp3';
 import { Modal } from '@/components/ui/Modal';
-import { useModal } from '@/hooks/useModal';
+import { useRoundEndModal } from '@/hooks/game/useRoundEndModal';
 import { useGameSocketStore } from '@/stores/socket/gameSocket.store';
-import { useTimerStore } from '@/stores/timer.store';
 import { cn } from '@/utils/cn';
-import { SOUND_IDS, SoundManager } from '@/utils/soundManager';
 
 const RoundEndModal = () => {
-  const room = useGameSocketStore((state) => state.room);
-  const roundWinners = useGameSocketStore((state) => state.roundWinners);
-  const players = useGameSocketStore((state) => state.players);
-  const currentPlayerId = useGameSocketStore((state) => state.currentPlayerId);
-  const timer = useTimerStore((state) => state.timers.ENDING);
-
-  const { isModalOpened, openModal, closeModal } = useModal();
-  const [showAnimation, setShowAnimation] = useState(false);
-  const [isAnimationFading, setIsAnimationFading] = useState(false);
-
-  const devil = players.find((player) => player.role === PlayerRole.DEVIL);
-  const isDevilWin = roundWinners?.some((winner) => winner.role === PlayerRole.DEVIL);
-  const isCurrentPlayerWinner = roundWinners?.some((winner) => winner.playerId === currentPlayerId);
-
-  // 컴포넌트 마운트 시 사운드 미리 로드
-  const soundManager = SoundManager.getInstance();
-  useEffect(() => {
-    soundManager.preloadSound(SOUND_IDS.WIN, gameWin);
-    soundManager.preloadSound(SOUND_IDS.LOSS, gameLoss);
-  }, [soundManager]);
-
-  useEffect(() => {
-    if (roundWinners) {
-      setIsAnimationFading(false);
-      setShowAnimation(true);
-      openModal();
-
-      if (isCurrentPlayerWinner) {
-        void soundManager.playSound(SOUND_IDS.WIN, 0.3);
-      } else {
-        void soundManager.playSound(SOUND_IDS.LOSS, 0.3);
-      }
-    }
-  }, [roundWinners]);
-
-  useEffect(() => {
-    if (room && room.status === RoomStatus.DRAWING) closeModal();
-  }, [room]);
-
-  useEffect(() => {
-    if (showAnimation) {
-      // 3초 후에 페이드아웃 시작
-      const fadeTimer = setTimeout(() => {
-        setIsAnimationFading(true);
-      }, 3000);
-
-      // 3.5초 후에 컴포넌트 제거
-      const removeTimer = setTimeout(() => {
-        setShowAnimation(false);
-      }, 3500);
-
-      return () => {
-        clearTimeout(fadeTimer);
-        clearTimeout(removeTimer);
-      };
-    }
-  }, [showAnimation]);
+  const { showAnimation, isPlayerWinner, isAnimationFading, isModalOpened, timer, isDevilWin, solver, devil } =
+    useRoundEndModal();
+  const currentWord = useGameSocketStore((state) => state.room?.currentWord);
 
   return (
     <>
       {/* 승리/패배 애니메이션 */}
       {showAnimation &&
-        (isCurrentPlayerWinner ? (
+        (isPlayerWinner ? (
           <DotLottieReact
             src={roundWin}
             autoplay
@@ -97,11 +37,7 @@ const RoundEndModal = () => {
           />
         ))}
 
-      <Modal
-        title={room?.currentWord || ''}
-        isModalOpened={isModalOpened}
-        className="max-w-[26.875rem] sm:max-w-[61.75rem]"
-      >
+      <Modal title={currentWord || ''} isModalOpened={isModalOpened} className="max-w-[26.875rem] sm:max-w-[61.75rem]">
         <div className="relative flex min-h-[12rem] items-center justify-center sm:min-h-[15.75rem]">
           <span className="absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-full border-2 border-violet-300 text-base text-violet-300">
             {timer}
@@ -111,10 +47,7 @@ const RoundEndModal = () => {
               <> 정답을 맞춘 구경꾼이 없습니다</>
             ) : (
               <>
-                구경꾼{' '}
-                <span className="text-violet-600">
-                  {roundWinners?.find((winner) => winner.role === PlayerRole.GUESSER)?.nickname}
-                </span>
+                구경꾼 <span className="text-violet-600">{solver?.nickname}</span>
                 이(가) 정답을 맞혔습니다
               </>
             )}