From 7c5078fcdf4a5c3bb8fd3c105bd3a9c331df8217 Mon Sep 17 00:00:00 2001
From: juhyojeong <juhyojeong58@gmail.com>
Date: Sun, 11 Aug 2024 12:41:57 +0900
Subject: [PATCH 01/11] =?UTF-8?q?feat:=20=EC=84=A0=EC=B0=A9=EC=88=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/components/Layout/index.tsx |  5 +-
 admin/src/constants/rush.ts           |  7 ---
 admin/src/features/Rush/EventList.tsx | 69 +++++++--------------------
 admin/src/features/Rush/Layout.tsx    | 10 ++++
 admin/src/pages/Rush/index.tsx        | 46 +++++++++---------
 admin/src/router.tsx                  |  9 +++-
 admin/src/types/rush.ts               | 14 +++---
 7 files changed, 66 insertions(+), 94 deletions(-)
 create mode 100644 admin/src/features/Rush/Layout.tsx

diff --git a/admin/src/components/Layout/index.tsx b/admin/src/components/Layout/index.tsx
index c37c7bb6..2d599896 100644
--- a/admin/src/components/Layout/index.tsx
+++ b/admin/src/components/Layout/index.tsx
@@ -1,5 +1,4 @@
 import { Outlet } from "react-router-dom";
-import { RushEventContext } from "@/contexts/rushEventContext";
 import Header from "../Header";
 
 export default function Layout() {
@@ -7,9 +6,7 @@ export default function Layout() {
         <div className="overflow-hidden h-screen">
             <Header />
             <div className="mb-[80px]">
-                <RushEventContext>
-                    <Outlet />
-                </RushEventContext>
+                <Outlet />
             </div>
         </div>
     );
diff --git a/admin/src/constants/rush.ts b/admin/src/constants/rush.ts
index ba66e28d..e69de29b 100644
--- a/admin/src/constants/rush.ts
+++ b/admin/src/constants/rush.ts
@@ -1,7 +0,0 @@
-export const RUSH_SECTION = {
-    EVENT_LIST: "event_list",
-    APPLICANT_LIST: "applicant_list",
-    SELECTION_MANAGE: "selection_manage",
-    GIFT_MANAGE: "gift_manage",
-};
-export type RushSectionType = (typeof RUSH_SECTION)[keyof typeof RUSH_SECTION];
diff --git a/admin/src/features/Rush/EventList.tsx b/admin/src/features/Rush/EventList.tsx
index 31d5e2ff..2f1a343f 100644
--- a/admin/src/features/Rush/EventList.tsx
+++ b/admin/src/features/Rush/EventList.tsx
@@ -1,17 +1,14 @@
-import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import Button from "@/components/Button";
 import DatePicker from "@/components/DatePicker";
 import Table from "@/components/Table";
 import TimePicker from "@/components/TimePicker";
-import { RUSH_SECTION, RushSectionType } from "@/constants/rush";
 import useRushEventDispatchContext from "@/hooks/useRushEventDispatchContext";
 import useRushEventStateContext from "@/hooks/useRushEventStateContext";
 import { RUSH_ACTION } from "@/types/rush";
 import { getTimeDifference } from "@/utils/getTimeDifference";
 
-interface EventListProps {
-    handleSelectSection: (idx: number, section: RushSectionType) => void;
-}
+interface EventListProps {}
 
 const EVENT_LIST_HEADER = [
     "ID",
@@ -27,46 +24,12 @@ const EVENT_LIST_HEADER = [
     "관리",
 ];
 
-export default function EventList({ handleSelectSection }: EventListProps) {
+export default function EventList({}: EventListProps) {
+    const navigate = useNavigate();
+
     const { rushList } = useRushEventStateContext();
     const dispatch = useRushEventDispatchContext();
 
-    useEffect(() => {
-        // TODO: 데이터 패칭 로직 구현
-        dispatch({
-            type: RUSH_ACTION.SET_EVENT_LIST,
-            payload: [
-                {
-                    rush_event_id: 1,
-                    event_date: "2024-07-25",
-                    open_time: "20:00:00",
-                    close_time: "20:10:00",
-                    winner_count: 315,
-                    prize_image_url: "prize1.png",
-                    prize_description: "스타벅스 1만원 기프트카드",
-                },
-                {
-                    rush_event_id: 2,
-                    event_date: "2024-07-26",
-                    open_time: "20:00:00",
-                    close_time: "20:10:00",
-                    winner_count: 315,
-                    prize_image_url: "prize2.png",
-                    prize_description: "올리브영 1만원 기프트카드",
-                },
-                {
-                    rush_event_id: 2,
-                    event_date: "2024-07-27",
-                    open_time: "20:00:00",
-                    close_time: "20:10:00",
-                    winner_count: 315,
-                    prize_image_url: "prize3.png",
-                    prize_description: "배달의 민족 1만원 기프트카드",
-                },
-            ],
-        });
-    }, []);
-
     const handleChangeItem = (key: string, changeIdx: number, date: string) => {
         const updatedTableItemList = rushList.map((item, idx) => {
             if (idx === changeIdx) {
@@ -81,30 +44,32 @@ export default function EventList({ handleSelectSection }: EventListProps) {
     const getTableData = () => {
         return rushList.map((item, idx) => {
             return [
-                item.rush_event_id,
+                item.rushEventId,
                 <DatePicker
-                    date={item.event_date}
-                    onChangeDate={(date) => handleChangeItem("event_date", idx, date)}
+                    date={item.eventDate}
+                    onChangeDate={(date) => handleChangeItem("eventDate", idx, date)}
                 />,
                 <TimePicker
-                    time={item.open_time}
-                    onChangeTime={(time) => handleChangeItem("open_time", idx, time)}
+                    time={item.openTime}
+                    onChangeTime={(time) => handleChangeItem("openTime", idx, time)}
                 />,
                 <TimePicker
-                    time={item.close_time}
-                    onChangeTime={(time) => handleChangeItem("close_time", idx, time)}
+                    time={item.closeTime}
+                    onChangeTime={(time) => handleChangeItem("closeTime", idx, time)}
                 />,
-                getTimeDifference(item.open_time, item.close_time),
+                getTimeDifference(item.openTime, item.closeTime),
                 <Button buttonSize="sm">선택지 관리</Button>,
                 <Button buttonSize="sm">경품 관리</Button>,
                 <div className="flex justify-between">
-                    <p>{item.winner_count}</p>
+                    <p>{item.winnerCount}</p>
                     <p>편집</p>
                 </div>,
                 "오픈 전",
                 <Button
                     buttonSize="sm"
-                    onClick={() => handleSelectSection(idx, RUSH_SECTION.APPLICANT_LIST)}
+                    onClick={() =>
+                        navigate("/rush/winner-list", { state: { id: item.rushEventId } })
+                    }
                 >
                     참여자 리스트 보기
                 </Button>,
diff --git a/admin/src/features/Rush/Layout.tsx b/admin/src/features/Rush/Layout.tsx
new file mode 100644
index 00000000..21b8749f
--- /dev/null
+++ b/admin/src/features/Rush/Layout.tsx
@@ -0,0 +1,10 @@
+import { Outlet } from "react-router-dom";
+import { RushEventContext } from "@/contexts/rushEventContext";
+
+export default function RushLayout() {
+    return (
+        <RushEventContext>
+            <Outlet />
+        </RushEventContext>
+    );
+}
diff --git a/admin/src/pages/Rush/index.tsx b/admin/src/pages/Rush/index.tsx
index e3f0e947..5f200e1d 100644
--- a/admin/src/pages/Rush/index.tsx
+++ b/admin/src/pages/Rush/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import TabHeader from "@/components/TabHeader";
-import ApplicantList from "@/features/Rush/ApplicantList";
+import EventList from "@/features/Rush/EventList";
 import useRushEventDispatchContext from "@/hooks/useRushEventDispatchContext";
 import { RUSH_ACTION } from "@/types/rush";
 
@@ -13,31 +13,31 @@ export default function Rush() {
             type: RUSH_ACTION.SET_EVENT_LIST,
             payload: [
                 {
-                    rush_event_id: 1,
-                    event_date: "2024-07-25",
-                    open_time: "20:00:00",
-                    close_time: "20:10:00",
-                    winner_count: 315,
-                    prize_image_url: "prize1.png",
-                    prize_description: "스타벅스 1만원 기프트카드",
+                    rushEventId: 1,
+                    eventDate: "2024-07-25",
+                    openTime: "20:00:00",
+                    closeTime: "20:10:00",
+                    winnerCount: 315,
+                    prizeImageUrl: "prize1.png",
+                    prizeDescription: "스타벅스 1만원 기프트카드",
                 },
                 {
-                    rush_event_id: 2,
-                    event_date: "2024-07-26",
-                    open_time: "20:00:00",
-                    close_time: "20:10:00",
-                    winner_count: 315,
-                    prize_image_url: "prize2.png",
-                    prize_description: "올리브영 1만원 기프트카드",
+                    rushEventId: 2,
+                    eventDate: "2024-07-26",
+                    openTime: "20:00:00",
+                    closeTime: "20:10:00",
+                    winnerCount: 315,
+                    prizeImageUrl: "prize2.png",
+                    prizeDescription: "올리브영 1만원 기프트카드",
                 },
                 {
-                    rush_event_id: 2,
-                    event_date: "2024-07-27",
-                    open_time: "20:00:00",
-                    close_time: "20:10:00",
-                    winner_count: 315,
-                    prize_image_url: "prize3.png",
-                    prize_description: "배달의 민족 1만원 기프트카드",
+                    rushEventId: 2,
+                    eventDate: "2024-07-27",
+                    openTime: "20:00:00",
+                    closeTime: "20:10:00",
+                    winnerCount: 315,
+                    prizeImageUrl: "prize3.png",
+                    prizeDescription: "배달의 민족 1만원 기프트카드",
                 },
             ],
         });
@@ -47,7 +47,7 @@ export default function Rush() {
         <div className="flex flex-col items-center">
             <TabHeader />
 
-            <ApplicantList />
+            <EventList />
         </div>
     );
 }
diff --git a/admin/src/router.tsx b/admin/src/router.tsx
index 9a5ed0c4..a05087b4 100644
--- a/admin/src/router.tsx
+++ b/admin/src/router.tsx
@@ -1,5 +1,6 @@
 import { createBrowserRouter } from "react-router-dom";
 import Layout from "./components/Layout";
+import RushLayout from "./features/Rush/Layout";
 import Login from "./pages/Login";
 import Lottery from "./pages/Lottery";
 import LotteryWinner from "./pages/LotteryWinner";
@@ -29,7 +30,13 @@ export const router = createBrowserRouter([
             },
             {
                 path: "rush/",
-                element: <Rush />,
+                element: <RushLayout />,
+                children: [
+                    {
+                        index: true,
+                        element: <Rush />,
+                    },
+                ],
             },
         ],
     },
diff --git a/admin/src/types/rush.ts b/admin/src/types/rush.ts
index dde663d8..0701e921 100644
--- a/admin/src/types/rush.ts
+++ b/admin/src/types/rush.ts
@@ -1,13 +1,13 @@
 import { Dispatch } from "react";
 
 export interface RushEventType {
-    rush_event_id: number;
-    event_date: string;
-    open_time: string;
-    close_time: string;
-    winner_count: number;
-    prize_image_url: string;
-    prize_description: string;
+    rushEventId: number;
+    eventDate: string;
+    openTime: string;
+    closeTime: string;
+    winnerCount: number;
+    prizeImageUrl: string;
+    prizeDescription: string;
 }
 
 export interface RushEventStateType {

From 672275c7333bc7d7a102e9295e154d1a2dce45eb Mon Sep 17 00:00:00 2001
From: juhyojeong <juhyojeong58@gmail.com>
Date: Sun, 11 Aug 2024 13:22:01 +0900
Subject: [PATCH 02/11] =?UTF-8?q?feat:=20=EC=84=A0=ED=83=9D=EC=A7=80=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/components/SelectForm/index.tsx |  38 +++++++
 admin/src/components/TextField/index.tsx  |  13 +++
 admin/src/contexts/rushEventContext.tsx   |   4 +-
 admin/src/features/Rush/EventList.tsx     |   9 +-
 admin/src/pages/RushSelectForm/index.tsx  | 129 ++++++++++++++++++++++
 admin/src/router.tsx                      |   5 +
 admin/src/types/rush.ts                   |  39 +++----
 7 files changed, 216 insertions(+), 21 deletions(-)
 create mode 100644 admin/src/components/SelectForm/index.tsx
 create mode 100644 admin/src/components/TextField/index.tsx
 create mode 100644 admin/src/pages/RushSelectForm/index.tsx

diff --git a/admin/src/components/SelectForm/index.tsx b/admin/src/components/SelectForm/index.tsx
new file mode 100644
index 00000000..693d7b32
--- /dev/null
+++ b/admin/src/components/SelectForm/index.tsx
@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+
+interface SelectFormProps {
+    header: ReactNode;
+    data: ReactNode[][];
+}
+
+export default function SelectForm({ header, data }: SelectFormProps) {
+    return (
+        <div className="relative sm:rounded-lg w-[730px] border">
+            <div className="overflow-y-auto h-full">
+                <table className="w-full text-sm rtl:text-right text-gray-500 text-center">
+                    <thead className="sticky top-0 z-[5] text-gray-700 bg-gray-50">
+                        <tr>
+                            <th colSpan={2} className="px-6 py-3 h-body-2-medium">
+                                {header}
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {data.map((tableData, idx) => (
+                            <tr key={`table-data-${idx}`} className="bg-white border-b">
+                                {tableData.map((dataNode, idx) => (
+                                    <td
+                                        key={`${header}-data-${idx}`}
+                                        className="px-6 py-4 h-body-2-regular"
+                                    >
+                                        {dataNode}
+                                    </td>
+                                ))}
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
diff --git a/admin/src/components/TextField/index.tsx b/admin/src/components/TextField/index.tsx
new file mode 100644
index 00000000..3cfff79a
--- /dev/null
+++ b/admin/src/components/TextField/index.tsx
@@ -0,0 +1,13 @@
+import { ComponentProps } from "react";
+
+interface TextFieldProps extends ComponentProps<"textarea"> {}
+
+export default function TextField({ ...restProps }: TextFieldProps) {
+    return (
+        <textarea
+            className="resize-none focus:outline-none w-full text-black"
+            spellCheck={false}
+            {...restProps}
+        />
+    );
+}
diff --git a/admin/src/contexts/rushEventContext.tsx b/admin/src/contexts/rushEventContext.tsx
index aa671088..2546dc05 100644
--- a/admin/src/contexts/rushEventContext.tsx
+++ b/admin/src/contexts/rushEventContext.tsx
@@ -11,6 +11,7 @@ export const RushEventDispatchContext = createContext<RushEventDispatchType | nu
 
 const initialState: RushEventStateType = {
     rushList: [],
+    selectOptions: [],
 };
 
 const casperCustomReducer = (
@@ -20,7 +21,8 @@ const casperCustomReducer = (
     switch (action.type) {
         case RUSH_ACTION.SET_EVENT_LIST:
             return { ...state, rushList: action.payload };
-
+        case RUSH_ACTION.SET_OPTION:
+            return { ...state, selectOptions: action.payload };
         default:
             return state;
     }
diff --git a/admin/src/features/Rush/EventList.tsx b/admin/src/features/Rush/EventList.tsx
index 2f1a343f..c8f20bbf 100644
--- a/admin/src/features/Rush/EventList.tsx
+++ b/admin/src/features/Rush/EventList.tsx
@@ -58,7 +58,14 @@ export default function EventList({}: EventListProps) {
                     onChangeTime={(time) => handleChangeItem("closeTime", idx, time)}
                 />,
                 getTimeDifference(item.openTime, item.closeTime),
-                <Button buttonSize="sm">선택지 관리</Button>,
+                <Button
+                    buttonSize="sm"
+                    onClick={() =>
+                        navigate("/rush/select-form", { state: { id: item.rushEventId } })
+                    }
+                >
+                    선택지 관리
+                </Button>,
                 <Button buttonSize="sm">경품 관리</Button>,
                 <div className="flex justify-between">
                     <p>{item.winnerCount}</p>
diff --git a/admin/src/pages/RushSelectForm/index.tsx b/admin/src/pages/RushSelectForm/index.tsx
new file mode 100644
index 00000000..59a7f9a8
--- /dev/null
+++ b/admin/src/pages/RushSelectForm/index.tsx
@@ -0,0 +1,129 @@
+import { useEffect, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import SelectForm from "@/components/SelectForm";
+import TabHeader from "@/components/TabHeader";
+import TextField from "@/components/TextField";
+import useRushEventDispatchContext from "@/hooks/useRushEventDispatchContext";
+import useRushEventStateContext from "@/hooks/useRushEventStateContext";
+import { RUSH_ACTION } from "@/types/rush";
+
+export default function RushSelectForm() {
+    const navigate = useNavigate();
+
+    const { selectOptions } = useRushEventStateContext();
+    const dispatch = useRushEventDispatchContext();
+
+    useEffect(() => {
+        dispatch({
+            type: RUSH_ACTION.SET_OPTION,
+            payload: [
+                {
+                    rushOptionId: 1,
+                    mainText: "첫 차로 저렴한 차 사기",
+                    subText: "첫 차는 가성비가 짱이지!",
+                    resultMainText: "누구보다 가성비 갑인 캐스퍼 일렉트릭",
+                    resultSubText: "전기차 평균보다 훨씬 저렴한 캐스퍼 일렉트릭!",
+                    imageUrl: "left_image.png",
+                },
+                {
+                    rushOptionId: 2,
+                    mainText: "첫 차로 성능 좋은 차 사기",
+                    subText: "차는 당연히 성능이지!",
+                    resultMainText: "필요한 건 다 갖춘 캐스퍼 일렉트릭",
+                    resultSubText: "전기차 평균보다 훨씨니 저렴한 캐스퍼 일렉트릭!",
+                    imageUrl: "left_image.png",
+                },
+            ],
+        });
+    }, []);
+
+    const handleChangeItem = (key: string, changeIdx: number, text: string) => {
+        const updatedItem = selectOptions.map((item, idx) => {
+            if (idx === changeIdx) {
+                return { ...item, [key]: text };
+            }
+            return { ...item };
+        });
+
+        dispatch({ type: RUSH_ACTION.SET_OPTION, payload: updatedItem });
+    };
+
+    const getSelectOption = (idx: number) => {
+        if (selectOptions.length >= 2) {
+            return [
+                [
+                    "메인 문구 (15자 이내)",
+                    <TextField
+                        value={selectOptions[idx].mainText}
+                        onChange={(e) => handleChangeItem("mainText", idx, e.target.value)}
+                    />,
+                ],
+                [
+                    "서브 문구 (40자 이내)",
+                    <TextField
+                        value={selectOptions[idx].subText}
+                        onChange={(e) => handleChangeItem("subText", idx, e.target.value)}
+                    />,
+                ],
+            ];
+        }
+        return [];
+    };
+    const getSelectOptionResult = (idx: number) => {
+        if (selectOptions.length >= 2) {
+            return [
+                ["이미지", <input type="file" />],
+                [
+                    "메인 문구 (20자 이내)",
+                    <TextField
+                        value={selectOptions[idx].resultMainText}
+                        onChange={(e) => handleChangeItem("resultMainText", idx, e.target.value)}
+                    />,
+                ],
+                [
+                    "서브 문구 (45자 이내)",
+                    <TextField
+                        value={selectOptions[idx].resultSubText}
+                        onChange={(e) => handleChangeItem("resultSubText", idx, e.target.value)}
+                    />,
+                ],
+            ];
+        }
+        return [];
+    };
+
+    return (
+        <div className="flex flex-col items-center h-screen">
+            <TabHeader />
+
+            <div className="w-[1560px] flex flex-col items-center justify-center gap-8 mt-10">
+                <div className="flex items-center gap-2 self-start">
+                    <img
+                        alt="뒤로 가기 버튼"
+                        src="/assets/icons/left-arrow.svg"
+                        className="cursor-pointer"
+                        onClick={() => navigate(-1)}
+                    />
+                    <p className="h-body-1-medium">밸런스 게임 선택지 관리</p>
+                </div>
+
+                <div className="flex gap-10">
+                    <div className="flex flex-col gap-4">
+                        <SelectForm header="옵션 1 선택지" data={getSelectOption(0)} />
+                        <SelectForm
+                            header="옵션 1 선택 결과 정보"
+                            data={getSelectOptionResult(0)}
+                        />
+                    </div>
+                    <div className="flex flex-col gap-4">
+                        <SelectForm header="옵션 2 선택지" data={getSelectOption(1)} />
+                        <SelectForm
+                            header="옵션 2 선택 결과 정보"
+                            data={getSelectOptionResult(1)}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/admin/src/router.tsx b/admin/src/router.tsx
index a05087b4..096cbbad 100644
--- a/admin/src/router.tsx
+++ b/admin/src/router.tsx
@@ -5,6 +5,7 @@ import Login from "./pages/Login";
 import Lottery from "./pages/Lottery";
 import LotteryWinner from "./pages/LotteryWinner";
 import Rush from "./pages/Rush";
+import RushSelectForm from "./pages/RushSelectForm";
 
 export const router = createBrowserRouter([
     {
@@ -36,6 +37,10 @@ export const router = createBrowserRouter([
                         index: true,
                         element: <Rush />,
                     },
+                    {
+                        path: "select-form",
+                        element: <RushSelectForm />,
+                    },
                 ],
             },
         ],
diff --git a/admin/src/types/rush.ts b/admin/src/types/rush.ts
index 0701e921..ae892b6a 100644
--- a/admin/src/types/rush.ts
+++ b/admin/src/types/rush.ts
@@ -10,32 +10,33 @@ export interface RushEventType {
     prizeDescription: string;
 }
 
+export interface RushOptionType {
+    rushOptionId: number;
+    mainText: string;
+    subText: string;
+    resultMainText: string;
+    resultSubText: string;
+    imageUrl: string;
+}
+
 export interface RushEventStateType {
     rushList: RushEventType[];
+    selectOptions: RushOptionType[];
 }
 
 export const RUSH_ACTION = {
     SET_EVENT_LIST: "SET_EVENT_LIST",
+    SET_OPTION: "SET_OPTION",
 } as const;
 
-export type RushEventAction = {
-    type: typeof RUSH_ACTION.SET_EVENT_LIST;
-    payload: RushEventType[];
-};
+export type RushEventAction =
+    | {
+          type: typeof RUSH_ACTION.SET_EVENT_LIST;
+          payload: RushEventType[];
+      }
+    | {
+          type: typeof RUSH_ACTION.SET_OPTION;
+          payload: RushOptionType[];
+      };
 
 export type RushEventDispatchType = Dispatch<RushEventAction>;
-
-export interface RushApplicantType {
-    phone_number: string;
-    balance_game_choice: string;
-    created_at: string;
-}
-
-export interface RushSelectionType {
-    rush_option_id: string;
-    main_text: string;
-    sub_text: string;
-    result_main_text: string;
-    result_sub_text: string;
-    image_url: string;
-}

From a9057164de61bdf3496048c07758d48d430e16df Mon Sep 17 00:00:00 2001
From: juhyojeong <juhyojeong58@gmail.com>
Date: Sun, 11 Aug 2024 13:36:40 +0900
Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=EA=B2=BD=ED=92=88=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/contexts/rushEventContext.tsx  |  4 ++
 admin/src/features/Rush/EventList.tsx    |  9 +++-
 admin/src/pages/RushPrizeForm/index.tsx  | 61 ++++++++++++++++++++++++
 admin/src/pages/RushSelectForm/index.tsx |  2 +-
 admin/src/router.tsx                     |  5 ++
 admin/src/types/rush.ts                  | 11 +++++
 6 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 admin/src/pages/RushPrizeForm/index.tsx

diff --git a/admin/src/contexts/rushEventContext.tsx b/admin/src/contexts/rushEventContext.tsx
index 2546dc05..b223d474 100644
--- a/admin/src/contexts/rushEventContext.tsx
+++ b/admin/src/contexts/rushEventContext.tsx
@@ -4,6 +4,7 @@ import {
     RushEventAction,
     RushEventDispatchType,
     RushEventStateType,
+    RushPrizeType,
 } from "@/types/rush";
 
 export const RushEventStateContext = createContext<RushEventStateType | null>(null);
@@ -12,6 +13,7 @@ export const RushEventDispatchContext = createContext<RushEventDispatchType | nu
 const initialState: RushEventStateType = {
     rushList: [],
     selectOptions: [],
+    prize: {} as RushPrizeType,
 };
 
 const casperCustomReducer = (
@@ -23,6 +25,8 @@ const casperCustomReducer = (
             return { ...state, rushList: action.payload };
         case RUSH_ACTION.SET_OPTION:
             return { ...state, selectOptions: action.payload };
+        case RUSH_ACTION.SET_PRIZE:
+            return { ...state, prize: action.payload };
         default:
             return state;
     }
diff --git a/admin/src/features/Rush/EventList.tsx b/admin/src/features/Rush/EventList.tsx
index c8f20bbf..29eb6c84 100644
--- a/admin/src/features/Rush/EventList.tsx
+++ b/admin/src/features/Rush/EventList.tsx
@@ -66,7 +66,14 @@ export default function EventList({}: EventListProps) {
                 >
                     선택지 관리
                 </Button>,
-                <Button buttonSize="sm">경품 관리</Button>,
+                <Button
+                    buttonSize="sm"
+                    onClick={() =>
+                        navigate("/rush/prize-form", { state: { id: item.rushEventId } })
+                    }
+                >
+                    경품 관리
+                </Button>,
                 <div className="flex justify-between">
                     <p>{item.winnerCount}</p>
                     <p>편집</p>
diff --git a/admin/src/pages/RushPrizeForm/index.tsx b/admin/src/pages/RushPrizeForm/index.tsx
new file mode 100644
index 00000000..69988c4b
--- /dev/null
+++ b/admin/src/pages/RushPrizeForm/index.tsx
@@ -0,0 +1,61 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import SelectForm from "@/components/SelectForm";
+import TabHeader from "@/components/TabHeader";
+import TextField from "@/components/TextField";
+import useRushEventDispatchContext from "@/hooks/useRushEventDispatchContext";
+import useRushEventStateContext from "@/hooks/useRushEventStateContext";
+import { RUSH_ACTION } from "@/types/rush";
+
+export default function RushPrizeForm() {
+    const navigate = useNavigate();
+
+    const { prize } = useRushEventStateContext();
+    const dispatch = useRushEventDispatchContext();
+
+    useEffect(() => {
+        dispatch({
+            type: RUSH_ACTION.SET_PRIZE,
+            payload: {
+                prizeImageUrl: "prize.png",
+                prizeDescription: "메가박스 영화 예매권",
+            },
+        });
+    }, []);
+
+    const option = [
+        ["이미지", <input type="file" />],
+        [
+            "경품 이름 (20자 이내)",
+            <TextField
+                value={prize.prizeDescription}
+                onChange={(e) =>
+                    dispatch({
+                        type: RUSH_ACTION.SET_PRIZE,
+                        payload: { ...prize, prizeDescription: e.target.value },
+                    })
+                }
+            />,
+        ],
+    ];
+
+    return (
+        <div className="flex flex-col items-center h-screen">
+            <TabHeader />
+
+            <div className="w-[1560px] flex flex-col items-center justify-center gap-8 mt-10">
+                <div className="flex items-center gap-2 self-start">
+                    <img
+                        alt="뒤로 가기 버튼"
+                        src="/assets/icons/left-arrow.svg"
+                        className="cursor-pointer"
+                        onClick={() => navigate(-1)}
+                    />
+                    <p className="h-body-1-medium">밸런스 게임 경품 관리</p>
+                </div>
+
+                <SelectForm header="경품 관리" data={option} />
+            </div>
+        </div>
+    );
+}
diff --git a/admin/src/pages/RushSelectForm/index.tsx b/admin/src/pages/RushSelectForm/index.tsx
index 59a7f9a8..4a0fec92 100644
--- a/admin/src/pages/RushSelectForm/index.tsx
+++ b/admin/src/pages/RushSelectForm/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import SelectForm from "@/components/SelectForm";
 import TabHeader from "@/components/TabHeader";
diff --git a/admin/src/router.tsx b/admin/src/router.tsx
index 096cbbad..dd040e95 100644
--- a/admin/src/router.tsx
+++ b/admin/src/router.tsx
@@ -5,6 +5,7 @@ import Login from "./pages/Login";
 import Lottery from "./pages/Lottery";
 import LotteryWinner from "./pages/LotteryWinner";
 import Rush from "./pages/Rush";
+import RushPrizeForm from "./pages/RushPrizeForm";
 import RushSelectForm from "./pages/RushSelectForm";
 
 export const router = createBrowserRouter([
@@ -41,6 +42,10 @@ export const router = createBrowserRouter([
                         path: "select-form",
                         element: <RushSelectForm />,
                     },
+                    {
+                        path: "prize-form",
+                        element: <RushPrizeForm />,
+                    },
                 ],
             },
         ],
diff --git a/admin/src/types/rush.ts b/admin/src/types/rush.ts
index ae892b6a..5db2c5dd 100644
--- a/admin/src/types/rush.ts
+++ b/admin/src/types/rush.ts
@@ -19,14 +19,21 @@ export interface RushOptionType {
     imageUrl: string;
 }
 
+export interface RushPrizeType {
+    prizeImageUrl: string;
+    prizeDescription: string;
+}
+
 export interface RushEventStateType {
     rushList: RushEventType[];
     selectOptions: RushOptionType[];
+    prize: RushPrizeType;
 }
 
 export const RUSH_ACTION = {
     SET_EVENT_LIST: "SET_EVENT_LIST",
     SET_OPTION: "SET_OPTION",
+    SET_PRIZE: "SET_PRIZE",
 } as const;
 
 export type RushEventAction =
@@ -37,6 +44,10 @@ export type RushEventAction =
     | {
           type: typeof RUSH_ACTION.SET_OPTION;
           payload: RushOptionType[];
+      }
+    | {
+          type: typeof RUSH_ACTION.SET_PRIZE;
+          payload: RushPrizeType;
       };
 
 export type RushEventDispatchType = Dispatch<RushEventAction>;

From 5ca9ed96cc80cfc140f672e5f136b2778d413e9a Mon Sep 17 00:00:00 2001
From: juhyojeong <juhyojeong58@gmail.com>
Date: Sun, 11 Aug 2024 13:47:22 +0900
Subject: [PATCH 04/11] =?UTF-8?q?feat:=20=EC=9E=84=EC=8B=9C=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/pages/RushPrizeForm/index.tsx  | 30 ++++++++++++++-------
 admin/src/pages/RushSelectForm/index.tsx | 34 +++++++++++++++++-------
 2 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/admin/src/pages/RushPrizeForm/index.tsx b/admin/src/pages/RushPrizeForm/index.tsx
index 69988c4b..eb3ea086 100644
--- a/admin/src/pages/RushPrizeForm/index.tsx
+++ b/admin/src/pages/RushPrizeForm/index.tsx
@@ -1,11 +1,12 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import Button from "@/components/Button";
 import SelectForm from "@/components/SelectForm";
 import TabHeader from "@/components/TabHeader";
 import TextField from "@/components/TextField";
 import useRushEventDispatchContext from "@/hooks/useRushEventDispatchContext";
 import useRushEventStateContext from "@/hooks/useRushEventStateContext";
-import { RUSH_ACTION } from "@/types/rush";
+import { RUSH_ACTION, RushPrizeType } from "@/types/rush";
 
 export default function RushPrizeForm() {
     const navigate = useNavigate();
@@ -13,6 +14,11 @@ export default function RushPrizeForm() {
     const { prize } = useRushEventStateContext();
     const dispatch = useRushEventDispatchContext();
 
+    const [prizeState, setPrizeState] = useState<RushPrizeType>({} as RushPrizeType);
+
+    useEffect(() => {
+        setPrizeState(prize);
+    }, [prize]);
     useEffect(() => {
         dispatch({
             type: RUSH_ACTION.SET_PRIZE,
@@ -23,18 +29,20 @@ export default function RushPrizeForm() {
         });
     }, []);
 
+    const handleUpdate = () => {
+        dispatch({
+            type: RUSH_ACTION.SET_PRIZE,
+            payload: prizeState,
+        });
+    };
+
     const option = [
         ["이미지", <input type="file" />],
         [
             "경품 이름 (20자 이내)",
             <TextField
-                value={prize.prizeDescription}
-                onChange={(e) =>
-                    dispatch({
-                        type: RUSH_ACTION.SET_PRIZE,
-                        payload: { ...prize, prizeDescription: e.target.value },
-                    })
-                }
+                value={prizeState.prizeDescription}
+                onChange={(e) => setPrizeState({ ...prizeState, prizeDescription: e.target.value })}
             />,
         ],
     ];
@@ -55,6 +63,10 @@ export default function RushPrizeForm() {
                 </div>
 
                 <SelectForm header="경품 관리" data={option} />
+
+                <Button buttonSize="lg" onClick={handleUpdate}>
+                    임시 저장
+                </Button>
             </div>
         </div>
     );
diff --git a/admin/src/pages/RushSelectForm/index.tsx b/admin/src/pages/RushSelectForm/index.tsx
index 4a0fec92..06839707 100644
--- a/admin/src/pages/RushSelectForm/index.tsx
+++ b/admin/src/pages/RushSelectForm/index.tsx
@@ -1,11 +1,12 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import Button from "@/components/Button";
 import SelectForm from "@/components/SelectForm";
 import TabHeader from "@/components/TabHeader";
 import TextField from "@/components/TextField";
 import useRushEventDispatchContext from "@/hooks/useRushEventDispatchContext";
 import useRushEventStateContext from "@/hooks/useRushEventStateContext";
-import { RUSH_ACTION } from "@/types/rush";
+import { RUSH_ACTION, RushOptionType } from "@/types/rush";
 
 export default function RushSelectForm() {
     const navigate = useNavigate();
@@ -13,6 +14,11 @@ export default function RushSelectForm() {
     const { selectOptions } = useRushEventStateContext();
     const dispatch = useRushEventDispatchContext();
 
+    const [selectOptionState, setSelectOptionState] = useState<RushOptionType[]>([]);
+
+    useEffect(() => {
+        setSelectOptionState(selectOptions);
+    }, [selectOptions]);
     useEffect(() => {
         dispatch({
             type: RUSH_ACTION.SET_OPTION,
@@ -37,31 +43,35 @@ export default function RushSelectForm() {
         });
     }, []);
 
+    const handleUpdate = () => {
+        dispatch({ type: RUSH_ACTION.SET_OPTION, payload: selectOptionState });
+    };
+
     const handleChangeItem = (key: string, changeIdx: number, text: string) => {
-        const updatedItem = selectOptions.map((item, idx) => {
+        const updatedItem = selectOptionState.map((item, idx) => {
             if (idx === changeIdx) {
                 return { ...item, [key]: text };
             }
             return { ...item };
         });
 
-        dispatch({ type: RUSH_ACTION.SET_OPTION, payload: updatedItem });
+        setSelectOptionState(updatedItem);
     };
 
     const getSelectOption = (idx: number) => {
-        if (selectOptions.length >= 2) {
+        if (selectOptionState.length >= 2) {
             return [
                 [
                     "메인 문구 (15자 이내)",
                     <TextField
-                        value={selectOptions[idx].mainText}
+                        value={selectOptionState[idx].mainText}
                         onChange={(e) => handleChangeItem("mainText", idx, e.target.value)}
                     />,
                 ],
                 [
                     "서브 문구 (40자 이내)",
                     <TextField
-                        value={selectOptions[idx].subText}
+                        value={selectOptionState[idx].subText}
                         onChange={(e) => handleChangeItem("subText", idx, e.target.value)}
                     />,
                 ],
@@ -70,20 +80,20 @@ export default function RushSelectForm() {
         return [];
     };
     const getSelectOptionResult = (idx: number) => {
-        if (selectOptions.length >= 2) {
+        if (selectOptionState.length >= 2) {
             return [
                 ["이미지", <input type="file" />],
                 [
                     "메인 문구 (20자 이내)",
                     <TextField
-                        value={selectOptions[idx].resultMainText}
+                        value={selectOptionState[idx].resultMainText}
                         onChange={(e) => handleChangeItem("resultMainText", idx, e.target.value)}
                     />,
                 ],
                 [
                     "서브 문구 (45자 이내)",
                     <TextField
-                        value={selectOptions[idx].resultSubText}
+                        value={selectOptionState[idx].resultSubText}
                         onChange={(e) => handleChangeItem("resultSubText", idx, e.target.value)}
                     />,
                 ],
@@ -123,6 +133,10 @@ export default function RushSelectForm() {
                         />
                     </div>
                 </div>
+
+                <Button buttonSize="lg" onClick={handleUpdate}>
+                    임시 저장
+                </Button>
             </div>
         </div>
     );

From 46d9bf0c337d2c239c6c5b62c813c722e425cc8f Mon Sep 17 00:00:00 2001
From: juhyojeong <juhyojeong58@gmail.com>
Date: Sun, 11 Aug 2024 13:58:31 +0900
Subject: [PATCH 05/11] =?UTF-8?q?feat:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=ED=95=84=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/features/Rush/EventList.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/admin/src/features/Rush/EventList.tsx b/admin/src/features/Rush/EventList.tsx
index 29eb6c84..7fa80a37 100644
--- a/admin/src/features/Rush/EventList.tsx
+++ b/admin/src/features/Rush/EventList.tsx
@@ -30,10 +30,10 @@ export default function EventList({}: EventListProps) {
     const { rushList } = useRushEventStateContext();
     const dispatch = useRushEventDispatchContext();
 
-    const handleChangeItem = (key: string, changeIdx: number, date: string) => {
+    const handleChangeItem = (key: string, changeIdx: number, text: string | number) => {
         const updatedTableItemList = rushList.map((item, idx) => {
             if (idx === changeIdx) {
-                return { ...item, [key]: date };
+                return { ...item, [key]: text };
             }
             return { ...item };
         });
@@ -74,9 +74,13 @@ export default function EventList({}: EventListProps) {
                 >
                     경품 관리
                 </Button>,
-                <div className="flex justify-between">
-                    <p>{item.winnerCount}</p>
-                    <p>편집</p>
+                <div className="flex w-full border-b">
+                    <input
+                        value={item.winnerCount}
+                        onChange={(e) =>
+                            handleChangeItem("winnerCount", idx, parseInt(e.target.value) || 0)
+                        }
+                    />
                 </div>,
                 "오픈 전",
                 <Button

From 7e81ea29f8bd9c09e3d22c389b9fb6d2597137bf Mon Sep 17 00:00:00 2001
From: juhyojeong <juhyojeong58@gmail.com>
Date: Sun, 11 Aug 2024 14:25:58 +0900
Subject: [PATCH 06/11] =?UTF-8?q?feat:=20=EC=B6=94=EC=B2=A8=20=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EB=A9=94=EC=9D=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/public/assets/icons/calendar.svg |  5 +-
 admin/src/components/Table/index.tsx   |  5 +-
 admin/src/pages/Lottery/index.tsx      | 94 ++++++++++++++++++++------
 admin/src/types/lottery.ts             |  9 +++
 4 files changed, 90 insertions(+), 23 deletions(-)
 create mode 100644 admin/src/types/lottery.ts

diff --git a/admin/public/assets/icons/calendar.svg b/admin/public/assets/icons/calendar.svg
index 6d839977..bcd55ca9 100644
--- a/admin/public/assets/icons/calendar.svg
+++ b/admin/public/assets/icons/calendar.svg
@@ -1,8 +1,9 @@
 <svg
-    className="w-4 h-4 text-gray-500 dark:text-gray-400"
+    width="16"
+    height="16"
     aria-hidden="true"
     xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
+    fill="#6b7280"
     viewBox="0 0 20 20"
 >
     <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
diff --git a/admin/src/components/Table/index.tsx b/admin/src/components/Table/index.tsx
index 6f2cb37e..e841302c 100644
--- a/admin/src/components/Table/index.tsx
+++ b/admin/src/components/Table/index.tsx
@@ -3,11 +3,12 @@ import { ReactNode } from "react";
 interface TableProps {
     headers: ReactNode[];
     data: ReactNode[][];
+    height?: string | number;
 }
 
-export default function Table({ headers, data }: TableProps) {
+export default function Table({ headers, data, height = 600 }: TableProps) {
     return (
-        <div className="relative sm:rounded-lg w-[1560px] h-[600px] border">
+        <div className="relative sm:rounded-lg w-[1560px] border" style={{ height }}>
             <div className="overflow-y-auto h-full">
                 <table className="w-full text-sm rtl:text-right text-gray-500 text-center">
                     <thead className="sticky top-0 z-[5] text-gray-700 bg-gray-50">
diff --git a/admin/src/pages/Lottery/index.tsx b/admin/src/pages/Lottery/index.tsx
index 3943c6b9..6c74321e 100644
--- a/admin/src/pages/Lottery/index.tsx
+++ b/admin/src/pages/Lottery/index.tsx
@@ -1,26 +1,80 @@
-import { ChangeEvent, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Button from "@/components/Button";
+import DatePicker from "@/components/DatePicker";
 import TabHeader from "@/components/TabHeader";
+import Table from "@/components/Table";
+import TimePicker from "@/components/TimePicker";
+import { LotteryType } from "@/types/lottery";
+
+const LOTTERY_HEADER = [
+    "시작 날짜",
+    "시작 시간",
+    "종료 날짜",
+    "종료 시간",
+    "활성화 기간",
+    "추첨 당첨 인원 수",
+    "진행 상태",
+];
 
 export default function Lottery() {
     const navigate = useNavigate();
 
-    const [giftCount, setGiftCount] = useState<number>(0);
+    const [lottery, setLottery] = useState<LotteryType>({} as LotteryType);
 
     useEffect(() => {
-        // TODO: 추첨 이벤트 정보 불러오기
-        setGiftCount(363);
+        const data = {
+            lotteryEventId: 1,
+            startDate: "2024-07-26 00:00",
+            endDate: "2024-08-25 23:59",
+            appliedCount: 1000000,
+            winnerCount: 363,
+        };
+
+        const [startDate, startTime] = data.startDate.split(" ");
+        const [endDate, endTime] = data.startDate.split(" ");
+
+        setLottery({
+            ...data,
+            startDate,
+            startTime,
+            endDate,
+            endTime,
+        });
     }, []);
 
-    const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
-        const count = parseInt(e.target.value);
-        setGiftCount(count || 0);
+    const handleChangeItem = (key: string, text: string | number) => {
+        setLottery({ ...lottery, [key]: text });
     };
 
-    const handleLottery = () => {
-        // TODO: 당첨자 추첨
-        navigate("/lottery/winner");
+    const getLotteryData = () => {
+        return [
+            [
+                <DatePicker
+                    date={lottery.startDate}
+                    onChangeDate={(date) => handleChangeItem("startDate", date)}
+                />,
+                <TimePicker
+                    time={lottery.startTime}
+                    onChangeTime={(time) => handleChangeItem("startTime", time)}
+                />,
+                <DatePicker
+                    date={lottery.endDate}
+                    onChangeDate={(date) => handleChangeItem("endDate", date)}
+                />,
+                <TimePicker
+                    time={lottery.endTime}
+                    onChangeTime={(time) => handleChangeItem("endTime", time)}
+                />,
+                "61일",
+                lottery.winnerCount,
+                "활성화",
+            ],
+        ];
+    };
+
+    const handleUpdate = () => {
+        // TODO: update API 요청
     };
 
     return (
@@ -28,17 +82,19 @@ export default function Lottery() {
             <TabHeader />
 
             <div className="flex flex-col h-full items-center justify-center gap-8 pb-40">
-                <div className="flex border">
-                    <p className="px-6 py-4 w-[200px] bg-gray-50 h-body-1-bold">전체 참여자 수</p>
-                    <p className="px-6 py-4 w-[200px] h-body-1-regular">1000</p>
-                    <p className="px-6 py-4 w-[200px] bg-gray-50 h-body-1-bold">당첨자 수</p>
-                    <div className="self-center px-4">
-                        <input value={giftCount} onChange={handleChangeInput} />
-                    </div>
+                <Table headers={LOTTERY_HEADER} data={getLotteryData()} height="auto" />
+
+                <div className="self-end flex gap-4">
+                    <Button buttonSize="sm" onClick={() => navigate("/lottery/participant-list")}>
+                        참여자 리스트 보러가기
+                    </Button>
+                    <Button buttonSize="sm" onClick={() => navigate("/lottery/winner-list")}>
+                        당첨자 보러가기
+                    </Button>
                 </div>
 
-                <Button buttonSize="lg" onClick={handleLottery}>
-                    당첨자 추첨하기
+                <Button buttonSize="lg" onClick={handleUpdate}>
+                    수정사항 업데이트
                 </Button>
             </div>
         </div>
diff --git a/admin/src/types/lottery.ts b/admin/src/types/lottery.ts
new file mode 100644
index 00000000..eb83ba07
--- /dev/null
+++ b/admin/src/types/lottery.ts
@@ -0,0 +1,9 @@
+export interface LotteryType {
+    lotteryEventId: number;
+    startDate: string;
+    startTime: string;
+    endDate: string;
+    endTime: string;
+    appliedCount: number;
+    winnerCount: number;
+}

From dc223db6dbd1d7e5631b9c9768903eafff90a467 Mon Sep 17 00:00:00 2001
From: juhyojeong <juhyojeong58@gmail.com>
Date: Sun, 11 Aug 2024 14:28:10 +0900
Subject: [PATCH 07/11] =?UTF-8?q?fix:=20=EC=88=AB=EC=9E=90=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EC=B9=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/pages/Lottery/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/admin/src/pages/Lottery/index.tsx b/admin/src/pages/Lottery/index.tsx
index 6c74321e..17346f2d 100644
--- a/admin/src/pages/Lottery/index.tsx
+++ b/admin/src/pages/Lottery/index.tsx
@@ -67,7 +67,14 @@ export default function Lottery() {
                     onChangeTime={(time) => handleChangeItem("endTime", time)}
                 />,
                 "61일",
-                lottery.winnerCount,
+                <div className="border-b flex w-full">
+                    <input
+                        value={lottery.winnerCount}
+                        onChange={(e) =>
+                            handleChangeItem("winnerCount", parseInt(e.target.value) || 0)
+                        }
+                    />
+                </div>,
                 "활성화",
             ],
         ];

From 0bd67fa35a7f41ad3f0256845b4f9658a261dbd5 Mon Sep 17 00:00:00 2001
From: juhyojeong <juhyojeong58@gmail.com>
Date: Sun, 11 Aug 2024 19:57:35 +0900
Subject: [PATCH 08/11] =?UTF-8?q?refactor:=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?=EC=83=81=EC=88=98=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/constants/lottery.ts        |  9 +++++++++
 admin/src/constants/rush.ts           | 13 +++++++++++++
 admin/src/features/Rush/EventList.tsx | 19 ++-----------------
 admin/src/pages/Lottery/index.tsx     | 11 +----------
 4 files changed, 25 insertions(+), 27 deletions(-)
 create mode 100644 admin/src/constants/lottery.ts

diff --git a/admin/src/constants/lottery.ts b/admin/src/constants/lottery.ts
new file mode 100644
index 00000000..af72f0be
--- /dev/null
+++ b/admin/src/constants/lottery.ts
@@ -0,0 +1,9 @@
+export const LOTTERY_HEADER = [
+    "시작 날짜",
+    "시작 시간",
+    "종료 날짜",
+    "종료 시간",
+    "활성화 기간",
+    "추첨 당첨 인원 수",
+    "진행 상태",
+];
diff --git a/admin/src/constants/rush.ts b/admin/src/constants/rush.ts
index e69de29b..51ac9c3b 100644
--- a/admin/src/constants/rush.ts
+++ b/admin/src/constants/rush.ts
@@ -0,0 +1,13 @@
+export const EVENT_LIST_HEADER = [
+    "ID",
+    "이벤트 진행 날짜",
+    "오픈 시간",
+    "종료 시간",
+    "활성화 시간",
+    "선택지 관리",
+    "경품 관리",
+    "선착순 당첨 인원 수",
+    "진행 상태",
+    "참여자 리스트 보기",
+    "관리",
+];
diff --git a/admin/src/features/Rush/EventList.tsx b/admin/src/features/Rush/EventList.tsx
index 7fa80a37..1ffbfa4b 100644
--- a/admin/src/features/Rush/EventList.tsx
+++ b/admin/src/features/Rush/EventList.tsx
@@ -3,28 +3,13 @@ import Button from "@/components/Button";
 import DatePicker from "@/components/DatePicker";
 import Table from "@/components/Table";
 import TimePicker from "@/components/TimePicker";
+import { EVENT_LIST_HEADER } from "@/constants/rush";
 import useRushEventDispatchContext from "@/hooks/useRushEventDispatchContext";
 import useRushEventStateContext from "@/hooks/useRushEventStateContext";
 import { RUSH_ACTION } from "@/types/rush";
 import { getTimeDifference } from "@/utils/getTimeDifference";
 
-interface EventListProps {}
-
-const EVENT_LIST_HEADER = [
-    "ID",
-    "이벤트 진행 날짜",
-    "오픈 시간",
-    "종료 시간",
-    "활성화 시간",
-    "선택지 관리",
-    "경품 관리",
-    "선착순 당첨 인원 수",
-    "진행 상태",
-    "참여자 리스트 보기",
-    "관리",
-];
-
-export default function EventList({}: EventListProps) {
+export default function EventList() {
     const navigate = useNavigate();
 
     const { rushList } = useRushEventStateContext();
diff --git a/admin/src/pages/Lottery/index.tsx b/admin/src/pages/Lottery/index.tsx
index 17346f2d..e31948cc 100644
--- a/admin/src/pages/Lottery/index.tsx
+++ b/admin/src/pages/Lottery/index.tsx
@@ -5,18 +5,9 @@ import DatePicker from "@/components/DatePicker";
 import TabHeader from "@/components/TabHeader";
 import Table from "@/components/Table";
 import TimePicker from "@/components/TimePicker";
+import { LOTTERY_HEADER } from "@/constants/lottery";
 import { LotteryType } from "@/types/lottery";
 
-const LOTTERY_HEADER = [
-    "시작 날짜",
-    "시작 시간",
-    "종료 날짜",
-    "종료 시간",
-    "활성화 기간",
-    "추첨 당첨 인원 수",
-    "진행 상태",
-];
-
 export default function Lottery() {
     const navigate = useNavigate();
 

From d430712af5049590c1cbec7463bd4d459d1a661d Mon Sep 17 00:00:00 2001
From: juhyojeong <juhyojeong58@gmail.com>
Date: Sun, 11 Aug 2024 20:00:53 +0900
Subject: [PATCH 09/11] =?UTF-8?q?fix:=20=EB=B9=8C=EB=93=9C=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/features/Rush/ApplicantList.tsx | 98 -----------------------
 1 file changed, 98 deletions(-)
 delete mode 100644 admin/src/features/Rush/ApplicantList.tsx

diff --git a/admin/src/features/Rush/ApplicantList.tsx b/admin/src/features/Rush/ApplicantList.tsx
deleted file mode 100644
index 62a22d93..00000000
--- a/admin/src/features/Rush/ApplicantList.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useEffect, useState } from "react";
-import Button from "@/components/Button";
-import Dropdown from "@/components/Dropdown";
-import Table from "@/components/Table";
-import useRushEventStateContext from "@/hooks/useRushEventStateContext";
-import { RushApplicantType, RushSelectionType } from "@/types/rush";
-
-export default function ApplicantList() {
-    const { rushList } = useRushEventStateContext();
-
-    const [selectedRush, setSelectedRush] = useState<number>(0);
-
-    const [selectionList, setSelectionList] = useState<RushSelectionType[]>([]);
-    const [applicantList, setApplicantList] = useState<RushApplicantType[]>([]);
-    const [selectedOption, setSelectedOption] = useState<number>(0);
-
-    const selectionTitleList = selectionList.map(
-        (selection, idx) => `옵션 ${idx + 1} : ${selection.main_text}`
-    );
-
-    const APPLICANT_LIST_HEADER = [
-        "ID",
-        "전화번호",
-        "등수",
-        "클릭 시간",
-        <Dropdown
-            options={selectionTitleList}
-            selectedIdx={selectedOption}
-            handleClickOption={(idx) => setSelectedOption(idx)}
-        />,
-    ];
-
-    useEffect(() => {
-        // TODO: 데이터 패칭 로직 구현 필요
-        setApplicantList([
-            {
-                phone_number: "010-1111-2222",
-                balance_game_choice: "1",
-                created_at: "2024-07-25 20:00 123",
-            },
-            {
-                phone_number: "010-1111-2222",
-                balance_game_choice: "1",
-                created_at: "2024-07-25 20:00 125",
-            },
-            {
-                phone_number: "010-1111-2222",
-                balance_game_choice: "1",
-                created_at: "2024-07-25 20:00 127",
-            },
-        ]);
-        setSelectionList([
-            {
-                rush_option_id: "1",
-                main_text: "첫 차로 저렴한 차 사기",
-                sub_text: " 첫 차는 가성비가 짱이지!",
-                result_main_text: "누구보다 가성비 갑인 캐스퍼 일렉트릭",
-                result_sub_text: "전기차 평균보다 훨씬 저렴한 캐스퍼 일렉트릭!",
-                image_url: "left_image.png",
-            },
-            {
-                rush_option_id: "2",
-                main_text: "첫 차로 성능 좋은 차 사기",
-                sub_text: " 차는 당연히 성능이지!",
-                result_main_text: "필요한 건 다 갖춘 캐스퍼 일렉트릭",
-                result_sub_text: "전기차 평균보다 훨씨니 저렴한 캐스퍼 일렉트릭!",
-                image_url: "left_image.png",
-            },
-        ]);
-    }, [selectedRush]);
-
-    const data = applicantList.map((applicant, idx) => {
-        const selectedOptionIdx = parseInt(applicant.balance_game_choice) - 1;
-        return [
-            idx + 1,
-            applicant.phone_number,
-            idx + 1,
-            applicant.created_at,
-            `옵션 ${selectedOptionIdx + 1} : ${selectionList[selectedOptionIdx].main_text}`,
-        ];
-    });
-
-    return (
-        <div className="w-[1560px] flex flex-col mt-10 gap-4">
-            <div className="flex items-center gap-4">
-                <Dropdown
-                    options={rushList.map((rush) => rush.event_date)}
-                    selectedIdx={selectedRush}
-                    handleClickOption={(idx) => setSelectedRush(idx)}
-                />
-                <p className="h-body-1-medium">선착순 참여자 리스트 {applicantList.length} 명</p>
-                <Button buttonSize="sm">당첨자 수만 보기 ON</Button>
-            </div>
-
-            <Table headers={APPLICANT_LIST_HEADER} data={data} />
-        </div>
-    );
-}

From 0f5bb4108c655946182c1473f5ad31130e01a1b6 Mon Sep 17 00:00:00 2001
From: jhj2713 <juhyojeong58@gmail.com>
Date: Mon, 12 Aug 2024 11:02:43 +0900
Subject: [PATCH 10/11] =?UTF-8?q?fix:=20=EB=B9=8C=EB=93=9C=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/apis/lotteryAPI.ts      | 6 ++++--
 admin/src/pages/Lottery/index.tsx | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/admin/src/apis/lotteryAPI.ts b/admin/src/apis/lotteryAPI.ts
index 3cef3109..e01b71fa 100644
--- a/admin/src/apis/lotteryAPI.ts
+++ b/admin/src/apis/lotteryAPI.ts
@@ -21,8 +21,10 @@ export const LotteryAPI = {
                 resolve([
                     {
                         lotteryEventId: 1,
-                        startDate: "2024-07-26 00:00",
-                        endDate: "2024-08-25 23:59",
+                        startDate: "2024-07-26",
+                        startTime: "00:00",
+                        endDate: "2024-08-25",
+                        endTime: "23:59",
                         appliedCount: 1000000,
                         winnerCount: 363,
                     },
diff --git a/admin/src/pages/Lottery/index.tsx b/admin/src/pages/Lottery/index.tsx
index e31948cc..af8f32e8 100644
--- a/admin/src/pages/Lottery/index.tsx
+++ b/admin/src/pages/Lottery/index.tsx
@@ -6,18 +6,20 @@ import TabHeader from "@/components/TabHeader";
 import Table from "@/components/Table";
 import TimePicker from "@/components/TimePicker";
 import { LOTTERY_HEADER } from "@/constants/lottery";
-import { LotteryType } from "@/types/lottery";
+import { LotteryEventType } from "@/types/lottery";
 
 export default function Lottery() {
     const navigate = useNavigate();
 
-    const [lottery, setLottery] = useState<LotteryType>({} as LotteryType);
+    const [lottery, setLottery] = useState<LotteryEventType>({} as LotteryEventType);
 
     useEffect(() => {
         const data = {
             lotteryEventId: 1,
-            startDate: "2024-07-26 00:00",
+            startDate: "2024-07-26",
+            startTime: "00:00",
             endDate: "2024-08-25 23:59",
+            endTime: "23:59",
             appliedCount: 1000000,
             winnerCount: 363,
         };

From 86b3cfb5f56042acc6950acf6eceb3e49d214c9f Mon Sep 17 00:00:00 2001
From: jhj2713 <juhyojeong58@gmail.com>
Date: Mon, 12 Aug 2024 11:18:51 +0900
Subject: [PATCH 11/11] =?UTF-8?q?chore:=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/apis/lotteryAPI.ts                |  6 +++---
 admin/src/apis/rushAPI.ts                   |  2 ++
 admin/src/hooks/useInfiniteFetch.ts         |  4 ++++
 admin/src/pages/Lottery/index.tsx           | 22 ++++++++++-----------
 admin/src/pages/LotteryWinner/index.tsx     |  2 +-
 admin/src/pages/LotteryWinnerList/index.tsx |  2 +-
 admin/src/pages/RushWinnerList/index.tsx    |  5 ++++-
 admin/src/types/common.ts                   |  1 +
 admin/src/types/lotteryApi.ts               |  4 ----
 9 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/admin/src/apis/lotteryAPI.ts b/admin/src/apis/lotteryAPI.ts
index e01b71fa..c716da82 100644
--- a/admin/src/apis/lotteryAPI.ts
+++ b/admin/src/apis/lotteryAPI.ts
@@ -4,7 +4,6 @@ import {
     GetLotteryResponse,
     GetLotteryWinnerParams,
     GetLotteryWinnerResponse,
-    PostLotteryWinnerParams,
     PostLotteryWinnerResponse,
 } from "@/types/lotteryApi";
 import { fetchWithTimeout } from "@/utils/fetchWithTimeout";
@@ -40,10 +39,10 @@ export const LotteryAPI = {
             throw error;
         }
     },
-    async postLotteryWinner({ id }: PostLotteryWinnerParams): Promise<PostLotteryWinnerResponse> {
+    async postLotteryWinner(): Promise<PostLotteryWinnerResponse> {
         try {
             return new Promise((resolve) => resolve({ message: "요청에 성공하였습니다." }));
-            const response = await fetchWithTimeout(`${baseURL}/${id}/winner`, {
+            const response = await fetchWithTimeout(`${baseURL}/winner`, {
                 method: "POST",
                 headers: headers,
             });
@@ -86,6 +85,7 @@ export const LotteryAPI = {
                         },
                     ],
                     isLastPage: false,
+                    totalParticipants: 10000,
                 })
             );
             const response = await fetchWithTimeout(
diff --git a/admin/src/apis/rushAPI.ts b/admin/src/apis/rushAPI.ts
index b66f5ba2..34466536 100644
--- a/admin/src/apis/rushAPI.ts
+++ b/admin/src/apis/rushAPI.ts
@@ -47,6 +47,7 @@ export const RushAPI = {
                         },
                     ],
                     isLastPage: false,
+                    totalParticipants: 10000,
                 })
             );
             const response = await fetchWithTimeout(
@@ -95,6 +96,7 @@ export const RushAPI = {
                         },
                     ],
                     isLastPage: false,
+                    totalParticipants: 10000,
                 })
             );
             const response = await fetchWithTimeout(
diff --git a/admin/src/hooks/useInfiniteFetch.ts b/admin/src/hooks/useInfiniteFetch.ts
index 1e2b023a..57b86809 100644
--- a/admin/src/hooks/useInfiniteFetch.ts
+++ b/admin/src/hooks/useInfiniteFetch.ts
@@ -10,6 +10,7 @@ interface UseInfiniteFetchProps<R> {
 
 interface InfiniteScrollData<T> {
     data: T[];
+    totalLength: number;
     fetchNextPage: () => void;
     refetch: () => void;
     hasNextPage: boolean;
@@ -29,6 +30,7 @@ export default function useInfiniteFetch<T>({
     const [isSuccess, setIsSuccess] = useState<boolean>(false);
     const [isError, setIsError] = useState<boolean>(false);
     const [hasNextPage, setHasNextPage] = useState<boolean>(true);
+    const [totalLength, setTotalLength] = useState<number>(0);
 
     const fetchNextPage = useCallback(async () => {
         if (!hasNextPage || isLoading || currentPageParam === undefined) return;
@@ -41,6 +43,7 @@ export default function useInfiniteFetch<T>({
             setData([...data, ...lastPage.data]);
             setCurrentPageParam(nextPageParam);
             setHasNextPage(nextPageParam !== undefined);
+            setTotalLength(lastPage.totalParticipants);
             setIsSuccess(true);
         } catch (error) {
             setIsError(true);
@@ -63,6 +66,7 @@ export default function useInfiniteFetch<T>({
 
     return {
         data,
+        totalLength,
         fetchNextPage,
         refetch,
         hasNextPage,
diff --git a/admin/src/pages/Lottery/index.tsx b/admin/src/pages/Lottery/index.tsx
index af8f32e8..f4dabcfe 100644
--- a/admin/src/pages/Lottery/index.tsx
+++ b/admin/src/pages/Lottery/index.tsx
@@ -18,22 +18,13 @@ export default function Lottery() {
             lotteryEventId: 1,
             startDate: "2024-07-26",
             startTime: "00:00",
-            endDate: "2024-08-25 23:59",
+            endDate: "2024-08-25",
             endTime: "23:59",
             appliedCount: 1000000,
             winnerCount: 363,
         };
 
-        const [startDate, startTime] = data.startDate.split(" ");
-        const [endDate, endTime] = data.startDate.split(" ");
-
-        setLottery({
-            ...data,
-            startDate,
-            startTime,
-            endDate,
-            endTime,
-        });
+        setLottery(data);
     }, []);
 
     const handleChangeItem = (key: string, text: string | number) => {
@@ -88,7 +79,14 @@ export default function Lottery() {
                     <Button buttonSize="sm" onClick={() => navigate("/lottery/participant-list")}>
                         참여자 리스트 보러가기
                     </Button>
-                    <Button buttonSize="sm" onClick={() => navigate("/lottery/winner-list")}>
+                    <Button
+                        buttonSize="sm"
+                        onClick={() =>
+                            navigate("/lottery/winner-list", {
+                                state: { id: lottery.lotteryEventId },
+                            })
+                        }
+                    >
                         당첨자 보러가기
                     </Button>
                 </div>
diff --git a/admin/src/pages/LotteryWinner/index.tsx b/admin/src/pages/LotteryWinner/index.tsx
index 540fe7b4..82b9d972 100644
--- a/admin/src/pages/LotteryWinner/index.tsx
+++ b/admin/src/pages/LotteryWinner/index.tsx
@@ -16,7 +16,7 @@ export default function LotteryWinner() {
     const [giftCount, setGiftCount] = useState<number>(0);
 
     const { isSuccess: isSuccessPostLottery, fetchData: postLottery } =
-        useFetch<PostLotteryWinnerResponse>(() => LotteryAPI.postLotteryWinner({ id: lotteryId }));
+        useFetch<PostLotteryWinnerResponse>(() => LotteryAPI.postLotteryWinner());
 
     useEffect(() => {
         if (lottery.length !== 0) {
diff --git a/admin/src/pages/LotteryWinnerList/index.tsx b/admin/src/pages/LotteryWinnerList/index.tsx
index 32468d18..636c603f 100644
--- a/admin/src/pages/LotteryWinnerList/index.tsx
+++ b/admin/src/pages/LotteryWinnerList/index.tsx
@@ -111,7 +111,7 @@ export default function LotteryWinnerList() {
                             className="cursor-pointer"
                             onClick={() => navigate(-1)}
                         />
-                        <p className="h-body-1-medium">당첨자 추첨</p>
+                        <p className="h-body-1-medium">당첨자 리스트</p>
                     </div>
 
                     <div className="flex gap-2">
diff --git a/admin/src/pages/RushWinnerList/index.tsx b/admin/src/pages/RushWinnerList/index.tsx
index 2ac7a251..06ac7b51 100644
--- a/admin/src/pages/RushWinnerList/index.tsx
+++ b/admin/src/pages/RushWinnerList/index.tsx
@@ -26,6 +26,7 @@ export default function RushWinnerList() {
 
     const {
         data: participants,
+        totalLength: participantsLength,
         isSuccess: isSuccessGetRushParticipantList,
         fetchNextPage: getRushParticipantList,
         refetch: refetchRushParticipantList,
@@ -46,6 +47,7 @@ export default function RushWinnerList() {
     });
     const {
         data: winners,
+        totalLength: winnersLength,
         isSuccess: isSuccessGetRushWinnerList,
         fetchNextPage: getRushWinnerList,
         refetch: refetchRushWinnerList,
@@ -167,7 +169,8 @@ export default function RushWinnerList() {
                             onClick={() => navigate(-1)}
                         />
                         <p className="h-body-1-medium">
-                            선착순 참여자 리스트 {currentData.length} 명
+                            선착순 참여자 리스트{" "}
+                            {isWinnerToggle ? winnersLength : participantsLength} 명
                         </p>
                         <Button
                             buttonSize="sm"
diff --git a/admin/src/types/common.ts b/admin/src/types/common.ts
index e97ed4ad..ef8aee87 100644
--- a/admin/src/types/common.ts
+++ b/admin/src/types/common.ts
@@ -1,4 +1,5 @@
 export interface InfiniteListData<T> {
     data: T[];
     isLastPage: boolean;
+    totalParticipants: number;
 }
diff --git a/admin/src/types/lotteryApi.ts b/admin/src/types/lotteryApi.ts
index a5611bb7..72dac425 100644
--- a/admin/src/types/lotteryApi.ts
+++ b/admin/src/types/lotteryApi.ts
@@ -3,10 +3,6 @@ import { LotteryEventType, LotteryExpectationsType, LotteryWinnerType } from "./
 
 export type GetLotteryResponse = LotteryEventType[];
 
-export interface PostLotteryWinnerParams {
-    id: number;
-}
-
 export interface PostLotteryWinnerResponse {
     message: string;
 }