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

�[FE] 베팅 관리자 페이지 라우팅 코드 리팩토링

Author: stop0ho

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

@@ -1,22 +1,21 @@
 import { BettingPageAdmin } from "@/features/betting-page-admin";
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { getBettingRoomInfo } from "@/features/betting-page/api/getBettingRoomInfo";
 import { GlobalErrorComponent } from "@/shared/components/Error/GlobalError";
+import { validateRoomAccess } from "@/shared/utils/roomValidation";
 
 export const Route = createFileRoute("/betting_/$roomId/vote/admin")({
   component: BettingPageAdmin,
   beforeLoad: async ({ params }) => {
     const { roomId } = params;
-    const roomInfo = await getBettingRoomInfo(roomId);
-    if (!roomInfo) {
-      throw new Error("방 정보를 불러오는데 실패했습니다.");
-    }
+    const roomInfo = await validateRoomAccess(roomId);
 
     if (!roomInfo.channel.isAdmin) {
       throw redirect({
         to: `/betting/${roomId}/vote/voting`,
       });
     }
+
+    return { roomInfo };
   },
 
   shouldReload: () => true,

frontend/src/shared/api/responseBettingRoomInfo.ts

@@ -1,4 +1,5 @@
 import { responseBetRoomInfo } from "@betting-duck/shared";
+import { summaryResponseSchema } from "@betting-duck/shared/schemas/bet/socket/response";
 import { EnsureQueryDataOptions } from "@tanstack/react-query";
 import { z } from "zod";
 
@@ -26,6 +27,25 @@ async function responseBettingRoomInfo(roomId: string) {
   }
 }
 
+async function responseSummaryBettingRoomInfo(roomId: string) {
+  try {
+    const response = await fetch(`/api/betrooms/${roomId}/summary`);
+    if (!response.ok) {
+      throw new Error("베팅 방 요약 정보를 불러오는데 실패했습니다.");
+    }
+
+    const { data } = await response.json();
+    const result = summaryResponseSchema.safeParse(data);
+    if (!result.success) {
+      console.error(result.error.errors);
+      throw new Error("베팅 방 요약 정보를 파싱하는데 실패했습니다.");
+    }
+    return result.data;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
 const betRoomQueries = (roomId: string): BetRoomInfo => ({
   roomInfo: {
     queryKey: ["betRoom", "info", roomId],
@@ -40,4 +60,8 @@ const betRoomQueries = (roomId: string): BetRoomInfo => ({
   },
 });
 
-export { responseBettingRoomInfo, betRoomQueries };
+export {
+  responseBettingRoomInfo,
+  betRoomQueries,
+  responseSummaryBettingRoomInfo,
+};

frontend/src/shared/utils/roomValidation.ts

@@ -0,0 +1,7 @@
+import { responseBettingRoomInfo } from "../api/responseBettingRoomInfo";
+
+export async function validateRoomAccess(roomId: string) {
+  const roomInfo = await responseBettingRoomInfo(roomId);
+  if (!roomInfo) throw new Error("방 정보를 불러올 수 없습니다.");
+  return roomInfo;
+}

frontend/vite.config.ts

@@ -27,11 +27,6 @@ export default defineConfig(({ mode }) => {
           changeOrigin: true,
           secure: false,
           ws: true,
-          configure: (proxy) => {
-            proxy.on("proxyRes", (proxyRes) => {
-              proxyRes.headers["cache-control"] = "public, max-age=31536000";
-            });
-          },
         },
       },
       middlewareMode: env.NODE_ENV === "development" ? false : true,

shared/schemas/bet/socket/response.ts

@@ -1,6 +1,19 @@
 import { z } from "zod";
 import { nicknameSchema } from "../../shared";
 
+const creatorSchema = z.object({
+  id: z.number().int().positive(),
+});
+
+const optionSchema = z.object({
+  name: z.string(),
+});
+
+const settingsSchema = z.object({
+  defaultBetAmount: z.number().int().positive(),
+  duration: z.number().int().positive(),
+});
+
 const responseFetchBetRoomInfoSchema = z.object({
   channel: z.object({
     id: z.string(),
@@ -19,14 +32,6 @@ const responseFetchBetRoomInfoSchema = z.object({
   }),
 });
 
-const creatorSchema = z.object({
-  id: z.number().int().positive(),
-});
-
-const optionSchema = z.object({
-  name: z.string(),
-});
-
 const channelSchema = z.object({
   id: z.string(),
   title: z.string(),
@@ -36,10 +41,7 @@ const channelSchema = z.object({
     option2: optionSchema,
   }),
   status: z.enum(["waiting", "active", "timeover", "finished"]),
-  settings: z.object({
-    defaultBetAmount: z.number().int().positive(),
-    duration: z.number().int().positive(),
-  }),
+  settings: settingsSchema,
   metadata: z.object({
     createdAt: z.string().datetime(),
     startAt: z.string().datetime().nullable(),
@@ -51,6 +53,26 @@ const channelSchema = z.object({
   isAdmin: z.boolean(),
 });
 
+const summaryChannelSchema = z.object({
+  title: z.string(),
+  options: z.object({
+    option1: optionSchema,
+    option2: optionSchema,
+  }),
+  status: z.enum(["waiting", "active", "timeover", "finished"], {
+    message: "status는 waiting, active, timeover, finished 중 하나여야 합니다.",
+  }),
+  settings: settingsSchema,
+});
+
+const summaryResponseSchema = z.object({
+  status: z.number().int().positive(),
+  data: z.object({
+    channel: channelSchema,
+    message: z.string(),
+  }),
+});
+
 const responseBetRoomInfo = z.object({
   channel: channelSchema,
   message: z.string(),
@@ -60,9 +82,14 @@ type responseFetchBetRoomInfoType = z.infer<
   typeof responseFetchBetRoomInfoSchema
 >;
 
+type summaryResponseType = z.infer<typeof summaryResponseSchema>;
+
 export {
   channelSchema,
   responseFetchBetRoomInfoSchema,
   responseBetRoomInfo,
+  summaryChannelSchema,
+  summaryResponseSchema,
   type responseFetchBetRoomInfoType,
+  type summaryResponseType,
 };