-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* refactor: 검색 아이콘 변경 * refactor: arrowLeft 아이콘 변경 * chore: lint 적용 * feat: TopBar 구현 * refactor: 띄어쓰기 변경 * feat: top bar logo 추가
- Loading branch information
Showing
5 changed files
with
241 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import TopBar from './TopBar'; | ||
|
|
||
| const meta: Meta<typeof TopBar> = { | ||
| title: 'common/TopBar', | ||
| component: TopBar, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof TopBar>; | ||
|
|
||
| export const Default: Story = { | ||
| render: (args) => { | ||
| return ( | ||
| <TopBar {...args}> | ||
| <TopBar.BackLink /> | ||
| <TopBar.Title title="타이틀" /> | ||
| <TopBar.Spacer /> | ||
| </TopBar> | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| export const Logo: Story = { | ||
| render: (args) => { | ||
| return ( | ||
| <TopBar {...args}> | ||
| <TopBar.Logo /> | ||
| <TopBar.SearchLink /> | ||
| </TopBar> | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| export const CenterTitleAndSearch: Story = { | ||
| render: (args) => { | ||
| return ( | ||
| <TopBar {...args}> | ||
| <TopBar.BackLink /> | ||
| <TopBar.Title title="타이틀" /> | ||
| <TopBar.SearchLink /> | ||
| </TopBar> | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| export const LeftTitle: Story = { | ||
| render: (args) => { | ||
| return ( | ||
| <TopBar {...args}> | ||
| <TopBar.LeftNavigationGroup title="타이틀" /> | ||
| </TopBar> | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| export const LeftTitleAndSearch: Story = { | ||
| render: (args) => { | ||
| return ( | ||
| <TopBar {...args}> | ||
| <TopBar.LeftNavigationGroup title="타이틀" /> | ||
| <TopBar.SearchLink /> | ||
| </TopBar> | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| export const LeftTitleAndRegister: Story = { | ||
| render: (args) => { | ||
| return ( | ||
| <TopBar {...args}> | ||
| <TopBar.LeftNavigationGroup title="타이틀" /> | ||
| <TopBar.RegisterLink /> | ||
| </TopBar> | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| export const Close: Story = { | ||
| render: (args) => { | ||
| return ( | ||
| <TopBar {...args}> | ||
| <TopBar.Spacer /> | ||
| <TopBar.CloseButton /> | ||
| </TopBar> | ||
| ); | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| import { LeftNavigationWrapper, container, headerTitle, leftTitle } from './topBar.css'; | ||
| import SvgIcon from '../Svg/SvgIcon'; | ||
| import Text from '../Text/Text'; | ||
|
|
||
| import LogoImage from '@/assets/logo.svg'; | ||
| import { PATH } from '@/constants/path'; | ||
| import { vars } from '@/styles/theme.css'; | ||
|
|
||
|
|
||
| interface TopBarProps { | ||
| children?: React.ReactNode; | ||
| title?: string; | ||
| link?: string; | ||
| state?: unknown; | ||
| } | ||
|
|
||
| const TopBar = ({ children }: TopBarProps) => { | ||
| return <header className={container}>{children}</header>; | ||
| }; | ||
|
|
||
| const Logo = () => { | ||
| return ( | ||
| <Link to={PATH.HOME}> | ||
| <LogoImage width={120} /> | ||
| </Link> | ||
| ); | ||
| }; | ||
|
|
||
| const BackLink = ({ state }: TopBarProps) => { | ||
| return ( | ||
| <Link to=".." relative="path" state={state}> | ||
| <SvgIcon variant="arrowLeft" stroke={vars.colors.gray5} width={20} height={20} /> | ||
| </Link> | ||
| ); | ||
| }; | ||
|
|
||
| const Title = ({ title }: TopBarProps) => { | ||
| return <h1 className={headerTitle}>{title}</h1>; | ||
| }; | ||
|
|
||
| // 왼쪽에 뒤로가기 버튼과 타이틀이 함께 있는 구역 | ||
| const LeftNavigationGroup = ({ title }: TopBarProps) => { | ||
| return ( | ||
| <div className={LeftNavigationWrapper}> | ||
| <BackLink /> | ||
| <h1 className={leftTitle}>{title}</h1> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const SearchLink = () => { | ||
| return ( | ||
| <Link to={PATH.SEARCH}> | ||
| <SvgIcon variant="search2" stroke={vars.colors.black} width={20} height={20} /> | ||
| </Link> | ||
| ); | ||
| }; | ||
|
|
||
| const RegisterLink = ({ link = '' }: TopBarProps) => { | ||
| return ( | ||
| <Link to={link}> | ||
| <Text size="caption1" color="disabled" weight="semiBold"> | ||
| 등록 | ||
| </Text> | ||
| </Link> | ||
| ); | ||
| }; | ||
|
|
||
| const CloseButton = ({ state }: TopBarProps) => { | ||
| return ( | ||
| <Link to=".." relative="path" state={state}> | ||
| <SvgIcon variant="close2" stroke={vars.colors.black} width={20} height={20} /> | ||
| </Link> | ||
| ); | ||
| }; | ||
|
|
||
| const Spacer = () => { | ||
| return <div style={{ width: 24, height: 24 }} aria-hidden />; | ||
| }; | ||
|
|
||
| TopBar.Logo = Logo; | ||
| TopBar.BackLink = BackLink; | ||
| TopBar.LeftNavigationGroup = LeftNavigationGroup; | ||
| TopBar.Title = Title; | ||
| TopBar.SearchLink = SearchLink; | ||
| TopBar.RegisterLink = RegisterLink; | ||
| TopBar.CloseButton = CloseButton; | ||
| TopBar.Spacer = Spacer; | ||
|
|
||
| export default TopBar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { vars } from '@/styles/theme.css'; | ||
| import { style } from '@vanilla-extract/css'; | ||
|
|
||
| export const container = style({ | ||
| position: 'fixed', | ||
| top: 0, | ||
| left: '50%', | ||
| width: '100%', | ||
| maxWidth: 400, | ||
| height: 50, | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| padding: '0 20px', | ||
| backgroundColor: vars.colors.white, | ||
| transform: 'translateX(-50%)', | ||
| zIndex: 1001, | ||
| }); | ||
|
|
||
| export const LeftNavigationWrapper = style({ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| }); | ||
|
|
||
| export const leftTitle = style({ | ||
| marginLeft: 6, | ||
| color: vars.colors.black, | ||
| fontSize: 18, | ||
| fontWeight: 600, | ||
| }); | ||
|
|
||
| export const headerTitle = style({ | ||
| color: vars.colors.black, | ||
| fontSize: 18, | ||
| fontWeight: 600, | ||
| }); |