Merge pull request #362 from Passtival/develop

축제 진행 중 요구사항 반영 배포

Author: jeonghoon11

src/pages/blind-match/blind-match.tsx

@@ -4,11 +4,11 @@ import Header from '@shared/components/header/header';
 import Tab from '@shared/components/tab/tab';
 
 import ApplyPage from './components/apply/apply';
+import { useCurrentDay } from './hooks/use-current-day';
 
 const BlindMatch = () => {
   const { day } = useParams<{ day: string }>();
-
-  const initialDay = day || '1';
+  const initialDay = useCurrentDay(day);
 
   return (
     <>

src/pages/blind-match/components/apply-after/closed.tsx

@@ -1,8 +1,9 @@
+import { APPLICATION_TIME_RANGE } from '@pages/blind-match/utils/time-format';
+
 import Button from '@shared/components/button/button';
 import Title from '@shared/components/title/title';
 
 import * as styles from './complete.css';
-import { APPLICATION_TIME_RANGE } from '../../constants/blind-match-time';
 
 interface CompleteProps {
   currentDay: string;

src/pages/blind-match/components/apply-after/complete.tsx

@@ -1,9 +1,10 @@
+import { APPLICATION_TIME_RANGE } from '@pages/blind-match/utils/time-format';
+
 import Button from '@shared/components/button/button';
 import Title from '@shared/components/title/title';
 import { IcSvgCaution } from '@shared/icons';
 
 import * as styles from './complete.css';
-import { APPLICATION_TIME_RANGE } from '../../constants/blind-match-time';
 
 interface CompleteProps {
   currentDay: string;

src/pages/blind-match/components/before-match/before-match.tsx

@@ -1,8 +1,9 @@
+import { APPLICATION_TIME_RANGE } from '@pages/blind-match/utils/time-format';
+
 import Button from '@shared/components/button/button';
 import Title from '@shared/components/title/title';
 
 import * as styles from './before-match.css';
-import { APPLICATION_TIME_RANGE } from '../../constants/blind-match-time';
 
 interface BeforeMatchProps {
   currentDay: string;

src/pages/blind-match/constants/blind-match-time.ts

@@ -20,15 +20,3 @@ export const DEADLINE_HOUR = 17;
 export const DEADLINE_MINUTE = 30;
 export const RESULTS_HOUR = 18;
 export const RESULTS_MINUTE = 0;
-
-/**
- * 시간 포맷팅 유틸리티 함수
- */
-export const formatTime = (hour: number, minute: number): string => {
-  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
-};
-
-/**
- * 신청 가능 시간 문자열
- */
-export const APPLICATION_TIME_RANGE = `[신청 가능 시간: ${formatTime(START_HOUR, START_MINUTE)} ~ ${formatTime(DEADLINE_HOUR, DEADLINE_MINUTE)}]`;

src/pages/blind-match/hooks/use-current-day.ts

@@ -0,0 +1,35 @@
+import {
+  EVENT_YEAR,
+  EVENT_MONTH,
+  EVENT_DAYS,
+} from '../constants/blind-match-time';
+
+/**
+ * 현재 날짜에 따라 적절한 일차를 결정하는 훅
+ * @param urlDay - URL 파라미터로 전달된 일차 값
+ * @returns 현재 날짜에 맞는 일차 문자열 ('1', '2', '3')
+ */
+export const useCurrentDay = (urlDay?: string) => {
+  const getCurrentDay = () => {
+    const now = new Date();
+    const currentDate = now.getDate();
+    const currentMonth = now.getMonth();
+    const currentYear = now.getFullYear();
+
+    // 이벤트 날짜와 비교
+    if (currentYear === EVENT_YEAR && currentMonth === EVENT_MONTH) {
+      if (currentDate === EVENT_DAYS.DAY_1) {
+        return '1';
+      } else if (currentDate === EVENT_DAYS.DAY_2) {
+        return '2';
+      } else if (currentDate === EVENT_DAYS.DAY_3) {
+        return '3';
+      }
+    }
+
+    // URL 파라미터가 있으면 우선 사용, 없으면 기본값 1
+    return urlDay || '1';
+  };
+
+  return getCurrentDay();
+};

src/pages/blind-match/utils/.gitkeep

@@ -0,0 +1,21 @@
+import {
+  START_HOUR,
+  START_MINUTE,
+  DEADLINE_HOUR,
+  DEADLINE_MINUTE,
+} from '../constants/blind-match-time';
+
+/**
+ * 시간 포맷팅 유틸리티 함수
+ * @param hour - 시간 (0-23)
+ * @param minute - 분 (0-59)
+ * @returns 포맷된 시간 문자열 (HH:MM)
+ */
+export const formatTime = (hour: number, minute: number): string => {
+  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+};
+
+/**
+ * 신청 가능 시간 문자열
+ */
+export const APPLICATION_TIME_RANGE = `[신청 가능 시간: ${formatTime(START_HOUR, START_MINUTE)} ~ ${formatTime(DEADLINE_HOUR, DEADLINE_MINUTE)}]`;

src/pages/blind-match/utils/time-format.ts

@@ -6,17 +6,17 @@ export const title = style({
   padding: '1.3rem 2.4rem 1rem 2.4rem',
 });
 
+export const carouselWrapper = style({
+  padding: '0 2.4rem',
+});
+
 export const container = style({
   display: 'flex',
+  paddingTop: '2.3rem',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
   gap: '3.3rem',
-  position: 'absolute',
-  top: 'calc(1rem)',
-  bottom: '0',
-  left: '0',
-  right: '0',
 });
 
 export const complete = style({

src/pages/ticket-complete/ticket-complete.css.ts

@@ -1,9 +1,13 @@
+import TicketCarousel from '@pages/ticket/components/carousel/carousel';
+import { useDateSelection } from '@pages/ticket/hooks/use-date-selection';
+
 import Header from '@shared/components/header/header';
 import Title from '@shared/components/title/title';
 
 import * as styles from './ticket-complete.css';
 
 const Complete = () => {
+  const { selectedDayNumber } = useDateSelection();
   return (
     <>
       <Header
@@ -17,6 +21,9 @@ const Complete = () => {
           subTitle="상품 당첨의 기회를 잡아보세요!"
         />
       </div>
+      <div className={styles.carouselWrapper}>
+        <TicketCarousel selectedDayNumber={selectedDayNumber} />
+      </div>
       <div className={styles.container}>
         <p className={styles.complete}>Lv.3까지 모두 응모 완료하였습니다.</p>
         <div className={styles.data}>