🔀 common 폴더 구조 변경

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

@@ -1,4 +1,4 @@
-import Header from '@/components/common/Header';
+import Header from '@/components/common/molecules/Header';
 
 export default function Music() {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import Logo from '@/components/common/Logo';
+import Logo from '@/components/common/atoms/Logo';
 import ButtonWrapper from '@/components/Signin/molecules/ButtonWrapper';
 import InputWrapper from '@/components/Signin/molecules/InputWrapper';
 

src/app/page.tsx

@@ -1,4 +1,4 @@
-import Header from '@/components/common/Header';
+import Header from '@/components/common/molecules/Header';
 
 export default function Home() {
   return (

src/components/Signin/molecules/ButtonWrapper/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '@/components/common/Button';
+import Button from '@/components/common/atoms/Button';
 
 const ButtonWrapper = () => {
   return (

src/components/Signin/molecules/InputWrapper/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Lock, Person } from '@/assets/icons';
-import TextField from '@/components/common/TextField';
+import TextField from '@/components/common/atoms/TextField';
 
 const InputWrapper = () => {
   return (

src/components/common/Button/index.stories.tsx → src/components/common/atoms/Button/index.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import Button from '.';
 
 const meta = {
-  title: 'Components/Common/Button',
+  title: 'Components/Common/atoms/Button',
   component: Button,
   tags: ['autodocs'],
   argTypes: {

src/components/common/Logo/index.stories.tsx → src/components/common/atoms/Logo/index.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import Logo from '.';
 
 const meta = {
-  title: 'Components/Common/Logo',
+  title: 'Components/Common/atoms/Logo',
   component: Logo,
   tags: ['autodocs'],
 } satisfies Meta<typeof Logo>;

src/components/common/atoms/NavItem/index.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+import React from 'react';
+
+interface Props {
+  href: string;
+  icon: React.ComponentType<{ color: string }>;
+  text: string;
+  isActive: boolean;
+}
+
+const NavItem = ({ href, icon: Icon, text, isActive }: Props) => {
+  return (
+    <Link href={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'
+        }`}
+      >
+        <Icon color={isActive ? '#6F7AEC' : '#BBBBCC'} />
+        <p
+          className="text-h6"
+          style={{ color: isActive ? '#6F7AEC' : '#BBBBCC' }}
+        >
+          {text}
+        </p>
+      </div>
+    </Link>
+  );
+};
+
+export default NavItem;

src/components/common/TextField/index.stories.ts → src/components/common/atoms/TextField/index.stories.ts

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import TextField from './index';
 
 const config: Meta<typeof TextField> = {
-  title: 'Components/Common/TextField',
+  title: 'Components/Common/atoms/TextField',
   component: TextField,
   args: { placeholder: 'Text' },
 };

src/components/common/ToggleSwitch/index.stories.tsx → src/components/common/atoms/ToggleSwitch/index.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import ToggleSwitch from '.';
 
 const meta = {
-  title: 'Components/Common/ToggleSwitch',
+  title: 'Components/Common/atoms/ToggleSwitch',
   component: ToggleSwitch,
   tags: ['autodocs'],
   argTypes: {},

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

@@ -0,0 +1,38 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import React from 'react';
+import Logo from '../../atoms/Logo';
+import NavItem from '../../atoms/NavItem';
+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 (
+            <NavItem
+              key={item.href}
+              href={item.href}
+              icon={item.icon}
+              text={item.text}
+              isActive={isActive}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Header;

tailwind.config.ts

@@ -46,10 +46,11 @@ const config: Config = {
         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' }],
+        h5: ['1.125rem', { lineHeight: '1.4038rem', fontWeight: '700' }],
+        h6: ['1.125rem', { lineHeight: '22.4608px', 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' }],
+        body2: ['0.875rem', { lineHeight: '1.0919rem', fontWeight: '600' }],
+        body3: ['0.875rem', { lineHeight: '17.4704px', fontWeight: '500' }],
       },
       spacing: {
         '0': '0',