diff --git a/public/img/landing_5.png b/public/img/landing_5.png index befa01ea..d14026f8 100644 Binary files a/public/img/landing_5.png and b/public/img/landing_5.png differ diff --git a/public/img/landing_mobile_5.png b/public/img/landing_mobile_5.png index 104ba3cb..474b394b 100644 Binary files a/public/img/landing_mobile_5.png and b/public/img/landing_mobile_5.png differ diff --git a/src/App.tsx b/src/App.tsx index d8d4f75a..4b722b04 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,8 @@ +import useAuth from '@hooks/auth/useAuth'; import { Router } from '@pages/Router'; function App() { + useAuth(true); return ; } diff --git a/src/hooks/auth/useAuth/index.ts b/src/hooks/auth/useAuth/index.ts index 05519216..1de63edd 100644 --- a/src/hooks/auth/useAuth/index.ts +++ b/src/hooks/auth/useAuth/index.ts @@ -1,51 +1,46 @@ import { shallow } from 'zustand/shallow'; import useAuthStore from './store'; import axiosInstance from '@libs/api/client'; -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import { demoStart, getAccountMe, logout } from '@libs/api/auth'; +import { useMutation } 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/useInitStore'; import useEditShiftStore from '@hooks/shift/useEditShift/store'; +import { useEffect } from 'react'; -const useAuth = () => { - const [isAuth, accessToken, nurseId, accountId, wardId, demoStartDate, _loaded, setState] = - useAuthStore( - (state) => [ - state.isAuth, - state.accessToken, - state.nurseId, - state.accountId, - state.wardId, - state.demoStartDate, - state._loaded, - state.setState, - ], - shallow - ); +const useAuth = (activeEffect = false) => { + const [ + accountMe, + isAuth, + accessToken, + nurseId, + accountId, + wardId, + demoStartDate, + _loaded, + setState, + ] = useAuthStore( + (state) => [ + state.accountMe, + state.isAuth, + state.accessToken, + state.nurseId, + state.accountId, + state.wardId, + state.demoStartDate, + state._loaded, + state.setState, + ], + shallow + ); const initStore = useInitStore(); const { initState: initEditShiftStore } = useEditShiftStore(); const navigate = useNavigate(); - const queryClient = useQueryClient(); - const accountMeQueryKey = ['accountMe']; - - const { data: accountMe } = useQuery(accountMeQueryKey, getAccountMe, { - onSuccess: (account) => { - setState('isAuth', true); - setState('wardId', account.wardId); - setState('accountId', account.accountId); - setState('nurseId', account.nurseId); - }, - enabled: !!_loaded, - }); - - const { mutate: handleLogout } = useMutation(() => logout(accessToken), { - onMutate: () => { - queryClient.cancelQueries(accountMeQueryKey); - initStore(); - }, - }); + const handleLogout = async () => { + initStore(); + }; const handleLogin = (accessToken: string, nextPageUrl?: string) => { setState('isAuth', true); @@ -68,10 +63,22 @@ const useAuth = () => { }, }); + const handleGetAccountMe = async () => { + const account = await getAccountMe(); + setState('accountMe', account); + setState('wardId', account.wardId); + setState('accountId', account.accountId); + setState('nurseId', account.nurseId); + setState('isAuth', true); + }; + + useEffect(() => { + if (_loaded && activeEffect) { + handleGetAccountMe(); + } + }, [activeEffect, accessToken, _loaded]); + return { - queryKey: { - accountMeQuery: accountMeQueryKey, - }, state: { accountMe: accountMe === undefined ? null : accountMe, isAuth, @@ -83,6 +90,7 @@ const useAuth = () => { _loaded, }, actions: { + handleGetAccountMe, handleLogin, handleLogout, demoTry, diff --git a/src/hooks/auth/useAuth/store.ts b/src/hooks/auth/useAuth/store.ts index 271a99e6..af49f468 100644 --- a/src/hooks/auth/useAuth/store.ts +++ b/src/hooks/auth/useAuth/store.ts @@ -5,6 +5,7 @@ import { produce } from 'immer'; import { setAccessToken } from '@libs/api/client'; interface State { + accountMe: Account | null; isAuth: boolean; accessToken: string | null; accountId: number | null; @@ -20,6 +21,7 @@ interface Store extends State { } const initialState: State = { + accountMe: null, isAuth: false, accessToken: null, accountId: null, diff --git a/src/hooks/auth/useRegister/index.ts b/src/hooks/auth/useRegister/index.ts index 1e422803..8cce48e4 100644 --- a/src/hooks/auth/useRegister/index.ts +++ b/src/hooks/auth/useRegister/index.ts @@ -1,4 +1,4 @@ -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useMutation, useQuery } from '@tanstack/react-query'; import { CreateNurseDTO, createAccountNurse } from '@libs/api/nurse'; import useAuth from '../useAuth'; import { CreateWardDTO, addMeToWatingNurses, createWrad, deleteWatingNurses } from '@libs/api/ward'; @@ -8,19 +8,17 @@ import ROUTE from '@libs/constant/path'; const useRegister = () => { const { - queryKey: { accountMeQuery }, state: { accountMe, accountId }, + actions: { handleGetAccountMe }, } = useAuth(); const navigate = useNavigate(); - const queryClient = useQueryClient(); - const { mutate: changeAccountStatusMutate } = useMutation( ({ accountId, status }: { accountId: number; status: Account['status'] }) => eidtAccountStatus(accountId, status), { onSuccess: ({ status }) => { - queryClient.invalidateQueries(accountMeQuery); + handleGetAccountMe(); if (status === 'LINKED') navigate(ROUTE.MAKE); }, } diff --git a/src/hooks/useInitStore.ts b/src/hooks/useInitStore.ts index 5361b358..21dc08b0 100644 --- a/src/hooks/useInitStore.ts +++ b/src/hooks/useInitStore.ts @@ -1,3 +1,4 @@ +import { setAccessToken } from '@libs/api/client'; import useAuthStore from './auth/useAuth/store'; import useEditShiftStore from './shift/useEditShift/store'; import { useRequestShiftStore } from './shift/useRequestShift/store'; @@ -11,6 +12,7 @@ const useInitStore = () => { initReqShiftStore(); initShiftStore(); initAuthStore(); + setAccessToken(''); }; return initStore; diff --git a/src/pages/LandingPage/index.tsx b/src/pages/LandingPage/index.tsx index 7f956036..c2d67092 100644 --- a/src/pages/LandingPage/index.tsx +++ b/src/pages/LandingPage/index.tsx @@ -14,7 +14,7 @@ import { useNavigate } from 'react-router'; function LandingPage() { const { - state: { isAuth }, + state: { isAuth, accountMe }, actions: { handleLogout, demoTry }, } = useAuth(); const navigate = useNavigate(); @@ -99,7 +99,7 @@ function LandingPage() { onClick={() => handleLogout()} className="cursor-pointer rounded-[1.875rem] border-[.0625rem] border-sub-2.5 px-[1rem] py-[.25rem] font-apple text-[1.125rem] font-medium text-sub-2.5" > - 로그아웃 + {accountMe?.status === 'DEMO' ? '데모 종료하기' : '로그아웃'} ) : (