refactor: useMoreOptions 로직 분리

Author: kangsuyeong

src/hooks/useMoreOptions.ts

@@ -4,23 +4,21 @@ import MoreOptionsSelect from '@/components/MoreOptionsSelect';
 import HedaerLayout from '@/layouts/header/HedaerLayout';
 
 import logo from '@assets/icons/logo.svg';
-import { useMoreOptions } from '@/hooks/useMoreOptions';
 interface HeaderProps {
-  showMoreOptions?: boolean; // 더보기 메뉴를 표시할지 여부
+  moreOptionsItems?: { label: string; onClick?: () => void }[]; // 더보기 메뉴에 실행할 함수
 }
 
-function Header({ showMoreOptions = false }: HeaderProps) {
-  const moreOptionsItems = useMoreOptions();
+function Header({ moreOptionsItems }: HeaderProps) {
   return (
     <HedaerLayout>
       <div className="w-full flex items-center justify-between">
-        <Link to="/">
+        <Link to="/home">
           <img className="w-[103px] h-[22px]" src={logo} alt="logo" />
         </Link>
 
         <div className="flex gap-1">
           {/* 더보기 메뉴 */}
-          {showMoreOptions && <MoreOptionsSelect items={moreOptionsItems} />}
+          {moreOptionsItems && <MoreOptionsSelect items={moreOptionsItems} />}
         </div>
       </div>
     </HedaerLayout>

src/layouts/header/Header.tsx

@@ -1,18 +1,16 @@
 import MoreOptionsSelect from '@/components/MoreOptionsSelect';
-import { useMoreOptions } from '@/hooks/useMoreOptions';
 import HedaerLayout from '@/layouts/header/HedaerLayout';
 import backIcon from '@assets/icons/back-icon.svg';
 import { useNavigate } from 'react-router';
 
 interface HeaderWithBackProps {
-  showMoreOptions?: boolean; // 더보기 메뉴를 표시할지 여부
   text?: string; // 헤더 텍스트
+  moreOptionsItems?: { label: string; onClick?: () => void }[]; // 더보기 메뉴에 실행할 함수
 }
 
 // 뒤로 가기 있는 헤더
-function HeaderWithBack({ showMoreOptions = false, text }: HeaderWithBackProps) {
+function HeaderWithBack({ text, moreOptionsItems }: HeaderWithBackProps) {
   const navigate = useNavigate();
-  const moreOptionsItems = useMoreOptions();
   return (
     <HedaerLayout>
       <div className="flex items-center justify-between w-full">
@@ -31,7 +29,7 @@ function HeaderWithBack({ showMoreOptions = false, text }: HeaderWithBackProps)
         </div>
 
         {/* 더보기 메뉴 */}
-        {showMoreOptions && <MoreOptionsSelect items={moreOptionsItems} />}
+        {moreOptionsItems && <MoreOptionsSelect items={moreOptionsItems} />}
       </div>
     </HedaerLayout>
   );

src/layouts/header/HeaderWithBack.tsx

@@ -1,13 +1,16 @@
 import Header from '@/layouts/header/Header';
 import HeaderChat from '@/layouts/header/HeaderChat';
 import HeaderWithBack from '@/layouts/header/HeaderWithBack';
+import MypageEditHeader from '@/layouts/header/MypageEditHeader';
+import MypageHeader from '@/layouts/header/MypageHeader';
+import UserPageHeader from '@/layouts/header/UserPageHeader';
 import { useLocation } from 'react-router';
 
 const HeaderWrapper = () => {
   const { pathname } = useLocation();
 
   if (pathname.startsWith('/user')) {
-    return <HeaderWithBack showMoreOptions />;
+    return <UserPageHeader />;
   }
 
   if (pathname.startsWith('/chatroom')) {
@@ -19,7 +22,7 @@ const HeaderWrapper = () => {
   }
 
   if (pathname === '/mypage') {
-    return <Header showMoreOptions />;
+    return <MypageHeader />;
   }
 
   if (pathname === '/post') {
@@ -35,7 +38,7 @@ const HeaderWrapper = () => {
   }
 
   if (pathname === '/mypage/edit') {
-    return <HeaderWithBack text="내 정보 수정" showMoreOptions />;
+    return <MypageEditHeader />;
   }
 
   return <Header />;

src/layouts/header/HeaderWrapper.tsx

@@ -0,0 +1,51 @@
+import { deleteAccount, getUserInfo } from '@/apis/user';
+import HeaderWithBack from '@/layouts/header/HeaderWithBack';
+import { useAuthStore } from '@/store/authStore';
+import { useModalStore } from '@/store/modalStore';
+import { useNavigate } from 'react-router';
+
+const MypageEditHeader = () => {
+  const navigate = useNavigate();
+  const { logout } = useAuthStore();
+  const { openModal, closeModal } = useModalStore();
+  const handleDeleteAccount = async () => {
+    try {
+      const { code, data } = await getUserInfo();
+      if (code === 200) {
+        openModal({
+          title: [
+            { text: data.nickName, className: 'text-primary-normal' },
+            { text: '님 떠나시는 건가요?' },
+          ],
+          message: '탈퇴 버튼 선택 시, 모든 활동 정보가 삭제됩니다',
+          confirmText: '탈퇴',
+          onConfirm: async () => {
+            try {
+              const { code } = await deleteAccount();
+              if (code === 200) {
+                logout();
+                useAuthStore.persist.clearStorage(); // 로컬스토리지에서 persist 데이터 삭제
+                closeModal();
+                navigate('/');
+              }
+            } catch (error) {
+              console.log(error);
+            }
+          },
+          onCancel: () => {
+            closeModal();
+          },
+        });
+      } else {
+        throw new Error('정보를 불러오는 중 오류가 생겼습니다.');
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const moreOptionsItems = [{ label: '탈퇴하기', onClick: handleDeleteAccount }];
+  return <HeaderWithBack text="내 정보 수정" moreOptionsItems={moreOptionsItems} />;
+};
+
+export default MypageEditHeader;

src/layouts/header/MypageEditHeader.tsx

@@ -0,0 +1,41 @@
+import { postLogout } from '@/apis/auth';
+import Header from '@/layouts/header/Header';
+import { useAuthStore } from '@/store/authStore';
+import { useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router';
+
+const MypageHeader = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { logout } = useAuthStore();
+
+  const handleEditProfile = () => navigate('/mypage/edit');
+  const handleBlockList = () => navigate('/mypage/blocklist');
+  const handleLogout = async () => {
+    try {
+      const { code } = await postLogout();
+      // 200이외에 code에서는 에러 처리
+      if (code !== 200) {
+        throw new Error('로그아웃 에러가 발생했습니다.');
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      logout(); // 토큰 초기화
+      useAuthStore.persist.clearStorage(); // 로컬스토리지에서 persist 데이터 삭제
+      queryClient.removeQueries({ queryKey: ['myProfile'] }); // 프로필 정보 캐시 초기화
+      queryClient.removeQueries({ queryKey: ['userPosts', 'me'] }); // 포스트 정보 캐시 초기화
+      navigate('/');
+    }
+  };
+
+  const moreOptionsItems = [
+    { label: '프로필 수정', onClick: handleEditProfile },
+    { label: '차단 목록', onClick: handleBlockList },
+    { label: '로그아웃', onClick: handleLogout },
+  ];
+
+  return <Header moreOptionsItems={moreOptionsItems} />;
+};
+
+export default MypageHeader;

src/layouts/header/MypageHeader.tsx

@@ -0,0 +1,58 @@
+import { addBlockList } from '@/apis/blockList';
+import HeaderWithBack from '@/layouts/header/HeaderWithBack';
+import { useModalStore } from '@/store/modalStore';
+import { useUserStore } from '@/store/userStore';
+import { useNavigate, useParams } from 'react-router';
+
+const UserPageHeader = () => {
+  const navigate = useNavigate();
+  const param = useParams();
+  const { userData } = useUserStore(); // 차단할 유저 정보
+  const { openModal, closeModal } = useModalStore();
+
+  const handleBlockUser = async () => {
+    if (!param.userId) {
+      console.log('차단 실패');
+      return;
+    }
+
+    openModal({
+      title: [
+        { text: `${userData?.nickname}`, className: 'text-primary-normal' },
+        { text: ' 님을 차단할까요?' },
+      ],
+      message: '차단된 사용자는 더이상 피드에 나타나지 않습니다',
+      onConfirm: async () => {
+        if (param.userId) {
+          try {
+            const data = await addBlockList(param.userId);
+            console.log(data);
+            //이미 차단 한 유저일 경우
+            if (data.code === 400) {
+              closeModal();
+              openModal({
+                title: `이미 차단한 유저입니다`,
+                onConfirm: () => {
+                  closeModal();
+                },
+              });
+            } else {
+              //차단 후 홈으로 이동
+              navigate('/home');
+              closeModal();
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        }
+      },
+      onCancel: () => {
+        closeModal();
+      },
+    });
+  };
+  const moreOptionsItems = [{ label: '차단', onClick: handleBlockUser }];
+  return <HeaderWithBack moreOptionsItems={moreOptionsItems} />;
+};
+
+export default UserPageHeader;