hotfix/fix: fix logout

.github/workflows/main.yml

@@ -10,6 +10,7 @@ on:
   push:
     branches:
       - main
+      - hotfix
 
 jobs:
   build:

src/components/Navbar/components/LoginButton.jsx

@@ -10,7 +10,10 @@ const defaultImage =
   'https://del5h2y0q6wga.cloudfront.net/member_image/default.webp'
 
 export default function LoginButton() {
-  const { isLogin, loginData } = useLoginStore()
+  const [isLogin, loginData] = useLoginStore((state) => [
+    state.isLogin,
+    state.loginData,
+  ])
   const setModalState = useModalStore((store) => store.setModalState)
 
   return (

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,13 +23,9 @@ function UserEditButton() {
         프로필 수정
       </Button>
       <Button
-        onClick={async () => {
-          try {
-            await mutateAsync()
-            navigate('/')
-          } catch {
-            alert('로그아웃 하지 못했습니다. 다시 시도해 주세요')
-          }
+        onClick={() => {
+          console.log('로그아웃')
+          navigate('/logout')
         }}
         type="text"
         style={{

src/hooks/useUserData.js

@@ -5,10 +5,9 @@ import useKyQuery from './useKyQuery'
 
 const useUserData = () => {
   const {
-    isLoading,
+    isPending,
     isFetched,
     data: userData,
-    isError,
   } = useKyQuery('me', undefined, {
     staleTime: 1000 * 60 * 10,
     gcTime: 1000 * 60 * 10,
@@ -18,13 +17,17 @@ const useUserData = () => {
 
   useEffect(() => {
     if (userData) {
-      if (isFetched && !loginStore.isLogin) loginStore.setLogin(userData)
-      else if (loginStore.isLogin && !isEqual(userData, loginStore.loginData))
+      if (!loginStore.isLogin) {
+        loginStore.setLogin(userData)
+        console.log('안녕! 로그인 했구나?')
+      } else if (loginStore.isLogin && !isEqual(userData, loginStore.loginData))
         loginStore.setLoginData(userData)
-    } else if (isError && loginStore.isLogin) loginStore.setLogout()
-  }, [userData, isFetched, isError])
+    }
+  }, [userData, loginStore.isLogin, isFetched])
 
-  return isLoading
+  console.log('안녕!')
+
+  return isPending
 }
 
 export default useUserData

src/pages/Layout.jsx

@@ -10,7 +10,6 @@ import LoadingPage from './LoadingPage'
 
 export default function Layout() {
   const isLoading = useUserData()
-
   return (
     <>
       <GlobalStyle />

src/pages/LogoutPage/LogoutPage.jsx

@@ -0,0 +1,31 @@
+import React, { 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 setLogout = useLoginStore((state) => state.setLogout)
+  const navigate = useNavigate()
+  const { mutateAsync } = useKyMutation(kyMethod.POST, 'logout', ['me'])
+
+  useEffect(() => {
+    const logout = async () => {
+      console.log('안녕? 로그아웃 하려고?')
+      await mutateAsync()
+      console.log('만료됐을걸?')
+      setLogout()
+      navigate('/')
+    }
+
+    logout()
+  }, [])
+
+  return (
+    <div>
+      <div>LogoutPage</div>
+    </div>
+  )
+}
+
+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 />,