Merge pull request #250 from ItRecode/FE-209

[FE-209] feat: 로그아웃 구현

Author: sookyeonghwang

src/apis/auth.ts

@@ -19,3 +19,7 @@ export const getIsDuplicatedNickname = (nickname: string) => {
     params: { nickname },
   })
 }
+
+export const logout = () => {
+  return baseInstance.post(`/member/logout`)
+}

src/pages/Setting/Setting.tsx

@@ -1,16 +1,28 @@
 import { useUser } from '@react-query/hooks/useUser'
-import React from 'react'
+import React, { useState } from 'react'
 import SettingSection from './SettingSection'
 import { ReactComponent as Front } from '@assets/front_white.svg'
 import { useNavigate } from 'react-router-dom'
+import Alert from '@components/Alert'
 import Loading from '@components/Loading'
 
 export default function Setting() {
-  const { user, isLoading } = useUser()
+  const { user, isLoading, logoutUser } = useUser()
+  const [isClickedLogout, setIsClickedLogout] = useState(false)
+
   const PADDING_VALUE = 24
 
   const navigate = useNavigate()
 
+  const handleLogout = async () => {
+    try {
+      logoutUser()
+      navigate('/')
+    } catch (e) {
+      alert('로그아웃에 실패하였습니다.')
+    }
+  }
+
   const getPaddingIgnoreWidth = () => {
     return `ml-[-${PADDING_VALUE}px] w-[calc(100%+${PADDING_VALUE * 2}px)]`
   }
@@ -73,12 +85,32 @@ export default function Setting() {
       {user && (
         <div>
           <div className={`h-[15px] ${getPaddingIgnoreWidth()} bg-grey-2`} />
-          <section>
+          <section
+            id="logout-item-section"
+            onClick={() => setIsClickedLogout(true)}
+          >
             <SettingSection routeText="로그아웃" />
+          </section>
+          <section id="withdraw-item-section">
             <SettingSection routeText="회원탈퇴" routeUrl="/setting/withdraw" />
           </section>
         </div>
       )}
+      {isClickedLogout && (
+        <Alert
+          visible={true}
+          mainMessage={
+            <>
+              <span className="text-sub-1">로그아웃</span> 하시겠어요?
+            </>
+          }
+          confirmMessage="둘러보기"
+          cancelMessage="로그아웃"
+          onConfirm={() => setIsClickedLogout(false)}
+          onClose={() => setIsClickedLogout(false)}
+          onCancel={handleLogout}
+        />
+      )}
     </div>
   )
 }

src/react-query/hooks/useUser.ts

@@ -1,8 +1,11 @@
 import { QUERY_KEYS } from '@react-query/queryKeys'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { getUserInfo } from '@apis/user'
+import { logout } from '@apis/auth'
 
 export const useUser = () => {
+  const queryClient = useQueryClient()
+
   const {
     data: user = null,
     refetch,
@@ -11,5 +14,10 @@ export const useUser = () => {
     retry: false,
   })
 
-  return { user, refetch, isLoading }
+  const logoutUser = async () => {
+    await logout()
+    queryClient.setQueriesData([QUERY_KEYS.user], null)
+  }
+
+  return { user, refetch, isLoading, logoutUser }
 }