Merge branch 'develop' into feat/#290/filter-ssr

Author: seong-hui

index.html

@@ -51,8 +51,5 @@
 
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <script
-      type="text/javascript"
-      src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=%VITE_NAVER_API_KEY%"></script>
   </body>
 </html>

next.config.ts

@@ -5,22 +5,31 @@ 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({
-      test: /\.svg$/,
-      issuer: /\.[jt]sx?$/,
-      use: [
-        {
-          loader: '@svgr/webpack',
-          options: {
-            memo: true,
-          },
-        },
-      ],
-    });
+    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
+
+    config.module.rules.push(
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/,
+      },
+
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
+        use: ['@svgr/webpack'],
+      },
+    );
+
+    fileLoaderRule.exclude = /\.svg$/i;
+
     return config;
   },
 };

src/apis/instance.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import API_URL from '@apis/env';
 import MESSAGES from '@apis/messages';
 import { getStorageValue } from '@hooks/useLocalStorage';

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[];
 }