[FEAT] 템플스테이 상세 정보, 이미지 API V2 전환

src/apis/templeInfo/axios.ts

@@ -1,16 +1,12 @@
 import instance from '@apis/instance';
 
-export const getTempleDetails = async (templestayId: string, userId?: string) => {
-  const res = await instance.get('/templestay', {
-    params: { templestayId, userId },
-  });
+export const getTempleDetails = async (id: number) => {
+  const res = await instance.get(`/v2/api/templestay/details/${id}`);
   return res.data;
 };
 
-export const getTempleImages = async (templestayId: string) => {
-  const res = await instance.get('/public/templestay/img', {
-    params: { templestayId },
-  });
+export const getTempleImages = async (id: number) => {
+  const res = await instance.get(`/v2/api/templestay/images/${id}`);
   return res.data;
 };
 

src/apis/templeInfo/index.ts

@@ -1,21 +1,24 @@
+import { ApiResponse } from '@apis/response';
 import { useQuery } from '@tanstack/react-query';
 
 import { getTempleReviews, getTempleImages, getTempleDetails } from './axios';
 import { ReviewsResponse, TemplestayImgsResponse, TempleDetail } from './type';
 
-export const useGetTempleDetails = (templestayId: string, userId?: string) => {
-  const { data, isLoading, isError } = useQuery<TempleDetail>({
-    queryKey: ['detailPage', templestayId, userId],
-    queryFn: () => getTempleDetails(templestayId, userId),
+export const useGetTempleDetails = (id: number) => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['detailPage', id],
+    queryFn: () => getTempleDetails(id),
+    select: (res: ApiResponse<TempleDetail>) => res.data,
   });
 
   return { data, isLoading, isError };
 };
 
-export const useGetTempleImages = (templestayId: string) => {
-  const { data, isLoading, isError } = useQuery<TemplestayImgsResponse>({
-    queryKey: ['images', templestayId],
-    queryFn: () => getTempleImages(templestayId),
+export const useGetTempleImages = (id: number) => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['images', id],
+    queryFn: () => getTempleImages(id),
+    select: (res: ApiResponse<TemplestayImgsResponse>) => res.data,
   });
 
   return { data, isLoading, isError };

src/apis/templeInfo/prefetch.ts

@@ -3,16 +3,16 @@ import { queryOptions } from '@tanstack/react-query';
 import { getTempleImages, getTempleReviews, getTempleDetails } from './axios';
 import { TemplestayImgsResponse, ReviewsResponse, TempleDetail } from './type';
 
-export const templeDetailQueryOptions = (templestayId: string, userId?: string) =>
+export const templeDetailQueryOptions = (id: number) =>
   queryOptions<TempleDetail>({
-    queryKey: ['detailPage', templestayId, userId],
-    queryFn: () => getTempleDetails(templestayId, userId),
+    queryKey: ['detailPage', id],
+    queryFn: () => getTempleDetails(id),
   });
 
-export const templeImagesQueryOptions = (templestayId: string) =>
+export const templeImagesQueryOptions = (id: number) =>
   queryOptions<TemplestayImgsResponse>({
-    queryKey: ['images', templestayId],
-    queryFn: () => getTempleImages(templestayId),
+    queryKey: ['images', id],
+    queryFn: () => getTempleImages(id),
   });
 
 export const templeReviewsQueryOptions = (templestayId: string, page: number) =>

src/apis/templeInfo/type.ts

@@ -1,29 +1,25 @@
 export interface TempleDetail {
-  templestayId: string;
-  templeName: string;
+  id: number;
   templestayName: string;
-  phoneNumber: string;
+  templeName: string;
   address: string;
-  tag?: string;
-  templestayPrice?: string;
-  introduction?: string;
-  detailAddress: string;
-  youtube?: string;
-  schedule?: string;
-  latitude: number;
-  longitude: number;
-  liked: boolean;
+  phone: string;
+  schedule: string;
+  price: number;
+  introduction: string;
   url: string;
+  lat: number;
+  lon: number;
+  wish: boolean;
 }
 
 export interface TemplestayImg {
-  imageUrlId: number;
-  imgUrl: string;
+  imgurl: string;
 }
 
 export interface TemplestayImgsResponse {
-  total: number;
-  templestayImgs: TemplestayImg[];
+  id: number;
+  imgUrls: TemplestayImg[];
 }
 
 export interface Review {

src/app/detail/[templestayId]/TempleDetailClient.tsx

@@ -29,18 +29,17 @@ const SmallMap = dynamic(() => import('@components/templeDetail/naverMap/smallMa
 });
 
 interface TempleDetailClientProps {
-  templestayId: string;
+  id: number;
 }
 
-const TempleDetailClient = ({ templestayId }: TempleDetailClientProps) => {
+const TempleDetailClient = ({ id }: TempleDetailClientProps) => {
   const [userId, setUserId] = useState<string | undefined>(undefined);
 
   useEffect(() => {
-    const id = getCookie('userId') as string;
-    setUserId(id);
+    const user = getCookie('userId') as string;
+    setUserId(user);
   }, []);
-
-  const { data, isLoading, isError } = useGetTempleDetails(templestayId, userId || undefined);
+  const { data, isLoading, isError } = useGetTempleDetails(id);
   const queryClient = useQueryClient();
   const addWishlistMutation = useAddWishlist();
   const removeWishlistMutation = useRemoveWishlist();
@@ -51,7 +50,7 @@ const TempleDetailClient = ({ templestayId }: TempleDetailClientProps) => {
 
   useEffect(() => {
     if (data) {
-      setLiked(data.liked);
+      setLiked(data.wish);
     }
   }, [data]);
 
@@ -66,7 +65,7 @@ const TempleDetailClient = ({ templestayId }: TempleDetailClientProps) => {
     const mutation = liked ? removeWishlistMutation : addWishlistMutation;
 
     mutation.mutate(
-      { userId: Number(userId), templestayId: Number(templestayId) },
+      { userId: Number(userId), templestayId: Number(id) },
       {
         onSuccess: () => {
           setLiked(!liked);
@@ -126,17 +125,13 @@ const TempleDetailClient = ({ templestayId }: TempleDetailClientProps) => {
       )}
 
       <div className={styles.headerBox}>
-        <TempleTopbar templeName={data.templeName} templestayName={data.templestayName} />
+        <TempleTopbar templestayName={data.templestayName} />
       </div>
       <div className={styles.topDetailContainer}>
         <DetailCarousel />
         <div className={styles.templeTitleBox}>
-          <TempleTitle
-            tag={data.tag}
-            templeName={data.templeName}
-            templestayName={data.templestayName}
-          />
-          <TempleDetailInfo address={data.address} phoneNumber={data.phoneNumber} />
+          <TempleTitle templeName={data.templeName} templestayName={data.templestayName} />
+          <TempleDetailInfo address={data.address} phoneNumber={data.phone} />
         </div>
         <StickyTapBar>
           <TapBar type="detail" />
@@ -145,15 +140,11 @@ const TempleDetailClient = ({ templestayId }: TempleDetailClientProps) => {
       <div className={styles.templeDetailMiddle}>
         <TempleReview />
         <TempleSchedule schedule={data.schedule} />
-        <TemplePrice templestayPrice={data.templestayPrice} />
+        <TemplePrice templestayPrice={data.price} />
         <TempleInfo introduction={data.introduction} />
       </div>
 
-      <SmallMap
-        detailAddress={data.detailAddress}
-        latitude={data.latitude}
-        longitude={data.longitude}
-      />
+      <SmallMap detailAddress={data.address} latitude={data.lat} longitude={data.lon} />
       <ButtonBar
         type="wish"
         label="예약하러 가기"

src/app/detail/[templestayId]/page.tsx

@@ -4,25 +4,27 @@ import {
   templeReviewsQueryOptions,
 } from '@apis/templeInfo/prefetch';
 import { QueryClient, dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import { cookies } from 'next/headers';
 
 import TempleDetailClient from './TempleDetailClient';
 
 const TempleDetailPage = async ({ params }: { params: Promise<{ templestayId: string }> }) => {
   const { templestayId } = await params;
-  const cookieStore = await cookies();
-  const userId = cookieStore.get('userId')?.value;
+  const id = Number(templestayId);
+  if (!Number.isInteger(id) || id <= 0) {
+    throw new Error(`Invalid templestay ID: ${templestayId}`);
+  }
+  const stringId = templestayId;
   const queryClient = new QueryClient();
 
   await Promise.all([
-    queryClient.prefetchQuery(templeDetailQueryOptions(templestayId, userId || undefined)),
-    queryClient.prefetchQuery(templeImagesQueryOptions(templestayId)),
-    queryClient.prefetchQuery(templeReviewsQueryOptions(templestayId, 1)),
+    queryClient.prefetchQuery(templeDetailQueryOptions(id)),
+    queryClient.prefetchQuery(templeImagesQueryOptions(id)),
+    queryClient.prefetchQuery(templeReviewsQueryOptions(stringId, 1)),
   ]);
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <TempleDetailClient templestayId={templestayId} />
+      <TempleDetailClient id={id} />
     </HydrationBoundary>
   );
 };

src/app/detail/[templestayId]/photo/TempleImagesClient.tsx

@@ -0,0 +1,49 @@
+'use client';
+import { useGetTempleImages } from '@apis/templeInfo';
+import PageName from '@components/common/pageName/PageName';
+import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
+import Image from 'next/image';
+
+import * as styles from './style.css';
+
+interface TemplePhotoPageProps {
+  templestayId: number;
+}
+
+const TempleImageClient = ({ templestayId }: TemplePhotoPageProps) => {
+  const { data, isLoading, isError } = useGetTempleImages(templestayId);
+
+  if (isLoading) {
+    return <ExceptLayout type="loading" />;
+  }
+
+  if (isError) {
+    return <ExceptLayout type="networkError" />;
+  }
+
+  if (!data || !data.imgUrls.length) {
+    return <p>No temple images available</p>;
+  }
+
+  return (
+    <div className={styles.photoContainer}>
+      <div className={styles.headerBox}>
+        <PageName title="사진" />
+      </div>
+      <div className={styles.photoGrid}>
+        {data.imgUrls.map((photo) => (
+          <Image
+            key={photo.imgurl}
+            width={162}
+            height={162}
+            src={photo.imgurl}
+            alt="템플스테이 사진"
+            className={styles.photoItem}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TempleImageClient;

src/app/detail/[templestayId]/photo/page.tsx

@@ -1,45 +1,10 @@
-import { templeImagesQueryOptions } from '@apis/templeInfo/prefetch';
-import { TemplestayImg, TemplestayImgsResponse } from '@apis/templeInfo/type';
-import PageName from '@components/common/pageName/PageName';
-import { QueryClient } from '@tanstack/react-query';
-import Image from 'next/image';
-
-import * as styles from './style.css';
+import TempleImageClient from './TempleImagesClient';
 
 const TemplePhotoPage = async ({ params }: { params: Promise<{ templestayId: string }> }) => {
   const { templestayId } = await params;
-  const queryClient = new QueryClient();
-  const cachedData = queryClient.getQueryData(['images', templestayId]);
-  if (!cachedData) {
-    await queryClient.prefetchQuery(templeImagesQueryOptions(templestayId));
-  }
-  const data =
-    queryClient.getQueryData<TemplestayImgsResponse>(['images', templestayId]) ||
-    (await queryClient.fetchQuery(templeImagesQueryOptions(templestayId)));
-
-  if (!data) {
-    return <p>No temple images available</p>;
-  }
+  const templestayIdNumber = Number(templestayId);
 
-  return (
-    <div className={styles.photoContainer}>
-      <div className={styles.headerBox}>
-        <PageName title="사진" />
-      </div>
-      <div className={styles.photoGrid}>
-        {data.templestayImgs.map((photo: TemplestayImg) => (
-          <Image
-            width={162}
-            height={162}
-            key={photo.imageUrlId}
-            src={photo.imgUrl}
-            alt={`Temple Stay ${photo.imageUrlId}`}
-            className={styles.photoItem}
-          />
-        ))}
-      </div>
-    </div>
-  );
+  return <TempleImageClient templestayId={templestayIdNumber} />;
 };
 
 export default TemplePhotoPage;

src/components/carousel/detailCarousel/DetailCarousel.tsx

@@ -11,10 +11,10 @@ const largeEmptyImage = '@assets/images/img_gray_light_leaf_large.png';
 
 const DetailCarousel = () => {
   const { templestayId } = useParams();
-  const { data, isLoading, isError } = useGetTempleImages(String(templestayId));
+  const { data, isLoading, isError } = useGetTempleImages(Number(templestayId));
 
   const { carouselRef, transformStyle, handleDragChange, handleDragEnd } = useCarousel({
-    itemCount: data?.total || 0,
+    itemCount: data?.imgUrls.length || 0,
     moveDistance: 355,
   });
 
@@ -43,13 +43,13 @@ const DetailCarousel = () => {
           onDragChange: handleDragChange,
           onDragEnd: handleDragEnd,
         })}>
-        {data.templestayImgs.map((image, index) => (
+        {data.imgUrls.map((image, index) => (
           <ImageItem
-            key={image.imageUrlId}
-            id={image.imageUrlId}
-            imgUrl={image.imgUrl}
+            key={index}
+            id={index}
+            imgUrl={image.imgurl}
             currentNum={index + 1}
-            totalNum={data.total}
+            totalNum={data.imgUrls.length}
           />
         ))}
       </div>