Feat/74 체험 상세페이지 리뷰 페이지네이션 제외 api 연결

next.config.ts

@@ -3,6 +3,9 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   // Docker 배포를 위한 standalone 모드 활성화
   // 해당 설정은 프로덕션 빌드 시 필요한 파일만 .next/standalone 폴더에 복사됨.
+  images: {
+    domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'],
+  },
   output: 'standalone',
 };
 

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

@@ -0,0 +1,124 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import Title from './Title';
+import ImageGrid from './ImageGrid';
+import BookingInterface from '@/components/FloatingBox/BookingInterface';
+import LocationMap from '@/components/LocationMap';
+import ReviewTitle from './ReviewTitle';
+import { useQuery } from '@tanstack/react-query';
+import { privateInstance } from '@/apis/privateInstance';
+import { useState, useEffect } from 'react';
+import useUserStore from '@/stores/authStore';
+import { padMonth } from '../utils/MonthFormatChange';
+
+export default function ActivityDetailForm() {
+  const [year, setYear] = useState(2025);
+  const [month, setMonth] = useState(7);
+  const [isOwner, setIsOwner] = useState(false);
+
+  const { id } = useParams();
+
+  const { data: activityData, isLoading } = useQuery({
+    queryKey: ['activity', id],
+    queryFn: async () => {
+      return privateInstance.get(`/activities/${id}`);
+    },
+    select: (response) => response.data,
+    enabled: !!id,
+  });
+
+  const userId = activityData?.userId;
+
+  const currentUserId = useUserStore((state) =>
+    state.user ? state.user.id : null,
+  );
+
+  useEffect(() => {
+    if (currentUserId && currentUserId === userId) {
+      setIsOwner(true);
+      console.log('니가 작성한 체험임');
+    } else {
+      setIsOwner(false);
+    }
+  }, [currentUserId, userId]);
+
+  const { data: schedulesData } = useQuery({
+    queryKey: ['available-schedule', id, 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 results = await Promise.allSettled([
+        privateInstance.get(
+          `/activities/${id}/available-schedule?year=${prevYear}&month=${padMonth(prevMonth)}`,
+        ),
+        privateInstance.get(
+          `/activities/${id}/available-schedule?year=${year}&month=${padMonth(month)}`,
+        ),
+        privateInstance.get(
+          `/activities/${id}/available-schedule?year=${nextYear}&month=${padMonth(nextMonth)}`,
+        ),
+      ]);
+      // 성공한 것만 합치기
+      const data = results
+        .filter((r) => r.status === 'fulfilled')
+        .flatMap((r) => (r.status === 'fulfilled' ? r.value.data : []));
+      return data;
+    },
+    enabled: !!id && !!year && !!month,
+  });
+
+  if (isLoading || !activityData) {
+    return <div>로딩 중...</div>;
+  }
+
+  const subImageUrls = activityData.subImages.map(
+    (image: { imageUrl: string }) => image.imageUrl,
+  );
+
+  return (
+    <div className='mx-auto max-w-1200 p-4 sm:px-20 lg:p-8'>
+      <Title {...activityData} isOwner={isOwner} />
+      <ImageGrid
+        mainImage={activityData.bannerImageUrl}
+        subImages={subImageUrls}
+      />
+
+      <div
+        className={`mt-86 grid gap-15 ${
+          isOwner ? 'md:grid-cols-2' : 'md:grid-cols-3'
+        } grid-cols-1`}
+      >
+        <div className={`${isOwner ? 'md:col-span-2' : 'md:col-span-2'}`}>
+          <h2 className='mb-4 pb-2 text-2xl font-bold'>체험 설명</h2>
+          <p className='whitespace-pre-line'>{activityData.description}</p>
+        </div>
+
+        {!isOwner && (
+          <div className='md:row-span-2'>
+            <BookingInterface
+              schedules={schedulesData ?? []}
+              onMonthChange={(year, month) => {
+                setTimeout(() => {
+                  setYear(year);
+                  setMonth(month);
+                }, 0);
+              }}
+              isOwner={isOwner}
+              price={activityData.price}
+            />
+          </div>
+        )}
+
+        <div className={`${isOwner ? 'md:col-span-4' : 'md:col-span-2'}`}>
+          <h2 className='mb-4 pb-2 text-2xl font-bold'>체험 장소</h2>
+          <LocationMap address={activityData.address} />
+          <ReviewTitle />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -4,10 +4,7 @@ import Image from 'next/image';
 import React, { useState } from 'react';
 import { ImageGridProps } from '@/types/activityDetailType';
 
-export default function ImageGrid({
-  mainImage,
-  subImages,
-}: ImageGridProps) {
+export default function ImageGrid({ mainImage, subImages }: ImageGridProps) {
   const images = [mainImage, ...subImages];
   const [currentIndex, setCurrentIndex] = useState(0); //캐러셀 구현용 state
 

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

@@ -0,0 +1,4 @@
+
+export function Skeleton({ className = '' }: { className?: string }) {
+  return <div className={`animate-pulse bg-gray-200 ${className}`} />;
+}

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

@@ -1,16 +1,20 @@
 import React from 'react';
 import IconDropdown from '@assets/svg/dropdown';
 import Star from '@assets/svg/star';
-import { TitleProps } from '@/types/activityDetailType';
+import { ActivityDetail } from '@/types/activityDetailType';
+import ActivityDropdown from '@/components/ActivityDropdown';
+import Menu from '@/components/ActivityDropdown/menu';
+import Item from '@/components/ActivityDropdown/Item';
+import Trigger from '@/components/ActivityDropdown/trigger';
 
 export default function Title({
   title,
   category,
   rating,
   reviewCount,
   address,
-  isDropDown,
-}: TitleProps) {
+  isOwner,
+}: ActivityDetail) {
   return (
     <div className='mb-6 flex items-start justify-between'>
       <div className='flex flex-col gap-8'>
@@ -29,10 +33,16 @@ export default function Title({
         </div>
       </div>
 
-      {isDropDown && (
-        <div className='mt-30 flex items-center gap-1'>
-          <IconDropdown />
-        </div>
+      {isOwner && (
+        <ActivityDropdown>
+          <Trigger>
+            <IconDropdown />
+          </Trigger>
+          <Menu>
+            <Item onClick={() => alert('수정')}>수정하기</Item>
+            <Item onClick={() => alert('삭제')}>삭제하기</Item>
+          </Menu>
+        </ActivityDropdown>
       )}
     </div>
   );

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

@@ -0,0 +1,5 @@
+import ActivityDetailForm from './components/ActivityDetailForm';
+
+export default function ActivityDetailPage() {
+  return <ActivityDetailForm />;
+}

src/app/(with-header)/activities/[id]/utils/MonthFormatChange.ts

@@ -0,0 +1,3 @@
+export function padMonth(m: number): string {
+  return m.toString().padStart(2, '0');
+}

src/app/api/activities/[id]/available-schedule/route.ts

@@ -0,0 +1,51 @@
+import axios, { AxiosError } from 'axios';
+import { cookies } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
+
+interface ErrorResponse {
+  error?: string;
+  message?: string;
+}
+
+export async function GET(request: NextRequest) {
+  const cookieStore = await cookies();
+  const accessToken = cookieStore.get('accessToken')?.value;
+
+  const { searchParams, pathname } = request.nextUrl;
+
+  const year = searchParams.get('year');
+  const month = searchParams.get('month');
+
+  const segments = pathname.split('/');
+  const id = segments[segments.indexOf('activities') + 1];
+
+  if (!id) {
+    return NextResponse.json(
+      { error: '유효하지 않은 요청입니다.' },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const response = await axios.get(
+      `${process.env.NEXT_PUBLIC_API_SERVER_URL}/activities/${id}/available-schedule?year=${year}&month=${month}`,
+      {
+        headers: {
+          Authorization: accessToken ? `Bearer ${accessToken}` : undefined,
+        },
+      },
+    );
+    return NextResponse.json(response.data);
+  } catch (err) {
+    const error = err as AxiosError<ErrorResponse>;
+
+    const message =
+      error.response?.data?.error ||
+      error.response?.data?.message ||
+      '스케줄 데이터 조회 실패';
+
+    const status = error.response?.status || 500;
+
+    return NextResponse.json({ error: message }, { status });
+  }
+}

src/app/api/activities/[id]/reservation/route.ts

@@ -0,0 +1,52 @@
+import axios, { AxiosError } from 'axios';
+import { cookies } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
+
+interface ErrorResponse {
+  error?: string;
+  message?: string;
+}
+
+export async function POST(request: NextRequest) {
+  const cookieStore = await cookies();
+  const accessToken = cookieStore.get('accessToken')?.value;
+
+  const { selectedTimeId, participants } = await request.json();
+
+  const pathname = request.nextUrl.pathname;
+  const segments = pathname.split('/');
+  const id = segments[segments.indexOf('activities') + 1];
+
+  if (!id) {
+    return NextResponse.json(
+      { error: '유효하지 않은 요청입니다.' },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const response = await axios.post(
+      `${process.env.NEXT_PUBLIC_API_SERVER_URL}/activities/${id}/reservations`,
+      {
+        scheduleId: Number(selectedTimeId),
+        headCount: Number(participants),
+      },
+      {
+        headers: {
+          Authorization: accessToken ? `Bearer ${accessToken}` : undefined,
+        },
+      },
+    );
+    return NextResponse.json(response.data);
+  } catch (err) {
+    const error = err as AxiosError<ErrorResponse>;
+
+    const message =
+      error.response?.data?.error ||
+      error.response?.data?.message ||
+      '예약 실패';
+
+    const status = error.response?.status || 500;
+    return NextResponse.json({ error: message }, { status });
+  }
+}