From df54ecdc5d4d4b0aa83ec0c08ef8d9653284cb83 Mon Sep 17 00:00:00 2001
From: sooyeoniya <tndus1306403@naver.com>
Date: Fri, 16 Aug 2024 16:55:24 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20Notice/index.tsx=20=EB=82=B4?=
 =?UTF-8?q?=EB=B6=80=20useFetch=20=ED=9B=85=20=EB=B0=98=EC=98=81=20?=
 =?UTF-8?q?=EC=8B=9C=20promise.all=20=EB=B9=BC=EA=B3=A0=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Notice/index.tsx | 83 +++++++++++++-------------
 client/src/utils/formatDate.ts         |  4 +-
 2 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/client/src/components/Notice/index.tsx b/client/src/components/Notice/index.tsx
index fcce77b4..57047504 100644
--- a/client/src/components/Notice/index.tsx
+++ b/client/src/components/Notice/index.tsx
@@ -1,7 +1,9 @@
-import React, { memo, useEffect } from "react";
+import React, { memo, useEffect, useMemo } from "react";
 import { LotteryAPI } from "@/apis/lotteryAPI.ts";
 import { RushAPI } from "@/apis/rushAPI.ts";
 import useFetch from "@/hooks/useFetch.ts";
+import { GetLotteryResponse } from "@/types/lotteryApi.ts";
+import { GetTotalRushEventsResponse } from "@/types/rushApi.ts";
 import { formatEventDate } from "@/utils/formatDate.ts";
 
 interface EventDateDetails {
@@ -10,10 +12,20 @@ interface EventDateDetails {
     activePeriod: number;
 }
 
+export type EventType = "rush" | "lottery";
+
 export interface EventDateData {
-    [key: string]: EventDateDetails;
+    [key: EventType]: EventDateDetails;
 }
 
+const mapToEventDateDetails = (
+    data: GetLotteryResponse | GetTotalRushEventsResponse
+): EventDateDetails => ({
+    startDate: data.eventStartDate,
+    endDate: data.eventEndDate,
+    activePeriod: data.activePeriod,
+});
+
 interface SectionProps {
     title: string;
     items: string[];
@@ -31,60 +43,47 @@ const Section: React.FC<SectionProps> = ({ title, items, indentedIndices = [] })
     </div>
 );
 
-// TODO: Promise.all 로 묶지 말고 따로 useFetch 써서 하기
-const getEventsDateDetails = async (): Promise<{
-    rush: EventDateDetails;
-    lottery: EventDateDetails;
-}> => {
-    const [rushData, lotteryData] = await Promise.all([RushAPI.getRush(), LotteryAPI.getLottery()]);
-
-    const rushEventDetails: EventDateDetails = {
-        startDate: rushData.eventStartDate,
-        endDate: rushData.eventEndDate,
-        activePeriod: rushData.activePeriod,
-    };
-
-    const lotteryEventDetails: EventDateDetails = {
-        startDate: lotteryData.eventStartDate,
-        endDate: lotteryData.eventEndDate,
-        activePeriod: lotteryData.activePeriod,
-    };
-
-    return {
-        rush: rushEventDetails,
-        lottery: lotteryEventDetails,
-    };
-};
-
 function Notice() {
     const {
-        data: eventDateDetails,
-        isSuccess: isSuccessRushAndLottery,
-        fetchData: getRushAndLotteryEventData,
-    } = useFetch<{
-        rush: EventDateDetails;
-        lottery: EventDateDetails;
-    }>(getEventsDateDetails);
+        data: rushEventDetails,
+        isSuccess: isSuccessRush,
+        fetchData: getRushEventData,
+    } = useFetch<EventDateDetails>(() => RushAPI.getRush().then(mapToEventDateDetails));
+
+    const {
+        data: lotteryEventDetails,
+        isSuccess: isSuccessLottery,
+        fetchData: getLotteryEventData,
+    } = useFetch<EventDateDetails>(() => LotteryAPI.getLottery().then(mapToEventDateDetails));
 
     useEffect(() => {
-        getRushAndLotteryEventData();
+        getRushEventData();
+        getLotteryEventData();
     }, []);
 
+    const eventDateData: EventDateData = useMemo(() => {
+        const eventData: EventDateData = {};
+
+        if (rushEventDetails) eventData.rush = rushEventDetails;
+        if (lotteryEventDetails) eventData.lottery = lotteryEventDetails;
+
+        return eventData;
+    }, [rushEventDetails, lotteryEventDetails]);
+
+    const isValidData =
+        isSuccessRush && isSuccessLottery && rushEventDetails && lotteryEventDetails;
+
     return (
         <div className="w-full h-[756px] flex flex-col gap-y-5 bg-n-neutral-100 py-20 px-[180px] text-n-black snap-center">
             <h3 className="!leading-9 h-heading-3-bold">유의사항</h3>
-            {isSuccessRushAndLottery && eventDateDetails && (
+            {isValidData && (
                 <>
                     <Section
                         title="이벤트 참여"
                         items={[
                             "이벤트 기간",
-                            formatEventDate("캐스퍼봇 뱃지 추첨 이벤트", "rush", eventDateDetails),
-                            formatEventDate(
-                                "선착순 밸런스 게임 이벤트",
-                                "lottery",
-                                eventDateDetails
-                            ),
+                            formatEventDate("캐스퍼봇 뱃지 추첨 이벤트", "rush", eventDateData),
+                            formatEventDate("선착순 밸런스 게임 이벤트", "lottery", eventDateData),
                             "선착순 밸런스 게임 이벤트는 이벤트 기간 내 매일 하루에 한 번씩, 기간 내 최대 6번 참여 가능합니다.",
                             "이벤트 참여 시 당첨자 연락을 위해 전화번호 기재와 개인정보 수집 동의, 마케팅 정보 수신 동의가 필수로 요구됩니다.",
                             "본 이벤트에서 제작해주신 캐스퍼봇 이미지는 추후 마케팅에 이용될 수 있습니다.",
diff --git a/client/src/utils/formatDate.ts b/client/src/utils/formatDate.ts
index 6c5da89f..6125a2d2 100644
--- a/client/src/utils/formatDate.ts
+++ b/client/src/utils/formatDate.ts
@@ -1,4 +1,4 @@
-import { EventDateData } from "@/components/Notice";
+import { EventDateData, EventType } from "@/components/Notice";
 
 const LOADING_DATE_MESSAGE = "날짜를 불러오는 중입니다...";
 
@@ -78,7 +78,7 @@ export const formatEventDateRangeWithDotNoDayOfWeek = (
 
 export const formatEventDate = (
     eventName: string,
-    eventKey: keyof EventDateData,
+    eventKey: EventType,
     eventDateDetails: EventDateData
 ) => {
     const event = eventDateDetails[eventKey];