Skip to content

Commit

Permalink
Merge pull request #32 from Duri-Salon/feat(salon)/home-header(DURI-191)
Browse files Browse the repository at this point in the history
[feat] 매장 프로필 UI 구현
  • Loading branch information
seungboshim authored Dec 3, 2024
2 parents 32b50c5 + 1319426 commit 5e267dc
Show file tree
Hide file tree
Showing 14 changed files with 299 additions and 21 deletions.
14 changes: 14 additions & 0 deletions .storybook/preview.js → .storybook/preview.jsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
import React from 'react';
import { Global } from '@emotion/react';
import { globalStyle } from '../packages/ui/src/styles/GlobalStyles';
import { ThemeProvider } from '@emotion/react';
import { theme } from '../packages/ui/src/styles/theme';

/** @type { import('@storybook/react').Preview } */
const preview = {
parameters: {
Expand All @@ -17,6 +23,14 @@ const preview = {
],
},
},
decorators: [
(Story) => (
<ThemeProvider theme={theme}>
<Global styles={globalStyle} />
<Story />
</ThemeProvider>
),
],
};

export default preview;
71 changes: 62 additions & 9 deletions apps/salon/src/pages/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,69 @@
import { DuriNavbar, MobileLayout } from '@duri-fe/ui';
import { DuriNavbar, Flex, Header, HeightFitFlex, MobileLayout, Pencil, Text, theme } from '@duri-fe/ui';
import styled from '@emotion/styled';

const Home = () => {
return (
<>
<MobileLayout>
<h1>Home</h1>
<h1>Home</h1>
<h1>Home</h1>
<DuriNavbar />
</MobileLayout>
</>
<MobileLayout>
<HomeHeaderContainer direction='column' height={260} align='start' justify='space-between'>
<Header logoColor={theme.palette.Black} iconColor={theme.palette.White} badge />

<TextContainer direction='column' align='start' padding="36px 20px" gap={4}>
<Flex gap={12}>
<Text typo='Heading3' colorCode={theme.palette.White}>댕댕샵</Text>
<Pencil width={20} />
</Flex>
<Text typo='Body3' colorCode={theme.palette.White}>경기도 성남시</Text>
</TextContainer>

<ShopNotice justify='start' padding="16px" backgroundColor={theme.palette.Normal200}>
<ShopNoticeText colorCode={theme.palette.Normal900} align='start'>
댕댕샵 점주님 안녕하세용용용용용용용용
</ShopNoticeText>
</ShopNotice>
</HomeHeaderContainer>

<DuriNavbar />
</MobileLayout>
);
};

const HomeHeaderContainer = styled(Flex)`
position: relative;
background-size: cover;
background-position: center;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70%;
background: linear-gradient(180deg, rgba(217, 217, 217, 0.00) 0%, #111 100%);
}
`;

const TextContainer = styled(Flex)`
height: fit-content;
width: fit-content;
z-index: 2;
`;

const ShopNotice = styled(HeightFitFlex)`
width: calc(100% - 40px);
border-radius: 0 12px 12px 12px;
position: absolute;
bottom: -25px;
left: 20px;
overflow: hidden;
`;

const ShopNoticeText = styled(Text)`
width: 100%;
justify-content: start;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;

export default Home;
9 changes: 4 additions & 5 deletions packages/ui/src/assets/Doori.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@ import * as React from 'react';
const SvgDoori = (props: React.SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 162 63"
fill="currentColor"
viewBox="0 0 76 22"
{...props}
>
<path fill="#fff" d="M0 0h162v63H0z" />
<path
fill="#000"
d="M47.916 32.614q0 2.181-.58 4.154a14.3 14.3 0 0 1-1.636 3.615 14.8 14.8 0 0 1-2.486 3.012 15.5 15.5 0 0 1-3.21 2.265 16.7 16.7 0 0 1-3.75 1.454 16.8 16.8 0 0 1-4.101.499H19V17.698h13.153q2.114 0 4.101.498 1.989.499 3.729 1.434a14.9 14.9 0 0 1 3.21 2.243q1.47 1.33 2.507 2.992a13.9 13.9 0 0 1 1.636 3.615q.58 1.952.58 4.134m-8.348 0q0-2.43-.6-4.612-.58-2.202-1.823-3.864a8.94 8.94 0 0 0-3.17-2.639q-1.905-.975-4.577-.976h-2.175v24.181h2.175q2.631 0 4.536-.976 1.926-.997 3.17-2.66 1.263-1.683 1.864-3.863.6-2.181.6-4.591m38.01 2.95q0 1.869-.498 3.51a12.1 12.1 0 0 1-1.387 3.033 11.8 11.8 0 0 1-2.113 2.514 13.3 13.3 0 0 1-2.734 1.87 14 14 0 0 1-3.17 1.184 14.3 14.3 0 0 1-3.459.415q-1.78 0-3.459-.415a14.5 14.5 0 0 1-3.169-1.184 13.5 13.5 0 0 1-2.713-1.87 12.3 12.3 0 0 1-2.134-2.514 12.6 12.6 0 0 1-1.367-3.033 12.2 12.2 0 0 1-.497-3.51q0-1.85.497-3.49a12.5 12.5 0 0 1 1.367-3.054 11.9 11.9 0 0 1 2.134-2.493 13 13 0 0 1 2.713-1.89 14.5 14.5 0 0 1 6.628-1.6q1.782 0 3.46.415 1.698.416 3.169 1.184a12.8 12.8 0 0 1 2.734 1.89 11.4 11.4 0 0 1 2.113 2.494 12 12 0 0 1 1.387 3.054q.498 1.64.498 3.49m-7.126 0q0-.997-.124-2.099a14 14 0 0 0-.373-2.18 10.4 10.4 0 0 0-.746-2.058 6.3 6.3 0 0 0-1.139-1.724 5 5 0 0 0-1.636-1.184q-.953-.457-2.217-.457-1.2 0-2.133.457a5.5 5.5 0 0 0-1.636 1.226 7.1 7.1 0 0 0-1.16 1.745 13 13 0 0 0-.746 2.077 14 14 0 0 0-.414 2.16q-.125 1.081-.125 2.036t.125 2.057q.124 1.08.414 2.16t.745 2.078a7.7 7.7 0 0 0 1.16 1.745q.705.748 1.637 1.205.931.457 2.133.457 1.243 0 2.196-.436a5.3 5.3 0 0 0 1.636-1.205 6.5 6.5 0 0 0 1.16-1.724q.456-.977.725-2.057.29-1.08.394-2.181a19 19 0 0 0 .124-2.099m36.829 0q0 1.869-.498 3.51a12.1 12.1 0 0 1-1.387 3.033 11.8 11.8 0 0 1-2.113 2.514 13.3 13.3 0 0 1-2.734 1.87q-1.47.768-3.17 1.184a14.3 14.3 0 0 1-3.459.415 14.5 14.5 0 0 1-6.628-1.6 13.5 13.5 0 0 1-2.713-1.869 12.3 12.3 0 0 1-2.134-2.514 12.6 12.6 0 0 1-1.367-3.033 12.2 12.2 0 0 1-.497-3.51q0-1.85.497-3.49a12.5 12.5 0 0 1 1.367-3.054 11.8 11.8 0 0 1 2.134-2.493 13 13 0 0 1 2.713-1.89 14.5 14.5 0 0 1 6.628-1.6q1.782 0 3.46.415 1.698.416 3.169 1.184a12.9 12.9 0 0 1 2.734 1.89 11.4 11.4 0 0 1 2.113 2.494 12 12 0 0 1 1.387 3.054q.498 1.64.498 3.49m-7.126 0q0-.997-.124-2.099a14 14 0 0 0-.373-2.18q-.27-1.081-.746-2.058a6.3 6.3 0 0 0-1.139-1.724 5 5 0 0 0-1.636-1.184q-.953-.457-2.217-.457-1.2 0-2.133.457a5.5 5.5 0 0 0-1.637 1.226 7.1 7.1 0 0 0-1.16 1.745 13 13 0 0 0-.745 2.077 14 14 0 0 0-.414 2.16q-.125 1.081-.125 2.036t.125 2.057q.123 1.08.414 2.16.29 1.08.746 2.078a7.7 7.7 0 0 0 1.16 1.745q.704.748 1.636 1.205t2.133.457q1.243 0 2.196-.436a5.3 5.3 0 0 0 1.636-1.205 6.5 6.5 0 0 0 1.16-1.724q.456-.977.725-2.057.29-1.08.394-2.181.124-1.101.124-2.099m31.899-9.827-3.936 6.544a28 28 0 0 0-.642-1.87 10 10 0 0 0-.973-1.931 5.6 5.6 0 0 0-1.388-1.517 2.97 2.97 0 0 0-1.865-.623q-.973 0-1.698.498-.704.5-1.201 1.31a8 8 0 0 0-.829 1.807 17 17 0 0 0-.497 2.035q-.165 1.019-.228 1.974a25 25 0 0 0-.062 1.62v12.029h-7.022V23.618h2.693l2.838 5.589q.58-1.35 1.325-2.472a8.7 8.7 0 0 1 1.72-1.953 7.3 7.3 0 0 1 2.195-1.288q1.243-.457 2.797-.457.807 0 1.802.145a9.5 9.5 0 0 1 1.947.457 7.6 7.6 0 0 1 1.76.831q.808.52 1.264 1.267m10.294-7.915q0 .79-.31 1.496-.29.707-.808 1.226a4 4 0 0 1-1.222.83q-.705.292-1.492.292a3.9 3.9 0 0 1-1.491-.291 3.98 3.98 0 0 1-2.03-2.057q-.29-.706-.29-1.496 0-.789.29-1.474.31-.707.829-1.226a3.8 3.8 0 0 1 1.201-.81q.705-.312 1.491-.312a3.65 3.65 0 0 1 1.492.312q.704.291 1.222.81.517.52.808 1.226.31.685.31 1.474m-.31 29.79h-7.022V23.64h7.022z"
fill="currentColor"
d="M17.792 11.834q0 1.333-.356 2.539a8.7 8.7 0 0 1-1.002 2.209 9 9 0 0 1-1.524 1.84 9.5 9.5 0 0 1-1.968 1.385q-1.065.57-2.297.888Q9.426 21 8.13 21H.069V2.719h8.062q1.295 0 2.514.304a10 10 0 0 1 2.285.876q1.08.56 1.968 1.372a8.6 8.6 0 0 1 1.536 1.828 8.5 8.5 0 0 1 1.002 2.209q.357 1.192.356 2.526m-5.116 0q0-1.486-.368-2.818a6.8 6.8 0 0 0-1.118-2.362 5.5 5.5 0 0 0-1.942-1.612q-1.168-.597-2.806-.597H5.11v14.778h1.333q1.613 0 2.78-.597a5.6 5.6 0 0 0 1.943-1.625 7 7 0 0 0 1.143-2.361 10.5 10.5 0 0 0 .368-2.806m23.296 1.803q0 1.142-.305 2.145a7.4 7.4 0 0 1-.85 1.854 7.2 7.2 0 0 1-1.295 1.536 8.2 8.2 0 0 1-1.676 1.142q-.902.47-1.943.724a8.8 8.8 0 0 1-2.12.254 8.906 8.906 0 0 1-4.062-.978 8.3 8.3 0 0 1-1.663-1.142 7.5 7.5 0 0 1-1.308-1.536 7.429 7.429 0 0 1-1.143-3.999 7.3 7.3 0 0 1 .305-2.133 7.6 7.6 0 0 1 .838-1.866q.546-.85 1.308-1.524A8 8 0 0 1 23.72 6.96a8.9 8.9 0 0 1 6.182-.724q1.041.254 1.943.724.914.47 1.676 1.155.761.673 1.294 1.524a7.3 7.3 0 0 1 .851 1.866 7.3 7.3 0 0 1 .305 2.133m-4.367 0q0-.61-.077-1.283a8.6 8.6 0 0 0-.228-1.332q-.166-.66-.457-1.257a3.9 3.9 0 0 0-.698-1.054 3.1 3.1 0 0 0-1.003-.724q-.585-.279-1.359-.279-.736 0-1.307.28-.572.279-1.003.748-.42.457-.711 1.067-.28.61-.457 1.27a9 9 0 0 0-.254 1.32q-.076.66-.076 1.244 0 .583.076 1.257.075.66.254 1.32.177.66.457 1.27.291.596.71 1.066.432.457 1.004.736.57.28 1.307.28.762 0 1.346-.267.584-.28 1.003-.736.432-.457.71-1.054.28-.597.445-1.257.178-.66.241-1.333.077-.673.077-1.282m22.572 0q0 1.142-.305 2.145a7.4 7.4 0 0 1-.85 1.854 7.2 7.2 0 0 1-1.295 1.536 8.2 8.2 0 0 1-1.676 1.142q-.902.47-1.943.724a8.8 8.8 0 0 1-2.12.254 8.906 8.906 0 0 1-4.062-.978 8.3 8.3 0 0 1-1.663-1.142 7.5 7.5 0 0 1-1.308-1.536 7.429 7.429 0 0 1-1.143-3.999 7.3 7.3 0 0 1 .305-2.133 7.6 7.6 0 0 1 .838-1.866q.546-.85 1.308-1.524a8 8 0 0 1 1.663-1.155 8.9 8.9 0 0 1 6.182-.724q1.041.254 1.943.724.915.47 1.676 1.155.76.673 1.295 1.524.545.85.85 1.866a7.3 7.3 0 0 1 .305 2.133m-4.367 0q0-.61-.077-1.283a8.6 8.6 0 0 0-.228-1.332q-.165-.66-.457-1.257a3.9 3.9 0 0 0-.698-1.054 3.1 3.1 0 0 0-1.003-.724q-.584-.279-1.359-.279-.735 0-1.307.28-.571.279-1.003.748-.42.457-.711 1.067-.28.61-.457 1.27a8.7 8.7 0 0 0-.254 1.32q-.076.66-.076 1.244 0 .583.076 1.257.075.66.254 1.32.177.66.457 1.27.291.596.71 1.066.432.457 1.004.736.57.28 1.307.28.762 0 1.346-.267.585-.28 1.003-.736.432-.457.71-1.054.28-.597.445-1.257.179-.66.241-1.333.077-.673.077-1.282m19.55-6.005-2.412 3.999q-.151-.508-.393-1.143a6.2 6.2 0 0 0-.597-1.18 3.4 3.4 0 0 0-.85-.927Q64.611 8 63.964 8q-.597 0-1.041.305-.432.305-.736.8a5 5 0 0 0-.508 1.104q-.19.609-.305 1.244-.102.622-.14 1.206-.038.572-.038.99V21h-4.303V6.337h1.65l1.74 3.415q.354-.826.812-1.51a5.3 5.3 0 0 1 1.053-1.194q.597-.508 1.346-.787a5 5 0 0 1 1.714-.28q.495 0 1.105.09.61.075 1.193.279.585.19 1.079.507.495.318.774.775m6.31-4.837q0 .482-.19.914a2.3 2.3 0 0 1-.496.749q-.316.317-.749.508a2.4 2.4 0 0 1-.914.178q-.482 0-.914-.178a2.44 2.44 0 0 1-1.244-1.257 2.4 2.4 0 0 1-.178-.914q0-.483.178-.901a2.4 2.4 0 0 1 .508-.75q.317-.316.736-.495a2.2 2.2 0 0 1 .914-.19q.483 0 .914.19.432.178.75.496.316.316.495.749.19.42.19.9M75.48 21h-4.304V6.35h4.304z"
/>
</svg>
);
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/assets/Magnifier.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import * as React from 'react';
const SvgMagnifier = (props: React.SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
fill="currentColor"
viewBox="0 0 53 55"
{...props}
>
<path
fill="#000"
stroke="#000"
fill="currentColor"
stroke="currentColor"
strokeWidth={0.3}
d="m48.383 48.373-.002-.002-9.096-9.44a21.14 21.14 0 0 0 5.032-13.722c0-11.47-8.96-20.776-20.025-20.776S4.267 13.74 4.267 25.208c0 11.469 8.96 20.775 20.025 20.775 5.076-.005 9.695-1.985 13.223-5.216l9.089 9.432.002.002c.486.488 1.26.488 1.746 0 .496-.497.51-1.314.03-1.828Zm-24.091-4.981c-9.67 0-17.517-8.136-17.517-18.184 0-10.047 7.848-18.183 17.517-18.183 9.664.012 17.505 8.14 17.516 18.184 0 10.047-7.847 18.183-17.516 18.183Z"
/>
Expand Down
10 changes: 6 additions & 4 deletions packages/ui/src/assets/Notification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@ import * as React from 'react';
const SvgNotification = (props: React.SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 54 55"
fill="currentColor"
viewBox="0 0 22 25"
{...props}
>
<path
fill="#000"
d="M40.5 32.313v-9.396c0-7.105-5.4-13.063-12.375-13.75V5.729c0-.687-.45-1.146-1.125-1.146s-1.125.459-1.125 1.146v3.438C18.9 9.854 13.5 15.813 13.5 22.917v9.395c-2.475.459-4.5 2.75-4.5 5.5v4.584c0 .687.45 1.146 1.125 1.146h8.325c1.125 3.895 4.5 6.875 8.55 6.875s7.65-2.98 8.55-6.875h8.325c.675 0 1.125-.459 1.125-1.146v-4.584c0-2.75-2.025-5.041-4.5-5.5m-24.75-9.396c0-6.417 4.95-11.459 11.25-11.459S38.25 16.5 38.25 22.917v9.166h-22.5zm13.5 24.75c-3.6 1.145-7.425-.688-8.55-4.125h12.6c-.675 2.062-2.25 3.437-4.05 4.125m13.5-6.417h-31.5v-3.437c0-1.834 1.575-3.438 3.375-3.438h24.75c1.8 0 3.375 1.604 3.375 3.438z"
fill="currentColor"
d="M1.786 10.714a8.929 8.929 0 0 1 17.857 0v4.883a4.046 4.046 0 0 1-4.046 4.046H5.833a4.046 4.046 0 0 1-4.046-4.046zM7.144 21.429h7.142a3.571 3.571 0 1 1-7.143 0"
/>
<rect width={1.786} height={2.679} x={9.822} fill="currentColor" rx={0.893} />
<rect width={21.429} height={4.464} y={15.178} fill="currentColor" rx={2.232} />
</svg>
);
export default SvgNotification;
15 changes: 15 additions & 0 deletions packages/ui/src/assets/Pencil.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import * as React from 'react';
const SvgPencil = (props: React.SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
{...props}
>
<path
fill="#fff"
d="M3.658 12.68c-.13.066-.196.262-.196.458v2.746c0 .393.261.654.653.654H6.86a.6.6 0 0 0 .457-.196l6.207-6.211L9.8 6.404zm12.676-6.276-2.745-2.746a.63.63 0 0 0-.914 0l-1.83 1.83 3.725 3.727 1.83-1.83c.195-.262.195-.72-.066-.981"
/>
</svg>
);
export default SvgPencil;
1 change: 1 addition & 0 deletions packages/ui/src/assets/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export { default as AiStyleBanner } from './AiStyleBanner';
export { default as AlertStar } from './AlertStar';
export { default as NaverLogo } from './NaverLogo';
export { default as SpeechBallon } from './SpeechBallon';
export { default as Pencil } from './Pencil';

import Add from './Add';
import AddNew from './AddNew';
Expand Down
31 changes: 31 additions & 0 deletions packages/ui/src/components/Card/Card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { Flex, theme } from "@duri-fe/ui"
import styled from "@emotion/styled"

interface CardProps {
height: string,
borderRadius: number,
shadow?: 'small' | 'large',
children: React.ReactNode,
}

export const Card = ({
height,
borderRadius,
shadow = 'small',
children,
}: CardProps) => {
return (
<CardContainer height={height} borderRadius={borderRadius} shadow={shadow}>
{children}
</CardContainer>
)
}

const CardContainer = styled(Flex)<CardProps>`
box-shadow: ${({ shadow }) => (
shadow === 'small'
? '0px 0px 4px 0px rgba(0, 0, 0, 0.10)'
: '0px 0px 10px 0px rgba(0, 0, 0, 0.10)'
)};
background-color: ${theme.palette.White};
`;
1 change: 1 addition & 0 deletions packages/ui/src/components/Card/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Card } from "./Card";
59 changes: 59 additions & 0 deletions packages/ui/src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { Doori, Flex, Magnifier, Notification, theme } from "@duri-fe/ui";
import styled from "@emotion/styled";

import { HeightFitFlex } from "../FlexBox/Flex";

interface HeaderProps {
logoColor: string;
iconColor: string;
searchIcon?: boolean;
badge?: boolean;

onClickLogo?: () => void;
onClickSearch?: () => void;
onClickNotification?: () => void;
}

export const Header = ({
logoColor,
iconColor,
searchIcon,
badge,
onClickLogo,
onClickSearch,
onClickNotification,
}: HeaderProps) => {
return (
<HeightFitFlex justify="space-between" backgroundColor="transparent" padding="20px">
<button onClick={onClickLogo}>
<Doori height={26} color={logoColor} />
</button>

<IconContainer gap={20}>
{searchIcon && onClickSearch &&
<button onClick={onClickSearch}>
<Magnifier width={21.5} color={iconColor} />
</button>
}
<NotificationContainer onClick={onClickNotification}>
<Notification height={24} color={iconColor} />
{badge && <NotificationBadge width={8} height={8} borderRadius={8} backgroundColor={theme.palette.Alert} />}
</NotificationContainer>
</IconContainer>
</HeightFitFlex>
)
}

const IconContainer = styled(Flex)`
width: fit-content;
`

const NotificationContainer = styled.button`
position: relative;
`

const NotificationBadge = styled(Flex)`
position: absolute;
top: 0px;
right: 0px;
`;
1 change: 1 addition & 0 deletions packages/ui/src/components/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Header } from './Header';
2 changes: 2 additions & 0 deletions packages/ui/src/components/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,5 @@ export * from './Image';

export * from './Hr';
export * from './Tag';
export * from './Header';
export * from './Card';
50 changes: 50 additions & 0 deletions packages/ui/src/stories/components/Card.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { Card, Flex } from '@duri-fe/ui';
import type { Meta, StoryFn } from '@storybook/react';

/**
* `Card` 컴포넌트의 스토리북 정의입니다.
*/
const meta: Meta<typeof Card> = {
title: 'components/Card',
component: Card,
tags: ['autodocs'],
argTypes: {
height: { control: 'number' },
borderRadius: { control: 'number' },
shadow: { control: 'select', options: ['small', 'large'] },
},
};

export default meta;

const DuriDefaultTemplate: StoryFn<typeof Card> = (args) => (
<Card {...args}>
<Flex>내부 요소</Flex>
</Card>
)

/**
* `DuriDefaultCard`는 고객 메인홈에 쓰이는 `Card` 스토리입니다.
*/
export const DuriDefaultCard = DuriDefaultTemplate;
DuriDefaultCard.args = {
height: 172,
borderRadius: 12,
shadow: 'small',
};


const SalonDefaultTemplate: StoryFn<typeof Card> = (args) => (
<Card {...args}>
<Flex>내부 요소</Flex>
</Card>
)
/**
* `SalonDefaultCard`는 미용사 메인홈에 쓰이는 `Card` 스토리입니다.
*/
export const SalonDefaultCard = SalonDefaultTemplate;
SalonDefaultCard.args = {
height: 200,
borderRadius: 16,
shadow: 'large',
};
50 changes: 50 additions & 0 deletions packages/ui/src/stories/components/Header.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { Header, theme } from '@duri-fe/ui';
import type { Meta, StoryObj } from '@storybook/react';

type Story = StoryObj<typeof Header>;

/**
* `Header` 컴포넌트의 스토리북 정의입니다.
*/
const meta: Meta<typeof Header> = {
title: 'components/Header',
component: Header,
tags: ['autodocs'],
argTypes: {
logoColor: { control: 'color' },
iconColor: { control: 'color' },
searchIcon: { control: 'boolean' },
badge: { control: 'boolean' },
onClickLogo: { action: 'onClickLogo' },
onClickSearch: { action: 'onClickSearch' },
onClickNotification: { action: 'onClickNotification' },
},
};

export default meta;

/**
* `DuriDefaultHeader`는 `Header` 컴포넌트의 고객 스토리입니다.
*/
export const DuriDefaultHeader: Story = {
args: {
logoColor: theme.palette.Black,
iconColor: theme.palette.Normal700,
searchIcon: true,
onClickLogo: () => console.log('홈화면 라우팅'),
onClickSearch: () => console.log('검색창 열기'),
onClickNotification: () => console.log('알림창 열기'),
}
};

/**
* `SalonDefaultHeader`는 `Header` 컴포넌트의 미용사 스토리입니다.
*/
export const SalonDefaultHeader: Story = {
args: {
logoColor: theme.palette.Black,
iconColor: theme.palette.White,
onClickLogo: () => console.log('홈화면 라우팅'),
onClickNotification: () => console.log('알림창 열기'),
}
};

0 comments on commit 5e267dc

Please sign in to comment.