feat: 프로필 드롭다운 컴포넌트화 및 헤더 내부에 조립

Author: BokyungCodes

src/components/Header.tsx

@@ -1,38 +1,19 @@
 'use client';
 
 import Link from 'next/link';
-import Image from 'next/image';
 import IconLogo from '@assets/svg/logo';
 import IconBell from '@assets/svg/bell';
 import useUserStore from '@/stores/authStore';
-import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import ProfileDefaultIcon from '@assets/svg/profile-default';
+import ProfileDropdown from '@/components/ProfileDropdown';
 
 export default function Header() {
   const router = useRouter();
   const user = useUserStore((state) => state.user);
   const setUser = useUserStore((state) => state.setUser);
   const isLoggedIn = !!user;
 
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  // 바깥 클릭 시 드롭다운 닫기
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(e.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  // 로그아웃 처리 후 홈 이동
+  // 로그아웃 처리
   const handleLogout = () => {
     setUser(null);
     router.push('/');
@@ -53,51 +34,20 @@ export default function Header() {
         <div className='text-md relative flex items-center gap-24 text-black'>
           {isLoggedIn ? (
             <>
+              {/* 알림 아이콘 */}
               <button aria-label='알림' className='hover:text-primary'>
                 <IconBell />
               </button>
 
+              {/* 구분선 */}
               <div className='mx-12 h-22 w-px bg-gray-300' />
 
-              {/* 프로필 + 드롭다운 */}
-              <div
-                className='flex items-center gap-8 cursor-pointer'
-                onClick={() => setIsOpen((prev) => !prev)}
-                ref={dropdownRef}
-              >
-                {user.profileImageUrl ? (
-                  <Image
-                    src={user.profileImageUrl}
-                    alt='프로필 이미지'
-                    width={32}
-                    height={32}
-                    className='rounded-full border border-gray-300'
-                  />
-                ) : (
-                  <div className='size-32 rounded-full border border-gray-300 overflow-hidden'>
-                    <ProfileDefaultIcon size={32} />
-                  </div>
-                )}
-                <span>{user.nickname || '사용자'}</span>
-
-                {/* 드롭다운 메뉴 */}
-                {isOpen && (
-                  <div className='absolute top-50 right-0 z-50 mt-20 w-120 rounded-md border border-gray-200 bg-white shadow-md'>
-                    <Link
-                      href='/mypage'
-                      className='block w-full px-16 py-12 text-left hover:bg-gray-50 cursor-pointer'
-                    >
-                      마이페이지
-                    </Link>
-                    <button
-                      onClick={handleLogout}
-                      className='w-full px-16 py-12 text-left hover:bg-gray-50 cursor-pointer'
-                    >
-                      로그아웃
-                    </button>
-                  </div>
-                )}
-              </div>
+              {/* 프로필 드롭다운 */}
+              <ProfileDropdown
+                nickname={user.nickname}
+                profileImageUrl={user.profileImageUrl}
+                onLogout={handleLogout}
+              />
             </>
           ) : (
             <>

src/components/ProfileDropdown.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import ProfileDefaultIcon from '@assets/svg/profile-default';
+
+import { ProfileDropdownProps } from '@/types/profileDropdownTypes';
+
+export default function ProfileDropdown({ nickname, profileImageUrl, onLogout }: ProfileDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const pathname = usePathname();
+
+  // 외부 클릭 시 드롭다운 닫기
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // 경로 변경 시 드롭다운 닫기
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
+  return (
+    <div className='relative' ref={dropdownRef}>
+      {/* 프로필 영역 (드롭다운 토글) */}
+      <div
+        className='flex items-center gap-8 cursor-pointer'
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        {profileImageUrl ? (
+          <Image
+            src={profileImageUrl}
+            alt='프로필 이미지'
+            width={32}
+            height={32}
+            className='rounded-full border border-gray-300'
+          />
+        ) : (
+          <div className='size-32 rounded-full border border-gray-300 overflow-hidden'>
+            <ProfileDefaultIcon size={32} />
+          </div>
+        )}
+        <span>{nickname || '사용자'}</span>
+      </div>
+
+      {/* 드롭다운 메뉴 */}
+      {isOpen && (
+        <div
+          className='absolute top-50 right-0 z-50 mt-12 w-140 rounded-md border border-gray-200 bg-white shadow-md'
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Link
+            href='/mypage'
+            className='block w-full px-16 py-12 text-left hover:bg-gray-50'
+          >
+            마이페이지
+          </Link>
+          <button
+            onClick={onLogout}
+            className='w-full px-16 py-12 text-left hover:bg-gray-50'
+          >
+            로그아웃
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

src/types/profileDropdownTypes.ts

@@ -0,0 +1,5 @@
+export interface ProfileDropdownProps {
+  nickname: string;
+  profileImageUrl: string | null;
+  onLogout: () => void;
+}