diff --git a/public/images/bell.svg b/public/images/bell.svg new file mode 100644 index 00000000..64738067 --- /dev/null +++ b/public/images/bell.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/menu-icon.svg b/public/images/menu-icon.svg new file mode 100644 index 00000000..5142d950 --- /dev/null +++ b/public/images/menu-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/domain/Header/Header.stories.tsx b/src/components/domain/Header/Header.stories.tsx new file mode 100644 index 00000000..23440897 --- /dev/null +++ b/src/components/domain/Header/Header.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' +import Header from './Header' + +const meta = { + title: 'DOMAIN/Header', + component: Header, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: { isLogin: false }, +} + +export const Login: Story = { + args: { isLogin: true }, +} diff --git a/src/components/domain/Header/Header.tsx b/src/components/domain/Header/Header.tsx new file mode 100644 index 00000000..c861ac81 --- /dev/null +++ b/src/components/domain/Header/Header.tsx @@ -0,0 +1,87 @@ +import React from 'react' +import Image from 'next/image' +import Link from 'next/link' +import Button from '@/components/ui/Button' +import { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, +} from '@/components/ui/DropdownMenu' +import AppPath from '@/config/appPath' +import Assets from '@/config/assets' +import Logo from '../Logo' + +type HeaderProps = { + isLogin?: boolean +} + +const Header = ({ isLogin = false }: HeaderProps) => { + return ( +
+
+ +
+
+ +
+
+ {isLogin ? ( + <> + + {/** TODO: 알림 컴포넌트로 변경 */} + + {/** TODO: 아바타 컴포넌트로 변경 */} + + ) : ( + <> + + + )} +
+
+ ) +} + +export default Header + +const MenuButton = () => { + return ( + + + + + + + + 홈으로 + + + + + ) +} + +const Avatar = () => { + return ( + + + + + + + + 로그아웃 + + + + + ) +} diff --git a/src/components/domain/Header/index.tsx b/src/components/domain/Header/index.tsx new file mode 100644 index 00000000..8f845d57 --- /dev/null +++ b/src/components/domain/Header/index.tsx @@ -0,0 +1,3 @@ +import { default as Header } from './Header' + +export default Header diff --git a/src/components/domain/Logo/Logo.stories.tsx b/src/components/domain/Logo/Logo.stories.tsx new file mode 100644 index 00000000..da1bf9e2 --- /dev/null +++ b/src/components/domain/Logo/Logo.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react' +import Logo from './Logo' + +const meta = { + title: 'UI/Logo', + component: Logo, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: {}, +} diff --git a/src/components/domain/Logo/Logo.tsx b/src/components/domain/Logo/Logo.tsx new file mode 100644 index 00000000..bc1fac87 --- /dev/null +++ b/src/components/domain/Logo/Logo.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import Link from 'next/link' +import AppPath from '@/config/appPath' + +const Logo = () => { + return ( + + ) +} + +export default Logo diff --git a/src/components/domain/Logo/index.tsx b/src/components/domain/Logo/index.tsx new file mode 100644 index 00000000..252e7dc2 --- /dev/null +++ b/src/components/domain/Logo/index.tsx @@ -0,0 +1,3 @@ +import { default as Logo } from './Logo' + +export default Logo diff --git a/src/config/appPath.ts b/src/config/appPath.ts new file mode 100644 index 00000000..42dfcaa1 --- /dev/null +++ b/src/config/appPath.ts @@ -0,0 +1,7 @@ +const AppPath = { + home: () => '/', + login: () => '/login', + logout: () => '/logout', +} + +export default AppPath diff --git a/src/config/assets.ts b/src/config/assets.ts new file mode 100644 index 00000000..fdfe83b6 --- /dev/null +++ b/src/config/assets.ts @@ -0,0 +1,9 @@ +import AlarmIcon from '/public/images/bell.svg' +import MenuIcon from '/public/images/menu-icon.svg' + +const Assets = { + menuIcon: MenuIcon, + alarmIcon: AlarmIcon, +} as const + +export default Assets diff --git a/tailwind.config.js b/tailwind.config.js index fe7edfd3..5db486eb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -31,5 +31,14 @@ module.exports = { ...DARK_THEMES, }, }), + function ({ addUtilities }) { + const newUtilities = { + '.shadow-bottom': { + 'box-shadow': + '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', + }, + } + addUtilities(newUtilities, ['responsive', 'hover']) + }, ], }