feat: 페이지 레이지 로딩 적용 및 웹뷰에서 공연등록 할 수 있도록 쿠키로 인증 처리

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",

apps/admin/src/App.tsx

@@ -16,25 +16,28 @@ 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';
 
 setDefaultOptions({ locale: ko });
 
@@ -43,7 +46,9 @@ const publicRoutes = [
     element: (
       <>
         <ScrollRestoration />
-        <Outlet />
+        <Suspense fallback={null}>
+          <Outlet />
+        </Suspense>
       </>
     ),
     children: [
@@ -97,7 +102,9 @@ const PrivateRoute = () => {
   return (
     <>
       <ScrollRestoration />
-      <Outlet />
+      <Suspense fallback={null}>
+        <Outlet />
+      </Suspense>
     </>
   );
 };

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

apps/admin/src/pages/index.ts

@@ -0,0 +1,33 @@
+import { lazy } from 'react';
+
+export const LandingPage = lazy(() => import('./Landing'));
+
+export const LoginPage = lazy(() => import('./Login'));
+
+export const QRPage = lazy(() => import('./QRPage'));
+
+export const OAuthKakaoPage = lazy(() => import('./OAuth/OAuthKakaoPage'));
+
+export const OAuthApplePage = lazy(() => import('./OAuth/OAuthApplePage'));
+
+export const HomePage = lazy(() => import('./HomePage'));
+
+export const ShowAddCompletePage = lazy(() => import('./ShowAddCompletePage'));
+
+export const ShowEnterancePage = lazy(() => import('./ShowEnterancePage'));
+
+export const ShowInfoPage = lazy(() => import('./ShowInfoPage'));
+
+export const ShowReservationPage = lazy(() => import('./ShowReservationPage'));
+
+export const ShowSettlementPage = lazy(() => import('./ShowSettlementPage'));
+
+export const ShowTicketPage = lazy(() => import('./ShowTicketPage'));
+
+export const SignUpCompletePage = lazy(() => import('./SignUpComplete'));
+
+export const SitePolicyPage = lazy(() => import('./SitePolicyPage'));
+
+export const GiftRegisterPage = lazy(() => import('./GiftRegisterPage'));
+
+export const GiftIntroPage = lazy(() => import('./GiftIntroPage'));

packages/api/src/constants/index.ts

@@ -1,4 +1,4 @@
 import { ERROR_CODE } from './errorCode';
-import { LOCAL_STORAGE } from './localStorage';
+import { LOCAL_STORAGE, COOKIES } from './storages';
 
-export { ERROR_CODE, LOCAL_STORAGE };
+export { ERROR_CODE, LOCAL_STORAGE, COOKIES };

packages/api/src/constants/storages.ts

@@ -0,0 +1,9 @@
+export const LOCAL_STORAGE = {
+  ACCESS_TOKEN: 'accessToken',
+  REFRESH_TOKEN: 'refreshToken',
+};
+
+export const COOKIES = {
+  ACCESS_TOKEN: 'x-access-token',
+  REFRESH_TOKEN: 'x-refresh-token',
+};

yarn.lock

@@ -4775,6 +4775,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/js-cookie@npm:^3.0.6":
+  version: 3.0.6
+  resolution: "@types/js-cookie@npm:3.0.6"
+  checksum: 10c0/173afaf5ea9d86c22395b9d2a00b6adb0006dcfef165d6dcb0395cdc32f5a5dcf9c3c60f97194119963a15849b8f85121e1ae730b03e40bc0c29b84396ba22f9
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:^7.0.12":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
@@ -5357,13 +5364,15 @@ __metadata:
     "@emotion/styled": "npm:^11.11.0"
     "@react-pdf/renderer": "npm:^3.4.4"
     "@tanstack/react-table": "npm:^8.12.0"
+    "@types/js-cookie": "npm:^3.0.6"
     "@types/lodash.debounce": "npm:^4.0.9"
     "@types/react": "npm:^18.2.43"
     "@types/react-dom": "npm:^18.2.17"
     "@vitejs/plugin-react": "npm:^4.2.1"
     date-fns: "npm:^3.3.1"
     framer-motion: "npm:^11.2.10"
     jotai: "npm:^2.8.3"
+    js-cookie: "npm:^3.0.5"
     jwt-decode: "npm:^4.0.0"
     lodash.debounce: "npm:^4.0.8"
     qrcode.react: "npm:^3.1.0"
@@ -9248,6 +9257,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-cookie@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "js-cookie@npm:3.0.5"
+  checksum: 10c0/04a0e560407b4489daac3a63e231d35f4e86f78bff9d792011391b49c59f721b513411cd75714c418049c8dc9750b20fcddad1ca5a2ca616c3aca4874cce5b3a
+  languageName: node
+  linkType: hard
+
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"