feat: 전화번호 검색 로직 구현

softeerbootcamp4th · Aug 11, 2024 · 4532a44 · 4532a44
1 parent f8be524
commit 4532a44
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 38 deletions.
diff --git a/admin/src/apis/lotteryAPI.ts b/admin/src/apis/lotteryAPI.ts
@@ -55,6 +55,7 @@ export const LotteryAPI = {
         id,
         size,
         page,
+        phoneNumber,
     }: GetLotteryWinnerParams): Promise<GetLotteryWinnerResponse> {
         try {
             return new Promise((resolve) =>
@@ -82,11 +83,11 @@ export const LotteryAPI = {
                             appliedCount: 3,
                         },
                     ],
-                    isLastPage: true,
+                    isLastPage: false,
                 })
             );
             const response = await fetchWithTimeout(
-                `${baseURL}/${id}/winner?size=${size}&page=${page}`,
+                `${baseURL}/${id}/winner?size=${size}&page=${page}&number=${phoneNumber}`,
                 {
                     method: "GET",
                     headers: headers,

diff --git a/admin/src/components/Input/index.tsx b/admin/src/components/Input/index.tsx
@@ -1,32 +1,15 @@
 import { ComponentProps } from "react";
-import { cva } from "class-variance-authority";
 
 interface InputProps extends ComponentProps<"input"> {
     label?: string;
-    inputSize?: "lg" | "sm";
 }
 
-const InputVariants = cva(`border border-neutral-950 rounded-lg text-neutral-950 h-body-1-medium`, {
-    variants: {
-        inputSize: {
-            lg: "p-[16px] w-[360px]",
-            sm: "p-[8px] w-[240px]",
-        },
-    },
-});
-
-export default function Input({
-    label,
-    value,
-    onChange,
-    inputSize = "lg",
-    ...restProps
-}: InputProps) {
+export default function Input({ label, value, onChange, ...restProps }: InputProps) {
     return (
         <div className="flex items-center">
             {label && <p className="text-neutral-950 h-body-1-bold mx-[20px]">{label}</p>}
             <input
-                className={InputVariants({ inputSize })}
+                className="p-[16px] border border-neutral-950 rounded-lg text-neutral-950 w-[360px] h-body-1-medium"
                 value={value}
                 onChange={onChange}
                 {...restProps}

diff --git a/admin/src/pages/LotteryWinnerList/index.tsx b/admin/src/pages/LotteryWinnerList/index.tsx
@@ -28,14 +28,22 @@ export default function LotteryWinnerList() {
 
     const { handleOpenModal, ModalComponent } = useModal();
     const [selectedWinner, setSelectedWinner] = useState<LotteryExpectationsType[]>([]);
+    const phoneNumberRef = useRef<string>("");
+    const phoneNumberInputRef = useRef<HTMLInputElement>(null);
 
     const {
         data: winnerInfo,
         isSuccess: isSuccessGetLotteryWinner,
         fetchNextPage: getWinnerInfo,
+        refetch: refetchWinnerInfo,
     } = useInfiniteFetch({
         fetch: (pageParam: number) =>
-            LotteryAPI.getLotteryWinner({ id: lotteryId, size: 10, page: pageParam }),
+            LotteryAPI.getLotteryWinner({
+                id: lotteryId,
+                size: 10,
+                page: pageParam,
+                phoneNumber: phoneNumberRef.current,
+            }),
         initialPageParam: 1,
         getNextPageParam: (currentPageParam: number, lastPage: GetLotteryWinnerResponse) => {
             return lastPage.isLastPage ? undefined : currentPageParam + 1;
@@ -48,6 +56,11 @@ export default function LotteryWinnerList() {
         enabled: isSuccessGetLotteryWinner,
     });
 
+    const handleRefetch = () => {
+        phoneNumberRef.current = phoneNumberInputRef.current?.value || "";
+        refetchWinnerInfo();
+    };
+
     const handleLottery = () => {
         navigate("/lottery/winner");
     };
@@ -90,14 +103,26 @@ export default function LotteryWinnerList() {
             <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 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">당첨자 추첨</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

diff --git a/admin/src/pages/RushWinnerList/index.tsx b/admin/src/pages/RushWinnerList/index.tsx
@@ -3,7 +3,6 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { RushAPI } from "@/apis/rushAPI";
 import Button from "@/components/Button";
 import Dropdown from "@/components/Dropdown";
-import Input from "@/components/Input";
 import TabHeader from "@/components/TabHeader";
 import Table from "@/components/Table";
 import useFetch from "@/hooks/useFetch";
@@ -22,7 +21,8 @@ export default function RushWinnerList() {
     const [options, setOptions] = useState<RushOptionType[]>([]);
     const [selectedOptionIdx, setSelectedOptionIdx] = useState<number>(0);
 
-    const [phoneNumber, setPhoneNumber] = useState<string>("");
+    const phoneNumberRef = useRef<string>("");
+    const phoneNumberInputRef = useRef<HTMLInputElement>(null);
 
     const {
         data: participants,
@@ -36,7 +36,7 @@ export default function RushWinnerList() {
                 size: 10,
                 page: pageParam,
                 option: options[selectedOptionIdx].rushOptionId,
-                phoneNumber,
+                phoneNumber: phoneNumberRef.current,
             }),
         initialPageParam: 1,
         getNextPageParam: (currentPageParam: number, lastPage: GetRushParticipantListResponse) => {
@@ -55,7 +55,7 @@ export default function RushWinnerList() {
                 id: rushId,
                 size: 10,
                 page: pageParam,
-                phoneNumber,
+                phoneNumber: phoneNumberRef.current,
             }),
         initialPageParam: 1,
         getNextPageParam: (currentPageParam: number, lastPage: GetRushParticipantListResponse) => {
@@ -95,6 +95,8 @@ export default function RushWinnerList() {
     }, [selectedOptionIdx]);
 
     const handleSearchPhoneNumber = () => {
+        phoneNumberRef.current = phoneNumberInputRef.current?.value || "";
+
         if (isWinnerToggle) {
             refetchRushWinnerList();
         } else {
@@ -176,10 +178,9 @@ export default function RushWinnerList() {
                     </div>
 
                     <div className="flex gap-2">
-                        <Input
-                            inputSize="sm"
-                            value={phoneNumber}
-                            onChange={(e) => setPhoneNumber(e.target.value)}
+                        <input
+                            ref={phoneNumberInputRef}
+                            className="border border-neutral-950 rounded-lg text-neutral-950 h-body-1-medium"
                         />
                         <Button buttonSize="sm" onClick={handleSearchPhoneNumber}>
                             검색

diff --git a/admin/src/types/lotteryApi.ts b/admin/src/types/lotteryApi.ts
@@ -15,6 +15,7 @@ export interface GetLotteryWinnerParams {
     id: number;
     size: number;
     page: number;
+    phoneNumber?: string;
 }
 
 export interface GetLotteryExpectationsParams {