Merge branch 'dev' of https://github.com/DevFDev/frontend into feat/data-query

Author: KingNono1030

src/components/common/button/Clickable.tsx

@@ -37,7 +37,7 @@ const styleByVariant: Record<Variant, string> = {
   contained: 'bg-primary-normal text-common-white active:bg-primary-strong',
   outlined:
     'border-1 border-solid border-primary-normal bg-common-white text-primary-normal',
-  text: 'text-gray-1000',
+  text: 'text-gray-800',
 }
 
 const styleBySize: Record<Size, string> = {

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/footer/Footer.tsx

@@ -0,0 +1,77 @@
+import { Link } from '@/components/common/button'
+import { Container } from '@/components/common/containers'
+import { Logo } from '@/components/common/logo'
+import { Text } from '@/components/common/text'
+
+const footerTabs = [
+  { label: '고객센터', link: '/' },
+  { label: '서비스이용약관', link: '/' },
+  { label: '개인정보 처리방침', link: '/' },
+  { label: '도움말', link: '/' },
+]
+
+export const Footer = (): JSX.Element => {
+  return (
+    <footer className='flex w-full justify-center border-t-1 border-solid border-gray-200'>
+      <Container className='flex h-300 w-full flex-col py-40'>
+        <div className='mb-20 flex items-center justify-between'>
+          <Logo variant='secondary' />
+          <div className='flex items-center justify-between gap-60'>
+            {footerTabs.map(footerTab => (
+              <Link
+                href={footerTab.link}
+                variant='text'
+                className='h-24 px-0'
+                key={footerTab.label}
+              >
+                {footerTab.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+        <div>
+          <Container className='mb-8'>
+            <Text.Body
+              variant='body3'
+              color='gray600'
+              weight='500'
+              className='flex items-center gap-10'
+            >
+              (주)DevForDev
+              <div className='h-14 w-1 bg-gray-200' />
+              대표 : 고용빈
+            </Text.Body>
+          </Container>
+          <Container className='mb-8'>
+            <Text.Body
+              variant='body3'
+              color='gray600'
+              weight='500'
+              className='flex items-center gap-10'
+            >
+              서울특별시 중구 삼일대로 343 대신파이낸스센터 8층
+              <div className='h-14 w-1 bg-gray-200' />
+              전화번호 : 02-521-8238
+            </Text.Body>
+          </Container>
+          <Container className='mb-30'>
+            <Text.Body
+              variant='body3'
+              color='gray600'
+              weight='500'
+              className='flex items-center gap-10'
+            >
+              사업자등록번호 : 000-00-00000
+              <div className='h-14 w-1 bg-gray-200' />
+              유료직업소개사업등록번호: (국내) 제0000-0000000-00-0-00000호
+            </Text.Body>
+          </Container>
+        </div>
+        <div className='mb-30 border-t-1 border-solid border-gray-200' />
+        <Text.Caption variant='caption1' color='gray500' weight='500'>
+          © 2024 DevForDev Lab, Inc.
+        </Text.Caption>
+      </Container>
+    </footer>
+  )
+}

src/components/shared/footer/index.ts

@@ -0,0 +1,3 @@
+import { Footer } from './Footer'
+
+export { Footer }

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/footer/Footer.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Footer } from '@/components/shared/footer'
+
+export default {
+  title: 'Shared/Footer',
+  component: Footer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta
+
+export const Default: StoryObj = {}

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: '',
     },
   },
 }