refactor(betting): 재사용 훅 및 프레젠테이셔널 컴포넌트로 분리

데이터·로직을 커스텀 훅으로 추출

useBettingRoomInfo: 방 데이터 페칭 및 파싱

useBettingSocket: 소켓 초기화 및 이벤트(joinRoom, finished, cancelWaitingRoom) 관리

useVotingTimer: 투표 타이머 계산 및 timeover 처리

useBettingInput: 입력 상태 관리 및 유효성 검사(숫자, 길이, 잔액)

usePlaceBet: placeBetting 호출 로직 캡슐화

useSharedLink: 공유 링크 생성 및 복사 로직

UI를 역할에 맞게 컴포넌트로 분할

BettingPage(컨테이너)

BettingTimer, BettingContainer, BettingInput, BettingSharedLink

PredictDetailHeader, PersonalResult, FooterSelector

관심사 분리: UI ↔ 데이터 페칭 ↔ 소켓 ↔ 타이머 ↔ 입력 ↔ 복사

매직 값·클래스 상수화 (퍼센트 스케일, Tailwind 클래스, 라우트 경로)

useCallback, useMemo, React.memo 적용으로 성능·가독성 개선

Zod 스키마 및 명시적 TS 타입으로 타입 안전성 강화

도메인별 hooks/components/pages 폴더 구조 재구성

Author: sunub

frontend/src/app/provider/UserProvider.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect, useCallback } from "react";
+import { useSessionStorage } from "@/shared/hooks/useSessionStorage";
+import { authenticatedUserInfoSchema } from "@betting-duck/shared";
+import type { UserInfoWithRoomId } from "../index";
+
+const DEFAULT_USER_INFO: UserInfoWithRoomId = {
+  message: "OK",
+  role: "guest",
+  nickname: "",
+  duck: 0,
+  realDuck: 0,
+  roomId: undefined,
+  isAuthenticated: false,
+};
+
+export function useSessionStoredUser(): [
+  UserInfoWithRoomId,
+  (info: Partial<UserInfoWithRoomId>) => Promise<void>,
+] {
+  const { getSessionItem, setSessionItem } = useSessionStorage();
+  const [userInfo, setUserInfo] =
+    useState<UserInfoWithRoomId>(DEFAULT_USER_INFO);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function loadUserInfo() {
+      try {
+        const raw = await getSessionItem("userInfo");
+        if (raw) {
+          const stored = JSON.parse(raw);
+          const parsed = authenticatedUserInfoSchema.safeParse(stored);
+          if (!parsed.success) {
+            console.error(
+              "세션에 저장된 사용자 정보가 유효하지 않습니다.",
+              parsed.error,
+            );
+            return;
+          }
+          if (mounted)
+            setUserInfo({
+              ...DEFAULT_USER_INFO,
+              ...parsed.data.userInfo,
+              isAuthenticated: parsed.data.isAuthenticated,
+            });
+        }
+      } catch (error) {
+        console.error("세션에서 사용자 정보 로드 실패", error);
+      }
+    }
+
+    loadUserInfo();
+    return () => {
+      mounted = false;
+    };
+  }, [getSessionItem]);
+
+  const updateUserInfo = useCallback(
+    async (patch: Partial<UserInfoWithRoomId>) => {
+      const next = { ...userInfo, ...patch };
+      try {
+        await setSessionItem("userInfo", JSON.stringify(next));
+        setUserInfo(next);
+      } catch {
+        console.error("세션에 사용자 정보 저장 실패");
+      }
+    },
+    [setSessionItem, userInfo],
+  );
+
+  return [userInfo, updateUserInfo];
+}

frontend/src/app/provider/UserProvider/hooks/useStoredUser.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import type { AuthenticateUserInfo, UserInfo } from "@betting-duck/shared";
+import { useSessionStoredUser } from "./hooks/useStoredUser";
+
+export type UserInfoWithRoomId = {
+  roomId?: string | undefined;
+  message?: UserInfo["message"];
+  role?: UserInfo["role"];
+  nickname?: UserInfo["nickname"];
+  duck?: UserInfo["duck"];
+  realDuck?: UserInfo["realDuck"];
+  isAuthenticated?: AuthenticateUserInfo["isAuthenticated"];
+};
+
+interface UserContextType {
+  userInfo: UserInfoWithRoomId;
+  setUserInfo: (info: UserInfoWithRoomId) => Promise<void>;
+}
+
+const UserContext = React.createContext<UserContextType | null>(null);
+
+function UserProvider({ children }: { children: React.ReactNode }) {
+  const [userInfo, updateUserInfo] = useSessionStoredUser();
+  const value = React.useMemo(
+    () => ({
+      userInfo,
+      setUserInfo: updateUserInfo,
+    }),
+    [userInfo, updateUserInfo],
+  );
+
+  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+}
+
+export { UserProvider, UserContext };

frontend/src/app/provider/UserProvider/index.tsx

@@ -11,9 +11,10 @@ import { BettingSharedLink } from "@/shared/components/BettingSharedLink/Betting
 import { PercentageDisplay } from "@/shared/components/PercentageDisplay/PercentageDisplay";
 import { endBetRoom, refund } from "./model/api";
 import { useLayoutShift } from "@/shared/hooks/useLayoutShift";
-import { bettingRoomSchema } from "../betting-page/model/schema";
 import { DuckCoinIcon } from "@/shared/icons";
 import BettingDetails from "./ui/BettingDetails";
+import { bettingProgressInfoSchema } from "@betting-duck/shared";
+import { useBettingRoomInfo } from "@/shared/hooks/useBettingRoomInfo";
 
 function BettingPageAdmin() {
   useLayoutShift();
@@ -43,6 +44,7 @@ function BettingPageAdmin() {
     options: { option1, option2 },
     settings: { defaultBetAmount, duration: timer },
   } = channel;
+  const { data: bettingRoomInfo } = useBettingRoomInfo(roomId);
 
   const socket = useSocketIO({
     url: "/api/betting",
@@ -115,7 +117,7 @@ function BettingPageAdmin() {
     if (!socket) return;
 
     socket.on("fetchBetRoomInfo", (data) => {
-      const result = bettingRoomSchema.safeParse(data);
+      const result = bettingProgressInfoSchema.safeParse(data);
       if (!result.success) {
         console.error(result.error.errors);
         return;
@@ -266,7 +268,7 @@ function BettingPageAdmin() {
   return (
     <div className="bg-layout-main flex h-full w-full flex-col justify-between">
       <div className="flex flex-col gap-5">
-        <BettingTimer socket={socket} bettingRoomInfo={roomInfo} />
+        <BettingTimer socket={socket} bettingRoomInfo={bettingRoomInfo} />
         <div className="flex flex-col gap-6 p-5">
           <BettingDetails
             title={title}

frontend/src/features/betting-page-admin/index.tsx

@@ -1,9 +1,6 @@
 import React from "react";
 import { z } from "zod";
-import {
-  betResultResponseSchema,
-  responseBetRoomInfo,
-} from "@betting-duck/shared";
+import { betResultDataSchema, responseBetRoomInfo } from "@betting-duck/shared";
 import { useSocketIO } from "@/shared/hooks/useSocketIo";
 import { useNavigate } from "@tanstack/react-router";
 
@@ -72,8 +69,9 @@ function useBettingConnection(
         if (!bettingResultResponse.ok) {
           throw new Error("배팅 결과를 가져오는데 실패했습니다.");
         }
+
         const data = await bettingResultResponse.json();
-        const bettingResult = betResultResponseSchema.safeParse(data);
+        const bettingResult = betResultDataSchema.safeParse(data);
         if (!bettingResult.success) {
           return navigate({
             to: "/my-page",

frontend/src/features/betting-page/api/getUserInfo.ts

@@ -0,0 +1,89 @@
+import { useSocketIO } from "@/shared/hooks/useSocketIo";
+import { useNavigate, UseNavigateResult } from "@tanstack/react-router";
+import { useEffect, useRef } from "react";
+import { ChannelType } from "@betting-duck/shared";
+
+interface SocketConnectProps {
+  socket: ReturnType<typeof useSocketIO>;
+  channel: {
+    id: string;
+    status: string;
+  };
+  joinRef: React.MutableRefObject<boolean>;
+  fetchRef: React.MutableRefObject<boolean>;
+}
+
+function onSocketConnect({
+  socket,
+  channel,
+  joinRef,
+  fetchRef,
+}: SocketConnectProps) {
+  console.log("베팅 페이지에 소켓에 연결이 되었습니다.");
+  if (!joinRef.current) {
+    joinRef.current = true;
+    socket.emit("joinRoom", {
+      channel: {
+        roomId: channel.id,
+      },
+    });
+  }
+  if (channel.status === "active" && !fetchRef.current) {
+    fetchRef.current = true;
+    socket.emit("fetchBetRoomInfo", {
+      roomId: channel.id,
+    });
+  }
+}
+
+function onFinshed(channel: ChannelType, navigate: UseNavigateResult<string>) {
+  console.log("베팅이 종료되었습니다");
+  navigate({
+    to: "/betting/$roomId/vote/resultDetail",
+    params: { roomId: channel.id },
+  });
+}
+
+function onCancelWaitingRoom(
+  channel: ChannelType,
+  navigate: UseNavigateResult<string>,
+) {
+  console.log("베팅이 취소되었습니다");
+  navigate({
+    to: "/betting/$roomId/vote/resultDetail",
+    params: { roomId: channel.id },
+  });
+}
+
+export function useBettingSocket(channel: ChannelType) {
+  const joinRef = useRef(false);
+  const fetchRef = useRef(false);
+  const navigate = useNavigate();
+
+  const socket = useSocketIO({
+    url: "/api/betting",
+    onConnect: () => onSocketConnect({ socket, channel, joinRef, fetchRef }),
+    onDisconnect: (reason) => {
+      console.log("베팅 페이지에 소켓 연결이 끊겼습니다.", reason);
+      joinRef.current = false;
+      fetchRef.current = false;
+    },
+    onError: (error) => {
+      console.error("베팅 페이지에 소켓 에러가 발생했습니다.", error);
+    },
+  });
+
+  useEffect(() => {
+    socket.on("finished", () => onFinshed(channel, navigate));
+    socket.on("cancelWaitingRoom", () =>
+      onCancelWaitingRoom(channel, navigate),
+    );
+
+    return () => {
+      socket.off("finished");
+      socket.off("cancelWaitingRoom");
+    };
+  }, [socket, channel, navigate]);
+
+  return socket;
+}