[#103] ✨ shared 컴포넌트 Header 개발 (#148)

* [#103] 💄 remove default margin-x in container component

* [#103] ♻️ update user interface since type renewed

* [#103] ♻️ update imageUrl field with string

* [#103] ✨ add Header component

* [#103] ✅ add Header Stories

* [#103] 💄 update header layout

* [#103] 💄 add currentPage style in Header

* [#103] 💄 remove outline reset css for assesibility

* Merge dev into feat/shared-component-header

* [#103] 🐛 solve build error by changing URL type to ImageURL

* [#103] 💄 change hover effect from bg color to text color

Author: KingNono1030

src/components/common/containers/Container.tsx

@@ -1,4 +1,4 @@
-import { twMerge } from 'tailwind-merge'
+import { twMergeEx } from '@/lib/twMerge'
 
 type ContainerProps<T extends React.ElementType> = {
   as?: T
@@ -14,8 +14,8 @@ export const Container = <T extends React.ElementType = 'div'>({
 }: ContainerProps<T>): JSX.Element => {
   const Component = as || 'div'
 
-  const baseStyle = 'mx-auto max-w-1200'
-  const containerStyle = twMerge(baseStyle, className)
+  const baseStyle = 'max-w-1200'
+  const containerStyle = twMergeEx(baseStyle, className)
 
   return (
     <Component className={containerStyle} {...props}>

src/components/shared/header/Header.tsx

@@ -0,0 +1,67 @@
+import clsx from 'clsx'
+
+import { Link } from '@/components/common/button'
+import { Container } from '@/components/common/containers'
+import { Logo } from '@/components/common/logo'
+
+import { HeaderUserMenu } from './HeaderUserMenu'
+
+const headerTabs = [
+  { label: '포트폴리오', link: '/portfolio' },
+  { label: '프로젝트', link: '/project' },
+  { label: '팀원찾기', link: '/team' },
+  { label: '커뮤니티', link: '/community' },
+]
+
+type HeaderProps = {
+  isAuthenticated: boolean
+  user: User | null
+  currentPage?: string
+}
+
+const renderUserMenu = (isAuthenticated: boolean, user: User | null) => {
+  return isAuthenticated && user ? (
+    <HeaderUserMenu user={user} />
+  ) : (
+    <Container className='flex items-center justify-between gap-12'>
+      <Link href='/auth/sign-in' variant='outlined' size='lg'>
+        로그인
+      </Link>
+      <Link href='/auth/sign-up' size='lg'>
+        회원가입
+      </Link>
+    </Container>
+  )
+}
+
+export const Header = ({
+  isAuthenticated,
+  user = null,
+  currentPage = '/',
+}: HeaderProps): JSX.Element => {
+  return (
+    <header className='flex w-full justify-center'>
+      <Container className='flex h-72 w-full items-center justify-between gap-188'>
+        <Logo />
+        <Container className='flex flex-grow items-center justify-between'>
+          <Container className='flex items-center justify-between gap-40'>
+            {headerTabs.map(headerTab => (
+              <Link
+                href={headerTab.link}
+                variant='text'
+                size='lg'
+                className={clsx('w-118 hover:text-primary-normal', {
+                  'text-primary-normal': currentPage === headerTab.link,
+                })}
+                key={headerTab.label}
+              >
+                {headerTab.label}
+              </Link>
+            ))}
+          </Container>
+          {renderUserMenu(isAuthenticated, user)}
+        </Container>
+      </Container>
+    </header>
+  )
+}

src/components/shared/header/HeaderUserMenu.tsx

@@ -6,14 +6,8 @@ import { Avatar } from '@/components/common/avatar'
 import { Dropdown } from '@/components/common/dropdown'
 import { Highlight, Text } from '@/components/common/text'
 
-type Image = string
-
 interface UserMenuProps {
-  user: {
-    id: Id
-    name: Name
-    image: Image
-  }
+  user: User
 }
 
 type Option = {
@@ -25,25 +19,25 @@ type Option = {
 const linkOptions: Option[] = [
   {
     label: '포트폴리오 관리',
-    link: '/portfolio',
+    link: '/my-page/portfolio',
     icon: <IcWorkbag />,
   },
   {
     label: '나의 프로젝트',
-    link: '/project',
+    link: '/my-page/project',
     icon: <IcCodefile />,
   },
   {
     label: '설정',
-    link: '/setting',
+    link: '/my-page/setting',
     icon: <IcSetting />,
   },
 ]
 
 const itemClass = 'h-48 w-full gap-8'
 
 export const HeaderUserMenu = ({
-  user: { image, name },
+  user: { imageUrl, name },
 }: UserMenuProps): JSX.Element => {
   const handleLogout = async () => {
     console.log('로그아웃')
@@ -52,10 +46,10 @@ export const HeaderUserMenu = ({
   return (
     <Dropdown>
       <Dropdown.Trigger>
-        <UserMenuTrigger image={image} />
+        <UserMenuTrigger image={imageUrl} />
       </Dropdown.Trigger>
       <Dropdown.Menu alignment={'right'} className={'justify-start p-0'}>
-        <UserMenuHeader image={image} name={name} />
+        <UserMenuHeader image={imageUrl} name={name} />
         <hr className='w-full text-gray-200' />
         <div className={'w-full p-16'}>
           {linkOptions.map(option => (
@@ -78,7 +72,7 @@ export const HeaderUserMenu = ({
   )
 }
 
-const UserMenuTrigger = ({ image }: { image: Image }) => (
+const UserMenuTrigger = ({ image }: { image: ImageURL }) => (
   <div className={'flex items-center gap-12'}>
     <Text.Body variant={'body2'} className={'font-medium'}>
       환영합니다!
@@ -87,7 +81,7 @@ const UserMenuTrigger = ({ image }: { image: Image }) => (
   </div>
 )
 
-const UserMenuHeader = ({ image, name }: { image: Image; name: Name }) => (
+const UserMenuHeader = ({ image, name }: { image: ImageURL; name: Name }) => (
   <div className={'flex items-center gap-12 p-16'}>
     <Avatar image={image} size={48} />
     <div>

src/components/shared/header/index.ts

@@ -1,3 +1,4 @@
+import { Header } from './Header'
 import { HeaderUserMenu } from './HeaderUserMenu'
 
-export { HeaderUserMenu }
+export { Header, HeaderUserMenu }

src/stories/shared/header/Header.stories.ts

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Header } from '@/components/shared/header'
+
+export default {
+  title: 'Shared/Header/Header',
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta
+
+export const Default: StoryObj = {
+  args: {
+    isAuthenticated: false,
+    user: null,
+    currentPage: '/project',
+  },
+}
+export const WithUserMenu: StoryObj = {
+  args: {
+    isAuthenticated: true,
+    user: {
+      id: '2',
+      name: 'Alexander',
+      imageUrl: 'https://picsum.photos/250/250',
+    },
+    currentPage: '/portfolio',
+  },
+}
+export const LoggedInWithoutUser: StoryObj = {
+  args: {
+    isAuthenticated: true,
+    user: null,
+    currentPage: '/team',
+  },
+}

src/stories/shared/header/HeaderUserMenu.stories.ts

@@ -15,7 +15,7 @@ export const Default: StoryObj = {
     user: {
       id: '1',
       name: 'John Doe',
-      image: 'https://picsum.photos/250/250',
+      imageUrl: 'https://picsum.photos/250/250',
     },
   },
 }
@@ -24,7 +24,7 @@ export const WithLongName: StoryObj = {
     user: {
       id: '2',
       name: 'Alexander the Great',
-      image: 'https://picsum.photos/250/250',
+      imageUrl: 'https://picsum.photos/250/250',
     },
   },
 }
@@ -33,7 +33,7 @@ export const WithoutImage: StoryObj = {
     user: {
       id: '3',
       name: 'Jane Doe',
-      image: '',
+      imageUrl: '',
     },
   },
 }

src/styles/globals.css

@@ -11,7 +11,6 @@ button,
 input,
 select {
   margin: 0;
-  outline: 0;
   cursor: pointer;
 }
 

src/types/api/Global.types.d.ts

@@ -7,7 +7,7 @@ type Id = number
 /** 
 URL
 */
-type URL = string
+type ImageURL = string
 /** 
 JWT 또는 인증 토큰
 */
@@ -64,7 +64,7 @@ type User = {
   email: Email
   name: Name
   nickname: Nickname
-  imageUrl: URL
+  imageUrl: ImageURL
 }
 
 // MemberInfo: 일부 사용자 정보를 제외한 타입