diff --git a/src/app/(page)/music/page.tsx b/src/app/(page)/music/page.tsx index 7a644b7..e76b3ca 100644 --- a/src/app/(page)/music/page.tsx +++ b/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 ( diff --git a/src/app/(page)/signin/page.tsx b/src/app/(page)/signin/page.tsx index 82a753f..977c6c0 100644 --- a/src/app/(page)/signin/page.tsx +++ b/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'; diff --git a/src/app/page.tsx b/src/app/page.tsx index 8d16556..276c84c 100644 --- a/src/app/page.tsx +++ b/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 ( diff --git a/src/components/Signin/molecules/ButtonWrapper/index.tsx b/src/components/Signin/molecules/ButtonWrapper/index.tsx index ad7b5e2..10c3764 100644 --- a/src/components/Signin/molecules/ButtonWrapper/index.tsx +++ b/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 ( diff --git a/src/components/Signin/molecules/InputWrapper/index.tsx b/src/components/Signin/molecules/InputWrapper/index.tsx index 001c7ac..69e9374 100644 --- a/src/components/Signin/molecules/InputWrapper/index.tsx +++ b/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 ( diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx deleted file mode 100644 index d23b46a..0000000 --- a/src/components/common/Header/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -'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 ( -
- -
- {navItems.map((item) => { - const isActive = pathname === item.href; - - return ( - -
- -

- {item.text} -

-
- - ); - })} -
-
- ); -}; - -export default Header; diff --git a/src/components/common/Button/index.stories.tsx b/src/components/common/atoms/Button/index.stories.tsx similarity index 91% rename from src/components/common/Button/index.stories.tsx rename to src/components/common/atoms/Button/index.stories.tsx index cfeb070..9a533b3 100644 --- a/src/components/common/Button/index.stories.tsx +++ b/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: { diff --git a/src/components/common/Button/index.tsx b/src/components/common/atoms/Button/index.tsx similarity index 100% rename from src/components/common/Button/index.tsx rename to src/components/common/atoms/Button/index.tsx diff --git a/src/components/common/Logo/index.stories.tsx b/src/components/common/atoms/Logo/index.stories.tsx similarity index 86% rename from src/components/common/Logo/index.stories.tsx rename to src/components/common/atoms/Logo/index.stories.tsx index b2834f9..00bee25 100644 --- a/src/components/common/Logo/index.stories.tsx +++ b/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; diff --git a/src/components/common/Logo/index.tsx b/src/components/common/atoms/Logo/index.tsx similarity index 100% rename from src/components/common/Logo/index.tsx rename to src/components/common/atoms/Logo/index.tsx diff --git a/src/components/common/atoms/NavItem/index.tsx b/src/components/common/atoms/NavItem/index.tsx new file mode 100644 index 0000000..58dd676 --- /dev/null +++ b/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 ( + +
+ +

+ {text} +

+
+ + ); +}; + +export default NavItem; diff --git a/src/components/common/TextField/index.stories.ts b/src/components/common/atoms/TextField/index.stories.ts similarity index 86% rename from src/components/common/TextField/index.stories.ts rename to src/components/common/atoms/TextField/index.stories.ts index 00baed7..8a9e90e 100644 --- a/src/components/common/TextField/index.stories.ts +++ b/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 = { - title: 'Components/Common/TextField', + title: 'Components/Common/atoms/TextField', component: TextField, args: { placeholder: 'Text' }, }; diff --git a/src/components/common/TextField/index.tsx b/src/components/common/atoms/TextField/index.tsx similarity index 100% rename from src/components/common/TextField/index.tsx rename to src/components/common/atoms/TextField/index.tsx diff --git a/src/components/common/ToggleSwitch/index.stories.tsx b/src/components/common/atoms/ToggleSwitch/index.stories.tsx similarity index 86% rename from src/components/common/ToggleSwitch/index.stories.tsx rename to src/components/common/atoms/ToggleSwitch/index.stories.tsx index 2f105d5..cd88a4f 100644 --- a/src/components/common/ToggleSwitch/index.stories.tsx +++ b/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: {}, diff --git a/src/components/common/ToggleSwitch/index.tsx b/src/components/common/atoms/ToggleSwitch/index.tsx similarity index 100% rename from src/components/common/ToggleSwitch/index.tsx rename to src/components/common/atoms/ToggleSwitch/index.tsx diff --git a/src/components/common/Header/index.stories.tsx b/src/components/common/molecules/Header/index.stories.tsx similarity index 100% rename from src/components/common/Header/index.stories.tsx rename to src/components/common/molecules/Header/index.stories.tsx diff --git a/src/components/common/molecules/Header/index.tsx b/src/components/common/molecules/Header/index.tsx new file mode 100644 index 0000000..171f4cf --- /dev/null +++ b/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 ( +
+ +
+ {navItems.map((item) => { + const isActive = pathname === item.href; + return ( + + ); + })} +
+
+ ); +}; + +export default Header; diff --git a/tailwind.config.ts b/tailwind.config.ts index b30c20d..c6c21ae 100644 --- a/tailwind.config.ts +++ b/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',