Merge branch 'dev'

Author: jyn

src/app/activities/[id]/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
+import { AxiosError } from 'axios';
 import Image from 'next/image';
-import { notFound, useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 
 import AddressWithMap from '@/features/activityId/components/map/address-with-map';
 import OwnerDropdown from '@/features/activityId/components/owner-drop-down';
@@ -13,30 +14,29 @@ import { useActivityIdQuery } from '@/features/activityId/libs/hooks/useActivity
 import LoadingSpinner from '@/shared/components/loading-spinner/loading-spinner';
 import StarImage from '@/shared/components/star';
 
-// TODO
-// 🐛 1.  calendar-for-form에서 클릭 시 id 저장하는 코드 제거하기 O
-// 3. isDesktop활용하여, 캘린더를 모달로 감싸서 사용 O
-// * mockData pageID = 5192
-
 const ActivityPage = () => {
   const { id } = useParams();
   const { data, isLoading, isError, error } = useActivityIdQuery(id);
-
-  const images = data?.subImages;
-
+  const router = useRouter();
   if (isError) {
-    console.error('에러 발생:', error);
-    if (error.message === 'Request failed with status code 404') {
-      notFound();
+    if (error instanceof AxiosError && error.response) {
+      const status = error.response.status;
+
+      if (status === 404 || status === 500) {
+        router.push('/not-found');
+      } else {
+        throw new Error(String(status));
+      }
     }
   }
 
-  if (isLoading) return <LoadingSpinner />;
+  if (isLoading || !data) return <LoadingSpinner />;
+
   return (
     <div className="flex-center flex-col p-[2.4rem]">
       <div>
         <div className="flex flex-col gap-[2rem] md:gap-[2.4rem] lg:flex-row lg:gap-[4rem]">
-          <SubImages images={images} />
+          <SubImages images={data?.subImages} />
           <div className="relative">
             {/* 타이틀 헤더 */}
             <header className="order-2 lg:w-[41rem]">

src/features/activities/components/activity-card.tsx

@@ -1,8 +1,8 @@
-import { Star } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import React from 'react';
 
+import StarImage from '@/shared/components/star';
 import { formatPrice } from '@/shared/libs/utils/formatPrice';
 import { Activity } from '@/shared/types/activity';
 
@@ -63,7 +63,7 @@ export const ActivityCard = ({
           </h3>
           {/* 별점과 리뷰 */}
           <div className="flex items-center gap-[0.2rem] md:gap-[0.3rem]">
-            <Star className="text-yellow h-[1.25rem] w-[1.25rem] md:h-[2rem] md:w-[2rem]" />
+            <StarImage extraClassName="size-[1.3rem] md:size-[2rem]" />
             <span className="text-[1.2rem] font-medium text-gray-950 md:text-[1.4rem]">
               {activity.rating}
             </span>

src/features/activity-registration/components/activity-registration-form.tsx

@@ -74,8 +74,6 @@ const ActivityRegistrationForm = () => {
   const router = useRouter();
 
   const onSubmit = async (data: FormData) => {
-    console.log('폼 제출 시작:', data); // 디버깅용
-
     // 모든 스케줄의 시간 유효성 검증
     const hasInvalidSchedules = data.schedules.some((schedule) => {
       const startIndex = TIME_OPTIONS.findIndex(
@@ -106,12 +104,9 @@ const ActivityRegistrationForm = () => {
       subImageUrls: data.subImages,
     };
 
-    console.log('API 데이터:', apiData); // 디버깅용
-
     // TanStack Query mutation 실행
     try {
       await registrationMutation.mutateAsync(apiData);
-      console.log('등록 성공!'); // 디버깅용
       toast.success('체험이 등록되었습니다!');
       router.push('/activities');
     } catch (error) {

src/features/activity-registration/libs/hooks/useRegistrationMutation.ts

@@ -12,7 +12,7 @@ export const useRegistrationMutation = () => {
     onSuccess: () => {
       // 성공 시 관련 쿼리들을 무효화하여 새로고침
       queryClient.invalidateQueries({ queryKey: ['activities'] });
-      queryClient.invalidateQueries({ queryKey: ['my-activities'] });
+      queryClient.invalidateQueries({ queryKey: ['myActivities'] });
       // toast 메시지 제거 - 모달로 대체
     },
     onError: (error) => {

src/features/activityId/components/owner-drop-down.tsx

@@ -1,7 +1,15 @@
+'use client';
+import { useQueryClient } from '@tanstack/react-query';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
 
 import { useAuthStore } from '@/features/auth/stores/useAuthStore';
+import { deleteActivities } from '@/features/my/my-activities/lib/api/myActivities.api';
 import Dropdown from '@/shared/components/dropdown';
+import Modal from '@/shared/components/modal/components';
+import SecondModal from '@/shared/components/modal/components/second-modal/second-modal';
+import { useModalStore } from '@/shared/libs/stores/useModalStore';
 
 const OwnerDropdown = ({
   ownerId,
@@ -11,24 +19,36 @@ const OwnerDropdown = ({
   activityId: number;
 }) => {
   const { user } = useAuthStore();
-  const isOwner = user?.id === String(ownerId);
-  console.log(user?.id, 'useid');
-  console.log(ownerId, 'ownerId');
+  const isOwner = user?.id === ownerId;
+  const {
+    openSecondModal,
+    closeSecondModal,
 
-  const handleDelete = () => {
-    console.log(
-      'activityId:',
-      activityId,
-      ' isOwner:',
-      isOwner,
-      'want to delete?',
-      user?.id,
-      'user.id',
-    );
+    activityId_secondModal,
+    secondModalName,
+  } = useModalStore();
+
+  // delete confirm
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const handleConfirm = async () => {
+    if (!activityId_secondModal) return;
+    try {
+      await deleteActivities(activityId_secondModal);
+      toast.success('삭제가 완료되었습니다.');
+      await queryClient.invalidateQueries({ queryKey: ['activities'] });
+      await queryClient.invalidateQueries({ queryKey: ['myActivities'] });
+      router.push('/activities');
+    } catch {
+      toast.error('삭제에 실패하였습니다.');
+    } finally {
+      closeSecondModal();
+    }
   };
+
   return (
     <>
-      {!isOwner && (
+      {isOwner && (
         <Dropdown
           dropdownClassName="absolute top-8 right-2"
           trigger={
@@ -43,19 +63,41 @@ const OwnerDropdown = ({
           }
         >
           <div className="border-sub-300 h-[10.8rem] overflow-hidden rounded-[0.8rem] border bg-white">
-            <button className="hover:text-main hover:bg-sub h-[5.4rem] w-[9.3rem] px-[1.8rem] text-[1.6rem]">
+            <button
+              onClick={() => router.push('/my/my-activities/')}
+              className="hover:text-main hover:bg-sub h-[5.4rem] w-[9.3rem] px-[1.8rem] text-[1.6rem]"
+            >
               수정하기
             </button>
             <hr />
             <button
-              onClick={handleDelete}
+              onClick={() => {
+                openSecondModal(activityId, 'delete');
+              }}
               className="h-[5.4rem] w-[9.3rem] px-[1.8rem] text-[1.6rem] hover:bg-red-100 hover:text-red-500"
             >
               삭제하기
             </button>
           </div>
         </Dropdown>
       )}
+      {secondModalName === 'delete' && (
+        <SecondModal type="warning" extraClassName="md:pb-[1rem]">
+          <Modal.Header>체험을 삭제하시겠습니까?</Modal.Header>
+          <div className="mb-0 flex w-[23.4rem] gap-2 md:w-[28.2rem] md:gap-3">
+            <Modal.Button
+              color="white"
+              ariaLabel="아니요"
+              onClick={closeSecondModal}
+            >
+              아니요
+            </Modal.Button>
+            <Modal.Button color="blue" ariaLabel="네" onClick={handleConfirm}>
+              네
+            </Modal.Button>
+          </div>
+        </SecondModal>
+      )}
     </>
   );
 };

src/features/activityId/components/reservation-form.tsx

@@ -21,6 +21,8 @@ import {
 import { useAuthStore } from '@/features/auth/stores/useAuthStore';
 import CalendarForForm from '@/shared/components/calendar/components/calendar-for-form';
 import { formatDateToYMD } from '@/shared/components/calendar/libs/utils/formatDateToYMD';
+import Modal from '@/shared/components/modal/components';
+import SecondModal from '@/shared/components/modal/components/second-modal/second-modal';
 import { cn } from '@/shared/libs/cn';
 import { useCalendarStore } from '@/shared/libs/stores/useCalendarStore';
 import { useModalStore } from '@/shared/libs/stores/useModalStore';
@@ -39,22 +41,37 @@ const ReservationForm = ({
   price: number | undefined;
   activityId: number;
 }) => {
-  const { selectedDate, resetSelectedDate } = useCalendarStore();
+  const {
+    selectedDate,
+    resetSelectedDate,
+    year,
+    month,
+    setMonth,
+    setYear,
+    resetDate,
+  } = useCalendarStore();
+  const {
+    appear,
+    disappearModal,
+    appearModal,
+    isDesktop,
+    secondModalName,
+    closeSecondModal,
+    openSecondModal,
+  } = useModalStore();
   const [schedulesInDate, setSchedulesInDate] = useState<
-    TimeSlot[] | undefined[] | undefined
+    TimeSlot[] | undefined
   >([]);
+  const [scheduledDate, setScheduledDate] = useState<AvailableScheduleList>();
   const [selectedTime, setSelectedTime] = useState('');
-  const { appear, disappearModal, appearModal, isDesktop } = useModalStore();
   const [nextStep, setNextStep] = useState(false);
-  const { mutate } = useReservationMutation(activityId);
   const isTablet = useIsTablet();
-  const { year, month, setMonth, setYear } = useCalendarStore();
-  const [scheduledDate, setScheduledDate] = useState<AvailableScheduleList>();
+  const { isLoggedIn } = useAuthStore();
+  const { mutate } = useReservationMutation(activityId);
   const { data, isLoading, error } = useSchedulesQuery(activityId, {
     year: String(year),
     month: String(month + 1).padStart(2, '0'),
   });
-  const { isLoggedIn } = useAuthStore();
 
   // 리액트훅폼
   const {
@@ -90,8 +107,9 @@ const ReservationForm = ({
       const today = new Date();
       setYear(today.getFullYear());
       setMonth(today.getMonth());
+      resetDate();
     };
-  }, [setMonth, setYear]);
+  }, [setMonth, setYear, resetDate]);
 
   return (
     <>
@@ -107,8 +125,10 @@ const ReservationForm = ({
           mutate(data, {
             onSuccess: (res) => {
               console.log('✅ 예약 성공:', res);
+              openSecondModal(undefined, 'success');
               addReservation(data.scheduleId); //save id in localStorage
-              resetSelectedDate(); //🐛이거 해도 제출후 다시 열어보면, 이전 선택 날짜가 칠해져있음...뭔가 리렌더링 기회가 없는건가
+              resetSelectedDate(); //🐛이거 해도 제출후 다시 열어보면, 이전 선택 날짜가 칠해져있음...:스타일링은 date 담당이기 떄문이었다.
+              resetDate(); //이거까지 해야함
               setSelectedTime('');
               reset(); // 제출 후 폼 초기화
             },
@@ -405,6 +425,20 @@ const ReservationForm = ({
           </button>
         </section>
       </form>
+      {secondModalName === 'success' && (
+        <SecondModal type="confirm" extraClassName="md:pb-[1rem]">
+          <Modal.Header>예약이 완료되었습니다.</Modal.Header>
+          <div className="w-[18rem] md:w-[20rem]">
+            <Modal.Button
+              color="blue"
+              ariaLabel="확인"
+              onClick={closeSecondModal}
+            >
+              확인
+            </Modal.Button>
+          </div>
+        </SecondModal>
+      )}
     </>
   );
 };

src/features/activityId/libs/hooks/useActivityIdQuery.ts

@@ -3,12 +3,11 @@ import { ParamValue } from 'next/dist/server/request/params';
 
 import { getActivityId } from '@/features/activityId/libs/api/getActivityId';
 
-//staleTime - 예약현황 업데이트 빈도: e.g.숙소 앱은 1~3분 & 예약 직전 실시간 확인 refetch()
 export const useActivityIdQuery = (id: ParamValue) => {
   return useQuery({
     queryKey: ['activityId', id],
     queryFn: () => getActivityId(id),
-    staleTime: 1000 * 60 * 5,
+    staleTime: 1000 * 60 * 30,
     retry: 1,
   });
 };

src/features/activityId/libs/hooks/useReservationMutation.ts

@@ -1,11 +1,18 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { postReservationForm } from '@/features/activityId/libs/api/postReservationForm';
 import { ReservationRequestBody } from '@/features/activityId/libs/types/reservationType';
 
 export const useReservationMutation = (activityId: number) => {
+  const queryClient = useQueryClient();
+
   return useMutation({
     mutationFn: (body: ReservationRequestBody) =>
       postReservationForm(activityId, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['booking'],
+      });
+    },
   });
 };

src/features/activityId/libs/utils/addReservation.ts

@@ -11,3 +11,19 @@ export const getMyResertvation = (): number[] => {
   console.log('geteMuRservation!and diffing');
   return JSON.parse(localStorage.getItem('myReservation') || '[]');
 };
+
+export const removeReservation = (scheduleId: number | null) => {
+  if (typeof window === 'undefined') return;
+  if (scheduleId === null) {
+    console.log('해당 스케줄은 "없는" 값으로, 로컬스토리지에서 삭제 못함.');
+    return;
+  }
+
+  const saved = JSON.parse(
+    localStorage.getItem('myReservation') || '[]',
+  ) as number[];
+  const filtered = saved.filter((id) => id !== scheduleId);
+  localStorage.setItem('myReservation', JSON.stringify(filtered));
+  console.log(`예약 ${scheduleId} 제거됨`, filtered, '🗑️');
+  // 전역상태 스케줄아이디 값 널값으로 다시 리셋????
+};

src/features/booking-detail/components/booking-modal.tsx

@@ -31,7 +31,7 @@ const BookingModal = ({
   statusLabel,
   isOpen,
 }: BookingModalProps) => {
-  const { closeModal } = useModalStore();
+  const { closeModal, setScheduleId } = useModalStore();
 
   // 예약 취소 mutation
   const { mutate: cancelBooking, isPending } = useCancelMutation();
@@ -61,6 +61,8 @@ const BookingModal = ({
   // 예약 취소 모달에서 확인 버튼 클릭 시
   const handleModalCancelBooking = () => {
     cancelBooking(reservation.id);
+    // 스케줄아이디 저장
+    setScheduleId(reservation.scheduleId);
     closeModal();
   };