✨Feat: 공통 헤더 컴포넌트 작성

package.json

@@ -12,12 +12,14 @@
     "@dnd-kit/core": "^6.3.1",
     "@tanstack/react-query": "^5.80.2",
     "axios": "^1.9.0",
+    "clsx": "^2.1.1",
     "next": "14.2.25",
     "next-themes": "^0.4.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.57.0",
     "sonner": "^2.0.5",
+    "tailwind-merge": "^3.3.0",
     "tailwindcss-preset-px-to-rem": "^1.2.1",
     "zustand": "^5.0.5"
   },

src/app/dashboard/[id]/edit/layout.tsx

@@ -0,0 +1,14 @@
+import Header from '@components/common/header/Header'
+
+export default function AboutLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div>
+      <Header />
+      <div>{children}</div> {/* 여기에 page.tsx 내용이 들어옴 */}
+    </div>
+  )
+}

src/app/dashboard/[id]/edit/page.tsx

@@ -0,0 +1,3 @@
+export default function dashBoardEditPage() {
+  return <p>대시보드 수정 페이지</p>
+}

src/app/layout.tsx

@@ -7,6 +7,9 @@ import { Providers } from './providers'
 export const metadata: Metadata = {
   title: 'Coplan',
   description: 'Generated by create next app',
+  icons: {
+    icon: '/favicon.png',
+  },
 }
 
 export default function RootLayout({

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

@@ -0,0 +1,87 @@
+'use client'
+
+import { useUserStore } from '@store/useUserStore' // Zustand 예시
+import { usePathname, useRouter } from 'next/navigation'
+import Link from 'next/link'
+import Image from 'next/image'
+
+export default function Header() {
+  const pathname = usePathname()
+  const router = useRouter()
+  const goToMypage = () => {
+    router.push('/mypage')
+  }
+  const { user, logout } = useUserStore() // Zustand 상태
+
+  return (
+    <header className="flex items-center justify-between border-b border-gray-200 bg-white px-36 py-16 dark:border-gray-700 dark:bg-black">
+      {/* 좌측 대시보드명 */}
+      <div className="flex items-center gap-8">
+        <div className="font-bold">대시보드 명</div>
+        <div className="relative h-12 w-14 overflow-hidden">
+          <Image src="/images/crown.png" fill alt="내가 만든 대시보드" />
+        </div>
+      </div>
+
+      {/* 우측 사용자 정보/다크모드 */}
+      <div className="flex items-center gap-16">
+        <>
+          <nav className="hidden gap-8 text-sm text-gray-600 dark:text-gray-300 md:flex">
+            <Link
+              href="/dashboard"
+              className={`flex items-center gap-6 rounded-md border-2 border-solid px-8 py-4 ${pathname === '/dashboard' ? 'font-semibold' : ''}`}
+            >
+              <div className="relative flex size-12">
+                <Image src="/images/management.png" fill alt="관리 버튼" />
+              </div>
+              관리
+            </Link>
+            <Link
+              href="/modal"
+              className={`flex items-center gap-6 rounded-6 border-2 border-solid px-8 py-4 ${pathname === '/modal' ? 'font-semibold' : ''}`}
+            >
+              <div className="relative flex size-12">
+                <Image src="/images/invitation.png" fill alt="초대 버튼" />
+              </div>
+              초대하기
+            </Link>
+          </nav>
+          {/* 공동작업자 프로필 이미지 */}
+          <div className="relative size-48 overflow-hidden rounded-full">
+            <Image
+              src="/images/collaborator.png"
+              fill
+              alt="초대된 사용자"
+              style={{ objectFit: 'cover' }}
+            />
+          </div>
+          <div className="relative size-48 overflow-hidden rounded-full">
+            <Image
+              src="/images/collaborator.png"
+              fill
+              alt="초대된 사용자"
+              style={{ objectFit: 'cover' }}
+            />
+          </div>
+          |{/* 내 프로필 이미지 */}
+          <div className="relative size-48 overflow-hidden rounded-full">
+            <Image
+              src="/images/profile.gif"
+              fill
+              alt="프로필이미지"
+              style={{ objectFit: 'cover' }}
+            />
+          </div>
+          <span className="text-sm">배유철 {user?.name}</span>
+          {/* 드롭다운 메뉴 */}
+          <button onClick={goToMypage} className="text-xs">
+            마이페이지
+          </button>
+          <button onClick={logout} className="text-xs">
+            로그아웃
+          </button>
+        </>
+      </div>
+    </header>
+  )
+}

src/app/shared/store/useUserStore.ts

@@ -0,0 +1,26 @@
+// store/useUserStore.ts
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+import { User } from '../types/User.interface'
+
+interface UserState {
+  user: User | null
+  accessToken: string | null
+  setUser: (user: User, accessToken: string) => void
+  logout: () => void // clearUser와 동일
+}
+
+export const useUserStore = create<UserState>()(
+  persist(
+    (set) => ({
+      user: null,
+      accessToken: null,
+      setUser: (user, accessToken) => set({ user, accessToken }),
+      logout: () => set({ user: null, accessToken: null }),
+    }),
+    {
+      name: 'user-storage',
+    },
+  ),
+)

src/app/shared/types/user.type.ts

@@ -0,0 +1,9 @@
+export interface User {
+  id: number
+  name: string
+  email: string
+  avatarUrl?: string // optional
+  role?: 'user' | 'admin' // optional 예시
+  createdAt?: string // optional ISO date string
+  updatedAt?: string // optional ISO date string
+}

tsconfig.json

@@ -24,6 +24,7 @@
       // alias 설정
       "@/*": ["./src/*"],
       "@components/*": ["./src/app/shared/components/*"],
+      "@store/*": ["./src/app/shared/store/*"],
       "@hooks/*": ["./src/app/shared/hooks/*"]
     }
   },