Merge pull request #228 from vi-wolhwa/refactor/header_component_v2

Header 컴포넌트 새로운 디자인으로 리팩토링

frontend/src/assets/images/index.ts

@@ -1,5 +1,6 @@
-export { default as logoIcon } from './logo.png';
-export { default as newTemplateIcon } from './newTemplate.png';
+export { default as logoIcon } from './logo_24x24.png';
+export { default as newTemplateIcon } from './newTemplate_12x12.png';
 export { default as pencilIcon } from './pencil.png';
 export { default as searchIcon } from './search.png';
 export { default as trashcanIcon } from './trashcan.png';
+export { default as userMenuIcon } from './userMenu_38x38.png';

frontend/src/components/Header/Header.style.ts

@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+
+import { theme } from '@/style/theme';
+
+export const HeaderContainer = styled.nav`
+  position: fixed;
+  z-index: 1;
+  left: 0;
+
+  display: flex;
+  justify-content: center;
+
+  width: 100%;
+
+  background: white;
+  border-bottom: 2px solid ${theme.color.light.secondary_200};
+`;
+
+export const HeaderContentContainer = styled.div`
+  display: flex;
+  gap: 3.75rem;
+  align-items: center;
+
+  width: 80rem;
+  max-width: 80rem;
+  height: 4rem;
+  padding: 1.875rem;
+
+  white-space: nowrap;
+`;
+
+export const NavOptionButton = styled.button`
+  cursor: pointer;
+  background: none;
+`;
+
+export const NewTemplateButton = styled.button`
+  cursor: pointer;
+
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+
+  width: 7.5rem;
+  height: 2.375rem;
+
+  background-color: white;
+  border: 2px solid ${theme.color.light.primary_800};
+  border-radius: 8px;
+`;
+
+export const UserMenuButton = styled.button`
+  cursor: pointer;
+
+  width: 2.375rem;
+  height: 2.375rem;
+
+  color: ${theme.color.light.primary_800};
+
+  object-fit: contain;
+  background-color: white;
+  border-radius: 50%;
+`;

frontend/src/components/Header/Header.tsx

@@ -1,59 +1,62 @@
-import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { logoIcon, newTemplateIcon, searchIcon } from '@/assets/images';
-import { Button, Flex, Heading, Input, Text } from '@/components';
-import * as S from './style';
-
-const Header = () => {
-  const [searchValue, setSearchValue] = useState('');
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchValue(event.target.value);
-  };
-
-  return (
-    <S.HeaderContainer>
-      <Link to={'/'}>
-        <Flex align='center' gap='1.2rem' width='fit-content'>
-          <img src={logoIcon} alt='logo' />
-          <Heading.Large color='#FFD269'>CodeZap</Heading.Large>
-        </Flex>
-      </Link>
-      <Flex align='center' gap='3rem' flex='1'>
-        <Link to={'/my-page'}>
-          <Button size='medium' variant='text'>
-            <Text.Medium weight='bold' color='#FFD269'>
-              MyPage
-            </Text.Medium>
-          </Button>
-        </Link>
-        <Link to={'/'}>
-          <Button size='medium' variant='text'>
-            <Text.Medium weight='bold' color='white'>
-              Explores
-            </Text.Medium>
-          </Button>
-        </Link>
+import { logoIcon, newTemplateIcon, userMenuIcon } from '@/assets/images';
+import { Flex, Heading, Text } from '@/components';
+import { theme } from '../../style/theme';
+import * as S from './Header.style';
+
+const Header = () => (
+  <S.HeaderContainer>
+    <S.HeaderContentContainer>
+      <Logo />
+
+      <Flex align='center' gap='2rem' flex='1'>
+        <NavOption route='/' name='내 템플릿' />
+        <NavOption route='/explore' name='구경가기' />
       </Flex>
-      <Flex align='center' gap='3rem' width='fit-content'>
-        <Input size='medium' variant='outlined'>
-          <Input.Adornment>
-            <img src={searchIcon} />
-          </Input.Adornment>
-          <Input.TextField placeholder='Search...' onChange={handleInputChange} type='search' value={searchValue} />
-        </Input>
-        <Link to={'/templates/upload'}>
-          <Button size='medium' variant='outlined'>
-            <img src={newTemplateIcon} alt='newTemplate' />
-            <Text.Medium weight='bold' color='#FFD269'>
-              New Template
-            </Text.Medium>
-          </Button>
-        </Link>
+
+      <Flex align='center' gap='2rem'>
+        <NewTemplateButton />
+        <UserMenuButton />
       </Flex>
-    </S.HeaderContainer>
-  );
-};
+    </S.HeaderContentContainer>
+  </S.HeaderContainer>
+);
+
+const Logo = () => (
+  <Link to={'/'}>
+    <Flex align='center' gap='1rem'>
+      <img src={logoIcon} alt='로고 버튼' />
+      <Heading.XSmall color={theme.color.light.primary_800}>코드잽</Heading.XSmall>
+    </Flex>
+  </Link>
+);
+
+const NavOption = ({ route, name }: { route: string; name: string }) => (
+  <Link to={route}>
+    <S.NavOptionButton>
+      <Text.Medium weight='bold' color={theme.color.light.secondary_800}>
+        {name}
+      </Text.Medium>
+    </S.NavOptionButton>
+  </Link>
+);
+
+const NewTemplateButton = () => (
+  <Link to={'/templates/upload'}>
+    <S.NewTemplateButton>
+      <img src={newTemplateIcon} alt='' />
+      <Text.Small weight='bold' color={theme.color.light.primary_800}>
+        새 템플릿
+      </Text.Small>
+    </S.NewTemplateButton>
+  </Link>
+);
+
+const UserMenuButton = () => (
+  <S.UserMenuButton>
+    <img src={userMenuIcon} alt='사용자 메뉴' />
+  </S.UserMenuButton>
+);
 
 export default Header;