SSUMC-8th · leetaesk · May 26, 2025 · May 19, 2025 · May 20, 2025 · May 22, 2025
diff --git a/Week6/.prettierrc b/Week6/.prettierrc
diff --git a/Week6/package.json b/Week6/package.json
@@ -27,6 +27,8 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.21.0",
+        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+        "@types/node": "^22.15.18",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@vitejs/plugin-react-swc": "^3.8.0",
@@ -37,6 +39,7 @@
         "globals": "^15.15.0",
         "postcss": "^8.5.3",
         "prettier": "3.5.3",
+        "prettier-plugin-sort-imports": "^1.8.7",
         "tailwindcss": "3.4.1",
         "typescript": "~5.7.2",
         "typescript-eslint": "^8.24.1",

diff --git a/Week6/prettier.config.js b/Week6/prettier.config.js
@@ -0,0 +1,27 @@
+// prettier.config.js (ESM 방식)
+import pluginSortImports from 'prettier-plugin-sort-imports';
+
+export default {
+  trailingComma: 'all',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  plugins: ['@trivago/prettier-plugin-sort-imports'],
+  importOrder: [
+    '^react$',
+    '<THIRD_PARTY_MODULES>',
+    '^@utils(/.*)?$',
+    '^@apis(/.*)?$',
+    '^@constants(/.*)?$',
+    '^@types(/.*)?$',
+    '^@schemas(/.*)?$',
+    '^@context(/.*)?$',
+    '^@layout(/.*)?$',
+    '^@components(/.*)?$',
+    '^@pages(/.*)?$',
+    '^@(/.*)?$', // 루트 fallback
+    '^[./]', // 상대 경로
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};
diff --git a/Week6/src/App.tsx b/Week6/src/App.tsx
@@ -1,54 +1,60 @@
 import {
-    createBrowserRouter,
-    RouteObject,
-    RouterProvider,
+  RouteObject,
+  RouterProvider,
+  createBrowserRouter,
 } from 'react-router-dom';
-import HomePage from './pages/Home/HomePage';
-import Layout from './layout/Layout';
-import SignupPage from './pages/SignUp/SignupPage';
-import Mypage from './pages/Mypage/Mypage';
-import LoginPage from './pages/Login/LoginPage';
-import ProtectedLayout from './layout/ProtectedLayout';
-import GoogleLoginRedirectPage from './pages/Login/GoogleLoginRedirectPage';
-import Lp from './pages/Lp/Lp';
-import ROUTES from './constants/routes';
-import { API_AUTH } from './constants/api';
+
+import { API_AUTH } from '@/constants/api';
+import ROUTES from '@/constants/routes';
+import Layout from '@/layout/Layout';
+import ProtectedLayout from '@/layout/ProtectedLayout';
+import HomePage from '@/pages/Home/HomePage';
+import GoogleLoginRedirectPage from '@/pages/Login/GoogleLoginRedirectPage';
+import LoginPage from '@/pages/Login/LoginPage';
+import Lp from '@/pages/Lp/Lp';
+import Mypage from '@/pages/Mypage/Mypage';
+import SignupPage from '@/pages/SignUp/SignupPage';
+
+import SearchPage from './pages/SearchPage';
+import Throttlepage from './throttlepage';
 
 const publicRoutes: RouteObject[] = [
-    {
-        path: ROUTES.HOME,
-        element: <Layout />,
-        children: [
-            { path: ROUTES.HOME, element: <HomePage /> },
-            { path: ROUTES.LOGIN, element: <LoginPage /> },
-            { path: ROUTES.SIGNUP, element: <SignupPage /> },
-            {
-                path: API_AUTH.GOOGLE_CALLBACK,
-                element: <GoogleLoginRedirectPage />,
-            },
-        ],
-    },
+  {
+    path: ROUTES.HOME,
+    element: <Layout />,
+    children: [
+      { path: ROUTES.HOME, element: <HomePage /> },
+      { path: ROUTES.SEARCH, element: <SearchPage /> },
+      { path: ROUTES.LOGIN, element: <LoginPage /> },
+      { path: ROUTES.SIGNUP, element: <SignupPage /> },
+      { path: '/test', element: <Throttlepage /> },
+      {
+        path: API_AUTH.GOOGLE_CALLBACK,
+        element: <GoogleLoginRedirectPage />,
+      },
+    ],
+  },
 ];
 
 const protectedRoutes: RouteObject[] = [
-    {
-        path: ROUTES.HOME,
-        element: (
-            <ProtectedLayout>
-                <Layout />
-            </ProtectedLayout>
-        ),
-        children: [
-            { path: ROUTES.MYPAGE, element: <Mypage /> },
-            { path: ROUTES.LP_DETAIL(), element: <Lp /> },
-        ],
-    },
+  {
+    path: ROUTES.HOME,
+    element: (
+      <ProtectedLayout>
+        <Layout />
+      </ProtectedLayout>
+    ),
+    children: [
+      { path: ROUTES.MYPAGE, element: <Mypage /> },
+      { path: ROUTES.LP_DETAIL(), element: <Lp /> },
+    ],
+  },
 ];
 
 const router = createBrowserRouter([...publicRoutes, ...protectedRoutes]);
 
 function App() {
-    return <RouterProvider router={router} />;
+  return <RouterProvider router={router} />;
 }
 
 export default App;
diff --git a/Week6/src/apis/auth.ts b/Week6/src/apis/auth.ts
@@ -1,37 +1,32 @@
-import { API_AUTH, API_USERS } from '../constants/api';
+import { API_AUTH } from '@constants/api';
+
 import {
-    RequestSigninDto,
-    RequestSignupDto,
-    ResponseMyInfoDto,
-    ResponseSigninDto,
-    ResponseSignupDto,
-} from '../types/auth';
+  RequestSigninDto,
+  RequestSignupDto,
+  ResponseSigninDto,
+  ResponseSignupDto,
+} from '@/types/auth';
+
 import { privateAxios, publicAxios } from './axiosInstance';
 
 export const postSignup = async (
-    body: RequestSignupDto,
+  body: RequestSignupDto,
 ): Promise<ResponseSignupDto> => {
-    const { data } = await publicAxios.post(API_AUTH.SIGN_UP, body);
+  const { data } = await publicAxios.post(API_AUTH.SIGN_UP, body);
 
-    return data;
+  return data;
 };
 
 export const postSignin = async (
-    body: RequestSigninDto,
+  body: RequestSigninDto,
 ): Promise<ResponseSigninDto> => {
-    const { data } = await publicAxios.post(API_AUTH.SIGN_IN, body);
-
-    return data;
-};
-
-export const getMyInfo = async (): Promise<ResponseMyInfoDto> => {
-    const { data } = await privateAxios.get(API_USERS.GET_ME);
+  const { data } = await publicAxios.post(API_AUTH.SIGN_IN, body);
 
-    return data;
+  return data;
 };
 
 export const postLogout = async () => {
-    const { data } = await privateAxios.post(API_AUTH.SIGN_OUT);
+  const { data } = await privateAxios.post(API_AUTH.SIGN_OUT);
 
-    return data;
+  return data;
 };
diff --git a/Week6/src/apis/axiosInstance.ts b/Week6/src/apis/axiosInstance.ts
@@ -1,86 +1,84 @@
 import axios, { InternalAxiosRequestConfig } from 'axios';
-import { tokenStorage } from '../utils/tokenStorage';
-import { API_AUTH } from '../constants/api';
-import ROUTES from '../constants/routes';
+
+import { tokenStorage } from '@utils/tokenStorage';
+
+import { API_AUTH } from '@constants/api';
+import ROUTES from '@constants/routes';
 
 interface CustomInternalAxiosRequestConfig extends InternalAxiosRequestConfig {
-    _retry?: boolean;
+  _retry?: boolean;
 }
 
 let refreshPromise: Promise<string> | null = null;
 
 const baseConfig = {
-    baseURL: import.meta.env.VITE_SERVER_API_URL,
-    withCredentials: true,
+  baseURL: import.meta.env.VITE_SERVER_API_URL,
+  withCredentials: true,
 };
 
 export const publicAxios = axios.create({ ...baseConfig });
 export const privateAxios = axios.create({ ...baseConfig });
 
 privateAxios.interceptors.request.use(
-    (config) => {
-        const token = tokenStorage.getAccessToken();
-        if (token) {
-            config.headers.Authorization = `Bearer ${token}`;
-        }
-        return config;
-    },
-    (error) => Promise.reject(error),
+  (config) => {
+    const token = tokenStorage.getAccessToken();
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error),
 );
 
 privateAxios.interceptors.response.use(
-    (response) => response,
-    async (error) => {
-        const originalRequest: CustomInternalAxiosRequestConfig = error.config;
-
-        if (
-            error.response &&
-            error.response.status === 401 &&
-            !originalRequest._retry
-        ) {
-            if (originalRequest.url === API_AUTH.REFRESH_TOKEN) {
-                tokenStorage.clear();
-                window.location.href = ROUTES.LOGIN;
-                return Promise.reject(error);
-            }
-
-            originalRequest._retry = true;
-
-            if (!refreshPromise) {
-                refreshPromise = (async () => {
-                    const refreshToken = tokenStorage.getRefreshToken();
-
-                    const { data } = await privateAxios.post(
-                        API_AUTH.REFRESH_TOKEN,
-                        {
-                            refresh: refreshToken,
-                        },
-                    );
-
-                    tokenStorage.setAccessToken(data.data.accessToken);
-                    tokenStorage.setRefreshToken(data.data.refreshToken);
-
-                    return data.data.accessToken;
-                })()
-                    .catch(() => {
-                        tokenStorage.clear();
-                        window.location.href = ROUTES.LOGIN;
-                        return null;
-                    })
-                    .finally(() => {
-                        refreshPromise = null;
-                    });
-            }
-
-            return refreshPromise.then((newAccessToken) => {
-                if (!newAccessToken) return Promise.reject(error);
-
-                originalRequest.headers['Authorization'] =
-                    `Bearer ${newAccessToken}`;
-                return privateAxios.request(originalRequest);
-            });
-        }
+  (response) => response,
+  async (error) => {
+    const originalRequest: CustomInternalAxiosRequestConfig = error.config;
 
+    if (
+      error.response &&
+      error.response.status === 401 &&
+      !originalRequest._retry
+    ) {
+      if (originalRequest.url === API_AUTH.REFRESH_TOKEN) {
+        tokenStorage.clear();
+        window.location.href = ROUTES.LOGIN;
         return Promise.reject(error);
-    },
+      }
+
+      originalRequest._retry = true;
+
+      if (!refreshPromise) {
+        refreshPromise = (async () => {
+          const refreshToken = tokenStorage.getRefreshToken();
+
+          const { data } = await privateAxios.post(API_AUTH.REFRESH_TOKEN, {
+            refresh: refreshToken,
+          });
+
+          tokenStorage.setAccessToken(data.data.accessToken);
+          tokenStorage.setRefreshToken(data.data.refreshToken);
+
+          return data.data.accessToken;
+        })()
+          .catch(() => {
+            tokenStorage.clear();
+            window.location.href = ROUTES.LOGIN;
+            return null;
+          })
+          .finally(() => {
+            refreshPromise = null;
+          });
+      }
+
+      return refreshPromise.then((newAccessToken) => {
+        if (!newAccessToken) return Promise.reject(error);
+
+        originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
+        return privateAxios.request(originalRequest);
+      });
+    }
+
+    return Promise.reject(error);
+  },
 );