환경변수 경로 변경 (#115)

환경변수 경로 변경

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/shared/utils/env"]
+	path = src/shared/utils/env
+	url = https://github.com/Dobbymin/sinitto-submodule.git

src/pages/common/main/components/login-button/LoginButton.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 
 import Logo from '../../assets/kakao.svg';
-import { KAKAO_AUTH_URL } from '@/shared/constants';
+import { KAKAO_AUTH_URL } from '@/shared/utils/env/config';
 import { Image, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 

src/pages/common/redirect/api/index.ts

@@ -1 +1,2 @@
-export { getKakaoCallback } from './kakao-callback.api';
+export { getKakaoCallback, KakaoCallbackQueryKey } from './kakao-callback.api';
+export type { KakaoCallbackResponse } from './kakao-callback.api';

src/pages/common/redirect/hooks/useGetKakaoCallback.ts

@@ -2,7 +2,7 @@ import {
   getKakaoCallback,
   KakaoCallbackQueryKey,
   KakaoCallbackResponse,
-} from '../api/kakao-callback.api';
+} from '@/pages';
 import { useQuery } from '@tanstack/react-query';
 
 export const useGetKakaoCallback = (code: string) => {

src/shared/api/instance/Instance.tsx

@@ -0,0 +1,96 @@
+import type {
+  AxiosInstance,
+  AxiosRequestConfig,
+  InternalAxiosRequestConfig,
+} from 'axios';
+import axios from 'axios';
+
+import { authLocalStorage } from '@/shared';
+import { BASE_URI } from '@/shared/utils/env/config';
+import { QueryClient } from '@tanstack/react-query';
+
+const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
+  const instance = axios.create({
+    timeout: 5000,
+    ...config,
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      'Cross-Control-Allow-Origin': '*',
+
+      ...config.headers,
+    },
+  });
+
+  return instance;
+};
+
+export const fetchInstance = initInstance({
+  baseURL: BASE_URI,
+});
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnMount: true,
+      refetchOnReconnect: true,
+      refetchOnWindowFocus: true,
+    },
+  },
+});
+
+fetchInstance.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    const accessToken = authLocalStorage.get();
+    if (accessToken !== undefined) {
+      config.headers['Content-Type'] = 'application/json';
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+fetchInstance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+
+      const refreshToken = localStorage.getItem('refreshToken');
+
+      if (!refreshToken) {
+        return Promise.reject(error);
+      }
+      const resp = await fetch(`${BASE_URI}/api/auth/refresh`, {
+        method: 'post',
+        headers: {
+          'Content-Type': 'application/json',
+          'Cross-Control-Allow-Origin': '*',
+          Authorization: `Bearer ${refreshToken}`,
+        },
+      });
+      if (resp.ok) {
+        console.log('토큰 재발급 성공');
+
+        const data = await resp.json();
+
+        localStorage.setItem('accessToken', data.accessToken);
+        localStorage.setItem('refreshToken', data.refreshToken);
+
+        return fetchInstance(originalRequest);
+      } else {
+        console.log('토큰 재발급 실패');
+
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+      }
+      return Promise.reject(error);
+    }
+    return Promise.reject(error);
+  }
+);

src/shared/api/instance/index.ts

@@ -1,96 +1 @@
-import type {
-  AxiosInstance,
-  AxiosRequestConfig,
-  InternalAxiosRequestConfig,
-} from 'axios';
-import axios from 'axios';
-
-import { BASE_URI } from '@/shared';
-import { authLocalStorage } from '@/shared/utils/storage';
-import { QueryClient } from '@tanstack/react-query';
-
-const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
-  const instance = axios.create({
-    timeout: 5000,
-    ...config,
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-      'Cross-Control-Allow-Origin': '*',
-
-      ...config.headers,
-    },
-  });
-
-  return instance;
-};
-
-export const fetchInstance = initInstance({
-  baseURL: BASE_URI,
-});
-
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: 1,
-      refetchOnMount: true,
-      refetchOnReconnect: true,
-      refetchOnWindowFocus: true,
-    },
-  },
-});
-
-fetchInstance.interceptors.request.use(
-  (config: InternalAxiosRequestConfig) => {
-    const accessToken = authLocalStorage.get();
-    if (accessToken !== undefined) {
-      config.headers['Content-Type'] = 'application/json';
-      config.headers.Authorization = `Bearer ${accessToken}`;
-    }
-    return config;
-  },
-  (error) => {
-    return Promise.reject(error);
-  }
-);
-
-fetchInstance.interceptors.response.use(
-  (response) => response,
-  async (error) => {
-    const originalRequest = error.config;
-    if (error.response?.status === 401 && !originalRequest._retry) {
-      originalRequest._retry = true;
-
-      const refreshToken = localStorage.getItem('refreshToken');
-
-      if (!refreshToken) {
-        return Promise.reject(error);
-      }
-      const resp = await fetch(`${BASE_URI}/api/auth/refresh`, {
-        method: 'post',
-        headers: {
-          'Content-Type': 'application/json',
-          'Cross-Control-Allow-Origin': '*',
-          Authorization: `Bearer ${refreshToken}`,
-        },
-      });
-      if (resp.ok) {
-        console.log('토큰 재발급 성공');
-
-        const data = await resp.json();
-
-        localStorage.setItem('accessToken', data.accessToken);
-        localStorage.setItem('refreshToken', data.refreshToken);
-
-        return fetchInstance(originalRequest);
-      } else {
-        console.log('토큰 재발급 실패');
-
-        localStorage.removeItem('accessToken');
-        localStorage.removeItem('refreshToken');
-      }
-      return Promise.reject(error);
-    }
-    return Promise.reject(error);
-  }
-);
+export { fetchInstance, queryClient } from './Instance';

src/shared/index.ts

@@ -1,5 +1,5 @@
 export * from './components';
-export * from './constants';
+// export * from './constants';
 export * from './hooks';
 export * from './provider';
 export * from './types';

src/shared/utils/index.ts

@@ -1,2 +1,4 @@
 export { handleCallbackError } from './handle-callback-error';
+
+export * from './storage';
 export * from './phone-number';

src/shared/utils/storage/authLocalStorage.ts

@@ -0,0 +1,26 @@
+type StorageKey = {
+  accessToken?: string;
+};
+
+const initStorage = <T extends keyof StorageKey>(
+  key: T,
+  storage = window.localStorage
+) => {
+  const storageKey = `${key}`;
+
+  const get = (): StorageKey[T] => {
+    const value = storage.getItem(storageKey);
+    return value as StorageKey[T];
+  };
+
+  const set = (value: StorageKey[T]) => {
+    if (value === undefined || value === null) {
+      return storage.removeItem(storageKey);
+    }
+    storage.setItem(storageKey, String(value));
+  };
+
+  return { get, set };
+};
+
+export const authLocalStorage = initStorage('accessToken', localStorage);

src/shared/utils/storage/index.ts

@@ -1,26 +1 @@
-type StorageKey = {
-  accessToken?: string;
-};
-
-const initStorage = <T extends keyof StorageKey>(
-  key: T,
-  storage = window.localStorage
-) => {
-  const storageKey = `${key}`;
-
-  const get = (): StorageKey[T] => {
-    const value = storage.getItem(storageKey);
-    return value as StorageKey[T];
-  };
-
-  const set = (value: StorageKey[T]) => {
-    if (value === undefined || value === null) {
-      return storage.removeItem(storageKey);
-    }
-    storage.setItem(storageKey, String(value));
-  };
-
-  return { get, set };
-};
-
-export const authLocalStorage = initStorage('accessToken', localStorage);
+export { authLocalStorage } from './authLocalStorage';