From 81ef26e43c7f24c2efbcf531bb085390768d4916 Mon Sep 17 00:00:00 2001
From: DaeWon9 <qkreodnjs97@naver.com>
Date: Mon, 26 Aug 2024 11:24:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=84=A0=EC=B0=A9=EC=88=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=A7=84=ED=96=89=EA=B8=B0=EA=B0=84=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/service/src/common/utils/formatter.ts     | 14 ++++++++++++++
 .../nQuizEvent/NQuizTitle/NQuizTitle.tsx           |  8 ++++++--
 .../service/src/pages/NQuizEvent/NQuizEvent.tsx    | 10 ++++++++--
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/service/src/common/utils/formatter.ts b/packages/service/src/common/utils/formatter.ts
index e4355fd8..35f12adb 100644
--- a/packages/service/src/common/utils/formatter.ts
+++ b/packages/service/src/common/utils/formatter.ts
@@ -15,3 +15,17 @@ export const phoneNumberAutoFormat = (phoneNumber: string): string => {
     return number.replace(/(\d{3})(\d{3})(\d{1})/, "$1-$2-$3");
   return number.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
 };
+
+export const formatEventDate = (startDate: string, endDate: string) => {
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  const startYear = start.getFullYear();
+  const startMonth = String(start.getMonth() + 1).padStart(2, "0");
+  const startDay = String(start.getDate()).padStart(2, "0");
+
+  const endMonth = String(end.getMonth() + 1).padStart(2, "0");
+  const endDay = String(end.getDate()).padStart(2, "0");
+
+  return `${startYear}. ${startMonth}. ${startDay} ~ ${endMonth}. ${endDay}`;
+};
diff --git a/packages/service/src/components/nQuizEvent/NQuizTitle/NQuizTitle.tsx b/packages/service/src/components/nQuizEvent/NQuizTitle/NQuizTitle.tsx
index cf5bf778..98846de5 100644
--- a/packages/service/src/components/nQuizEvent/NQuizTitle/NQuizTitle.tsx
+++ b/packages/service/src/components/nQuizEvent/NQuizTitle/NQuizTitle.tsx
@@ -1,14 +1,18 @@
 import { ReactComponent as NLogo } from "public/images/gnb/n-logo.svg";
 import * as style from "./NQuizTitle.css";
 
-export const NQuizTitle = () => {
+interface NQuizTitleProps {
+  eventDate: string;
+}
+
+export const NQuizTitle = ({ eventDate }: NQuizTitleProps) => {
   return (
     <div css={style.containerStyle}>
       <div css={style.logoContainerStyle}>
         <NLogo css={style.logoStyle} />
         <span css={style.titleStyle}>퀴즈</span>
       </div>
-      <div css={style.dateStyle}>2024. 08. 19 ~ 08. 23</div>
+      <div css={style.dateStyle}>{eventDate}</div>
       <div css={style.contentContainerStyle}>
         <div css={style.contentTextStyle}>
           아반떼 N에 관한 정보를 알아보는 간단한 퀴즈를 맞혀보세요!
diff --git a/packages/service/src/pages/NQuizEvent/NQuizEvent.tsx b/packages/service/src/pages/NQuizEvent/NQuizEvent.tsx
index 0e75142c..2e375ae3 100644
--- a/packages/service/src/pages/NQuizEvent/NQuizEvent.tsx
+++ b/packages/service/src/pages/NQuizEvent/NQuizEvent.tsx
@@ -9,12 +9,13 @@ import { apiGetOrderEvent } from "@service/apis/orderEvent";
 import { IOrderEvent } from "@watermelon-clap/core/src/types";
 import * as style from "./NQuizEvent.css";
 import { Helmet } from "react-helmet";
+import { formatEventDate } from "@service/common/utils";
 
 export const NQuizEvent = () => {
   const { data: quizList } = useSuspenseQuery<IOrderEvent[]>({
     queryKey: ["orderEvent"],
     queryFn: () => apiGetOrderEvent(),
-    staleTime: Infinity,
+    staleTime: 0,
   });
 
   const openedQuiz = quizList.find(
@@ -29,6 +30,11 @@ export const NQuizEvent = () => {
     (quiz) => quiz.status === "UPCOMING",
   ) as IOrderEvent;
 
+  const startDate = quizList[0].startDate;
+  const endDate = quizList[quizList.length - 1].endDate;
+
+  const eventData = formatEventDate(startDate, endDate);
+
   return (
     <>
       <Helmet>
@@ -39,7 +45,7 @@ export const NQuizEvent = () => {
         <meta name="description" content="선착순 퀴즈 이벤트 페이지" />
       </Helmet>
       <div css={style.backgroundStyle}>
-        <NQuizTitle />
+        <NQuizTitle eventDate={eventData} />
 
         <div css={style.rewardWrapStyle}>
           {quizList.map((quiz, index) => (