Merge branch 'dev'

Author: jyn

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

@@ -1,74 +1,27 @@
-'use client';
-
-import { useQuery } from '@tanstack/react-query';
-import dynamic from 'next/dynamic';
-import { notFound } from 'next/navigation';
-import { useEffect } from 'react';
-
+import CleanUp from '@/features/activityId/components/cleanup';
 import Header from '@/features/activityId/components/header';
 import AddressWithMap from '@/features/activityId/components/map/address-with-map';
+import ReservationModal from '@/features/activityId/components/reservation-modal';
+import ReviewsWrapper from '@/features/activityId/components/reviews-wrapper';
 import SubImages from '@/features/activityId/components/sub-images';
-import { getActivityId } from '@/features/activityId/libs/api/getActivityId';
 import { textStyle } from '@/features/activityId/libs/constants/variants';
-import { useCalendarStore } from '@/shared/components/calendar/libs/stores/useCalendarStore';
-import LoadingSpinner from '@/shared/components/loading-spinner/loading-spinner';
-import { useModalStore } from '@/shared/components/modal/libs/stores/useModalStore';
-import { cn } from '@/shared/libs/cn';
-const ReservationModal = dynamic(
-  () => import('@/features/activityId/components/reservation-modal'),
-  {
-    ssr: false,
-    loading: () => <LoadingSpinner />,
-  },
-);
-const Reviews = dynamic(
-  () => import('@/features/activityId/components/reviews'),
-  {
-    ssr: false,
-    loading: () => <LoadingSpinner />,
-  },
-);
-
-const ActivityPageContent = ({ id }: { id: string }) => {
-  const { closeModal } = useModalStore();
-  const { setYear, setMonth, resetSelectedDate, resetDate } =
-    useCalendarStore();
-
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ['activityId', id],
-    queryFn: () => getActivityId(id),
-    staleTime: 1000 * 60 * 30,
-  });
-
-  // notfound 페이지로 에러처리
-  if (isError) {
-    notFound();
-  }
-
-  // 언마운트 시 클린업
-  useEffect(() => {
-    return () => {
-      // 모달 닫기
-      closeModal();
-      // 캘린더 리셋
-      const today = new Date();
-      setYear(today.getFullYear());
-      setMonth(today.getMonth());
-      resetSelectedDate();
-      resetDate();
-    };
-  }, [closeModal, setMonth, setYear, resetDate, resetSelectedDate]);
-
-  if (isLoading || !data) return <LoadingSpinner />;
-
+import { ActivityInfo } from '@/features/activityId/libs/types/activityInfo';
+
+const ActivityPageContent = ({
+  id,
+  data,
+}: {
+  id: string;
+  data: ActivityInfo;
+}) => {
   return (
     <div className="mx-auto w-full justify-center p-[2.4rem] md:px-[4rem] lg:max-w-[120rem] lg:pt-[1.6rem]">
       {/* 체험 이미지 */}
       <SubImages images={data?.subImages} />
-      <div className={cn('lg:grid lg:grid-cols-[1fr_41.9rem] lg:gap-[4rem]')}>
+      <div className={'lg:grid lg:grid-cols-[1fr_41.9rem] lg:gap-[4rem]'}>
         <div>
           {/* 헤더 영역(분류, 제목, 별점, 주소, 드롭다운) */}
-          <Header data={data} />
+          <Header data={data} id={id} />
           {/* 체험 설명 */}
           <hr className="mt-[2rem] mb-[2rem]" />
           <section>
@@ -80,11 +33,12 @@ const ActivityPageContent = ({ id }: { id: string }) => {
           <AddressWithMap address={data?.address} />
           {/* 체험 후기 */}
           <hr className="mb-[2rem] lg:mb-[4rem]" />
-          <Reviews activityId={Number(id)} />
+          <ReviewsWrapper activityId={Number(id)} />
         </div>
         {/* 체험 예약 캘린더 */}
         <ReservationModal price={data?.price} activityId={Number(id)} />
       </div>
+      <CleanUp />
     </div>
   );
 };

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

@@ -3,22 +3,39 @@ import {
   HydrationBoundary,
   QueryClient,
 } from '@tanstack/react-query';
+import { notFound } from 'next/navigation';
 
 import ActivityPageContent from '@/app/activities/[id]/page-content';
 import { getActivityId } from '@/features/activityId/libs/api/getActivityId';
+import { ActivityInfo } from '@/features/activityId/libs/types/activityInfo';
 
 const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params;
   const queryClient = new QueryClient();
-  await queryClient.prefetchQuery({
-    queryKey: ['activityId', id],
-    queryFn: () => getActivityId(id),
-  });
+  let data: ActivityInfo | undefined;
+
+  try {
+    data = queryClient.getQueryData(['activityId', id]);
+    if (!data) {
+      data = await queryClient.fetchQuery({
+        queryKey: ['activityId', id],
+        queryFn: () => getActivityId(id),
+        staleTime: 1000 * 60 * 30,
+        retry: 1,
+      });
+    }
+  } catch (error) {
+    if (error) notFound();
+  }
 
   return (
-    <HydrationBoundary state={dehydrate(queryClient)}>
-      <ActivityPageContent id={id} />
-    </HydrationBoundary>
+    <>
+      {data && (
+        <HydrationBoundary state={dehydrate(queryClient)}>
+          <ActivityPageContent id={id} data={data} />
+        </HydrationBoundary>
+      )}
+    </>
   );
 };
 

src/app/my/my-activities/page.tsx

@@ -4,8 +4,10 @@ import Link from 'next/link';
 
 import { DeleteConfirmModal } from '@/features/my/my-activities/components/delete-confirm-modal';
 import { MyActivitiesList } from '@/features/my/my-activities/components/my-activities-list';
+import { useModalStore } from '@/shared/components';
 
 const MyActivityPage = () => {
+  const { modalName } = useModalStore();
   return (
     <>
       {/* 페이지 헤더 */}
@@ -35,7 +37,7 @@ const MyActivityPage = () => {
       {/* 내 체험 리스트 */}
       <MyActivitiesList />
       {/* 삭제 확인 모달 */}
-      <DeleteConfirmModal />
+      {modalName === 'delete' && <DeleteConfirmModal />}
     </>
   );
 };

src/app/my/reservation/page.tsx

@@ -3,7 +3,7 @@ import BookingList from '@/features/booking-detail/components/booking-list';
 const ReservationPage = () => {
   return (
     <main>
-      <div className="mb-[2.4rem]">
+      <div className="mb-[2.4rem] py-[1rem]">
         <p className="text-[1.8rem] font-bold text-gray-950">예약 내역</p>
         <span className="text-[1.4rem] font-medium text-gray-500">
           예약내역 변경 및 취소할 수 있습니다.