Fix: 인증 플로우 관련 개선

gom-3 · Oct 10, 2023 · b1c9264 · b1c9264
1 parent 50dab43
commit b1c9264
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 36 deletions.
diff --git a/src/components/Layouts/AuthzLayout.tsx b/src/components/Layouts/AuthzLayout.tsx
@@ -13,6 +13,9 @@ function AuthzLayout() {
   } = useAuth();
 
   useEffect(() => {
+    if (!isAuth) {
+      location.replace(ROUTE.LOGIN);
+    }
     if (accountMe && accountMe.status !== 'LINKED' && accountMe.status !== 'DEMO') {
       location.replace(ROUTE.REGISTER);
     }

diff --git a/src/hooks/auth/useAuth/index.ts b/src/hooks/auth/useAuth/index.ts
@@ -5,10 +5,10 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { demoStart, getAccountMe } from '@libs/api/auth';
 import { useNavigate } from 'react-router';
 import ROUTE from '@libs/constant/path';
-import useInitStore from '@hooks/useResetStore';
+import useInitStore from '@hooks/useInitStore';
 
 const useAuth = () => {
-  const [isAuth, accessToken, nurseId, accountId, wardId, demoStartDate, setState, initState] =
+  const [isAuth, accessToken, nurseId, accountId, wardId, demoStartDate, _loaded, setState] =
     useAuthStore(
       (state) => [
         state.isAuth,
@@ -17,8 +17,8 @@ const useAuth = () => {
         state.accountId,
         state.wardId,
         state.demoStartDate,
+        state._loaded,
         state.setState,
-        state.initState,
       ],
       shallow
     );
@@ -34,18 +34,14 @@ const useAuth = () => {
       setState('accountId', account.accountId);
       setState('nurseId', account.nurseId);
     },
-    onError: () => {
-      initState();
-    },
-    enabled: accessToken !== null,
+    enabled: !!_loaded,
   });
 
   const handleLogout = () => {
     initStore();
   };
 
   const handleLogin = (accessToken: string) => {
-    initStore();
     axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
     setState('accessToken', accessToken);
   };
@@ -75,6 +71,7 @@ const useAuth = () => {
       accountId,
       wardId,
       demoStartDate,
+      _loaded,
     },
     actions: {
       handleLogin,

diff --git a/src/hooks/auth/useAuth/store.ts b/src/hooks/auth/useAuth/store.ts
@@ -2,6 +2,7 @@
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { produce } from 'immer';
+import { setAccessToken } from '@libs/api/client';
 
 interface State {
   isAuth: boolean;
@@ -10,6 +11,7 @@ interface State {
   nurseId: number | null;
   wardId: number | null;
   demoStartDate: string | null;
+  _loaded: boolean;
 }
 
 interface Store extends State {
@@ -24,6 +26,7 @@ const initialState: State = {
   nurseId: null,
   wardId: null,
   demoStartDate: null,
+  _loaded: false,
 };
 
 const useAuthStore = create<Store>()(
@@ -37,25 +40,22 @@ const useAuthStore = create<Store>()(
               draft[key] = value;
             })
           ),
-        initState: () => set(initialState),
+        initState: () => set({ ...initialState, _loaded: true }),
       }),
       {
         name: 'useAuthStore',
-        partialize: ({
-          isAuth,
-          accessToken,
-          accountId,
-          nurseId,
-          wardId,
-          demoStartDate,
-        }: Store) => ({
-          isAuth,
-          accessToken,
-          accountId,
-          nurseId,
-          wardId,
-          demoStartDate,
-        }),
+        partialize: ({ isAuth, accessToken, accountId, nurseId, wardId, demoStartDate }: Store) => {
+          if (accessToken) setAccessToken(accessToken);
+          return {
+            isAuth,
+            accessToken,
+            accountId,
+            nurseId,
+            wardId,
+            demoStartDate,
+            _loaded: true,
+          };
+        },
       }
     )
   )

diff --git a/src/hooks/useResetStore.ts → src/hooks/useInitStore.ts b/src/hooks/useResetStore.ts → src/hooks/useInitStore.ts
diff --git a/src/libs/api/client.ts b/src/libs/api/client.ts
@@ -23,7 +23,7 @@ axiosInstance.interceptors.response.use(
         toast.error('에러가 발생했습니다. 다시 시도해주세요.');
       });
 
-    return Promise.reject(error);
+    return Promise.reject({ code: error.response.status, message: error.response.data.message });
   }
 );
 

diff --git a/src/pages/MakeShiftPage/components/Toolbar.tsx b/src/pages/MakeShiftPage/components/Toolbar.tsx
@@ -61,7 +61,7 @@ function Toolbar() {
           onClick={() => changeMonth('next')}
           className="h-[1.875rem] w-[1.875rem] cursor-pointer"
         />
-        <p className="ml-[1.25rem] font-apple text-[.875rem] text-main-1">
+        <p className="ml-[1.25rem] font-apple text-[.875rem] text-main-1" onClick={() => test()}>
           기본 OFF {shift?.days.filter((x) => x.dayType !== 'workday').length}일
         </p>
       </div>

diff --git a/src/pages/RegisterPage/RegisterWard.tsx b/src/pages/RegisterPage/RegisterWard.tsx
@@ -35,16 +35,6 @@ const schema = yup.object().shape({
 function RegisterWard() {
   const [shiftTeams, setShiftTeams] = useState<string[][]>([[]]);
   const [wardShiftTypes, setWardShiftTypes] = useState([
-    {
-      name: '오프',
-      shortName: 'O',
-      startTime: '',
-      endTime: '',
-      backgroundColor: '#465B7A',
-      textColor: '#FFFFFF',
-      isDefault: true,
-      isOff: true,
-    },
     {
       name: '데이',
       shortName: 'D',
@@ -75,6 +65,16 @@ function RegisterWard() {
       isDefault: true,
       isOff: false,
     },
+    {
+      name: '오프',
+      shortName: 'O',
+      startTime: '',
+      endTime: '',
+      backgroundColor: '#465B7A',
+      textColor: '#FFFFFF',
+      isDefault: true,
+      isOff: true,
+    },
   ]);
   const {
     formState: { errors, isValid },
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,7 @@ axiosInstance.interceptors.response.use( @@
             toast.error('에러가 발생했습니다. 다시 시도해주세요.');
           });
-        return Promise.reject(error);
+        return Promise.reject({ code: error.response.status, message: error.response.data.message });
       }
     );
@@ Expand Down @@