From 96c4534704c9e2a5e9f642ab56a8bdc8684365d7 Mon Sep 17 00:00:00 2001 From: oaoong Date: Sun, 29 Oct 2023 23:52:22 +0900 Subject: [PATCH] =?UTF-8?q?:tada:=20header=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/bell.svg | 6 ++ public/images/menu-icon.svg | 7 ++ .../domain/Header/Header.stories.tsx | 20 +++++ src/components/domain/Header/Header.tsx | 87 +++++++++++++++++++ src/components/domain/Header/index.tsx | 3 + src/components/domain/Logo/Logo.stories.tsx | 16 ++++ src/components/domain/Logo/Logo.tsx | 15 ++++ src/components/domain/Logo/index.tsx | 3 + src/config/appPath.ts | 7 ++ src/config/assets.ts | 9 ++ tailwind.config.js | 9 ++ 11 files changed, 182 insertions(+) create mode 100644 public/images/bell.svg create mode 100644 public/images/menu-icon.svg create mode 100644 src/components/domain/Header/Header.stories.tsx create mode 100644 src/components/domain/Header/Header.tsx create mode 100644 src/components/domain/Header/index.tsx create mode 100644 src/components/domain/Logo/Logo.stories.tsx create mode 100644 src/components/domain/Logo/Logo.tsx create mode 100644 src/components/domain/Logo/index.tsx create mode 100644 src/config/appPath.ts create mode 100644 src/config/assets.ts 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']) + }, ], }