Merge pull request #84 from Kernel360/edit-component-header

공통 컴포넌트: Header UI 변경

src/app/login/page.tsx

@@ -36,7 +36,7 @@ function LoginPage() {
   // TODO: api return 값에 따라 error처리
   return (
     <main>
-      <Header displayLogo={false} />
+      <Header isDisplayLogo={false} />
       <Spacing size={30} />
       <form onSubmit={handleSubmit(onSubmit)}>
         <Title title="로그인" size={20} />

src/app/signup/page.tsx

@@ -48,7 +48,7 @@ function SignupPage() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Header displayLogo={false} />
+      <Header isDisplayLogo={false} />
       <Spacing size={20} />
       <Title title="회원가입" />
       <TextField

src/components/icons/BackArrow.tsx

@@ -8,7 +8,7 @@ interface BackProps {
 }
 
 function BackArrow({
-  width = 9, height = 16, color = 'black', onClick,
+  width = 7, height = 14, color = 'black', onClick,
 }:BackProps) {
   return (
     <svg width={width} height={height} viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>

src/components/icons/FilledHeart.tsx

@@ -0,0 +1,19 @@
+import { colors } from '@styles/colorPalette';
+
+interface HeartProps {
+  width?: number
+  height?:number
+  onClick?:()=>void
+}
+
+function Heart({
+  width = 19, height = 16.5, onClick,
+}: HeartProps) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
+      <path d="M9.9999 16.75C9.78324 16.75 9.57074 16.7125 9.3624 16.6375C9.15407 16.5625 8.95824 16.4417 8.7749 16.275L7.2999 14.925C5.48324 13.3083 3.87907 11.7292 2.4874 10.1875C1.09574 8.64583 0.399902 6.96667 0.399902 5.15C0.399902 3.68333 0.899902 2.45833 1.8999 1.475C2.8999 0.491667 4.14157 0 5.6249 0C6.4749 0 7.27907 0.179167 8.0374 0.5375C8.79574 0.895833 9.4499 1.40833 9.9999 2.075C10.5832 1.40833 11.2457 0.895833 11.9874 0.5375C12.7291 0.179167 13.5249 0 14.3749 0C15.8582 0 17.0999 0.491667 18.0999 1.475C19.0999 2.45833 19.5999 3.68333 19.5999 5.15C19.5999 6.96667 18.9041 8.64583 17.5124 10.1875C16.1207 11.7292 14.5166 13.3083 12.6999 14.925L11.2249 16.275C11.0416 16.4417 10.8457 16.5625 10.6374 16.6375C10.4291 16.7125 10.2166 16.75 9.9999 16.75Z" fill={colors.pink} />
+    </svg>
+  );
+}
+
+export default Heart;

src/components/icons/Heart.tsx

@@ -1,28 +1,18 @@
-'use client';
-
-import { useState } from 'react';
-
 import { Colors, colors } from '@styles/colorPalette';
 
 interface HeartProps {
-  width: number
-  height:number
+  width?: number
+  height?:number
   color?: Colors
-  changeColor?: Colors
+  onClick?:() => void
 }
 
 function Heart({
-  width, height, color = 'gray400', changeColor = 'pink',
+  width = 19, height = 16.5, color = 'black', onClick,
 }: HeartProps) {
-  const [isClicked, setIsClicked] = useState(false);
-
-  const handleHeartClick = () => {
-    setIsClicked((prev) => { return !prev; });
-  };
-
   return (
-    <svg width={width} height={height} viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={handleHeartClick}>
-      <path d="M17.612 2.41452C17.1722 1.96607 16.65 1.61034 16.0752 1.36763C15.5005 1.12492 14.8844 1 14.2623 1C13.6401 1 13.0241 1.12492 12.4493 1.36763C11.8746 1.61034 11.3524 1.96607 10.9126 2.41452L9.99977 3.34476L9.08699 2.41452C8.19858 1.50912 6.99364 1.00047 5.73725 1.00047C4.48085 1.00047 3.27591 1.50912 2.38751 2.41452C1.4991 3.31992 1 4.5479 1 5.82833C1 7.10875 1.4991 8.33674 2.38751 9.24214L3.30029 10.1724L9.99977 17L16.6993 10.1724L17.612 9.24214C18.0521 8.79391 18.4011 8.26171 18.6393 7.67596C18.8774 7.09021 19 6.46237 19 5.82833C19 5.19428 18.8774 4.56645 18.6393 3.9807C18.4011 3.39494 18.0521 2.86275 17.612 2.41452Z" stroke={isClicked ? colors[changeColor] : colors[color]} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill={isClicked ? colors[changeColor] : colors.white} />
+    <svg width={width} height={height} viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
+      <path d="M9.9999 16.75C9.78324 16.75 9.57074 16.7125 9.3624 16.6375C9.15407 16.5625 8.95824 16.4417 8.7749 16.275L7.2999 14.925C5.48324 13.3083 3.87907 11.7292 2.4874 10.1875C1.09574 8.64583 0.399902 6.96667 0.399902 5.15C0.399902 3.68303 0.898652 2.45796 1.89615 1.47478C2.89365 0.491592 4.13657 0 5.6249 0C6.47819 0 7.28318 0.179167 8.03988 0.5375C8.79656 0.895833 9.4499 1.40833 9.9999 2.075C10.5832 1.40833 11.2471 0.895833 11.9914 0.5375C12.7357 0.179167 13.5276 0 14.3669 0C15.8556 0 17.0999 0.491592 18.0999 1.47478C19.0999 2.45796 19.5999 3.68303 19.5999 5.15C19.5999 6.96667 18.9041 8.64583 17.5124 10.1875C16.1207 11.7292 14.5166 13.3083 12.6999 14.925L11.2249 16.275C11.0416 16.4417 10.8457 16.5625 10.6374 16.6375C10.4291 16.7125 10.2166 16.75 9.9999 16.75ZM9.1499 3.95C8.7499 3.26667 8.2499 2.7375 7.6499 2.3625C7.0499 1.9875 6.3749 1.8 5.6249 1.8C4.64634 1.8 3.83086 2.11667 3.17848 2.75C2.52609 3.38333 2.1999 4.18661 2.1999 5.15982C2.1999 6.00327 2.4999 6.89167 3.0999 7.825C3.6999 8.75833 4.41657 9.67083 5.2499 10.5625C6.08324 11.4542 6.94157 12.2833 7.8249 13.05C8.70824 13.8167 9.43324 14.45 9.9999 14.95C10.5666 14.45 11.2916 13.8167 12.1749 13.05C13.0582 12.2833 13.9166 11.4542 14.7499 10.5625C15.5832 9.67083 16.2999 8.75833 16.8999 7.825C17.4999 6.89167 17.7999 6.00327 17.7999 5.15982C17.7999 4.18661 17.4737 3.38333 16.8213 2.75C16.1689 2.11667 15.3535 1.8 14.3749 1.8C13.6249 1.8 12.9457 1.9875 12.3374 2.3625C11.7291 2.7375 11.2249 3.26667 10.8249 3.95C10.7416 4.11667 10.6245 4.2375 10.4737 4.3125C10.3229 4.3875 10.1646 4.425 9.9987 4.425C9.83284 4.425 9.67074 4.3875 9.5124 4.3125C9.35407 4.2375 9.23324 4.11667 9.1499 3.95Z" fill={colors[color]} />
     </svg>
   );
 }

src/components/icons/Search.tsx

@@ -5,11 +5,13 @@ interface SearchProps {
   color?: Colors
 }
 
-function Search({ size = 17, color = 'gray300' }: SearchProps) {
+function Search({ size = 18, color = 'black' }: SearchProps) {
   return (
-    <svg width={size} height={size} viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M12.8222 12.8222L15.33 15.33M14.6135 7.80675C14.6135 4.04749 11.566 1 7.80675 1C4.04749 1 1 4.04749 1 7.80675C1 11.566 4.04749 14.6135 7.80675 14.6135C11.566 14.6135 14.6135 11.566 14.6135 7.80675Z" stroke={colors[color]} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+
+    <svg width={size} height={size} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L17.3 15.9C17.4833 16.0833 17.575 16.3167 17.575 16.6C17.575 16.8833 17.4833 17.1167 17.3 17.3C17.1167 17.4833 16.8833 17.575 16.6 17.575C16.3167 17.575 16.0833 17.4833 15.9 17.3L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z" fill={colors[color]} />
     </svg>
+
   );
 }
 

src/components/icons/Share.tsx

@@ -8,7 +8,7 @@ interface ShareProps {
 }
 
 function Share({
-  width = 18, height = 20, color = 'black', onClick,
+  width = 16, height = 18, color = 'black', onClick,
 }: ShareProps) {
   return (
     <svg width={width} height={height} viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>

src/components/shared/header/Header.module.scss

@@ -5,7 +5,7 @@ $white: var(--white);
     top: 0;
     box-sizing: border-box;
     width: 100%;
-    height: 48px;
+    height: 44px;
     background-color: $white;
 
     &.transparent {
@@ -34,28 +34,34 @@ $white: var(--white);
 }
 
 .container {
+    align-items: center;
     justify-content: space-between;
     width: inherit;
     height: inherit;
     margin: 0;
 
-    li.logo {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -45%);
+    ul.left {
+        & > li:first-child {
+            margin-right: 12.5px;
+        }
+    }
+
+    li.left {
+        height: fit-content;
+        transform: translateY(2px);
     }
 
     ul.right {
         display: flex;
-        gap: 18px;
+        gap: 13px;
         align-items: center;
     }
 
     li.right {
         margin-left: auto;
 
         a {
+            transform: translateY(2px);
             text-decoration: none;
         }
     }

src/components/shared/header/Header.stories.tsx

@@ -7,58 +7,69 @@ const meta = {
   component: Header,
   tags: ['autodocs'],
   args: {
-    isLogin: false,
-    displayLogo: true,
-    isTransparent: false,
-    displayRightIcon: false,
   },
   argTypes: {
-    isLogin: { control: 'boolean' },
-    displayLogo: { control: 'boolean' },
+    isDisplayLogo: { control: 'boolean' },
     isTransparent: { control: 'boolean' },
-    displayRightIcon: { control: 'boolean' },
+    children: { control: 'string' },
+    displayRightIconType: { control: 'string' },
   },
 }satisfies Meta<typeof Header>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const LoggedIn:Story = {
+export const MainPage:Story = {
+  args: {
+    isDisplayLogo: true,
+    isTransparent: false,
+    displayRightIconType: 'search',
+  },
+};
+
+export const OtherPage:Story = {
   args: {
-    isLogin: true,
-    displayLogo: true,
+    isDisplayLogo: false,
     isTransparent: false,
-    displayRightIcon: false,
   },
 };
 
-export const LoggedOut:Story = {
+export const FavoritePage:Story = {
   args: {
-    isLogin: false,
-    displayLogo: true,
+    isDisplayLogo: false,
     isTransparent: false,
-    displayRightIcon: false,
+    children: '즐겨찾기',
   },
 };
 
-export const NotMainPage:Story = {
+export const CarInfoPage:Story = {
   args: {
-    displayLogo: false,
+    isDisplayLogo: false,
     isTransparent: false,
-    displayRightIcon: false,
+    children: '나의 차량 정보',
+  },
+};
+
+export const CarWashInfoPage:Story = {
+  args: {
+    isDisplayLogo: false,
+    isTransparent: false,
+    children: '나의 세차 정보',
   },
 };
 
 export const MapPage:Story = {
   args: {
-    displayLogo: false,
+    isDisplayLogo: false,
     isTransparent: true,
   },
 };
 
 export const ProductPage:Story = {
   args: {
-    displayLogo: false,
-    displayRightIcon: true,
+    isDisplayLogo: false,
+    isTransparent: false,
+    children: '홈',
+    displayRightIconType: 'heartShare',
   },
 };

src/components/shared/header/Header.tsx

@@ -1,26 +1,23 @@
 import classNames from 'classnames/bind';
 
 import styles from './Header.module.scss';
-import CenterIcon from './headerItems/CenterIcon';
 import LeftIcon from './headerItems/LeftIcon';
 import RightIcon from './headerItems/RightIcon';
 import { HeaderProps } from './types/headerType';
 
 export default function Header({
-  isLogin = false,
-  displayLogo = true, isTransparent = false, displayRightIcon = false, className,
-}: HeaderProps) {
+  isDisplayLogo = true, className,
+  children, isTransparent = false, displayRightIconType,
+}:HeaderProps) {
   const cx = classNames.bind(styles);
+
   return (
     <nav className={cx('nav', className, { transparent: isTransparent })}>
       <ul className={cx('container')}>
-        {!displayLogo && <LeftIcon className={cx('left')} />}
-        {displayLogo && <CenterIcon className={cx('logo')} />}
+        <LeftIcon className={cx('left')} isDisplayLogo={isDisplayLogo}>{children}</LeftIcon>
         <RightIcon
           className={cx('right')}
-          isLogin={isLogin}
-          displayLogo={displayLogo}
-          displayRightIcon={displayRightIcon}
+          displayRightIconType={displayRightIconType}
         />
       </ul>
     </nav>

src/components/shared/header/headerItems/LeftIcon.tsx

@@ -1,14 +1,33 @@
+import Link from 'next/link';
+
 import BackArrow from '@components/icons/BackArrow';
+import Logo from '@components/icons/Logo';
+import Text from '@components/shared/text/Text';
 
-interface LeftIconProps {
-  className: string;
-}
+import { LeftIconProps } from '../types/headerType';
+
+function LeftIcon({ className, children, isDisplayLogo }: LeftIconProps) {
+  if (isDisplayLogo) {
+    return (
+      <li className={className}>
+        <Link href="/">
+          <Logo />
+        </Link>
+      </li>
+    );
+  }
 
-function LeftIcon({ className }: LeftIconProps) {
   return (
-    <li className={className}>
-      <BackArrow />
-    </li>
+    <ul className={className}>
+      <li>
+        <BackArrow />
+      </li>
+      {children && (
+      <li>
+        <Text>{children}</Text>
+      </li>
+      )}
+    </ul>
   );
 }
 export default LeftIcon;

src/components/shared/header/headerItems/RightIcon.tsx

@@ -1,37 +1,43 @@
+'use client';
+
+import { useState } from 'react';
+
 import Link from 'next/link';
 
+import FilledHeart from '@components/icons/FilledHeart';
 import Heart from '@components/icons/Heart';
+import Search from '@components/icons/Search';
 import Share from '@components/icons/Share';
-import Text from '@shared/text/Text';
 
 import { RightIconProps } from '../types/headerType';
 
 function RightIcon({
   className,
-  isLogin,
-  displayLogo,
-  displayRightIcon,
+  displayRightIconType,
 }: RightIconProps) {
-  // TODO: 로그아웃
-  if (displayLogo) {
+  const [isSaved, setIsSaved] = useState(false);
+
+  const handleHeartClick = () => {
+    setIsSaved((prev) => { return !prev; });
+  };
+
+  if (displayRightIconType === 'search') {
     return (
       <li className={className}>
-        {isLogin
-          ? (<Text typography="t7" color="gray300">로그아웃</Text>)
-          : (
-            <Link href="/login">
-              <Text typography="t7" color="gray300">로그인</Text>
-            </Link>
-          )}
+        <Link href="/search">
+          <Search />
+        </Link>
       </li>
     );
   }
 
-  if (displayRightIcon) {
+  if (displayRightIconType === 'heartShare') {
     return (
       <ul className={className}>
         <li>
-          <Heart width={20} height={18} />
+          {isSaved
+            ? <FilledHeart onClick={handleHeartClick} />
+            : <Heart onClick={handleHeartClick} />}
         </li>
         <li>
           <Share />