[feat] ProfileButton내 Dropdown 적용

client/src/components/Navigator/ProfileButton.tsx

@@ -1,41 +1,81 @@
 'use client';
 
+import { useState } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 // redux
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectUser } from '@/lib/redux/features/auth/authSlice';
+import { logOut } from '@/lib/redux/features/auth/authSlice';
 
 // components
-import { Avatar } from '../';
+import { Avatar, Dropdown } from '../';
+
+// hooks
+import useModal from '@/hooks/modal/useModal';
 
 // icons
 import { ProfileIcon } from '@/assets/Icon';
 
-// types
-import { IReduxState } from '@/types/redux/IReduxState';
-
 // services
 import { BASE_URL } from '@/service/base/api';
+import { userManager } from '@/service/user';
+
+// types
+import { ModalType, errorMessage } from '@/constants/constant';
 
 export default function ProfileButton() {
-  const user = useSelector((state: IReduxState) => state.auth);
+  const user = useSelector(selectUser);
+  const dispatch = useDispatch();
+
+  const router = useRouter();
+
+  const { openModal } = useModal();
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const handleLogout = async () => {
+    try {
+      await userManager.logoutUser();
+      dispatch(logOut());
+      router.replace('/');
+    } catch {
+      openModal({
+        type: ModalType.ERROR,
+        message: errorMessage.tryAgain,
+      });
+    }
+  };
 
   return (
-    <Link
-      href={`${user.userId ? `profile/${user.userId}` : 'login'}`}
-      className="flex items-center justify-center cursor-pointer size-9"
+    <button
+      className="relative flex items-center justify-center w-full h-full rounded-full cursor-pointer bg-gray-scale-300 border-[1px] border-gray-scale-400 size-9"
+      onClick={() => setDropdownOpen((prev) => !prev)}
     >
-      <button className="relative flex items-center justify-center w-full h-full rounded-full cursor-pointer bg-gray-scale-300 border-[1px] border-gray-scale-400">
-        {user.userId ? (
-          <Avatar
-            src={`${BASE_URL}${user.userProfileImgPath}`}
-            alt="프로필 이미지"
-            size="size-8"
-          />
-        ) : (
-          <ProfileIcon />
-        )}
-      </button>
-    </Link>
+      {user.userProfileImgPath ? (
+        <Avatar
+          src={`${BASE_URL}${user.userProfileImgPath}`}
+          alt="프로필 이미지"
+          size="size-8"
+        />
+      ) : (
+        <ProfileIcon />
+      )}
+      {dropdownOpen && (
+        <Dropdown.Wrapper
+          setDropdownOpen={setDropdownOpen}
+          position="right-0 -bottom-52"
+        >
+          <Link href={`/profile/${user.userId}`}>
+            <Dropdown.Content>내 프로필</Dropdown.Content>
+          </Link>
+          <Dropdown.Content>임시 글</Dropdown.Content>
+          <Dropdown.Content>스크랩 게시물</Dropdown.Content>
+          <Dropdown.Content>설정</Dropdown.Content>
+          <Dropdown.Content onClick={handleLogout}>로그아웃</Dropdown.Content>
+        </Dropdown.Wrapper>
+      )}
+    </button>
   );
 }