Merge pull request #300 from JEOLLOGA/feat/#299/popular-stay-v2

[FEAT] 인기 템플스테이 api v2 전환

Author: maylh

next.config.ts

@@ -6,7 +6,7 @@ const withVanillaExtract = createVanillaExtractPlugin();
 const nextConfig: NextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ['noms.templestay.com'],
+    domains: ['noms.templestay.com', 'www.templestay.com'],
   },
   webpack(config) {
     config.module.rules.push({

src/apis/ranking/axios.ts

@@ -1,11 +1,8 @@
-import { getAxiosInstance } from '@apis/instance';
+import instance from '@apis/instance';
 
-const getRanking = async (userId: number | null) => {
-  const axiosInstance = getAxiosInstance();
+const getRanking = async () => {
+  const res = await instance.get('/v2/api/templestay/recommendation');
 
-  const res = await axiosInstance.get('/ranking', {
-    params: { userId },
-  });
   return res.data;
 };
 

src/apis/ranking/index.ts

@@ -1,11 +1,13 @@
 import getRanking from '@apis/ranking/axios';
 import { RankingResponse } from '@apis/ranking/type';
+import { ApiResponse } from '@apis/response';
 import { useQuery } from '@tanstack/react-query';
 
-const useGetRanking = (userId: number | null) => {
-  const { data, isLoading, isError } = useQuery<RankingResponse>({
-    queryKey: ['ranking', userId],
-    queryFn: () => getRanking(userId),
+const useGetRanking = () => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['ranking'],
+    queryFn: () => getRanking(),
+    select: (res: ApiResponse<RankingResponse>) => res.data.recommendTemplestays,
   });
 
   return { data, isLoading, isError };

src/apis/ranking/type.ts

@@ -1,15 +1,13 @@
-// api 관련 interface 및 type 정리
-
 export interface Temple {
-  ranking: number;
-  templestayId: number;
-  templeName: string;
-  tag: string;
-  region: string;
-  liked: boolean;
+  id: number;
+  rank: number;
+  templestayName: string;
   imgUrl: string;
+  region: string;
+  templeName: string;
+  wish: boolean;
 }
 
 export interface RankingResponse {
-  rankings: Temple[];
+  recommendTemplestays: Temple[];
 }

src/components/card/popularCard/PopularCard.tsx

@@ -10,21 +10,21 @@ import * as styles from './popularCard.css';
 
 interface PopularCardProps {
   ranking: number;
-  templeName: string;
+  templestayName: string;
   templeLoc: string;
   templeImg: string;
-  tag: string;
+  templeName: string;
   isLiked?: boolean;
   onLikeToggle: (liked: boolean) => void;
   link: string;
 }
 
 const PopularCard = ({
   ranking,
-  templeName,
+  templestayName,
   templeLoc,
   templeImg,
-  tag,
+  templeName,
   isLiked = false,
   onLikeToggle,
   link,
@@ -55,19 +55,19 @@ const PopularCard = ({
         <div className={styles.imgBox}>
           <Image
             src={templeImg}
-            alt={`${templeName} 대표 이미지`}
+            alt={`${templestayName} 대표 이미지`}
             fill
             style={{ objectFit: 'cover' }}
           />
           <RankBtn ranking={ranking} />
         </div>
         <div className={styles.bottomWrapper}>
           <div className={styles.bottomContainer}>
-            <h3 className={styles.templeName}>{templeName}</h3>
+            <h3 className={styles.templestayName}>{templestayName}</h3>
             <div className={styles.bottomBox}>
               <span>{templeLoc}</span>
               <Icon.IcnDivider />
-              <span>#{tag}</span>
+              <span>{templeName}</span>
             </div>
           </div>
           <button className={styles.likeBtn} onClick={handleLikeClick}>

src/components/card/popularCard/popularCard.css.ts

@@ -17,7 +17,7 @@ export const templeInfoBox = style({
   flexDirection: 'column',
 });
 
-export const templeName = style({
+export const templestayName = style({
   ...theme.FONTS.h3Sb18,
   textAlign: 'left',
 });

src/components/carousel/popularCarousel/PopularCarousel.tsx

@@ -21,11 +21,11 @@ const PopularCarousel = ({ onRequireLogin }: PopularCarouselProps) => {
   const addWishlistMutation = useAddWishlist();
   const removeWishlistMutation = useRemoveWishlist();
 
-  const { data, isLoading, isError } = useGetRanking(userId);
+  const { data, isLoading, isError } = useGetRanking();
 
   const { currentIndex, carouselRef, transformStyle, handleDragChange, handleDragEnd } =
     useCarousel({
-      itemCount: data?.rankings?.length || 0,
+      itemCount: data?.length || 0,
       moveDistance: 355,
     });
 
@@ -65,23 +65,23 @@ const PopularCarousel = ({ onRequireLogin }: PopularCarouselProps) => {
             onDragChange: handleDragChange,
             onDragEnd: handleDragEnd,
           })}>
-          {data?.rankings &&
-            data.rankings.map((rankings) => (
+          {data &&
+            data.map((temple) => (
               <PopularCard
-                key={rankings.templestayId}
-                ranking={rankings.ranking}
-                templeName={rankings.templeName}
-                templeLoc={rankings.region}
-                templeImg={rankings.imgUrl}
-                isLiked={rankings.liked}
-                tag={rankings.tag}
-                onLikeToggle={(liked: boolean) => handleLikeToggle(rankings.templestayId, liked)}
-                link={`/detail/${rankings.templestayId}`}
+                key={temple.id}
+                ranking={temple.rank}
+                templestayName={temple.templestayName}
+                templeLoc={temple.region}
+                templeImg={temple.imgUrl}
+                isLiked={temple.wish}
+                templeName={temple.templeName}
+                onLikeToggle={(liked: boolean) => handleLikeToggle(temple.id, liked)}
+                link={`/detail/${temple.id}`}
               />
             ))}
         </div>
       </div>
-      <CarouselIndex total={data?.rankings?.length || 0} currentIndex={currentIndex} />
+      <CarouselIndex total={data?.length || 0} currentIndex={currentIndex} />
     </section>
   );
 };

src/stories/PopularCard.stories.ts

@@ -12,7 +12,7 @@ const meta = {
     ranking: {
       control: { type: 'number' },
     },
-    templeName: {
+    templestayName: {
       control: { type: 'text' },
     },
     templeLoc: {
@@ -21,7 +21,7 @@ const meta = {
     templeImg: {
       control: { type: 'text' },
     },
-    tag: {
+    templeName: {
       control: { type: 'text' },
     },
 
@@ -34,11 +34,11 @@ const meta = {
   },
   args: {
     ranking: 1,
-    templeName: '봉은사',
-    templeLoc: '서울',
+    templestayName: '봉선사 사부대중과 함께하는 선명상',
+    templeLoc: '경기',
     templeImg:
       'https://img.danawa.com/images/descFiles/6/110/5109431_agiLaciMHn_1659098198501.jpeg',
-    tag: '방긋방긋',
+    templeName: '봉선사',
     link: 'https://www.gototemplestay.com/',
     isLiked: false,
     onLikeToggle: () => alert('Liked'),