Fix/160 리팩토링

src/app/(with-header)/activities/[id]/components/BookingSection.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { AxiosResponse } from 'axios';
+import useUserStore from '@/stores/authStore';
+import BookingInterface from '@/components/FloatingBox/BookingInterface';
+import { privateInstance } from '@/apis/privateInstance';
+import { GroupedSchedule } from '@/types/activityDetailType';
+import { padMonth } from '../utils/MonthFormatChange';
+
+export default function BookingSection({
+  activityId,
+  userId,
+  price,
+}: {
+  activityId: string;
+  userId: number;
+  price: number;
+}) {
+  const [year, setYear] = useState(new Date().getFullYear());
+  const [month, setMonth] = useState(new Date().getMonth() + 1);
+
+  const currentUserId = useUserStore((state) =>
+    state.user ? state.user.id : null,
+  );
+  const isOwner = currentUserId != null && userId != null && currentUserId === userId;
+
+  const { data: schedulesData } = useQuery({
+    queryKey: ['available-schedule', activityId, year, month],
+    queryFn: async () => {
+      const prevMonth = month === 1 ? 12 : month - 1;
+      const prevYear = month === 1 ? year - 1 : year;
+      const nextMonth = month === 12 ? 1 : month + 1;
+      const nextYear = month === 12 ? year + 1 : year;
+
+
+      const currentResponse = await privateInstance.get<GroupedSchedule[]>(
+        `/activities/${activityId}/available-schedule?year=${year}&month=${padMonth(month)}`,
+      );
+
+
+      const sideResults = await Promise.allSettled([
+        privateInstance.get<GroupedSchedule[]>(
+          `/activities/${activityId}/available-schedule?year=${prevYear}&month=${padMonth(prevMonth)}`,
+        ),
+        privateInstance.get<GroupedSchedule[]>(
+          `/activities/${activityId}/available-schedule?year=${nextYear}&month=${padMonth(nextMonth)}`,
+        ),
+      ]);
+
+      const sideData = sideResults
+        .filter(
+          (r): r is PromiseFulfilledResult<AxiosResponse<GroupedSchedule[]>> => r.status === 'fulfilled',
+        )
+        .flatMap((r) => r.value.data);
+
+      return [...sideData, ...currentResponse.data];
+    },
+    enabled: !!activityId && !!year && !!month && !isOwner,
+  });
+
+  const handleMonthChange = useCallback((year: number, month: number) => {
+    setTimeout(() => {
+      setYear(year);
+      setMonth(month);
+    });
+  }, []);
+
+  if (isOwner) return null;
+
+  return (
+    <div className='md:row-span-2'>
+      <BookingInterface
+        schedules={schedulesData ?? []}
+        onMonthChange={handleMonthChange}
+        isOwner={isOwner}
+        price={price}
+      />
+    </div>
+  );
+}

src/app/(with-header)/activities/[id]/components/ImageGrid.tsx

@@ -67,9 +67,9 @@ function ImageGrid({ mainImage, subImages }: ImageGridProps) {
               src={image[currentIndex]}
               alt={`${currentIndex + 1}`}
               fill
+              sizes='100vw'
               className='rounded-lg object-cover'
               priority
-              unoptimized
               onError={() => handleImageError(currentIndex)}
             />
           </motion.div>
@@ -113,6 +113,8 @@ function ImageGrid({ mainImage, subImages }: ImageGridProps) {
             src={image[0]}
             alt='메인이미지'
             fill
+            sizes='50vw'
+            priority
             className='rounded-lg object-cover'
             onError={() => handleImageError(0)}
           />
@@ -127,6 +129,7 @@ function ImageGrid({ mainImage, subImages }: ImageGridProps) {
               src={image}
               alt={`서브이미지 ${index + 1}`}
               fill
+              sizes='25vw'
               className='rounded-lg object-cover'
               onError={() => handleImageError(index + 1)}
             />
@@ -145,6 +148,8 @@ function ImageGrid({ mainImage, subImages }: ImageGridProps) {
                   src={selectedImage}
                   alt='확대 이미지'
                   fill
+                  sizes='(max-width: 1200px) 100vw, 1200px'
+                  quality={85}
                   className='rounded-lg object-cover p-18'
                 />
               )}

src/app/(with-header)/activities/[id]/components/Title.tsx

@@ -12,17 +12,23 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useDeleteActivity } from '../hooks/useDeleteActivity';
 import Popup from '@/components/Popup';
 import { TitleProps } from '@/types/activityDetailType';
+import useUserStore from '@/stores/authStore';
 
 function Title({
   title,
   category,
   rating,
   reviewCount,
   address,
-  isOwner,
+  userId,
 }: TitleProps) {
   const [isPopupOpen, setIsPopupOpen] = useState(false);
 
+  const currentUserId = useUserStore((state) =>
+    state.user ? state.user.id : null,
+  );
+  const isOwner = currentUserId != null && userId != null && currentUserId === userId;
+
   const { id } = useParams();
   const router = useRouter();
   const queryClient = useQueryClient();

src/app/(with-header)/activities/[id]/loading.tsx

@@ -0,0 +1,72 @@
+import ReviewCardSkeleton from './components/Skeletons/ReviewCardSkeleton';
+import SkeletonBookingInterface from './components/Skeletons/BookingInterfaceSkeleton';
+
+export default function Loading() {
+  return (
+    <div className='mx-auto max-w-1200 animate-pulse p-4 sm:px-20 lg:p-8'>
+      {/* 타이틀 */}
+      <div className='mb-6 flex items-start justify-between'>
+        <div className='flex w-full flex-col gap-10'>
+          <div className='h-16 w-24 rounded bg-gray-300' />
+          <div className='h-42 w-3/4 rounded bg-gray-300' />
+          <div className='flex gap-10'>
+            <div className='h-20 w-50 rounded bg-gray-300' />
+            <div className='h-20 w-170 rounded bg-gray-300' />
+          </div>
+        </div>
+      </div>
+
+      {/* 이미지그리드 */}
+      <div className='relative block aspect-square h-[300px] w-full overflow-hidden rounded-lg bg-gray-300 md:hidden' />
+      <div className='hidden h-[500px] grid-cols-4 grid-rows-4 gap-6 md:grid'>
+        <div className='col-span-2 row-span-4 rounded-lg bg-gray-300' />
+        {[...Array(4)].map((_, i) => (
+          <div
+            key={i}
+            className='col-span-1 row-span-2 rounded-lg bg-gray-300'
+          />
+        ))}
+      </div>
+
+      {/* 설명/예약인터페이스/장소 */}
+      <div className='mt-86 grid gap-10 grid-cols-1 md:grid-cols-3'>
+        {/* 설명 */}
+        <div className='md:col-span-2'>
+          <div className='mb-10 h-34 w-90 rounded bg-gray-300' />
+          <div className='mb-4 h-180 w-full rounded bg-gray-300' />
+        </div>
+
+        {/* 예약인터페이스 */}
+        <div className='md:row-span-2'>
+          <SkeletonBookingInterface />
+        </div>
+
+        {/* 체험 장소/리뷰 */}
+        <div className='md:col-span-2 space-y-8'>
+          {/* 장소 */}
+          <div className='mb-40'>
+            <div className='mb-10 h-34 w-90 rounded bg-gray-300' />
+            <div className='h-[480px] w-full rounded-lg bg-gray-400 shadow-md' />
+            <div className='mt-8 flex items-center space-x-3'>
+              <div className='h-6 w-6 rounded-full bg-gray-300' />
+              <div className='h-20 w-1/2 rounded bg-gray-300' />
+            </div>
+          </div>
+
+          {/* 리뷰 */}
+          <div>
+            <div className='mt-10 flex flex-col space-y-8'>
+              <div className='mb-10 h-34 w-50 rounded bg-gray-300' />
+              <div className='mb-5 h-50 w-120 rounded bg-gray-300' />
+              <div className='relative min-h-450 flex-col gap-30'>
+                {[...Array(3)].map((_, index) => (
+                  <ReviewCardSkeleton key={index} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}