From 96c316d121b6edf365b9981ba63f5baeec007291 Mon Sep 17 00:00:00 2001 From: hansoojeongsj Date: Fri, 24 Jan 2025 19:46:57 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=88=98=EC=A0=95=20(#268)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ClassInfoWrapper/index.tsx | 12 ++-- .../ReservationCompletion/index.css.ts | 31 --------- .../ReservationCompletion/index.tsx | 63 ------------------- src/routes/router.tsx | 5 -- src/routes/routesConfig.ts | 4 -- src/utils/dateCalculate.ts | 33 ---------- 6 files changed, 8 insertions(+), 140 deletions(-) delete mode 100644 src/pages/reservation/components/ReservationCompletion/index.css.ts delete mode 100644 src/pages/reservation/components/ReservationCompletion/index.tsx diff --git a/src/pages/class/components/ClassInfoWrapper/index.tsx b/src/pages/class/components/ClassInfoWrapper/index.tsx index 27d94b28..59f65e75 100644 --- a/src/pages/class/components/ClassInfoWrapper/index.tsx +++ b/src/pages/class/components/ClassInfoWrapper/index.tsx @@ -10,7 +10,6 @@ import Flex from '@/components/Flex'; import Head from '@/components/Head'; import Tag from '@/components/Tag'; import Text from '@/components/Text'; -import { calculateDday } from '@/utils/dateCalculate'; import { ROUTES_CONFIG } from '@/routes/routesConfig'; import { genreMapping } from '@/constants/index'; import { IcThunderMain0424 } from '@/assets/svg'; @@ -27,12 +26,17 @@ const ClassInfoWrapper = ({ lessonData }: { lessonData: LessonDetailApiResponse price, maxReservationCount, reservationCount, - status, + remainingDays, } = lessonData; const translatedGenre = genreMapping[genre] || genre; - // 각 회차에 대해 D-Day 계산 - const dDay = status === 'EXPIRED' || status === 'OVER_BOOKED' ? '마감' : calculateDday(lessonRounds[0].startDateTime); + // D-DAY remaingDays로 통일 + const dDay = + remainingDays > 0 + ? `D-${remainingDays}` + : remainingDays === 0 + ? 'D-DAY' + : '마감'; // 남은 예약 가능 인원 계산 const remainingSeats = maxReservationCount - reservationCount; diff --git a/src/pages/reservation/components/ReservationCompletion/index.css.ts b/src/pages/reservation/components/ReservationCompletion/index.css.ts deleted file mode 100644 index a1d3565c..00000000 --- a/src/pages/reservation/components/ReservationCompletion/index.css.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; - -export const flexCustomStyle = style({ - margin: '4.8rem 0 2.8rem 0', -}); - -export const clearStyle = style({ - width: '24.4rem', - height: '24.4rem', - alignSelf: 'center', - marginTop: '6.7rem', -}); - -export const funnelContainerStyle = style({ - width: '100%', - height: '100vh', - padding: '6.4rem 2rem 15rem 2rem', -}); - -export const buttonContainerStyle = style({ - position: 'fixed', - bottom: '0', - width: '100%', - padding: '2.4rem 2rem', - backgroundColor: vars.colors.white, -}); - -export const buttonStyle = style({ - color: vars.colors.white, -}); diff --git a/src/pages/reservation/components/ReservationCompletion/index.tsx b/src/pages/reservation/components/ReservationCompletion/index.tsx deleted file mode 100644 index d90924f5..00000000 --- a/src/pages/reservation/components/ReservationCompletion/index.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { useNavigate } from 'react-router-dom'; -import { - buttonContainerStyle, - clearStyle, - flexCustomStyle, - funnelContainerStyle, - buttonStyle, -} from '@/pages/reservation/components/ReservationCompletion/index.css'; -import BoxButton from '@/components/BoxButton'; -import Flex from '@/components/Flex'; -import Head from '@/components/Head'; -import Header from '@/components/Header'; -import Text from '@/components/Text'; -import { ROUTES_CONFIG } from '@/routes/routesConfig'; -import { ClearGif } from '@/assets/gif'; - -const ReservationCompletion = () => { - const navigate = useNavigate(); - - return ( - <> - - { - navigate(ROUTES_CONFIG.home.path); - }} - /> - - - - - - 클래스 신청 완료!
- 함께 리듬 탈 준비 됐나요? - - - - - 신청 내역은 마이페이지의 - - - 수업 신청 내역에서 확인할 수 있어요 - - - - 완료 페이지 캐릭터 - - -
- { - navigate(ROUTES_CONFIG.mypageReservation.path); - }}> - - 신청 내역으로 이동 - - -
- - ); -}; - -export default ReservationCompletion; diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 964faa6c..7389741b 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -14,7 +14,6 @@ import MyPageReservation from '@/pages/mypage/mypageReservation'; import MyPageReservationDetail from '@/pages/mypage/mypageReservationDetail'; import Onboarding from '@/pages/onboarding'; import Reservation from '@/pages/reservation'; -import ReservationCompletion from '@/pages/reservation/components/ReservationCompletion'; import { CheckoutPage } from '@/pages/reservation/components/TossPayments/CheckOut/CheckOut'; import { FailPage } from '@/pages/reservation/components/TossPayments/Fail/Fail'; import { SuccessPage } from '@/pages/reservation/components/TossPayments/Success/Success'; @@ -54,10 +53,6 @@ export const router = createBrowserRouter([ path: ROUTES_CONFIG.reservation.path(':id'), element: , }, - { - path: ROUTES_CONFIG.reservationCompletion.path, - element: , - }, { path: ROUTES_CONFIG.mypageReservation.path, element: , diff --git a/src/routes/routesConfig.ts b/src/routes/routesConfig.ts index b74b3c78..5a2e0c54 100644 --- a/src/routes/routesConfig.ts +++ b/src/routes/routesConfig.ts @@ -31,10 +31,6 @@ export const ROUTES_CONFIG = { title: 'Reservation', path: (id: string) => `/reservation/${id}`, }, - reservationCompletion: { - title: 'reservationCompletion', - path: '/reservation/completion', - }, payments: { title: 'payments', path: '/reservation/payments', diff --git a/src/utils/dateCalculate.ts b/src/utils/dateCalculate.ts index 13a0665d..1af41d6a 100644 --- a/src/utils/dateCalculate.ts +++ b/src/utils/dateCalculate.ts @@ -36,36 +36,3 @@ export const formatSimpleDate = (dateString: string) => { const days = ['일', '월', '화', '수', '목', '금', '토']; return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 (${days[date.getDay()]})`; }; - -// D-day 계산 -export const calculateDday = (startDateTime: string): string => { - const now = new Date(); - const startDate = new Date(startDateTime); - - // 현재 날짜와 시작 날짜의 날짜 부분만 비교 - const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); - const startOfDay = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()); - - // 1. 시작 날짜가 오늘인 경우 - if (today.getTime() === startOfDay.getTime()) { - const differenceInMs = startDate.getTime() - now.getTime(); - if (differenceInMs > 0) { - return 'D-Day'; - } else { - return '마감'; - } - } - - // 2. 시작 날짜가 오늘이 아닌 경우 (D-1, D-2 계산) - const differenceInMs = startOfDay.getTime() - today.getTime(); - const oneDayInMs = 1000 * 60 * 60 * 24; // 하루를 밀리초로 계산 - - const remainingDays = Math.floor(differenceInMs / oneDayInMs); // 내림 처리로 정확한 남은 일 계산 - - if (remainingDays > 0) { - return `D-${remainingDays}`; - } - - // 3. 이미 지난 경우 - return '마감'; -};