Merge pull request #190 from prgrms-web-devcourse-final-project/feat/#…

…186 Feat/#186 회원 탈퇴 기능 연동
prgrms-web-devcourse-final-project · Dec 9, 2024 · c6d950a · c6d950a
2 parents c065d62 + dfd7b89
commit c6d950a
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 26 deletions.
diff --git a/src/apis/unregisterService.ts b/src/apis/unregisterService.ts
@@ -0,0 +1,7 @@
+import fetchApi from "@apis/ky";
+import { logoutPost } from "@apis/logoutService";
+
+export const unregisterDelete = async () => {
+    await fetchApi.delete('members/me')
+    logoutPost()
+}
diff --git a/src/constants/alertMessage.ts b/src/constants/alertMessage.ts
@@ -64,6 +64,13 @@ const ALERT_MESSAGE = {
     actionText: '삭제하기',
     cancelText: '취소',
   },
+
+  UNREGISTER: {
+    title: '회원 탈퇴',
+    notice: '회원 탈퇴하시겠습니까?',
+    actionText: '탈퇴하기',
+    cancelText: '취소',
+  },
 }
 
 export type AlertMessage = keyof typeof ALERT_MESSAGE

diff --git a/src/layouts/GlobalNav/index.tsx b/src/layouts/GlobalNav/index.tsx
@@ -13,7 +13,6 @@ import UserIconFill from '@assets/icon/nav_user_fill.svg?react'
 import { Link, useLocation } from 'react-router-dom'
 import { ROUTE_PATH } from '@constants/ROUTE_PATH'
 import { useEffect, useState } from 'react'
-import { useUserStore } from '@store/useUserStore'
 
 const GlobalNav = () => {
   const { pathname } = useLocation()
@@ -36,32 +35,53 @@ const GlobalNav = () => {
         </NavList>
 
         <NavList>
-          <Link to={ROUTE_PATH.MATE_LIST}>
-            {pathname === ROUTE_PATH.MATE_LIST ? (
-              <FindIconFill />
-            ) : (
+          {isLogin ? (
+            <Link to={ROUTE_PATH.MATE_LIST}>
+              {pathname === ROUTE_PATH.MATE_LIST ? (
+                <FindIconFill />
+              ) : (
+                <FindIcon />
+              )}
+              <NavText>메이트 찾기</NavText>
+            </Link>
+          ) : (
+            <Link to={ROUTE_PATH.LOGIN}>
               <FindIcon />
-            )}
-            <NavText>메이트 찾기</NavText>
-          </Link>
+              <NavText>메이트 찾기</NavText>
+            </Link>
+          )}
         </NavList>
 
         <NavList>
-          <Link to={ROUTE_PATH.GOODS_LIST}>
-            {pathname === ROUTE_PATH.GOODS_LIST ? (
-              <TradeIconFill />
-            ) : (
+          {isLogin ? (
+            <Link to={ROUTE_PATH.GOODS_LIST}>
+              {pathname === ROUTE_PATH.GOODS_LIST ? (
+                <TradeIconFill />
+              ) : (
+                <TradeIcon />
+              )}
+              <NavText>굿즈거래</NavText>
+            </Link>
+          ) : (
+            <Link to={ROUTE_PATH.LOGIN}>
               <TradeIcon />
-            )}
-            <NavText>굿즈거래</NavText>
-          </Link>
+              <NavText>굿즈거래</NavText>
+            </Link>
+          )}
         </NavList>
 
         <NavList>
-          <Link to={ROUTE_PATH.CHAT}>
-            {pathname === ROUTE_PATH.CHAT ? <ChatIconFill /> : <ChatIcon />}
-            <NavText>채팅</NavText>
-          </Link>
+          {isLogin ? (
+            <Link to={ROUTE_PATH.CHAT}>
+              {pathname === ROUTE_PATH.CHAT ? <ChatIconFill /> : <ChatIcon />}
+              <NavText>채팅</NavText>
+            </Link>
+          ) : (
+            <Link to={ROUTE_PATH.LOGIN}>
+              <ChatIcon />
+              <NavText>채팅</NavText>
+            </Link>
+          )}
         </NavList>
 
         <NavList>

diff --git a/src/pages/ProfilePage/ProfileMain.tsx b/src/pages/ProfilePage/ProfileMain.tsx
@@ -31,10 +31,14 @@ import { UserInfo } from '@typings/userForm'
 import Alert from '@components/Alert'
 import ALERT_MESSAGE from '@constants/alertMessage'
 import { logoutPost } from '@apis/logoutService'
+import { unregisterDelete } from '@apis/unregisterService'
 import { formatManner } from '@utils/formatManner'
 
+
 const ProfileMain = () => {
-  const alertRef = useRef<HTMLDialogElement | null>(null)
+  const logoutAlertRef = useRef<HTMLDialogElement | null>(null) // 로그아웃용 ref
+  const unregisterAlertRef = useRef<HTMLDialogElement | null>(null) // 회원탈퇴용 ref
+
   const navigate = useNavigate()
   const { id } = useParams()
 
@@ -50,17 +54,17 @@ const ProfileMain = () => {
   )
 
   const handleLogoutClick = () => {
-    if (alertRef.current) {
-      alertRef.current.showModal()
+    if (logoutAlertRef.current) {
+      logoutAlertRef.current.showModal()
     }
   }
 
   const confirmLogout = async () => {
     try {
       await logoutPost()
-      localStorage.removeItem('token')
-      if (alertRef.current) {
-        alertRef.current.close()
+      localStorage.clear()
+      if (logoutAlertRef.current) {
+        logoutAlertRef.current.close()
       }
       navigate(ROUTE_PATH.HOME)
     } catch (error) {
@@ -102,7 +106,7 @@ const ProfileMain = () => {
         onLogoutClick={handleLogoutClick}
       />
       <Alert
-        ref={alertRef}
+        ref={logoutAlertRef}
         title={ALERT_MESSAGE.LOGOUT.title}
         notice={ALERT_MESSAGE.LOGOUT.notice}
         actionText={ALERT_MESSAGE.LOGOUT.actionText}
@@ -233,6 +237,35 @@ const ProfileMain = () => {
             </>
           ) : null}
         </ProfileLinkWrap>
+        <ProfilePadding paddingTop={1.25}>
+          <GlobalButton
+            $isNavy={false}
+            text='회원탈퇴'
+            onClick={() => {
+              if (unregisterAlertRef.current) {
+                unregisterAlertRef.current.showModal()
+              }
+            }}
+          />
+        </ProfilePadding>
+        <Alert
+          ref={unregisterAlertRef}
+          title={ALERT_MESSAGE.UNREGISTER.title}
+          notice={ALERT_MESSAGE.UNREGISTER.notice}
+          actionText={ALERT_MESSAGE.UNREGISTER.actionText}
+          cancelText={ALERT_MESSAGE.UNREGISTER.cancelText}
+          handleAlertClick={async () => {
+            try {
+              await unregisterDelete()
+              localStorage.clear()
+              navigate(ROUTE_PATH.HOME)
+              toast.success('회원탈퇴가 완료되었습니다.')
+            } catch (error) {
+              console.error('회원탈퇴 실패:', error)
+              toast.error('회원탈퇴에 실패했습니다. 다시 시도해주세요.')
+            }
+          }}
+        />
       </section>
     </>
   )