Merge pull request #6 from boostcampwm-2024/feature/2

[FE] 베팅 관리자 페이지 리팩토링

Author: stop0ho

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

@@ -1,5 +1,9 @@
 import { BettingStatsDisplay } from "@/shared/components/BettingStatsDisplay/BettingStatsDisplay";
-import { useNavigate, useParams, useRouter } from "@tanstack/react-router";
+import {
+  useNavigate,
+  useRouteContext,
+  useRouter,
+} from "@tanstack/react-router";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useSocketIO } from "@/shared/hooks/useSocketIo";
 import { BettingTimer } from "@/shared/components/BettingTimer/BettingTimer";
@@ -9,27 +13,16 @@ 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 { useSuspenseQuery } from "@tanstack/react-query";
-import { bettingRoomQueryKey } from "@/shared/lib/bettingRoomInfo";
-import { getBettingRoomInfo } from "../betting-page/api/getBettingRoomInfo";
-import { responseBetRoomInfo } from "@betting-duck/shared";
+import BettingDetails from "./ui/BettingDetails";
 
 function BettingPageAdmin() {
   useLayoutShift();
-  const router = useRouter();
-  const { roomId } = useParams({
-    from: "/betting_/$roomId/vote",
-  });
 
-  const { data } = useSuspenseQuery({
-    queryKey: bettingRoomQueryKey(roomId),
-    queryFn: () => getBettingRoomInfo(roomId),
-  });
-  const parsedData = responseBetRoomInfo.safeParse(data);
-  if (!parsedData.success) {
-    throw new Error("방 정보를 불러오는데 실패했습니다.");
-  }
-  const { channel } = parsedData.data;
+  const context = useRouteContext({ from: "/betting_/$roomId/vote/admin" });
+  const roomInfo = context.roomInfo;
+  const channel = roomInfo.channel;
+
+  const router = useRouter();
 
   const [status, setStatus] = useState(channel.status || "active");
   const [bettingInfo, setBettingInfo] = useState({
@@ -44,10 +37,12 @@ function BettingPageAdmin() {
   >(null);
 
   // Room Information
-  const option1 = channel.options.option1;
-  const option2 = channel.options.option2;
-  const defaultBetAmount = channel.settings.defaultBetAmount;
-  const timer = channel.settings.duration;
+  const {
+    id: roomId,
+    title,
+    options: { option1, option2 },
+    settings: { defaultBetAmount, duration: timer },
+  } = channel;
 
   const socket = useSocketIO({
     url: "/api/betting",
@@ -169,8 +164,8 @@ function BettingPageAdmin() {
 
   const handleCancelClick = async () => {
     refund(roomId)
-      .then((data) => {
-        console.log("API 성공 결과:", data);
+      .then(() => {
+        sessionStorage.removeItem("userInfo");
         navigate({
           to: "/my-page",
         });
@@ -209,10 +204,6 @@ function BettingPageAdmin() {
     }
   };
 
-  const getTotalParticipants = () => {
-    return bettingInfo.option1.participants + bettingInfo.option2.participants;
-  };
-
   const getTotalBetAmount = () => {
     return bettingInfo.option1.currentBets + bettingInfo.option2.currentBets;
   };
@@ -275,37 +266,14 @@ 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={parsedData.data} />
+        <BettingTimer socket={socket} bettingRoomInfo={roomInfo} />
         <div className="flex flex-col gap-6 p-5">
-          <div className="bg-secondary mb-4 rounded-lg p-3 text-center shadow-inner">
-            <h1 className="text-default-disabled text-md mb-1 font-bold">
-              베팅 주제
-            </h1>
-            <h1 className="text-primary mb-1 pt-2 text-4xl font-extrabold">
-              {channel.title}
-            </h1>
-            <p>
-              {status === "active"
-                ? "투표가 진행 중입니다. 투표를 취소할 수 있습니다."
-                : "투표가 종료되었습니다. 승부를 결정하세요!"}
-            </p>
-            <h1 className="text-default-disabled text-md mb-1 font-bold">
-              베팅 정보
-            </h1>
-            <p>
-              ∙ 최소 베팅 금액:{" "}
-              <span className="font-extrabold">{defaultBetAmount}</span>
-            </p>
-            <p>
-              ∙ 설정한 시간:{" "}
-              <span className="font-extrabold">{timer / 60}분</span>
-            </p>
-            <p>
-              ∙ 전체 베팅 참여자:{" "}
-              <span className="font-extrabold">{getTotalParticipants()}</span>
-            </p>
-          </div>
-
+          <BettingDetails
+            title={title}
+            defaultBetAmount={defaultBetAmount}
+            timer={timer}
+            status={status}
+          />
           {status === "timeover" ? (
             <div className="flex w-full overflow-hidden rounded-xl border">
               <div className="relative flex w-1/2">

frontend/src/features/betting-page-admin/ui/BettingDetails.tsx

@@ -0,0 +1,39 @@
+function BettingDetails({
+  title,
+  defaultBetAmount,
+  timer,
+  status,
+}: {
+  title: string;
+  defaultBetAmount: number;
+  timer: number;
+  status: string;
+}) {
+  return (
+    <div className="bg-secondary mb-4 rounded-lg p-3 text-center shadow-inner">
+      <h1 className="text-default-disabled text-md mb-1 font-bold">
+        베팅 주제
+      </h1>
+      <h1 className="text-primary mb-1 pt-2 text-4xl font-extrabold">
+        {title}
+      </h1>
+      <p>
+        {status === "active"
+          ? "투표가 진행 중입니다. 투표를 취소할 수 있습니다."
+          : "투표가 종료되었습니다. 승부를 결정하세요!"}
+      </p>
+      <h1 className="text-default-disabled text-md mb-1 font-bold">
+        베팅 정보
+      </h1>
+      <p>
+        ∙ 최소 베팅 금액:{" "}
+        <span className="font-extrabold">{defaultBetAmount}</span>
+      </p>
+      <p>
+        ∙ 설정한 시간: <span className="font-extrabold">{timer / 60}분</span>
+      </p>
+    </div>
+  );
+}
+
+export default BettingDetails;

frontend/src/routes/betting_.$roomId.vote.admin.tsx

@@ -18,7 +18,7 @@ export const Route = createFileRoute("/betting_/$roomId/vote/admin")({
     return { roomInfo };
   },
 
-  shouldReload: () => true,
+  shouldReload: () => false,
   errorComponent: ({ error }) => {
     return <GlobalErrorComponent error={error} to="/" />;
   },