Merge pull request #317 from JEOLLOGA/feat/#316/blog-review-v2

maylh · web-flow · commit 2f9a83845505 · 2025-08-07T22:38:55.000+09:00
[FEAT] 템플스테이 상세 블로그 리뷰 API V2 전환
diff --git a/next.config.ts b/next.config.ts
@@ -7,7 +7,7 @@ const nextConfig: NextConfig = {
   reactStrictMode: true,
 
   images: {
-    domains: ['noms.templestay.com', 'www.templestay.com'],
+    domains: ['noms.templestay.com', 'www.templestay.com', 'blogthumb.pstatic.net'],
   },
 
   webpack(config) {
diff --git a/src/apis/templeInfo/axios.ts b/src/apis/templeInfo/axios.ts
@@ -10,9 +10,9 @@ export const getTempleImages = async (id: number) => {
   return res.data;
 };
 
-export const getTempleReviews = async (templestayId: string, page: number) => {
-  const res = await instance.get('/public/templestay/reviews', {
-    params: { templestayId, page },
+export const getTempleReviews = async (id: number, page: number) => {
+  const res = await instance.get(`/v2/api/templestay/${id}/reviews`, {
+    params: { page },
   });
   return res.data;
 };
diff --git a/src/apis/templeInfo/index.ts b/src/apis/templeInfo/index.ts
@@ -24,10 +24,11 @@ export const useGetTempleImages = (id: number) => {
   return { data, isLoading, isError };
 };
 
-export const useGetTempleReviews = (templestayId: string, page: number) => {
-  const { data, isLoading, isError } = useQuery<ReviewsResponse>({
-    queryKey: ['reviews', templestayId, page],
-    queryFn: () => getTempleReviews(templestayId, page),
+export const useGetTempleReviews = (id: number, page: number) => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['reviews', id, page],
+    queryFn: () => getTempleReviews(id, page),
+    select: (res: ApiResponse<ReviewsResponse>) => res.data,
   });
 
   return { data, isLoading, isError };
diff --git a/src/apis/templeInfo/prefetch.ts b/src/apis/templeInfo/prefetch.ts
@@ -1,5 +1,6 @@
 import { queryOptions } from '@tanstack/react-query';
 
+import { ApiResponse } from '@apis/response';
 import { getTempleImages, getTempleReviews, getTempleDetails } from './axios';
 import { TemplestayImgsResponse, ReviewsResponse, TempleDetail } from './type';
 
@@ -15,8 +16,9 @@ export const templeImagesQueryOptions = (id: number) =>
     queryFn: () => getTempleImages(id),
   });
 
-export const templeReviewsQueryOptions = (templestayId: string, page: number) =>
-  queryOptions<ReviewsResponse>({
-    queryKey: ['reviews', templestayId, page],
-    queryFn: () => getTempleReviews(templestayId, page),
+export const templeReviewsQueryOptions = (id: number, page: number) =>
+  queryOptions({
+    queryKey: ['reviews', id, page],
+    queryFn: () => getTempleReviews(id, page),
+    select: (res: ApiResponse<ReviewsResponse>) => res.data,
   });
diff --git a/src/apis/templeInfo/type.ts b/src/apis/templeInfo/type.ts
@@ -33,10 +33,10 @@ export interface Review {
 }
 
 export interface ReviewsResponse {
-  templestayId: string;
+  id: number;
+  reviewCount: number;
   page: number;
   pageSize: number;
   totalPages: number;
-  reviewCount: number;
   reviews?: Review[];
 }
diff --git a/src/app/detail/[templestayId]/TempleDetailClient.tsx b/src/app/detail/[templestayId]/TempleDetailClient.tsx
@@ -144,7 +144,7 @@ const TempleDetailClient = ({ id }: TempleDetailClientProps) => {
         </StickyTapBar>
       </div>
       <div className={styles.templeDetailMiddle}>
-        <TempleReview />
+        <TempleReview templeId={id} />
         <TempleSchedule schedule={data.schedule} />
         <TemplePrice templestayPrice={data.price} />
         <TempleInfo introduction={data.introduction} />
diff --git a/src/app/detail/[templestayId]/blog/BlogReviewClient.tsx b/src/app/detail/[templestayId]/blog/BlogReviewClient.tsx
@@ -11,7 +11,7 @@ import { useState, useEffect } from 'react';
 import * as styles from './style.css';
 
 interface BlogReviewClientProps {
-  templestayId: string;
+  templestayId: number;
   initialPage: number;
 }
 
diff --git a/src/app/detail/[templestayId]/blog/page.tsx b/src/app/detail/[templestayId]/blog/page.tsx
@@ -11,20 +11,21 @@ const BlogReviewPage = async ({
   searchParams: Promise<{ page?: string }>;
 }) => {
   const { templestayId } = await params;
+  const id = Number(templestayId);
   const { page } = await searchParams;
   const currentPage = parseInt(page || '1', 10);
 
   const queryClient = new QueryClient();
 
-  const cachedData = queryClient.getQueryData(['reviews', templestayId, currentPage]);
+  const cachedData = queryClient.getQueryData(['reviews', id, currentPage]);
 
   if (!cachedData) {
-    await queryClient.prefetchQuery(templeReviewsQueryOptions(templestayId, currentPage));
+    await queryClient.prefetchQuery(templeReviewsQueryOptions(id, currentPage));
   }
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <BlogReviewClient templestayId={templestayId} initialPage={currentPage} />
+      <BlogReviewClient templestayId={id} initialPage={currentPage} />
     </HydrationBoundary>
   );
 };
diff --git a/src/app/detail/[templestayId]/page.tsx b/src/app/detail/[templestayId]/page.tsx
@@ -13,13 +13,12 @@ const TempleDetailPage = async ({ params }: { params: Promise<{ templestayId: st
   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(id)),
     queryClient.prefetchQuery(templeImagesQueryOptions(id)),
-    queryClient.prefetchQuery(templeReviewsQueryOptions(stringId, 1)),
+    queryClient.prefetchQuery(templeReviewsQueryOptions(id, 1)),
   ]);
 
   return (
diff --git a/src/components/card/reviewCard/reviewCard/ReviewCard.tsx b/src/components/card/reviewCard/reviewCard/ReviewCard.tsx
@@ -1,6 +1,8 @@
 const emptyMediumImage = '/assets/images/img_gray_light_leaf_medium.png';
 const emptySmallImage = '/assets/images/img_gray_light_leaf_small.png';
 
+import Image from 'next/image';
+
 import * as styles from './reviewCard.css';
 import CardInfo from '../cardInfo/CardInfo';
 
@@ -27,14 +29,26 @@ const ReviewCard = ({
     window.open(reviewLink, '_blank');
   };
   const emptyImage = size === 'small' ? emptyMediumImage : emptySmallImage;
+  const dimensions = size === 'small' ? { width: 240, height: 115 } : { width: 335, height: 118 };
 
   return (
     <button className={styles.cardContainer({ size })} onClick={handleButtonClick}>
       {blogImage ? (
-        <img className={styles.cardImage({ size })} src={blogImage} alt="thumbnail" />
+        <Image
+          className={styles.cardImage({ size })}
+          src={blogImage}
+          alt="thumbnail"
+          width={dimensions.width}
+          height={dimensions.height}
+        />
       ) : (
         <div className={styles.emptyImage({ size })}>
-          <img src={emptyImage} alt="빈 이미지"></img>
+          <Image
+            src={emptyImage}
+            alt="빈 이미지"
+            width={dimensions.width}
+            height={dimensions.height}
+          />
         </div>
       )}
       <div className={styles.cardContent({ size })}>
diff --git a/src/components/carousel/detailCarousel/DetailCarousel.tsx b/src/components/carousel/detailCarousel/DetailCarousel.tsx
@@ -2,6 +2,7 @@ import { useGetTempleImages } from '@apis/templeInfo';
 import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
 import useCarousel from '@hooks/useCarousel';
 import registDragEvent from '@utils/registDragEvent';
+import Image from 'next/image';
 import { useParams } from 'next/navigation';
 
 import * as styles from './detailCarousel.css';
@@ -29,7 +30,7 @@ const DetailCarousel = () => {
   if (!data) {
     return (
       <div className={styles.emptyImageContainer}>
-        <img src={largeEmptyImage} alt="빈 이미지"></img>
+        <Image src={largeEmptyImage} alt="빈 이미지" width={335} height={210}></Image>
       </div>
     );
   }
diff --git a/src/components/carousel/detailCarousel/DetailImage.tsx b/src/components/carousel/detailCarousel/DetailImage.tsx
@@ -1,12 +1,13 @@
 import useNavigateTo from '@hooks/useNavigateTo';
+import Image from 'next/image';
 import { useParams } from 'next/navigation';
 
 import * as styles from './detailCarousel.css';
 import NumberTag from './numberTag/NumberTag';
 
 interface ImageItemProps {
   id: number;
-  imgUrl?: string;
+  imgUrl: string;
   currentNum: number;
   totalNum?: number;
 }
@@ -27,7 +28,14 @@ const ImageItem = ({ id, imgUrl, currentNum, totalNum }: ImageItemProps) => {
       }}
       className={styles.imageBox}
       key={id}>
-      <img className={styles.imageStyle} src={imgUrl} alt={`Templestay ${id}`} draggable={false} />
+      <Image
+        className={styles.imageStyle}
+        src={imgUrl}
+        alt={`Templestay ${id}`}
+        draggable={false}
+        width={335}
+        height={210}
+      />
       <div className={styles.numberStyle}>
         <NumberTag currentNum={currentNum} totalNum={totalNum} />
       </div>
diff --git a/src/components/templeDetail/templeReview/TempleReview.tsx b/src/components/templeDetail/templeReview/TempleReview.tsx
@@ -6,16 +6,19 @@ import DetailTitle from '@components/detailTitle/DetailTitle';
 import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
 import useNavigateTo from '@hooks/useNavigateTo';
 import { useQuery } from '@tanstack/react-query';
-import { useParams } from 'next/navigation';
 import useEventLogger from 'src/gtm/hooks/useEventLogger';
 
 import * as styles from './templeReview.css';
 
-const TempleReview = () => {
-  const { templestayId } = useParams();
-  const navigateToLargeReview = useNavigateTo(`/detail/${templestayId}/blog`);
+interface TempleReviewProps {
+  templeId: number;
+}
 
-  const { data, isLoading, isError } = useQuery(templeReviewsQueryOptions(String(templestayId), 1));
+const TempleReview = ({ templeId }: TempleReviewProps) => {
+  const Id = templeId;
+  const navigateToLargeReview = useNavigateTo(`/detail/${Id}/blog`);
+
+  const { data, isLoading, isError } = useQuery(templeReviewsQueryOptions(Id, 1));
 
   const { logClickEvent } = useEventLogger('blog_review');
 
@@ -32,7 +35,7 @@ const TempleReview = () => {
     return <ExceptLayout type="networkError" />;
   }
 
-  if (!(data && data.reviews && data.reviews.length)) {
+  if (!(data && data.reviews)) {
     return (
       <div className={styles.emptyContainer}>
         <DetailTitle title="리뷰" isTotal={false} />

Original file line number	Diff line number	Diff line change
`@@ -33,10 +33,10 @@ export interface Review {`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`export interface ReviewsResponse {`
`36`		`- templestayId: string;`
	`36`	`+ id: number;`
	`37`	`+ reviewCount: number;`
`37`	`38`	`page: number;`
`38`	`39`	`pageSize: number;`
`39`	`40`	`totalPages: number;`
`40`		`- reviewCount: number;`
`41`	`41`	`reviews?: Review[];`
`42`	`42`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ import { useState, useEffect } from 'react';`
`11`	`11`	`import * as styles from './style.css';`
`12`	`12`
`13`	`13`	`interface BlogReviewClientProps {`
`14`		`- templestayId: string;`
	`14`	`+ templestayId: number;`
`15`	`15`	`initialPage: number;`
`16`	`16`	`}`
`17`	`17`