[Feat] 어드민 - API 연동

admin/src/apis/lotteryAPI.ts

@@ -5,6 +5,8 @@ import {
     GetLotteryWinnerParams,
     GetLotteryWinnerResponse,
     PostLotteryWinnerResponse,
+    PutLotteryParams,
+    PutLotteryResponse,
 } from "@/types/lotteryApi";
 import { fetchWithTimeout } from "@/utils/fetchWithTimeout";
 
@@ -19,13 +21,13 @@ export const LotteryAPI = {
             return new Promise((resolve) =>
                 resolve([
                     {
-                        lotteryEventId: 1,
                         startDate: "2024-07-26",
-                        startTime: "00:00",
+                        startTime: "00:00:00",
                         endDate: "2024-08-25",
-                        endTime: "23:59",
+                        endTime: "23:59:00",
                         appliedCount: 1000000,
                         winnerCount: 363,
+                        status: "BEFORE",
                     },
                 ])
             );
@@ -39,6 +41,28 @@ export const LotteryAPI = {
             throw error;
         }
     },
+    async putLottery(body: PutLotteryParams): Promise<PutLotteryResponse> {
+        try {
+            return new Promise((resolve) =>
+                resolve({
+                    startDate: "2024-08-26",
+                    startTime: "00:00:00",
+                    endDate: "2024-09-25 23:59",
+                    endTime: "00:00:00",
+                    winnerCount: 363,
+                })
+            );
+            const response = await fetchWithTimeout(`${baseURL}`, {
+                method: "PUT",
+                headers: headers,
+                body: JSON.stringify(body),
+            });
+            return response.json();
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
     async postLotteryWinner(): Promise<PostLotteryWinnerResponse> {
         try {
             return new Promise((resolve) => resolve({ message: "요청에 성공하였습니다." }));
@@ -53,15 +77,14 @@ export const LotteryAPI = {
         }
     },
     async getLotteryWinner({
-        id,
         size,
         page,
         phoneNumber,
     }: GetLotteryWinnerParams): Promise<GetLotteryWinnerResponse> {
         try {
             return new Promise((resolve) =>
                 resolve({
-                    data: [
+                    participants: [
                         {
                             id: 1,
                             phoneNumber: "010-1111-2222",
@@ -89,7 +112,7 @@ export const LotteryAPI = {
                 })
             );
             const response = await fetchWithTimeout(
-                `${baseURL}/${id}/winner?size=${size}&page=${page}&number=${phoneNumber}`,
+                `${baseURL}/winner?size=${size}&page=${page}&number=${phoneNumber}`,
                 {
                     method: "GET",
                     headers: headers,
@@ -102,7 +125,6 @@ export const LotteryAPI = {
         }
     },
     async getLotteryExpectations({
-        lotteryId,
         participantId,
     }: GetLotteryExpectationsParams): Promise<GetLotteryExpectationsResponse> {
         try {
@@ -123,7 +145,7 @@ export const LotteryAPI = {
                 ])
             );
             const response = await fetchWithTimeout(
-                `${baseURL}/${lotteryId}/participants/${participantId}/expectations`,
+                `${baseURL}/participants/${participantId}/expectations`,
                 {
                     method: "GET",
                     headers: headers,

admin/src/apis/rushAPI.ts

@@ -1,9 +1,12 @@
 import {
+    GetRushEventResponse,
     GetRushOptionsParams,
     GetRushOptionsResponse,
     GetRushParticipantListParams,
     GetRushParticipantListResponse,
     GetRushWinnerListParams,
+    PutRushEventParams,
+    PutRushEventResponse,
 } from "@/types/rushApi";
 import { fetchWithTimeout } from "@/utils/fetchWithTimeout";
 
@@ -13,6 +16,114 @@ const headers = {
 };
 
 export const RushAPI = {
+    async getRush(): Promise<GetRushEventResponse> {
+        try {
+            return new Promise((resolve) =>
+                resolve([
+                    {
+                        rushEventId: 1,
+                        eventDate: "2024-07-25",
+                        openTime: "20:00:00",
+                        closeTime: "20:10:00",
+                        winnerCount: 315,
+                        prizeImageUrl: "prize1.png",
+                        prizeDescription: "스타벅스 1만원 기프트카드",
+                        status: "BEFORE",
+                        leftOption: {
+                            rushOptionId: 1,
+                            mainText: "첫 차로 저렴한 차 사기",
+                            subText: "첫 차는 가성비가 짱이지!",
+                            resultMainText: "누구보다 가성비 갑인 캐스퍼 일렉트릭",
+                            resultSubText: "전기차 평균보다 훨씬 저렴한 캐스퍼 일렉트릭!",
+                            imageUrl: "left_image.png",
+                        },
+                        rightOption: {
+                            rushOptionId: 2,
+                            mainText: "첫 차로 성능 좋은 차 사기",
+                            subText: "차는 당연히 성능이지!",
+                            resultMainText: "필요한 건 다 갖춘 캐스퍼 일렉트릭",
+                            resultSubText: "전기차 평균보다 훨씬 저렴한 캐스퍼 일렉트릭!",
+                            imageUrl: "left_image.png",
+                        },
+                    },
+                    {
+                        rushEventId: 2,
+                        eventDate: "2024-07-26",
+                        openTime: "20:00:00",
+                        closeTime: "20:10:00",
+                        winnerCount: 315,
+                        prizeImageUrl: "prize2.png",
+                        prizeDescription: "올리브영 1만원 기프트카드",
+                        status: "DURING",
+                        leftOption: {
+                            rushOptionId: 1,
+                            mainText: "첫 차로 저렴한 차 사기",
+                            subText: "첫 차는 가성비가 짱이지!",
+                            resultMainText: "누구보다 가성비 갑인 캐스퍼 일렉트릭",
+                            resultSubText: "전기차 평균보다 훨씬 저렴한 캐스퍼 일렉트릭!",
+                            imageUrl: "left_image.png",
+                        },
+                        rightOption: {
+                            rushOptionId: 2,
+                            mainText: "첫 차로 성능 좋은 차 사기",
+                            subText: "차는 당연히 성능이지!",
+                            resultMainText: "필요한 건 다 갖춘 캐스퍼 일렉트릭",
+                            resultSubText: "전기차 평균보다 훨씬 저렴한 캐스퍼 일렉트릭!",
+                            imageUrl: "left_image.png",
+                        },
+                    },
+                    {
+                        rushEventId: 3,
+                        eventDate: "2024-07-27",
+                        openTime: "20:00:00",
+                        closeTime: "20:10:00",
+                        winnerCount: 315,
+                        prizeImageUrl: "prize3.png",
+                        prizeDescription: "배달의 민족 1만원 기프트카드",
+                        status: "AFTER",
+                        leftOption: {
+                            rushOptionId: 1,
+                            mainText: "첫 차로 저렴한 차 사기",
+                            subText: "첫 차는 가성비가 짱이지!",
+                            resultMainText: "누구보다 가성비 갑인 캐스퍼 일렉트릭",
+                            resultSubText: "전기차 평균보다 훨씬 저렴한 캐스퍼 일렉트릭!",
+                            imageUrl: "left_image.png",
+                        },
+                        rightOption: {
+                            rushOptionId: 2,
+                            mainText: "첫 차로 성능 좋은 차 사기",
+                            subText: "차는 당연히 성능이지!",
+                            resultMainText: "필요한 건 다 갖춘 캐스퍼 일렉트릭",
+                            resultSubText: "전기차 평균보다 훨씬 저렴한 캐스퍼 일렉트릭!",
+                            imageUrl: "left_image.png",
+                        },
+                    },
+                ])
+            );
+            const response = await fetchWithTimeout(`${baseURL}`, {
+                method: "GET",
+                headers: headers,
+            });
+            return response.json();
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
+    async putRush(body: PutRushEventParams): Promise<PutRushEventResponse> {
+        try {
+            return new Promise((resolve) => resolve([]));
+            const response = await fetchWithTimeout(`${baseURL}`, {
+                method: "PUT",
+                headers: headers,
+                body: JSON.stringify(body),
+            });
+            return response.json();
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
     async getRushParticipantList({
         id,
         phoneNumber,
@@ -23,7 +134,7 @@ export const RushAPI = {
         try {
             return new Promise((resolve) =>
                 resolve({
-                    data: [
+                    participants: [
                         {
                             id: 1,
                             phoneNumber: "010-1111-2222",
@@ -72,7 +183,7 @@ export const RushAPI = {
         try {
             return new Promise((resolve) =>
                 resolve({
-                    data: [
+                    participants: [
                         {
                             id: 1,
                             phoneNumber: "010-3843-6999",

admin/src/components/DatePicker/index.tsx

@@ -2,10 +2,11 @@ import { ChangeEvent } from "react";
 
 interface DatePickerProps {
     date: string;
+    disabled?: boolean;
     onChangeDate: (date: string) => void;
 }
 
-export default function DatePicker({ date, onChangeDate }: DatePickerProps) {
+export default function DatePicker({ date, disabled = false, onChangeDate }: DatePickerProps) {
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
         onChangeDate(e.target.value);
     };
@@ -17,6 +18,7 @@ export default function DatePicker({ date, onChangeDate }: DatePickerProps) {
             </div>
             <input
                 type="date"
+                disabled={disabled}
                 value={date}
                 onChange={handleChange}
                 className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5"

admin/src/components/TimePicker/index.tsx

@@ -2,10 +2,11 @@ import { ChangeEvent } from "react";
 
 interface TimePickerProps {
     time: string;
+    disabled?: boolean;
     onChangeTime: (time: string) => void;
 }
 
-export default function TimePicker({ time, onChangeTime }: TimePickerProps) {
+export default function TimePicker({ time, disabled = false, onChangeTime }: TimePickerProps) {
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
         /**
          * 시간-분 까지만 선택 가능
@@ -36,6 +37,7 @@ export default function TimePicker({ time, onChangeTime }: TimePickerProps) {
                 <input
                     type="time"
                     id="time"
+                    disabled={disabled}
                     className="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                     min="09:00"
                     max="18:00"

admin/src/components/Toast/index.tsx

@@ -0,0 +1,16 @@
+interface ToastProps {
+    message: string;
+    isVisible: boolean;
+}
+
+export default function Toast({ message, isVisible }: ToastProps) {
+    return (
+        <div
+            className={`fixed top-[88px] left-[50%] translate-x-[-50%] h-heading-4-bold bg-neutral-400 text-white px-6 py-4 rounded-lg transition-opacity ${
+                isVisible ? "opacity-100" : "opacity-0"
+            }`}
+        >
+            {message}
+        </div>
+    );
+}

admin/src/constants/common.ts

@@ -0,0 +1,11 @@
+export const EVENT_STATUS = {
+    BEFORE: "BEFORE",
+    DURING: "DURING",
+    AFTER: "AFTER",
+} as const;
+
+export const STATUS_MAP = {
+    [EVENT_STATUS.BEFORE]: "오픈 전",
+    [EVENT_STATUS.DURING]: "활성화",
+    [EVENT_STATUS.AFTER]: "종료",
+};

admin/src/constants/rush.ts

@@ -9,5 +9,9 @@ export const EVENT_LIST_HEADER = [
     "선착순 당첨 인원 수",
     "진행 상태",
     "참여자 리스트 보기",
-    "관리",
 ];
+
+export const QUERY_OPTION = {
+    OPTION: "option",
+    PRIZE: "prize",
+} as const;

admin/src/contexts/rushEventContext.tsx

@@ -4,16 +4,13 @@ import {
     RushEventAction,
     RushEventDispatchType,
     RushEventStateType,
-    RushPrizeType,
 } from "@/types/rush";
 
 export const RushEventStateContext = createContext<RushEventStateType | null>(null);
 export const RushEventDispatchContext = createContext<RushEventDispatchType | null>(null);
 
 const initialState: RushEventStateType = {
     rushList: [],
-    selectOptions: [],
-    prize: {} as RushPrizeType,
 };
 
 const casperCustomReducer = (
@@ -23,10 +20,6 @@ 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 };
-        case RUSH_ACTION.SET_PRIZE:
-            return { ...state, prize: action.payload };
         default:
             return state;
     }