From d0711a8c3ac61bfb10d7a6b5b6e2ca445e960d14 Mon Sep 17 00:00:00 2001
From: jhj2713 <juhyojeong58@gmail.com>
Date: Mon, 12 Aug 2024 11:28:17 +0900
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20gitignore=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/.gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/admin/.gitignore b/admin/.gitignore
index a547bf36..3b0b4037 100644
--- a/admin/.gitignore
+++ b/admin/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env
\ No newline at end of file

From 8e7b167f3329bdf4930bc5c60303eecb3408e57b Mon Sep 17 00:00:00 2001
From: jhj2713 <juhyojeong58@gmail.com>
Date: Mon, 12 Aug 2024 11:51:12 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EC=B0=B8=EC=97=AC=EC=9E=90=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/apis/lotteryAPI.ts                  |  56 +++++++
 admin/src/constants/lottery.ts                |  19 +++
 admin/src/pages/Lottery/index.tsx             |   9 +-
 .../pages/LotteryParticipantList/index.tsx    | 143 ++++++++++++++++++
 admin/src/pages/LotteryWinnerList/index.tsx   |  11 +-
 admin/src/pages/RushWinnerList/index.tsx      |   5 +-
 admin/src/router.tsx                          |   5 +
 admin/src/types/lottery.ts                    |   5 +
 admin/src/types/lotteryApi.ts                 |   9 +-
 9 files changed, 249 insertions(+), 13 deletions(-)
 create mode 100644 admin/src/pages/LotteryParticipantList/index.tsx

diff --git a/admin/src/apis/lotteryAPI.ts b/admin/src/apis/lotteryAPI.ts
index c716da82..7a33a7df 100644
--- a/admin/src/apis/lotteryAPI.ts
+++ b/admin/src/apis/lotteryAPI.ts
@@ -1,6 +1,7 @@
 import {
     GetLotteryExpectationsParams,
     GetLotteryExpectationsResponse,
+    GetLotteryParticipantResponse,
     GetLotteryResponse,
     GetLotteryWinnerParams,
     GetLotteryWinnerResponse,
@@ -52,6 +53,61 @@ export const LotteryAPI = {
             throw error;
         }
     },
+    async getLotteryParticipant({
+        id,
+        size,
+        page,
+        phoneNumber,
+    }: GetLotteryWinnerParams): Promise<GetLotteryParticipantResponse> {
+        try {
+            return new Promise((resolve) =>
+                resolve({
+                    data: [
+                        {
+                            id: 1,
+                            phoneNumber: "010-1111-2222",
+                            linkClickedCounts: 1,
+                            expectation: 1,
+                            appliedCount: 3,
+                            createdAt: "2024-08-12T02:10:37.279369",
+                            updatedAt: "2024-08-12T02:13:48.390954",
+                        },
+                        {
+                            id: 2,
+                            phoneNumber: "010-1111-2223",
+                            linkClickedCounts: 1,
+                            expectation: 1,
+                            appliedCount: 3,
+                            createdAt: "2024-08-12T02:10:37.279369",
+                            updatedAt: "2024-08-12T02:13:48.390954",
+                        },
+                        {
+                            id: 3,
+                            phoneNumber: "010-1111-2224",
+                            linkClickedCounts: 1,
+                            expectation: 1,
+                            appliedCount: 3,
+                            createdAt: "2024-08-12T02:10:37.279369",
+                            updatedAt: "2024-08-12T02:13:48.390954",
+                        },
+                    ],
+                    isLastPage: true,
+                    totalParticipants: 10000,
+                })
+            );
+            const response = await fetchWithTimeout(
+                `${baseURL}/${id}/participants?size=${size}&page=${page}&number=${phoneNumber}`,
+                {
+                    method: "GET",
+                    headers: headers,
+                }
+            );
+            return response.json();
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
     async getLotteryWinner({
         id,
         size,
diff --git a/admin/src/constants/lottery.ts b/admin/src/constants/lottery.ts
index af72f0be..5b24689c 100644
--- a/admin/src/constants/lottery.ts
+++ b/admin/src/constants/lottery.ts
@@ -7,3 +7,22 @@ export const LOTTERY_HEADER = [
     "추첨 당첨 인원 수",
     "진행 상태",
 ];
+
+export const LOTTERY_WINNER_HEADER = [
+    "등수",
+    "ID",
+    "전화번호",
+    "공유 링크 클릭 횟수",
+    "기대평 작성 여부",
+    "총 응모 횟수",
+];
+export const LOTTERY_EXPECTATIONS_HEADER = ["캐스퍼 ID", "기대평"];
+export const LOTTERY_PARTICIPANT_HEADER = [
+    "ID",
+    "생성 날짜",
+    "생성 시간",
+    "전화 번호",
+    "공유 링크 클릭 횟수",
+    "기대평 작성 여부",
+    "총 응모 횟수",
+];
diff --git a/admin/src/pages/Lottery/index.tsx b/admin/src/pages/Lottery/index.tsx
index f4dabcfe..90856ae8 100644
--- a/admin/src/pages/Lottery/index.tsx
+++ b/admin/src/pages/Lottery/index.tsx
@@ -76,7 +76,14 @@ export default function Lottery() {
                 <Table headers={LOTTERY_HEADER} data={getLotteryData()} height="auto" />
 
                 <div className="self-end flex gap-4">
-                    <Button buttonSize="sm" onClick={() => navigate("/lottery/participant-list")}>
+                    <Button
+                        buttonSize="sm"
+                        onClick={() =>
+                            navigate("/lottery/participant-list", {
+                                state: { id: lottery.lotteryEventId },
+                            })
+                        }
+                    >
                         참여자 리스트 보러가기
                     </Button>
                     <Button
diff --git a/admin/src/pages/LotteryParticipantList/index.tsx b/admin/src/pages/LotteryParticipantList/index.tsx
new file mode 100644
index 00000000..722d5581
--- /dev/null
+++ b/admin/src/pages/LotteryParticipantList/index.tsx
@@ -0,0 +1,143 @@
+import { useMemo, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { LotteryAPI } from "@/apis/lotteryAPI";
+import Button from "@/components/Button";
+import TabHeader from "@/components/TabHeader";
+import Table from "@/components/Table";
+import { LOTTERY_EXPECTATIONS_HEADER, LOTTERY_PARTICIPANT_HEADER } from "@/constants/lottery";
+import useInfiniteFetch from "@/hooks/useInfiniteFetch";
+import useIntersectionObserver from "@/hooks/useIntersectionObserver";
+import useModal from "@/hooks/useModal";
+import { LotteryExpectationsType } from "@/types/lottery";
+import { GetLotteryParticipantResponse } from "@/types/lotteryApi";
+
+export default function LotteryParticipantList() {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const lotteryId = location.state.id;
+
+    const { handleOpenModal, ModalComponent } = useModal();
+    const [selectedParticipant, setSelectedParticipant] = useState<LotteryExpectationsType[]>([]);
+    const phoneNumberRef = useRef<string>("");
+    const phoneNumberInputRef = useRef<HTMLInputElement>(null);
+
+    const {
+        data: participantInfo,
+        totalLength: participantLength,
+        isSuccess: isSuccessGetParticipant,
+        fetchNextPage: getParticipantInfo,
+        refetch: refetchParticipantInfo,
+    } = useInfiniteFetch({
+        fetch: (pageParam: number) =>
+            LotteryAPI.getLotteryParticipant({
+                id: lotteryId,
+                size: 10,
+                page: pageParam,
+                phoneNumber: phoneNumberRef.current,
+            }),
+        initialPageParam: 1,
+        getNextPageParam: (currentPageParam: number, lastPage: GetLotteryParticipantResponse) => {
+            return lastPage.isLastPage ? undefined : currentPageParam + 1;
+        },
+    });
+
+    const tableContainerRef = useRef<HTMLDivElement>(null);
+    const { targetRef } = useIntersectionObserver<HTMLTableRowElement>({
+        onIntersect: getParticipantInfo,
+        enabled: isSuccessGetParticipant,
+    });
+
+    const handleRefetch = () => {
+        phoneNumberRef.current = phoneNumberInputRef.current?.value || "";
+        refetchParticipantInfo();
+    };
+
+    const handleLottery = () => {
+        navigate("/lottery/winner");
+    };
+
+    const handleClickExpectation = async (participantId: number) => {
+        handleOpenModal();
+
+        const data = await LotteryAPI.getLotteryExpectations({
+            lotteryId,
+            participantId: participantId,
+        });
+        setSelectedParticipant(data);
+    };
+
+    const expectations = selectedParticipant.map((participant) => [
+        participant.casperId,
+        participant.expectation,
+    ]);
+
+    const participantList = useMemo(
+        () =>
+            participantInfo.map((participant) => [
+                participant.id,
+                participant.createdAt,
+                participant.createdAt,
+                participant.phoneNumber,
+                participant.linkClickedCounts,
+                <div className="flex justify-between">
+                    <span>{participant.expectation}</span>
+                    <span
+                        className="cursor-pointer"
+                        onClick={() => handleClickExpectation(participant.id)}
+                    >
+                        기대평 보기
+                    </span>
+                </div>,
+                participant.appliedCount,
+            ]),
+        [participantInfo]
+    );
+
+    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 w-full justify-between">
+                    <div className="flex items-center gap-2">
+                        <img
+                            alt="뒤로 가기 버튼"
+                            src="/assets/icons/left-arrow.svg"
+                            className="cursor-pointer"
+                            onClick={() => navigate(-1)}
+                        />
+                        <p className="h-body-1-medium">
+                            전체 참여자 리스트 {participantLength.toLocaleString("en-US")} 명
+                        </p>
+                    </div>
+
+                    <div className="flex gap-2">
+                        <input
+                            ref={phoneNumberInputRef}
+                            className="border border-neutral-950 rounded-lg text-neutral-950 h-body-1-medium"
+                        />
+                        <Button buttonSize="sm" onClick={handleRefetch}>
+                            검색
+                        </Button>
+                    </div>
+                </div>
+
+                <Table
+                    ref={tableContainerRef}
+                    headers={LOTTERY_PARTICIPANT_HEADER}
+                    data={participantList}
+                    dataLastItem={targetRef}
+                />
+
+                <Button buttonSize="lg" onClick={handleLottery}>
+                    당첨자 다시 추첨하기
+                </Button>
+            </div>
+
+            <ModalComponent>
+                <Table headers={LOTTERY_EXPECTATIONS_HEADER} data={expectations} height="auto" />
+            </ModalComponent>
+        </div>
+    );
+}
diff --git a/admin/src/pages/LotteryWinnerList/index.tsx b/admin/src/pages/LotteryWinnerList/index.tsx
index 636c603f..89fe747c 100644
--- a/admin/src/pages/LotteryWinnerList/index.tsx
+++ b/admin/src/pages/LotteryWinnerList/index.tsx
@@ -4,22 +4,13 @@ import { LotteryAPI } from "@/apis/lotteryAPI";
 import Button from "@/components/Button";
 import TabHeader from "@/components/TabHeader";
 import Table from "@/components/Table";
+import { LOTTERY_EXPECTATIONS_HEADER, LOTTERY_WINNER_HEADER } from "@/constants/lottery";
 import useInfiniteFetch from "@/hooks/useInfiniteFetch";
 import useIntersectionObserver from "@/hooks/useIntersectionObserver";
 import useModal from "@/hooks/useModal";
 import { LotteryExpectationsType } from "@/types/lottery";
 import { GetLotteryWinnerResponse } from "@/types/lotteryApi";
 
-const LOTTERY_WINNER_HEADER = [
-    "등수",
-    "ID",
-    "전화번호",
-    "공유 링크 클릭 횟수",
-    "기대평 작성 여부",
-    "총 응모 횟수",
-];
-const LOTTERY_EXPECTATIONS_HEADER = ["캐스퍼 ID", "기대평"];
-
 export default function LotteryWinnerList() {
     const location = useLocation();
     const navigate = useNavigate();
diff --git a/admin/src/pages/RushWinnerList/index.tsx b/admin/src/pages/RushWinnerList/index.tsx
index 06ac7b51..538a5153 100644
--- a/admin/src/pages/RushWinnerList/index.tsx
+++ b/admin/src/pages/RushWinnerList/index.tsx
@@ -170,7 +170,10 @@ export default function RushWinnerList() {
                         />
                         <p className="h-body-1-medium">
                             선착순 참여자 리스트{" "}
-                            {isWinnerToggle ? winnersLength : participantsLength} 명
+                            {(isWinnerToggle ? winnersLength : participantsLength).toLocaleString(
+                                "en-US"
+                            )}{" "}
+                            명
                         </p>
                         <Button
                             buttonSize="sm"
diff --git a/admin/src/router.tsx b/admin/src/router.tsx
index 1c9291dc..83b5f64f 100644
--- a/admin/src/router.tsx
+++ b/admin/src/router.tsx
@@ -5,6 +5,7 @@ import { ProtectedRoute, UnProtectedRoute } from "./components/Route";
 import RushLayout from "./features/Rush/Layout";
 import Login from "./pages/Login";
 import Lottery from "./pages/Lottery";
+import LotteryParticipantList from "./pages/LotteryParticipantList";
 import LotteryWinner from "./pages/LotteryWinner";
 import LotteryWinnerList from "./pages/LotteryWinnerList";
 import Rush from "./pages/Rush";
@@ -63,6 +64,10 @@ export const router = createBrowserRouter([
                                 element: <LotteryWinner />,
                                 loader: LotteryAPI.getLottery,
                             },
+                            {
+                                path: "participant-list",
+                                element: <LotteryParticipantList />,
+                            },
                             {
                                 path: "winner-list",
                                 element: <LotteryWinnerList />,
diff --git a/admin/src/types/lottery.ts b/admin/src/types/lottery.ts
index b4d31471..6a0561d3 100644
--- a/admin/src/types/lottery.ts
+++ b/admin/src/types/lottery.ts
@@ -20,3 +20,8 @@ export interface LotteryWinnerType {
     expectation: number;
     appliedCount: number;
 }
+
+export interface LotteryParticipantType extends LotteryWinnerType {
+    createdAt: string;
+    updatedAt: string;
+}
diff --git a/admin/src/types/lotteryApi.ts b/admin/src/types/lotteryApi.ts
index 72dac425..a069f972 100644
--- a/admin/src/types/lotteryApi.ts
+++ b/admin/src/types/lotteryApi.ts
@@ -1,5 +1,10 @@
 import { InfiniteListData } from "./common";
-import { LotteryEventType, LotteryExpectationsType, LotteryWinnerType } from "./lottery";
+import {
+    LotteryEventType,
+    LotteryExpectationsType,
+    LotteryParticipantType,
+    LotteryWinnerType,
+} from "./lottery";
 
 export type GetLotteryResponse = LotteryEventType[];
 
@@ -22,3 +27,5 @@ export interface GetLotteryExpectationsParams {
 export type GetLotteryExpectationsResponse = LotteryExpectationsType[];
 
 export type GetLotteryWinnerResponse = InfiniteListData<LotteryWinnerType>;
+
+export type GetLotteryParticipantResponse = InfiniteListData<LotteryParticipantType>;

From 01c2febc1c458b9c79b7587150ceff1e2110f70c Mon Sep 17 00:00:00 2001
From: jhj2713 <juhyojeong58@gmail.com>
Date: Mon, 12 Aug 2024 11:56:08 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=EB=B2=84=ED=8A=BC=20=EC=9D=B8?=
 =?UTF-8?q?=ED=84=B0=EB=9E=99=EC=85=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/pages/LotteryParticipantList/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/admin/src/pages/LotteryParticipantList/index.tsx b/admin/src/pages/LotteryParticipantList/index.tsx
index 722d5581..8daf293f 100644
--- a/admin/src/pages/LotteryParticipantList/index.tsx
+++ b/admin/src/pages/LotteryParticipantList/index.tsx
@@ -53,8 +53,8 @@ export default function LotteryParticipantList() {
         refetchParticipantInfo();
     };
 
-    const handleLottery = () => {
-        navigate("/lottery/winner");
+    const handleLotteryWinner = () => {
+        navigate("/lottery/winner-list", { state: { id: lotteryId } });
     };
 
     const handleClickExpectation = async (participantId: number) => {
@@ -130,8 +130,8 @@ export default function LotteryParticipantList() {
                     dataLastItem={targetRef}
                 />
 
-                <Button buttonSize="lg" onClick={handleLottery}>
-                    당첨자 다시 추첨하기
+                <Button buttonSize="lg" onClick={handleLotteryWinner}>
+                    당첨자 보러가기
                 </Button>
             </div>