feat: 웹뷰 브릿지 추가 및 웹뷰 공연 생성 대응

README.md

@@ -25,3 +25,4 @@
 - `packages/config-typescript`: 각 패키지에서 공통적으로 사용될 TypeScript 관련 설정이 포함된 패키지입니다.
 - `packages/icon`: 공통적으로 사용될 아이콘 컴포넌트가 포함된 패키지입니다.
 - `packages/ui`: 공통적으로 사용될 디자인 컴포넌트가 포함된 패키지입니다.
+- `packages/ui`: 공통적으로 사용될 웹뷰 브릿지가 포함된 패키지입니다.

apps/admin/package.json

@@ -6,13 +6,14 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
     "lint:fix": "TIMING=1 eslint . --ext ts,tsx --fix",
     "type-check": "tsc --noEmit",
     "preview": "vite preview"
   },
   "dependencies": {
     "@boolti/api": "*",
+    "@boolti/bridge": "*",
     "@boolti/icon": "*",
     "@boolti/ui": "*",
     "@dnd-kit/core": "^6.1.0",
@@ -27,21 +28,22 @@
     "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",
     "react": "^18.2.0",
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-error-boundary": "^4.1.2",
     "react-hook-form": "^7.50.0",
     "react-intersection-observer": "^9.8.0",
     "react-pdf": "^9.0.0",
     "react-router-dom": "^6.21.3",
     "react-select": "^5.8.0",
     "react-tooltip": "^5.26.3",
-    "the-new-css-reset": "^1.11.2"
+    "the-new-css-reset": "^1.11.2",
+    "vconsole": "^3.15.1"
   },
   "devDependencies": {
     "@boolti/eslint-config": "*",

apps/admin/src/App.tsx

@@ -40,9 +40,13 @@ import ShowTicketPage from './pages/ShowTicketPage';
 import ShowReservationPage from './pages/ShowReservationPage';
 import ShowSettlementPage from './pages/ShowSettlementPage';
 import ShowEnterancePage from './pages/ShowEnterancePage';
+import { initVConsole } from './utils/vConsole';
+import { checkIsWebView } from '@boolti/bridge';
 
 setDefaultOptions({ locale: ko });
 
+initVConsole();
+
 const publicRoutes = [
   {
     element: (
@@ -97,7 +101,7 @@ const publicRoutes = [
 const PrivateRoute = () => {
   const { isLogin } = useAuthAtom();
 
-  if (!isLogin()) {
+  if (!isLogin() && !checkIsWebView()) {
     return <Navigate to={PATH.LOGIN} replace />;
   }
 

apps/admin/src/atoms/useAuthAtom.ts

@@ -1,7 +1,5 @@
-import Cookies from 'js-cookie';
-import { LOCAL_STORAGE, COOKIES } from '@boolti/api';
+import { LOCAL_STORAGE } from '@boolti/api';
 import { atom, useAtom } from 'jotai';
-import { useEffect } from 'react';
 
 const storageMethod = {
   getItem: (key: string, initialValue: string | null) => {
@@ -15,41 +13,9 @@ const storageMethod = {
   },
 };
 
-const accessTokenAtom = atom<string | null>(
-  (() => {
-    const accessTokenFromCookie = Cookies.get(COOKIES.ACCESS_TOKEN);
-    const accessTokenFromStorage = storageMethod.getItem(LOCAL_STORAGE.ACCESS_TOKEN, null);
+const accessTokenAtom = atom<string | null>(null);
 
-    if (accessTokenFromCookie) {
-      localStorage.setItem(LOCAL_STORAGE.ACCESS_TOKEN, accessTokenFromCookie);
-      return accessTokenFromCookie;
-    }
-
-    if (accessTokenFromStorage) {
-      return accessTokenFromStorage;
-    }
-
-    return null;
-  })(),
-);
-
-const refreshTokenAtom = atom<string | 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;
-  })(),
-);
+const refreshTokenAtom = atom<string | null>(null);
 
 export const useAuthAtom = () => {
   const [accessToken, setAccessToken] = useAtom(accessTokenAtom);
@@ -65,40 +31,12 @@ 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 = ({ key, newValue }: StorageEvent) => {
-      switch (key) {
-        case LOCAL_STORAGE.ACCESS_TOKEN: {
-          setAccessToken(newValue);
-          newValue
-            ? Cookies.set(COOKIES.ACCESS_TOKEN, newValue)
-            : Cookies.remove(COOKIES.ACCESS_TOKEN);
-          return;
-        }
-        case LOCAL_STORAGE.REFRESH_TOKEN: {
-          setRefreshToken(newValue);
-          newValue
-            ? Cookies.set(COOKIES.REFRESH_TOKEN, newValue)
-            : Cookies.remove(COOKIES.REFRESH_TOKEN);
-          return;
-        }
-      }
-    };
-    window.addEventListener('storage', handler);
-
-    return () => {
-      window.removeEventListener('storage', handler);
-    };
-  }, [setAccessToken, setRefreshToken]);
-
   return {
     setToken,
     removeToken,