refactor: api.logout() -> useResetUserInfo() (#230)

* feat: 로그아웃 기능 추가 (ProfileDropdownMenu) * feat: 로그아웃 기능 추가 (LogoutModal)
yourssu · Jun 23, 2024 · ec959f0 · ec959f0
1 parent b51df88
commit ec959f0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/src/components/ProfileDropdownMenu/ProfileDropdownMenu.tsx b/src/components/ProfileDropdownMenu/ProfileDropdownMenu.tsx
@@ -1,5 +1,7 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+
+import { useResetUserInfo } from '@/hooks/useResetUserInfo';
 
 import {
   StyledProfileDropdownContent,
@@ -23,6 +25,15 @@ export const ProfileDropdownMenu = ({
   email,
   children,
 }: ProfileDropdownMenuProps) => {
+  const navigate = useNavigate();
+  const resetUserInfo = useResetUserInfo();
+
+  const handleLogout = () => {
+    resetUserInfo();
+    alert('로그아웃 되었습니다.');
+    navigate(0);
+  };
+
   return (
     <DropdownMenu.Root open={open} onOpenChange={onOpenChange}>
       {children}
@@ -36,7 +47,9 @@ export const ProfileDropdownMenu = ({
             <Link to="/mypage">마이페이지</Link>
           </StyledProfileDropdownItem>
           <StyledProfileDropdownItem asChild>
-            <button type="button">로그아웃</button>
+            <button type="button" onClick={handleLogout}>
+              로그아웃
+            </button>
           </StyledProfileDropdownItem>
         </StyledProfileDropdownContent>
       </DropdownMenu.Portal>

diff --git a/src/home/components/Dialog/LogoutModal.tsx b/src/home/components/Dialog/LogoutModal.tsx
@@ -3,7 +3,7 @@ import { BoxButton } from '@yourssu/design-system-react';
 import { useNavigate } from 'react-router-dom';
 
 import PpussungIcon from '@/assets/home/ppussung.svg';
-import { api } from '@/service/TokenService';
+import { useResetUserInfo } from '@/hooks/useResetUserInfo';
 
 import {
   StyledButtonContainer,
@@ -21,9 +21,10 @@ interface LogoutModalProps {
 
 export const LogoutModal = ({ open, onOpenChange }: LogoutModalProps) => {
   const navigate = useNavigate();
+  const resetUserInfo = useResetUserInfo();
 
   const handleLogout = () => {
-    api.logout();
+    resetUserInfo();
     alert('로그아웃 되었습니다.');
     navigate('/');
   };

diff --git a/src/home/components/Nav/Nav.tsx b/src/home/components/Nav/Nav.tsx
@@ -15,13 +15,6 @@ export const Nav = () => {
   const isLoggedIn = useRecoilValue(LogInState);
   const theme = useTheme();
 
-  // Todo: 로그아웃 기능 추가 (ProfileDropdownMenu)
-  // const handleLogout = () => {
-  //   sessionStorage.removeItem('accessExpiredIn');
-  //   api.logout();
-  //   return;
-  // };
-
   return (
     <StyledContainer>
       {isLoggedIn ? (