Merge pull request #11 from team-nabi/NABI-32

🎉 header 컴포넌트 생성

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<typeof Header>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: { isLogin: false },
+}
+
+export const Login: Story = {
+  args: { isLogin: true },
+}

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 (
+    <header className="grid items-center justify-between w-full grid-cols-3 px-2 h-14 shadow-bottom bg-background-color">
+      <div className="flex items-center justify-start">
+        <MenuButton />
+      </div>
+      <div className="flex items-center justify-center">
+        <Logo />
+      </div>
+      <div className="flex items-center justify-end gap-2">
+        {isLogin ? (
+          <>
+            <Button className="dark:bg-white" variant={null} size="icon">
+              <Image src={Assets.alarmIcon} alt="alarm" />
+            </Button>
+            {/** TODO: 알림 컴포넌트로 변경 */}
+            <Avatar />
+            {/** TODO: 아바타 컴포넌트로 변경 */}
+          </>
+        ) : (
+          <>
+            <Button variant={'gradation'}>
+              <Link href={AppPath.login()}>로그인</Link>
+            </Button>
+          </>
+        )}
+      </div>
+    </header>
+  )
+}
+
+export default Header
+
+const MenuButton = () => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="dark:bg-white" size="icon" variant={null}>
+          <Image src={Assets.menuIcon} alt="menu" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Link href={AppPath.home()}>홈으로</Link>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const Avatar = () => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant={'gradation'}>아바타</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Link href={AppPath.logout()}>로그아웃</Link>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/components/domain/Header/index.tsx

@@ -0,0 +1,3 @@
+import { default as Header } from './Header'
+
+export default Header

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<typeof Logo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {},
+}

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 (
+    <nav>
+      <Link className="text-text-color" href={AppPath.home()}>
+        Logo
+      </Link>
+    </nav>
+  )
+}
+
+export default Logo

src/components/domain/Logo/index.tsx

@@ -0,0 +1,3 @@
+import { default as Logo } from './Logo'
+
+export default Logo

src/config/appPath.ts

@@ -0,0 +1,7 @@
+const AppPath = {
+  home: () => '/',
+  login: () => '/login',
+  logout: () => '/logout',
+}
+
+export default AppPath

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

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'])
+    },
   ],
 }