🐛 [bug/fix] : 체험등록시 입력한 날짜와 체험상세페이지에서 보여지는 날짜가 다른 버그 발생

src/app/[activityId]/_components/MobileReserveModal.tsx

@@ -6,6 +6,7 @@ import activitiesApi from '@/api/activitiesApi';
 import { useActivityDetail } from '@/app/[activityId]/_hooks/queries/useActivityDetail';
 import { useAvailableSchedule } from '@/app/[activityId]/_hooks/queries/useAvailableSchedule';
 import {
+  getKSTDateString,
   getMonthNameEnglish,
   isSameMonth,
 } from '@/app/[activityId]/_utils/activityDetailDates';
@@ -110,7 +111,6 @@ export default function MobileReserveModal({
       >
         {step === 1 && (
           <>
-            {/* 날짜 선택 */}
             <div className='txt-18_B'>날짜</div>
             <div className='my-20 flex justify-between'>
               <p className='txt-16_B'>{getMonthNameEnglish(currentDate)}</p>
@@ -144,7 +144,6 @@ export default function MobileReserveModal({
               </div>
             </div>
 
-            {/* 캘린더 */}
             <div className='grid grid-cols-7 gap-10 text-center'>
               {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => (
                 <div key={i} className='txt-16_M font-semibold'>
@@ -153,7 +152,7 @@ export default function MobileReserveModal({
               ))}
               {dates.map((date) => {
                 const isCurrent = isSameMonth(currentDate, date);
-                const formatted = date.toISOString().split('T')[0];
+                const formatted = getKSTDateString(date);
                 const isAvailable = schedules.some((s) => s.date === formatted);
                 const isSelected = selectedDate === formatted;
 
@@ -179,7 +178,6 @@ export default function MobileReserveModal({
               })}
             </div>
 
-            {/* 시간 선택 */}
             <div className='mt-24'>
               <p className='txt-16_B mb-12 text-gray-950'>예약 가능한 시간</p>
               {selectedDate ? (
@@ -222,7 +220,6 @@ export default function MobileReserveModal({
 
         {step === 2 && (
           <>
-            {/* 인원 선택 */}
             <div className='flex flex-row gap-4'>
               <button onClick={() => setStep(1)}>
                 <Icon className='h-24 w-24' icon='ArrowLeft' />
@@ -263,7 +260,6 @@ export default function MobileReserveModal({
 
         {step === 3 && (
           <>
-            {/* 가격 및 시간 요약 */}
             {price !== null && (
               <div className='mt-24'>
                 <div className='mb-12 flex justify-between'>

src/app/[activityId]/_components/ReserveCalender.tsx

@@ -7,6 +7,7 @@ import { ApiError } from '@/api/types/auth';
 import { useActivityDetail } from '@/app/[activityId]/_hooks/queries/useActivityDetail';
 import { useAvailableSchedule } from '@/app/[activityId]/_hooks/queries/useAvailableSchedule';
 import {
+  getKSTDateString,
   getMonthNameEnglish,
   isSameMonth,
 } from '@/app/[activityId]/_utils/activityDetailDates';
@@ -52,7 +53,7 @@ export default function ReserveCalender({
     : [];
 
   const handleDateClick = (date: Date) => {
-    const formatted = date.toISOString().split('T')[0];
+    const formatted = getKSTDateString(date);
     const isAvailable = schedules.some((s) => s.date === formatted);
     if (!isAvailable) return;
     setSelectedDate(formatted);
@@ -146,7 +147,7 @@ export default function ReserveCalender({
         ))}
         {dates.map((date) => {
           const isCurrentMonth = isSameMonth(currentDate, date);
-          const formatted = date.toISOString().split('T')[0];
+          const formatted = getKSTDateString(date);
           const isAvailable = schedules.some((s) => s.date === formatted);
           return (
             <div

src/app/[activityId]/_components/TabletReserveModal.tsx

@@ -6,6 +6,7 @@ import activitiesApi from '@/api/activitiesApi';
 import { useActivityDetail } from '@/app/[activityId]/_hooks/queries/useActivityDetail';
 import { useAvailableSchedule } from '@/app/[activityId]/_hooks/queries/useAvailableSchedule';
 import {
+  getKSTDateString,
   getMonthNameEnglish,
   isSameMonth,
 } from '@/app/[activityId]/_utils/activityDetailDates';
@@ -144,7 +145,7 @@ export default function TabletReserveModal({
                   ))}
                   {dates.map((date) => {
                     const isCurrent = isSameMonth(currentDate, date);
-                    const formatted = date.toISOString().split('T')[0];
+                    const formatted = getKSTDateString(date);
                     const isAvailable = schedules.some(
                       (s) => s.date === formatted,
                     );

src/app/[activityId]/_utils/activityDetailDates.ts

@@ -8,3 +8,9 @@ export const getMonthNameEnglish = (date: Date): string =>
 export const isSameMonth = (base: Date, target: Date) =>
   base.getFullYear() === target.getFullYear() &&
   base.getMonth() === target.getMonth();
+
+export const getKSTDateString = (date: Date) => {
+  const offset = 9 * 60 * 60 * 1000;
+  const kstDate = new Date(date.getTime() + offset);
+  return kstDate.toISOString().split('T')[0];
+};