Merge pull request #131 from softeerbootcamp4th/fix/CLAP-183

fix(CLAP-183): 선착순 이벤트 기간 노출 이슈
softeerbootcamp4th · Aug 26, 2024 · a3cbbc0 · a3cbbc0
2 parents 10a88c0 + 81ef26e
commit a3cbbc0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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) => (