Merge pull request #72 from taco-official/hotfix

fix(hotfix): fix logout logic

src/components/UserProfile/UserEditButton.jsx

@@ -2,12 +2,9 @@ import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Button } from 'antd'
 import theme from '@styles/theme'
-import kyMethod from '@constants/kyMethod'
-import useKyMutation from '@hooks/useKyMutation'
 
 function UserEditButton() {
   const navigate = useNavigate()
-  const { mutateAsync } = useKyMutation(kyMethod.POST, 'logout', ['me'])
 
   return (
     <>
@@ -26,14 +23,7 @@ function UserEditButton() {
         프로필 수정
       </Button>
       <Button
-        onClick={async () => {
-          try {
-            await mutateAsync()
-            navigate('/')
-          } catch {
-            alert('로그아웃 하지 못했습니다. 다시 시도해 주세요')
-          }
-        }}
+        onClick={() => navigate('/logout')}
         type="text"
         style={{
           fontFamily: theme.style.main,

src/hooks/useUserData.js

@@ -4,25 +4,22 @@ import useLoginStore from '@stores/useLoginStore'
 import useKyQuery from './useKyQuery'
 
 const useUserData = () => {
-  const {
-    isLoading,
-    data: userData,
-    isError,
-  } = useKyQuery('me', undefined, {
-    staleTime: 1000 * 60 * 60,
-    gcTime: 1000 * 60 * 60,
+  const { isLoading, data: userData } = useKyQuery('me', undefined, {
+    staleTime: 1000 * 60 * 10,
+    gcTime: 1000 * 60 * 10,
     select: (data) => data.data,
   })
   const loginStore = useLoginStore()
 
   useEffect(() => {
-    if (isLoading) return
-    if (userData)
+    if (userData) {
       if (!loginStore.isLogin) loginStore.setLogin(userData)
-      else if (!isEqual(loginStore.loginData, userData))
+      else if (loginStore.isLogin && !isEqual(userData, loginStore.loginData))
         loginStore.setLoginData(userData)
-    if (isError && loginStore.isLogin) loginStore.setLogout()
-  }, [isLoading, userData, isError])
+    }
+  }, [userData])
+
+  return isLoading
 }
 
 export default useUserData

src/pages/Layout.jsx

@@ -6,16 +6,16 @@ import GlobalStyle from '@styles/GlobalStyle'
 import useUserData from '@hooks/useUserData'
 import NavBar from '@components/Navbar/NavBar'
 import Footer from '@components/Footer/Footer'
+import LoadingPage from './LoadingPage'
 
 export default function Layout() {
-  useUserData()
-
+  const isLoading = useUserData()
   return (
     <>
       <GlobalStyle />
       <NavBar />
       <StyledMain>
-        <RouterProvider router={router} />
+        {isLoading ? <LoadingPage /> : <RouterProvider router={router} />}
       </StyledMain>
       <Footer />
     </>

src/pages/LogoutPage/LogoutPage.jsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import kyMethod from '@constants/kyMethod'
+import useLoginStore from '@stores/useLoginStore'
+import useKyMutation from '@hooks/useKyMutation'
+
+function LogoutPage() {
+  const isLogin = useLoginStore((state) => state.isLogin)
+  const setLogout = useLoginStore((state) => state.setLogout)
+  const { mutate } = useKyMutation(kyMethod.POST, 'logout', ['me'])
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (isLogin) {
+      setLogout()
+      mutate()
+    }
+    navigate('/')
+  }, [])
+}
+
+export default LogoutPage

src/pages/index.js

@@ -7,6 +7,7 @@ const FeedPage = lazy(() => import('./FeedPage/FeedPage'))
 const MyPage = lazy(() => import('./UserPage/MyPage'))
 const MyEditPage = lazy(() => import('./UserEditPage/UserEditPage'))
 const UserPage = lazy(() => import('./UserPage/UserPage'))
+const LogoutPage = lazy(() => import('./LogoutPage/LogoutPage'))
 
 export {
   HomePage,
@@ -16,4 +17,5 @@ export {
   MyPage,
   MyEditPage,
   UserPage,
+  LogoutPage,
 }

src/router.jsx

@@ -43,6 +43,10 @@ const routes = [
     loader: loader.userLoader,
     element: <pages.UserPage />,
   },
+  {
+    path: 'logout',
+    element: <pages.LogoutPage />,
+  },
   {
     path: '*',
     element: <ErrorPage />,