Merge pull request #5 from Team-Ampersand/feature/header

🔀 헤더 컴포넌트 제작

src/app/(page)/music/page.tsx

@@ -0,0 +1,9 @@
+import Header from '@/components/common/Header';
+
+export default function Music() {
+  return (
+    <div>
+      <Header />
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,21 +1,9 @@
-'use client';
-
-import { toast } from 'react-toastify';
-import { Lock, Person } from '@/assets/icons';
-import TextField from '@/components/common/TextField';
+import Header from '@/components/common/Header';
 
 export default function Home() {
-  const handleClick = () => {
-    console.log('Button clicked!');
-    toast.success('Text');
-  };
   return (
     <div>
-      <button onClick={handleClick} className="bg-neutral-n30 px-4 py-3">
-        하이
-      </button>
-      <TextField type="email" placeholder="이메일" leftIcon={<Person />} />
-      <TextField type="password" placeholder="비밀번호" leftIcon={<Lock />} />
+      <Header />
     </div>
   );
 }

src/assets/svg/Book.tsx

@@ -0,0 +1,29 @@
+const Book = ({ color = '#BBBBCC' }) => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.0626 7.46451L14.9287 7.68045C15.6321 7.85581 16.3679 7.85581 17.0713 7.68045L17.9374 7.46451C20.5256 6.81926 23.2041 6.56871 25.8743 6.72231C26.2626 6.74465 26.5 7.04024 26.5 7.32067V20.9344C26.5 21.2071 26.2449 21.5019 25.8488 21.4791C23.0709 21.3193 20.2838 21.5799 17.5898 22.2515L16.5875 22.5014C16.2017 22.5976 15.7983 22.5976 15.4125 22.5014L14.4102 22.2515C11.7162 21.5799 8.92913 21.3193 6.15123 21.4791C5.75511 21.5019 5.5 21.2071 5.5 20.9344V7.32067C5.5 7.04024 5.73736 6.74465 6.12568 6.72231C8.79586 6.56871 11.4744 6.81926 14.0626 7.46451Z"
+        stroke={color}
+        strokeWidth="2"
+      />
+      <path
+        d="M15.0107 7.39282H17.0232V23.3928H15.0107V7.39282Z"
+        fill={color}
+      />
+      <path
+        d="M6 24.9525C8.98464 24.4805 12.5302 25.3866 14.8579 26.015C15.6068 26.2172 16.3932 26.2172 17.1421 26.015C19.4698 25.3866 23.0154 24.4805 26 24.9525"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+export default Book;

src/assets/svg/Music.tsx

@@ -0,0 +1,34 @@
+const Music = ({ color = '#BBBBCC' }) => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.3571 9.5C16.3571 9.65438 16.3497 9.76409 16.3402 9.84036C16.2639 9.84982 16.1542 9.85714 16 9.85714C15.8458 9.85714 15.7361 9.84982 15.6598 9.84036C15.6503 9.76409 15.6429 9.65438 15.6429 9.5C15.6429 9.34562 15.6503 9.23591 15.6598 9.15964C15.7361 9.15018 15.8458 9.14286 16 9.14286C16.1542 9.14286 16.2639 9.15018 16.3402 9.15964C16.3497 9.23591 16.3571 9.34562 16.3571 9.5Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="2.28571"
+      />
+      <path
+        d="M20 17.9999C20 20.2091 18.2091 21.9999 16 21.9999C13.7909 21.9999 12 20.2091 12 17.9999C12 15.7908 13.7909 13.9999 16 13.9999C18.2091 13.9999 20 15.7908 20 17.9999Z"
+        stroke={color}
+        strokeWidth="2"
+      />
+      <rect
+        x="6"
+        y="4"
+        width="20"
+        height="24"
+        rx="5"
+        stroke={color}
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export default Music;

src/assets/svg/index.tsx

@@ -1,3 +1,5 @@
 export { default as CheckBox } from './CheckBox';
 export { default as CheckedBox } from './CheckedBox';
 export { default as Squirrel } from './Squirrel';
+export { default as Book } from './Book';
+export { default as Music } from './Music';

src/components/common/Header/index.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Header from '.';
+
+const meta = {
+  title: 'Components/Common/Header',
+  component: Header,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Header>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

src/components/common/Header/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+import Logo from '../Logo';
+import { Book, Music } from '@/assets/svg';
+
+const navItems = [
+  { href: '/', icon: Book, text: '예약' },
+  { href: '/music', icon: Music, text: '음악' },
+];
+
+const Header = () => {
+  const pathname = usePathname();
+
+  return (
+    <div className="h-screen max-w-[258px] bg-background-card px-6 py-9">
+      <Logo />
+      <div className="mt-9 flex h-full w-full flex-col gap-2">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href;
+
+          return (
+            <Link key={item.href} href={item.href}>
+              <div
+                className={`flex items-center gap-6 rounded-lg px-4 py-3 ${
+                  isActive
+                    ? 'bg-primary-p20 text-primary-p10'
+                    : 'text-natural-n30 bg-background-card'
+                }`}
+              >
+                <item.icon color={isActive ? '#6F7AEC' : '#BBBBCC'} />
+                <p
+                  className="text-h5"
+                  style={{ color: isActive ? '#6F7AEC' : '#BBBBCC' }}
+                >
+                  {item.text}
+                </p>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Header;

tailwind.config.ts

@@ -37,14 +37,16 @@ const config: Config = {
         black: 'rgb(var(--BLACK))',
         white: 'rgb(var(--WHITE))',
       },
+
       fontFamily: {
         SUIT: ['SUIT'],
       },
       fontSize: {
-        h1: ['2.25rem', { lineHeight: '2.8125rem', fontWeight: '900' }],
+        h1: ['1.75rem', { lineHeight: '2.1837rem', fontWeight: '900' }],
         h2: ['2rem', { lineHeight: '2.5rem', fontWeight: '700' }],
         h3: ['1.375rem', { lineHeight: '1.125rem', fontWeight: '700' }],
         h4: ['1rem', { lineHeight: '1.25rem', fontWeight: '700' }],
+        h5: ['1.125rem', { lineHeight: '1.4038rem', fontWeight: '500' }],
         body1: ['1rem', { lineHeight: '1.5rem', fontWeight: '500' }],
         body2: ['0.875rem', { lineHeight: '1.125rem', fontWeight: '600' }],
         body3: ['0.875rem', { lineHeight: '1.125rem', fontWeight: '500' }],