[Feat] 선착순 밸런스 게임 구현

client/src/apis/rushAPI.ts

@@ -0,0 +1,130 @@
+import {
+    GetRushBalanceResponse,
+    GetRushOptionResultResponse,
+    GetRushResultResponse,
+    GetRushUserParticipationStatusResponse,
+    GetTodayRushEventResponse,
+    GetTotalRushEventsResponse,
+    PostSelectedRushCardOptionResponse,
+} from "@/types/rushApi";
+
+const baseURL = `${import.meta.env.VITE_API_URL}/event/rush`;
+const headers = {
+    "Content-Type": "application/json",
+};
+
+export const RushAPI = {
+    async getRush(): Promise<GetTotalRushEventsResponse> {
+        try {
+            const response = await fetch(`${baseURL}`, {
+                method: "GET",
+                headers: headers,
+            });
+            return response.json();
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
+    async getRushUserParticipationStatus(
+        token: string
+    ): Promise<GetRushUserParticipationStatusResponse> {
+        try {
+            const response = await fetch(`${baseURL}/applied`, {
+                method: "GET",
+                headers: { ...headers, Authorization: `Bearer ${token}` },
+            });
+            return response.json();
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
+    async getTodayRushEvent(token: string): Promise<GetTodayRushEventResponse> {
+        try {
+            const response = await fetch(`${baseURL}/today`, {
+                method: "GET",
+                headers: { ...headers, Authorization: `Bearer ${token}` },
+            });
+            return response.json();
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
+    async postSelectedRushOptionApply(
+        token: string,
+        optionId: number
+    ): Promise<PostSelectedRushCardOptionResponse> {
+        try {
+            const response = await fetch(`${baseURL}/options/${optionId}/apply`, {
+                method: "POST",
+                headers: { ...headers, Authorization: `Bearer ${token}` },
+            });
+
+            if (response.status === 204 || response.status === 404) {
+                return response.status;
+            }
+
+            throw new Error(`Unexpected response status: ${response.status}`);
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
+    async getRushOptionResult(
+        token: string,
+        optionId: number
+    ): Promise<GetRushOptionResultResponse> {
+        try {
+            const response = await fetch(`${baseURL}/options/${optionId}/result`, {
+                method: "GET",
+                headers: { ...headers, Authorization: `Bearer ${token}` },
+            });
+            return response.json();
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
+    async getRushBalance(token: string): Promise<GetRushBalanceResponse> {
+        try {
+            const response = await fetch(`${baseURL}/balance`, {
+                method: "GET",
+                headers: { ...headers, Authorization: `Bearer ${token}` },
+            });
+            return response.json();
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
+    async getRushResult(token: string): Promise<GetRushResultResponse> {
+        try {
+            const response = await fetch(`${baseURL}/result`, {
+                method: "GET",
+                headers: { ...headers, Authorization: `Bearer ${token}` },
+            });
+            return response.json();
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
+    async getRushTodayEventTest(token: string): Promise<PostSelectedRushCardOptionResponse> {
+        try {
+            const response = await fetch(`${baseURL}/today/test`, {
+                method: "GET",
+                headers: { ...headers, Authorization: `Bearer ${token}` },
+            });
+            if (response.status === 204 || response.status === 404) {
+                return response.status;
+            }
+
+            throw new Error(`Unexpected response status: ${response.status}`);
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
+};

client/src/apis/totalAPI.ts

@@ -0,0 +1,21 @@
+import { GetTotalEventDateResponse } from "@/types/totalApi.ts";
+
+const baseURL = `${import.meta.env.VITE_API_URL}/event/total`;
+const headers = {
+    "Content-Type": "application/json",
+};
+
+export const TotalAPI = {
+    async getTotal(): Promise<GetTotalEventDateResponse> {
+        try {
+            const response = await fetch(`${baseURL}`, {
+                method: "GET",
+                headers: headers,
+            });
+            return response.json();
+        } catch (error) {
+            console.error("Error:", error);
+            throw error;
+        }
+    },
+};

client/src/features/Rush/Background.tsx → client/src/components/Background/index.tsx

@@ -15,7 +15,9 @@ export function Background({ children }: PropsWithChildren) {
             <div className="absolute top-0 right-[35px] w-[800px] h-[390px] rounded-[29px] overflow-hidden bg-n-white/[.16] z-5">
                 <div className="w-1/2 h-full float-left bg-gradient-green blur-[40px]" />
             </div>
-            {children}
+            <div className="flex flex-col gap-6 justify-center items-center w-[800px] h-[390px] bg-n-white rounded-[29px] relative z-20">
+                {children}
+            </div>
         </motion.div>
     );
 }

client/src/components/CTAButton/index.tsx

@@ -1,7 +1,7 @@
 import { VariantProps, cva } from "class-variance-authority";
 import { Link } from "react-router-dom";
 import "@/index.css";
-import ArrowIcon from "/public/assets/icons/arrow.svg?react";
+import ArrowRightIcon from "/public/assets/icons/arrow-line-right.svg?react";
 import ShareIcon from "/public/assets/icons/share.svg?react";
 
 const BUTTON_STATUS: Record<string, ButtonStatusType> = {
@@ -60,7 +60,7 @@ export default function CTAButton({
     const content = (
         <>
             {label}
-            {hasArrowIcon && <ArrowIcon stroke={strokeColor} />}
+            {hasArrowIcon && <ArrowRightIcon stroke={strokeColor} />}
             {hasShareIcon && <ShareIcon stroke={strokeColor} />}
         </>
     );

client/src/components/Category/index.tsx

@@ -3,14 +3,15 @@ import { cva } from "class-variance-authority";
 
 export interface CategoryProps {
     children: ReactNode;
-    type: "basic" | "limited";
+    type: "basic" | "limited" | "selected";
 }
 
 const categoryVariants = cva(`w-fit px-300 py-200 rounded-1000 text-n-white h-body-2-regular`, {
     variants: {
         type: {
             basic: "bg-n-neutral-500",
             limited: "bg-s-red",
+            selected: "bg-s-blue",
         },
     },
 });

client/src/components/Notice/index.tsx

@@ -1,13 +1,16 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { LotteryAPI } from "@/apis/lotteryAPI.ts";
+import { RushAPI } from "@/apis/rushAPI.ts";
+import { formatEventDate } from "@/utils/formatDate.ts";
 
-interface EventDetails {
+interface EventDateDetails {
     startDate: string;
     endDate: string;
-    days: number;
+    activePeriod: number;
 }
 
-interface EventData {
-    [key: string]: EventDetails;
+export interface EventDateData {
+    [key: string]: EventDateDetails;
 }
 
 interface SectionProps {
@@ -27,27 +30,50 @@ const Section: React.FC<SectionProps> = ({ title, items, indentedIndices = [] })
     </div>
 );
 
+const getEventsDateDetails = async (): Promise<{
+    rush: EventDateDetails;
+    lottery: EventDateDetails;
+}> => {
+    try {
+        const [rushData, lotteryData] = await Promise.all([
+            RushAPI.getRush(),
+            LotteryAPI.getLottery(),
+        ]);
+
+        const rushEventDetails: EventDateDetails = {
+            startDate: rushData.eventStartDate,
+            endDate: rushData.eventEndDate,
+            activePeriod: rushData.activePeriod,
+        };
+
+        const lotteryEventDetails: EventDateDetails = {
+            startDate: lotteryData.eventStartDate,
+            endDate: lotteryData.eventEndDate,
+            activePeriod: lotteryData.activePeriod,
+        };
+
+        return {
+            rush: lotteryEventDetails,
+            lottery: rushEventDetails,
+        };
+    } catch (error) {
+        console.error("Error: ", error);
+        return {
+            rush: { startDate: "", endDate: "", activePeriod: 0 },
+            lottery: { startDate: "", endDate: "", activePeriod: 0 },
+        };
+    }
+};
+
 export default function Notice() {
-    const eventDetails: EventData = {
-        // TODO: 임시 데이터 -> API로 변경 필요
-        badgeDraw: {
-            startDate: "2024.08.23.",
-            endDate: "2024.09.05.",
-            days: 14,
-        },
-        balanceGame: {
-            startDate: "2024.08.31.",
-            endDate: "2024.09.05.",
-            days: 6,
-        },
-    };
-    const formatEventItem = (eventName: string, eventKey: keyof EventData) => {
-        const event = eventDetails[eventKey];
-        if (event) {
-            return `${eventName} : ${event.startDate} ~ ${event.endDate} (${event.days}일)`;
-        }
-        return `${eventName} : 날짜를 불러오는 중입니다...`;
-    };
+    const [eventDateDetails, setEventDateDetails] = useState<EventDateData>({});
+
+    useEffect(() => {
+        (async () => {
+            const details = await getEventsDateDetails();
+            setEventDateDetails(details);
+        })();
+    }, []);
 
     return (
         <div className="w-full h-[756px] flex flex-col gap-y-5 bg-n-neutral-100 py-20 px-[180px] text-n-black snap-center">
@@ -56,8 +82,8 @@ export default function Notice() {
                 title="이벤트 참여"
                 items={[
                     "이벤트 기간",
-                    formatEventItem("캐스퍼봇 뱃지 추첨 이벤트", "badgeDraw"),
-                    formatEventItem("선착순 밸런스 게임 이벤트", "balanceGame"),
+                    formatEventDate("캐스퍼봇 뱃지 추첨 이벤트", "rush", eventDateDetails),
+                    formatEventDate("선착순 밸런스 게임 이벤트", "lottery", eventDateDetails),
                     "선착순 밸런스 게임 이벤트는 이벤트 기간 내 매일 하루에 한 번씩, 기간 내 최대 6번 참여 가능합니다.",
                     "이벤트 참여 시 당첨자 연락을 위해 전화번호 기재와 개인정보 수집 동의, 마케팅 정보 수신 동의가 필수로 요구됩니다.",
                     "본 이벤트에서 제작해주신 캐스퍼봇 이미지는 추후 마케팅에 이용될 수 있습니다.",