fix : 새로고침시 백엔드로 요청이 잘못 redirection오류 해결

새로고침시 백엔드로 redirection 요청이 잘못가던 오류 해결하기 위해서 vite.config.js (localhost의 redirection설정) /public/_redireciton(netlify의 redirection설정)파일 수정

Author: minseok1015

public/_redirects

@@ -1,10 +1,3 @@
-/auth/*  https://itpick.store/auth/:splat  200
-/user/*  https://itpick.store/user/:splat  200
-/keyword/search*  https://itpick.store/keyword/search:splat  200
-/keyword*  https://itpick.store/keyword:splat  200
-/rank/main-keywords  https://itpick.store/rank/main-keywords  200
-/rank/reference*  https://itpick.store/rank/reference:splat  200
-/rank*  https://itpick.store/rank:splat  200
-/debate  https://itpick.store/debate  200
-/debate/*  https://itpick.store/debate/:splat  200
+/api/*  https://itpick.store/:splat  200
+
 /*  /index.html  200

src/apis/getCommunityRankingKeyword.ts

@@ -2,13 +2,11 @@ import axios from 'axios';
 
 export const getCommunityRankingKeyword = async () => {
   try {
-    const response = await axios.get('/rank/main-keywords', {
-      
-    });
+    const response = await axios.get('/api/rank/main-keywords', {});
 
     return response.data.result;
   } catch (error) {
     console.error('홈 커뮤니티 별 랭킹 키워드 불러오는 중 오류 발생:', error);
     throw error;
   }
-};
+};

src/apis/getKeywordRelatedData.ts

@@ -17,9 +17,13 @@ interface Response {
   result: KeywordResult;
 }
 
-export const getKeywordRelatedData = async (community: string, period: string, keyword: string) => {
+export const getKeywordRelatedData = async (
+  community: string,
+  period: string,
+  keyword: string
+) => {
   try {
-    const response = await axios.get<Response>('/rank/reference', {
+    const response = await axios.get<Response>('/api/rank/reference', {
       params: {
         community: community,
         period: period,
@@ -34,4 +38,4 @@ export const getKeywordRelatedData = async (community: string, period: string, k
     console.error('키워드 관련자료 데이터를 가져오는 중 오류 발생:', error);
     throw error;
   }
-};
+};

src/apis/getRankingInfo.ts

@@ -22,10 +22,13 @@ interface Response {
   result: RankingResult;
 }
 
-
-export const getRankingInfo = async (community: string, period: string, date: string) => {
+export const getRankingInfo = async (
+  community: string,
+  period: string,
+  date: string
+) => {
   try {
-    const response = await axios.get<Response>('/rank', {
+    const response = await axios.get<Response>('/api/rank', {
       params: {
         community: community,
         period: period,
@@ -35,25 +38,27 @@ export const getRankingInfo = async (community: string, period: string, date: st
 
     console.log('랭킹 API 응답 데이터 확인', response.data);
 
-    const rankingList = response.data.result.rankingList.map((item: RankingItem) => {
-      const tags = [
-        item.nateRank !== -1 ? `네이트 ${item.nateRank}등` : '',
-        item.naverRank !== -1 ? `네이버 ${item.naverRank}등` : '',
-        item.zumRank !== -1 ? `줌 ${item.zumRank}등` : '',
-        item.googleRank !== -1 ? `구글 ${item.googleRank}등` : '',
-        item.namuwikiRank !== -1 ? `나무위키 ${item.namuwikiRank}등` : ''
-      ].filter(tag => tag !== ''); // 빈 문자열 제거
-
-      return {
-        rank: item.rank,
-        name: item.keyword,
-        tags: tags
-      };
-    });
+    const rankingList = response.data.result.rankingList.map(
+      (item: RankingItem) => {
+        const tags = [
+          item.nateRank !== -1 ? `네이트 ${item.nateRank}등` : '',
+          item.naverRank !== -1 ? `네이버 ${item.naverRank}등` : '',
+          item.zumRank !== -1 ? `줌 ${item.zumRank}등` : '',
+          item.googleRank !== -1 ? `구글 ${item.googleRank}등` : '',
+          item.namuwikiRank !== -1 ? `나무위키 ${item.namuwikiRank}등` : '',
+        ].filter((tag) => tag !== ''); // 빈 문자열 제거
+
+        return {
+          rank: item.rank,
+          name: item.keyword,
+          tags: tags,
+        };
+      }
+    );
 
     return rankingList;
   } catch (error) {
     console.error('랭킹 조회 중 오류:', error);
     throw error;
   }
-};
+};

src/apis/loginUser.ts

@@ -2,15 +2,15 @@ import axios from 'axios';
 
 export const loginUser = async (email: string, password: string) => {
   try {
-    const response = await axios.post('/auth/login', {
-      email,  // encodeURIComponent 제거
-      password,  // encodeURIComponent 제거
+    const response = await axios.post('/api/auth/login', {
+      email, // encodeURIComponent 제거
+      password, // encodeURIComponent 제거
     });
 
     return response.data;
   } catch (error) {
-    console.log("로그인 실패:",error);
+    console.log('로그인 실패:', error);
     return null; //로그인 실패시 null 반환
-    // throw error;  
+    // throw error;
   }
 };

vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
 import mkcert from 'vite-plugin-mkcert';
 
 // https://vitejs.dev/config/
@@ -8,57 +8,32 @@ export default defineConfig({
     react(),
     mkcert({
       force: false,
-    })
-  
-  
+    }),
   ],
   resolve: {
     alias: {
       '@images': '/src/assets/images',
       '@components': '/src/components',
       '@utils': '/src/utils',
-      '@apis': '/src/apis',  
+      '@apis': '/src/apis',
       '@pages': '/src/pages',
       '@store': '/src/store',
       '@hooks': '/src/hooks',
-    }
+    },
   },
   server: {
-    https:{
+    https: {
       key: 'cert/localhost-key.pem',
       cert: 'cert/localhost.pem',
     },
     proxy: {
-      '/auth': {
-        target: 'https://itpick.store',
-        changeOrigin: true,
-        secure: false,
-        rewrite: (path) => path.replace(/^\/auth/, '/auth')
-      },
-      '/user': {
-        target: 'https://itpick.store',
-        changeOrigin: true,
-        secure: false,
-        rewrite: (path) => path.replace(/^\/user/, '/user')
-      },
-      '/rank': {
-        target: 'https://itpick.store',
-        changeOrigin: true,
-        secure: false,
-        rewrite: (path) => path.replace(/^\/rank/, '/rank')
-      },
-      '/keyword': {
-        target: 'https://itpick.store',
-        changeOrigin: true,
-        secure: false,
-        rewrite: (path) => path.replace(/^\/keyword/, '/keyword')
-      },
-      '/debate': {
+      '/api': {
         target: 'https://itpick.store',
         changeOrigin: true,
+        // '/api' 제거
+        rewrite: (path) => path.replace(/^\/api/, ''),
         secure: false,
-        rewrite: (path) => path.replace(/^\/debate/, '/debate')
       },
     },
   },
-})
+});