✨Feat: 공통 드롭다운 메뉴 기능 구현

src/app/globals.css

@@ -40,6 +40,9 @@ body {
 .Border-column {
   @apply border-r border-[#EEEEEE] dark:border-[#262626];
 }
+.Border-bottom {
+  @apply border-b border-[#D9D9D9] dark:border-[#707070];
+}
 .BG-addPhoto {
   @apply bg-[#F5F5F5] dark:bg-[#2E2E2E];
 }

src/app/layout.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
   title: 'Coplan',
   description: 'Generated by create next app',
   icons: {
-    icon: '/favicon.png',
+    icon: '/favicon.ico',
   },
 }
 

src/app/shared/components/common/Dropdown/Dropdown.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { cn } from '@lib/cn' // 클래스 이름 병합 유틸리티
+import { ReactNode, useEffect, useRef, useState } from 'react'
+
+type DropdownProps = {
+  trigger: ReactNode
+  children: ReactNode
+  align?: 'left' | 'right' | 'center'
+  width?: string
+}
+
+export default function Dropdown({
+  trigger,
+  children,
+  align = 'center',
+  width = 'w-40',
+}: DropdownProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  return (
+    <div ref={ref} className="relative inline-block">
+      <div
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="cursor-pointer"
+      >
+        {trigger}
+      </div>
+
+      {isOpen && (
+        <div
+          className={cn(
+            'BG-gray absolute z-50 mt-4 rounded border shadow-md',
+            width,
+            {
+              'left-0': align === 'left',
+              'right-0': align === 'right',
+              'left-1/2 -translate-x-1/2': align === 'center',
+            },
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}

src/app/shared/components/common/Profile.tsx

@@ -58,7 +58,7 @@ export function Profile({ nickname, imageUrl, size = 36 }: ProfileProps) {
           className="size-full object-cover"
         />
       </div>
-      <span className="text-sm font-semibold">사용자</span>
+      <span className="text-sm font-semibold">{nickname}</span>
     </div>
   ) : (
     // 프로필 이미지가 없을 때

src/app/shared/components/common/header/Header.tsx

@@ -1,20 +1,18 @@
 'use client'
 
-import { usePathname, useRouter } from 'next/navigation'
 import { cn } from '@lib/cn' // 클래스 이름 병합 유틸리티
-import Link from 'next/link'
 import Image from 'next/image'
-import { Profile } from '@components/common/Profile'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+import ThemeToggle from '../../ThemeToggle'
+import UserDropdown from './UserDropdown'
 
 export default function Header() {
   const pathname = usePathname()
-  const router = useRouter()
-  const goToMypage = () => {
-    router.push('/mypage')
-  }
 
   return (
-    <header className="BG-White Border-section Text-black flex items-center justify-between border-b px-36 py-16">
+    <header className="Border-bottom Text-black flex items-center justify-between border-b px-18 py-12">
       {/* 좌측 대시보드명 */}
       <div className="flex items-center gap-8">
         <div className="font-bold">대시보드 명</div>
@@ -25,52 +23,48 @@ export default function Header() {
 
       {/* 우측 사용자 정보/다크모드 */}
       <div className="flex items-center gap-8">
-        <>
-          <nav className="hidden gap-8 text-sm text-gray-600 dark:text-gray-300 md:flex">
-            <Link
-              href="/dashboard"
-              className={cn(
-                'Border-btn flex items-center gap-6 rounded-md border-solid px-12 py-6',
-                pathname === '/dashboard' && 'font-semibold',
-              )}
-            >
-              <div className="relative flex size-12">
-                <Image src="/images/management.png" fill alt="관리 버튼" />
-              </div>
-              관리
-            </Link>
-            <Link
-              href="/modal"
-              className={cn(
-                'Border-btn mr-16 flex items-center gap-6 rounded-6 border-solid px-12 py-6',
-                pathname === '/modal' && 'font-semibold',
-              )}
-            >
-              <div className="relative flex size-12">
-                <Image src="/images/invitation.png" fill alt="초대 버튼" />
-              </div>
-              초대하기
-            </Link>
-          </nav>
-          {/* 공동작업자 프로필 이미지 */}
-          <div className="relative mx-16 size-48 overflow-hidden rounded-full">
-            <Image
-              src="/images/collaborator.png"
-              fill
-              alt="초대된 사용자"
-              style={{ objectFit: 'cover' }}
-            />
-          </div>
-          |{/* 내 프로필 이미지 */}
-          <Profile nickname="전유진" />
+        <nav className="Text-gray hidden gap-8 text-sm md:flex">
+          <Link
+            href="/dashboard"
+            className={cn(
+              'Border-btn flex items-center gap-6 rounded-md border-solid px-12 py-6',
+              pathname === '/dashboard' && 'font-semibold',
+            )}
+          >
+            <div className="relative flex size-12">
+              <Image src="/images/management.png" fill alt="관리 버튼" />
+            </div>
+            관리
+          </Link>
+          <Link
+            href="/modal"
+            className={cn(
+              'Border-btn mr-16 flex items-center gap-6 rounded-6 border-solid px-12 py-6',
+              pathname === '/modal' && 'font-semibold',
+            )}
+          >
+            <div className="relative flex size-12">
+              <Image src="/images/invitation.png" fill alt="초대 버튼" />
+            </div>
+            초대하기
+          </Link>
+        </nav>
+        {/* 공동작업자 프로필 이미지 */}
+        <div className="relative mx-16 size-48 overflow-hidden rounded-full">
+          <Image
+            src="/images/collaborator.png"
+            fill
+            alt="초대된 사용자"
+            style={{ objectFit: 'cover' }}
+          />
+        </div>
+        |
+        <div className="flex items-center gap-16">
           {/* 드롭다운 메뉴 */}
-          <button onClick={goToMypage} className="text-xs">
-            마이페이지
-          </button>
-          <button onClick={goToMypage} className="text-xs">
-            로그아웃
-          </button>
-        </>
+          <UserDropdown />
+          {/* 다크모드 토글 버튼 */}
+          <ThemeToggle />
+        </div>
       </div>
     </header>
   )

src/app/shared/components/common/header/UserDropdown.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import Dropdown from '@components/common/Dropdown/Dropdown'
+import { Profile } from '@components/common/Profile'
+import { useRouter } from 'next/navigation'
+
+export default function UserDropdown() {
+  const router = useRouter()
+
+  const goToMypage = () => {
+    router.push('/mypage')
+  }
+
+  const handleLogout = () => {
+    console.log('로그아웃 처리')
+  }
+
+  return (
+    <Dropdown
+      trigger={
+        <div className="flex cursor-pointer items-center gap-8">
+          <Profile nickname="닉네임" size={36} />
+        </div>
+      }
+      width="w-80"
+      align="right"
+    >
+      <button
+        onClick={goToMypage}
+        className="w-full p-5 text-xs hover:bg-gray-100 hover:text-black"
+      >
+        마이페이지
+      </button>
+      <button
+        onClick={handleLogout}
+        className="w-full p-5 text-xs hover:bg-gray-100 hover:text-black"
+      >
+        로그아웃
+      </button>
+    </Dropdown>
+  )
+}