Merge pull request #211 from Nexters/develop

[운영배포] 8차 MVP
Nexters · Oct 10, 2024 · cf52047 · cf52047
2 parents 8bf328f + 6a21c4b
commit cf52047
Show file tree

Hide file tree

Showing 93 changed files with 3,205 additions and 469 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -23,6 +23,7 @@
     "date-fns": "^3.3.1",
     "framer-motion": "^11.2.10",
     "jotai": "^2.8.3",
+    "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "lodash.debounce": "^4.0.8",
     "qrcode.react": "^3.1.0",
@@ -42,6 +43,7 @@
     "@boolti/eslint-config": "*",
     "@boolti/typescript-config": "*",
     "@emotion/babel-plugin": "^11.11.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.1",

diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx
@@ -16,25 +16,29 @@ import {
 
 import AuthErrorBoundary from './components/ErrorBoundary/AuthErrorBoundary';
 import { PATH } from './constants/routes';
-import HomePage from './pages/HomePage/HomePage';
-import LandingPage from './pages/Landing/LandingPage';
-import LoginPage from './pages/Login/LoginPage';
-import OAuthApplePage from './pages/OAuth/OAuthApplePage';
-import OAuthKakaoPage from './pages/OAuth/OAuthKakaoPage';
-import QRPage from './pages/QRPage/QRPage';
-import ShowAddCompletePage from './pages/ShowAddCompletePage/ShowAddCompletePage';
-import ShowAddPage from './pages/ShowAddPage/ShowAddPage';
-import ShowEnterancePage from './pages/ShowEnterancePage';
-import ShowInfoPage from './pages/ShowInfoPage/ShowInfoPage';
-import ShowReservationPage from './pages/ShowReservationPage';
-import ShowSettlementPage from './pages/ShowSettlementPage/ShowSettlementPage';
-import ShowTicketPage from './pages/ShowTicketPage/ShowTicketPage';
-import SignUpCompletePage from './pages/SignUpComplete/SignUpCompletePage';
-import SitePolicyPage from './pages/SitePolicyPage/SitePolicyPage';
-import GiftRegisterPage from './pages/GiftRegisterPage';
-import GiftIntroPage from './pages/GiftIntroPage';
 import { useAuthAtom } from './atoms/useAuthAtom';
 import GlobalErrorBoundary from './components/ErrorBoundary/GlobalErrorBoundary';
+import {
+  LandingPage,
+  LoginPage,
+  QRPage,
+  OAuthKakaoPage,
+  HomePage,
+  ShowAddCompletePage,
+  ShowEnterancePage,
+  ShowInfoPage,
+  ShowReservationPage,
+  ShowSettlementPage,
+  ShowTicketPage,
+  SignUpCompletePage,
+  SitePolicyPage,
+  GiftRegisterPage,
+  GiftIntroPage,
+  OAuthApplePage,
+} from './pages';
+import ShowAddPage from './pages/ShowAddPage';
+import { Suspense } from 'react';
+import { domAnimation, LazyMotion } from 'framer-motion';
 
 setDefaultOptions({ locale: ko });
 
@@ -43,7 +47,9 @@ const publicRoutes = [
     element: (
       <>
         <ScrollRestoration />
-        <Outlet />
+        <Suspense fallback={null}>
+          <Outlet />
+        </Suspense>
       </>
     ),
     children: [
@@ -97,7 +103,9 @@ const PrivateRoute = () => {
   return (
     <>
       <ScrollRestoration />
-      <Outlet />
+      <Suspense fallback={null}>
+        <Outlet />
+      </Suspense>
     </>
   );
 };
@@ -135,7 +143,9 @@ const routes: RouteObject[] = [
     element: (
       <QueryClientProvider>
         <BooltiUIProvider>
-          <Outlet />
+          <LazyMotion features={domAnimation}>
+            <Outlet />
+          </LazyMotion>
         </BooltiUIProvider>
       </QueryClientProvider>
     ),

diff --git a/apps/admin/src/atoms/useAuthAtom.ts b/apps/admin/src/atoms/useAuthAtom.ts
@@ -1,4 +1,5 @@
-import { LOCAL_STORAGE } from '@boolti/api';
+import Cookies from 'js-cookie';
+import { LOCAL_STORAGE, COOKIES } from '@boolti/api';
 import { atom, useAtom } from 'jotai';
 import { useEffect } from 'react';
 
@@ -13,11 +14,41 @@ const storageMethod = {
     window.localStorage.removeItem(key);
   },
 };
+
 const accessTokenAtom = atom<string | null>(
-  storageMethod.getItem(LOCAL_STORAGE.ACCESS_TOKEN, null),
+  (() => {
+    const accessTokenFromCookie = Cookies.get(COOKIES.ACCESS_TOKEN);
+    const accessTokenFromStorage = storageMethod.getItem(LOCAL_STORAGE.ACCESS_TOKEN, null);
+
+    if (accessTokenFromCookie) {
+      localStorage.setItem(LOCAL_STORAGE.ACCESS_TOKEN, accessTokenFromCookie);
+      return accessTokenFromCookie;
+    }
+
+    if (accessTokenFromStorage) {
+      return accessTokenFromStorage;
+    }
+
+    return null;
+  })(),
 );
+
 const refreshTokenAtom = atom<string | null>(
-  storageMethod.getItem(LOCAL_STORAGE.REFRESH_TOKEN, null),
+  (() => {
+    const refreshTokenFromCookie = Cookies.get(COOKIES.ACCESS_TOKEN);
+    const refreshTokenFromStorage = storageMethod.getItem(LOCAL_STORAGE.REFRESH_TOKEN, null);
+
+    if (refreshTokenFromCookie) {
+      localStorage.setItem(LOCAL_STORAGE.REFRESH_TOKEN, refreshTokenFromCookie);
+      return refreshTokenFromCookie;
+    }
+
+    if (refreshTokenFromStorage) {
+      return refreshTokenFromStorage;
+    }
+
+    return null;
+  })(),
 );
 
 export const useAuthAtom = () => {
@@ -34,21 +65,29 @@ export const useAuthAtom = () => {
   const removeToken = () => {
     storageMethod.removeItem(LOCAL_STORAGE.ACCESS_TOKEN);
     storageMethod.removeItem(LOCAL_STORAGE.REFRESH_TOKEN);
+    Cookies.remove(COOKIES.ACCESS_TOKEN);
+    Cookies.remove(COOKIES.REFRESH_TOKEN);
     setAccessToken(null);
     setRefreshToken(null);
   };
 
   const isLogin = () => !!accessToken && !!refreshToken;
 
   useEffect(() => {
-    const handler = (e: StorageEvent) => {
-      switch (e.key) {
+    const handler = ({ key, newValue }: StorageEvent) => {
+      switch (key) {
         case LOCAL_STORAGE.ACCESS_TOKEN: {
-          setAccessToken(e.newValue);
+          setAccessToken(newValue);
+          newValue
+            ? Cookies.set(COOKIES.ACCESS_TOKEN, newValue)
+            : Cookies.remove(COOKIES.ACCESS_TOKEN);
           return;
         }
         case LOCAL_STORAGE.REFRESH_TOKEN: {
-          setRefreshToken(e.newValue);
+          setRefreshToken(newValue);
+          newValue
+            ? Cookies.set(COOKIES.REFRESH_TOKEN, newValue)
+            : Cookies.remove(COOKIES.REFRESH_TOKEN);
           return;
         }
       }