♻️ Refactor: 로그인, 닉네임 관련 재사용 가능하게 분리 완료

donga-it-club · Apr 10, 2024 · 5b9f6c4 · 5b9f6c4
1 parent ee63c91
commit 5b9f6c4
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 97 deletions.
diff --git a/src/components/layout/parts/MainNavBar.tsx b/src/components/layout/parts/MainNavBar.tsx
@@ -1,63 +1,19 @@
-import { useEffect, useState } from 'react';
 import { PersonCircle } from 'react-bootstrap-icons';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '@chakra-ui/react';
-import { fetchUserAttributes, getCurrentUser, signOut } from 'aws-amplify/auth';
 import { useRecoilState } from 'recoil';
 import LogoBox from './LogoBox';
 import MenuBar from './MenuBar';
+import UserNickname from '@/components/user/UserNickname';
+import { useAuth } from '@/hooks/useAuth';
 import { userNicknameState } from '@/recoil/user/userAtom';
 import * as S from '@/styles/layout/layout.style';
 
 const MainNavBar = () => {
   const navigate = useNavigate();
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const { isLoggedIn, handleLoginOrLogout } = useAuth();
   const [userNickname, setUserNickname] = useRecoilState(userNicknameState);
 
-  const checkLoginStatus = async () => {
-    try {
-      await getCurrentUser();
-      setIsLoggedIn(true);
-    } catch (error) {
-      setIsLoggedIn(false);
-    }
-  };
-
-  const handleLoginOrLogout = () => {
-    if (isLoggedIn) {
-      handleSignOut(); // 로그아웃 처리 함수 호출
-    } else {
-      navigate('/login');
-    }
-  };
-
-  // 로그아웃 처리 함수
-  async function handleSignOut() {
-    try {
-      await signOut({ global: true });
-      setIsLoggedIn(false); // 로그인 상태 업데이트
-      navigate('/'); // 로그아웃 후 홈으로 리디이렉션
-    } catch (error) {
-      console.log('로그아웃 에러', error);
-    }
-  }
-
-  // 닉네임 관련
-  async function handleFetchUserAttributes() {
-    try {
-      const userAttributes = await fetchUserAttributes();
-      console.log(userAttributes);
-      setUserNickname(userAttributes.nickname || null);
-    } catch (err) {
-      console.log(err);
-    }
-  }
-
-  useEffect(() => {
-    checkLoginStatus();
-    handleFetchUserAttributes();
-  }, []);
-
   const navigateToMyPage = () => {
     navigate('/my');
   };
@@ -89,7 +45,10 @@ const MainNavBar = () => {
                   onClick={navigateToMyPage}
                 >
                   <PersonCircle style={{ width: '30px', margin: 'auto 3px' }} />
-                  <p style={{ margin: 'auto 10px' }}>{userNickname}</p>
+                  <p style={{ margin: 'auto 10px' }}>
+                    <UserNickname setUserNickname={setUserNickname} />
+                    {userNickname}
+                  </p>
                 </div>
               </S.IconStyle>
 

diff --git a/src/components/layout/parts/ProfileNavBar.tsx b/src/components/layout/parts/ProfileNavBar.tsx
@@ -1,66 +1,21 @@
-import { useState, useEffect } from 'react';
 import { Gear, PersonCircle } from 'react-bootstrap-icons';
 import { GiHamburgerMenu } from 'react-icons/gi';
-import { useNavigate } from 'react-router-dom';
 import { Button, Drawer, DrawerContent, DrawerOverlay, useDisclosure } from '@chakra-ui/react';
-import { getCurrentUser, signOut, fetchUserAttributes } from 'aws-amplify/auth';
 import { useRecoilState } from 'recoil';
 import LogoBox from './LogoBox';
 import MenuBar from './MenuBar';
 import PageSideBar from './PageSideBar';
 import Alarm from '@/components/alarm/Alarm';
+import UserNickname from '@/components/user/UserNickname';
+import { useAuth } from '@/hooks/useAuth';
 import { userNicknameState } from '@/recoil/user/userAtom';
 import * as S from '@/styles/layout/layout.style';
 
 const PageNavBar = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const navigate = useNavigate();
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-  // const [userNickname, setUserNickname] = useState<string | null>(null);
+  const { isLoggedIn, handleLoginOrLogout } = useAuth();
   const [userNickname, setUserNickname] = useRecoilState(userNicknameState);
 
-  const checkLoginStatus = async () => {
-    try {
-      await getCurrentUser();
-      setIsLoggedIn(true);
-    } catch (error) {
-      setIsLoggedIn(false);
-    }
-  };
-
-  const handleLoginOrLogout = () => {
-    if (isLoggedIn) {
-      handleSignOut(); // 로그아웃 처리 함수 호출
-    }
-  };
-
-  // 로그아웃 처리 함수
-  async function handleSignOut() {
-    try {
-      await signOut({ global: true });
-      setIsLoggedIn(false); // 로그인 상태 업데이트
-      navigate('/'); // 로그아웃 후 홈으로 리디이렉션
-    } catch (error) {
-      console.log('로그아웃 에러', error);
-    }
-  }
-
-  // 닉네임 관련
-  async function handleFetchUserAttributes() {
-    try {
-      const userAttributes = await fetchUserAttributes();
-      console.log(userAttributes);
-      setUserNickname(userAttributes.nickname || null);
-    } catch (err) {
-      console.log(err);
-    }
-  }
-
-  useEffect(() => {
-    checkLoginStatus();
-    handleFetchUserAttributes();
-  }, []);
-
   return (
     <>
       <S.Container>
@@ -95,7 +50,8 @@ const PageNavBar = () => {
                 }}
               >
                 <PersonCircle style={{ width: '30px', margin: 'auto 3px' }} />
-                <p style={{ margin: 'auto 10px' }}>{userNickname}</p>
+                <UserNickname setUserNickname={setUserNickname} />
+                {userNickname}
               </div>
             </S.IconStyle>
 

diff --git a/src/components/user/UserNickname.tsx b/src/components/user/UserNickname.tsx
@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import { fetchUserAttributes } from 'aws-amplify/auth';
+
+interface Props {
+  setUserNickname: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+const UserNickname: React.FC<Props> = ({ setUserNickname }) => {
+  useEffect(() => {
+    handleFetchUserAttributes();
+  }, []);
+
+  async function handleFetchUserAttributes() {
+    try {
+      const userAttributes = await fetchUserAttributes();
+      console.log(userAttributes);
+      setUserNickname(userAttributes.nickname || null);
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  return null;
+};
+
+export default UserNickname;
diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx
@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { getCurrentUser, signOut } from 'aws-amplify/auth';
+
+export const useAuth = () => {
+  const navigate = useNavigate();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    checkLoginStatus();
+  }, []);
+
+  // 로그인된 상태인지
+  const checkLoginStatus = async () => {
+    try {
+      await getCurrentUser();
+      setIsLoggedIn(true);
+    } catch (error) {
+      setIsLoggedIn(false);
+    }
+  };
+
+  // 로그인 된 상태면 로그아웃 가능하게 함
+  const handleLoginOrLogout = () => {
+    if (isLoggedIn) {
+      handleSignOut();
+    } else {
+      navigate('/login');
+    }
+  };
+
+  const handleSignOut = async () => {
+    try {
+      await signOut({ global: true });
+      setIsLoggedIn(false);
+      navigate('/');
+    } catch (error) {
+      console.log('로그아웃 에러', error);
+    }
+  };
+
+  return { isLoggedIn, handleLoginOrLogout };
+};