diff --git a/public/assets/icons/filledHeart.svg b/public/assets/icons/filledHeart.svg new file mode 100644 index 00000000..8a75c684 --- /dev/null +++ b/public/assets/icons/filledHeart.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/heart.svg b/public/assets/icons/heart.svg new file mode 100644 index 00000000..2944da5e --- /dev/null +++ b/public/assets/icons/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/search.svg b/public/assets/icons/search.svg index a69090da..44315c64 100644 --- a/public/assets/icons/search.svg +++ b/public/assets/icons/search.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index a25259ec..d46827fe 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -36,7 +36,7 @@ function LoginPage() { // TODO: api return 값에 따라 error처리 return (
-
+
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx index 86f2e982..109566cc 100644 --- a/src/app/signup/page.tsx +++ b/src/app/signup/page.tsx @@ -48,7 +48,7 @@ function SignupPage() { return (
-
+
diff --git a/src/components/icons/FilledHeart.tsx b/src/components/icons/FilledHeart.tsx new file mode 100644 index 00000000..0b4c9793 --- /dev/null +++ b/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 ( + + + + ); +} + +export default Heart; diff --git a/src/components/icons/Heart.tsx b/src/components/icons/Heart.tsx index 51a87487..8e22d3f8 100644 --- a/src/components/icons/Heart.tsx +++ b/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 ( - - + + ); } diff --git a/src/components/icons/Logo.tsx b/src/components/icons/Logo.tsx index 2fae0684..3f2e3cdc 100644 --- a/src/components/icons/Logo.tsx +++ b/src/components/icons/Logo.tsx @@ -12,8 +12,9 @@ function Logo({ }: LogoProps) { return ( - + + ); } diff --git a/src/components/icons/Search.tsx b/src/components/icons/Search.tsx index f2bd924e..f241c80b 100644 --- a/src/components/icons/Search.tsx +++ b/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 ( - - + + + + ); } diff --git a/src/components/icons/Share.tsx b/src/components/icons/Share.tsx index 5997d0c7..08f171f3 100644 --- a/src/components/icons/Share.tsx +++ b/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 ( diff --git a/src/components/shared/header/Header.module.scss b/src/components/shared/header/Header.module.scss index 6e2bce91..3b713520 100644 --- a/src/components/shared/header/Header.module.scss +++ b/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,21 +34,26 @@ $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; } @@ -56,6 +61,7 @@ $white: var(--white); margin-left: auto; a { + transform: translateY(2px); text-decoration: none; } } diff --git a/src/components/shared/header/Header.stories.tsx b/src/components/shared/header/Header.stories.tsx index 13f00e80..54ec4411 100644 --- a/src/components/shared/header/Header.stories.tsx +++ b/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; export default meta; type Story = StoryObj; -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', }, }; diff --git a/src/components/shared/header/Header.tsx b/src/components/shared/header/Header.tsx index 89762c10..bc69f31d 100644 --- a/src/components/shared/header/Header.tsx +++ b/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 (
diff --git a/src/components/shared/header/headerItems/LeftIcon.tsx b/src/components/shared/header/headerItems/LeftIcon.tsx index a3df38c7..4248ee6b 100644 --- a/src/components/shared/header/headerItems/LeftIcon.tsx +++ b/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 ( +
  • + + + +
    • + ); + } -function LeftIcon({ className }: LeftIconProps) { return ( -
  • - -
    • + ); } export default LeftIcon; diff --git a/src/components/shared/header/headerItems/RightIcon.tsx b/src/components/shared/header/headerItems/RightIcon.tsx index cdc80987..3aa43409 100644 --- a/src/components/shared/header/headerItems/RightIcon.tsx +++ b/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 (
  • - {isLogin - ? (로그아웃) - : ( - - 로그인 - - )} + + +
    • ); } - if (displayRightIcon) { + if (displayRightIconType === 'heartShare') { return (