Skip to content

[chore] Storybook addon/design 추가 #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jungjunhyung99 merged 2 commits into from
Mar 6, 2025
Merged

[chore] Storybook addon/design 추가 #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
33449db
[chore] addon-designs 설치
jungjunhyung99 Mar 1, 2025
dbd0fd8
[chore] addon-design 적용
jungjunhyung99 Mar 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ function getAbsolutePath(value: string): any {
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
getAbsolutePath('@storybook/addon-onboarding'),
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@chromatic-com/storybook'),
getAbsolutePath('@storybook/addon-interactions'),
'@storybook/addon-onboarding',
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@storybook/addon-interactions',
'@storybook/addon-designs',
],
framework: {
name: getAbsolutePath('@storybook/nextjs'),
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@chromatic-com/storybook": "^3.2.2",
"@commitlint/cli": "^19.7.1",
"@commitlint/config-conventional": "^19.7.1",
"@storybook/addon-designs": "^8.2.0",
"@storybook/addon-essentials": "^8.5.2",
"@storybook/addon-interactions": "^8.5.2",
"@storybook/addon-onboarding": "^8.5.2",
Expand Down
32 changes: 23 additions & 9 deletions src/components/atoms/modal/Modal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ type Story = StoryObj<typeof Modal>;
export const BasicModal: Story = {
args: {
children: (
<div className='flex flex-col justify-center items-center w-[320px]'>
<span className='text-white text-lg'>Title</span>
<div className='flex w-[320px] flex-col items-center justify-center'>
<span className='text-lg text-white'>Title</span>

<span className='text-gray-700 text-sm pt-3 pb-5'>Description</span>
<span className='pb-5 pt-3 text-sm text-gray-700'>Description</span>

<div className='flex w-full justify-center gap-4'>
<button className='w-[130px] h-[52px] rounded-md bg-gray-300 text-gray-800'>
<button className='h-[52px] w-[130px] rounded-md bg-gray-300 text-gray-800'>
Text
</button>
<button className='w-[130px] h-[52px] rounded-md bg-red-200 text-white'>
<button className='h-[52px] w-[130px] rounded-md bg-red-200 text-white'>
Text
</button>
</div>
Expand All @@ -31,20 +31,34 @@ export const BasicModal: Story = {
},
};

BasicModal.parameters = {
design: {
type: 'figma',
url: 'https://www.figma.com/file/cr2DuY0vceiMI5LlqWdKR2/Wedvice_%EB%94%94%EC%9E%90%EC%9D%B8?node-id=1403-38040&t=st8bJ1H7LQ9alnmh-4',
},
};

export const ConfirmModal: Story = {
args: {
children: (
<div className='flex flex-col justify-center w-[330px]'>
<span className='text-white font-bold text-lg'>Title</span>
<div className='flex w-[330px] flex-col justify-center'>
<span className='text-lg font-bold text-white'>Title</span>

<span className='text-gray-700 text-sm pt-3 pb-5'>Description</span>
<span className='pb-5 pt-3 text-sm text-gray-700'>Description</span>

<div className='flex w-full justify-end gap-4'>
<button className='w-[56px] h-[34px] rounded-md bg-gray-300 text-gray-800'>
<button className='h-[34px] w-[56px] rounded-md bg-gray-300 text-gray-800'>
Text
</button>
</div>
</div>
),
},
};

ConfirmModal.parameters = {
design: {
type: 'figma',
url: 'https://www.figma.com/design/cr2DuY0vceiMI5LlqWdKR2/Wedvice_%EB%94%94%EC%9E%90%EC%9D%B8?node-id=2294-24792&t=st8bJ1H7LQ9alnmh-4',
},
};
42 changes: 35 additions & 7 deletions src/components/molecules/card/Card.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,53 +23,74 @@ export const Default: Story = {
<Card.Checkbox checked={args.checked} />
<Card.TaskTitle>촬영 업체 선택 </Card.TaskTitle>
<Card.CostSpan>400,000 원</Card.CostSpan>
<Chip rounded="sm" size="sm">
<Chip rounded='sm' size='sm'>
2024.11.19
</Chip>
<Chip type="blue" rounded="sm" size="sm">
<Chip type='blue' rounded='sm' size='sm'>
예랑
</Chip>
</Card>
);
},
};

Default.parameters = {
design: {
type: 'figma',
url: 'https://www.figma.com/design/cr2DuY0vceiMI5LlqWdKR2/Wedvice_%EB%94%94%EC%9E%90%EC%9D%B8?node-id=1899-49502&t=st8bJ1H7LQ9alnmh-4',
},
};

// 가격 없는 카드
export const NoPriceCard: Story = {
render: (args) => {
return (
<Card checked={args.checked}>
<Card.Checkbox checked={args.checked} />
<Card.TaskTitle>촬영 업체 선택</Card.TaskTitle>
<Chip rounded="sm" size="sm">
<Chip rounded='sm' size='sm'>
2024.11.19
</Chip>
<Chip type="blue" rounded="sm" size="sm">
<Chip type='blue' rounded='sm' size='sm'>
예랑
</Chip>
</Card>
);
},
};

NoPriceCard.parameters = {
design: {
type: 'figma',
url: 'https://www.figma.com/design/cr2DuY0vceiMI5LlqWdKR2/Wedvice_%EB%94%94%EC%9E%90%EC%9D%B8?node-id=1899-49504&t=st8bJ1H7LQ9alnmh-4',
},
};

// 체크 박스 없는 카드
export const NoCheckboxCard: Story = {
render: (args) => {
return (
<Card checked={args.checked}>
<Card.TaskTitle>촬영 업체 선택</Card.TaskTitle>
<Card.CostSpan>400,000 원</Card.CostSpan>
<Chip rounded="sm" size="sm">
<Chip rounded='sm' size='sm'>
2024.11.19
</Chip>
<Chip type="blue" rounded="sm" size="sm">
<Chip type='blue' rounded='sm' size='sm'>
예랑
</Chip>
</Card>
);
},
};

NoCheckboxCard.parameters = {
design: {
type: 'figma',
url: 'https://www.figma.com/design/cr2DuY0vceiMI5LlqWdKR2/Wedvice_%EB%94%94%EC%9E%90%EC%9D%B8?node-id=1899-49526&t=st8bJ1H7LQ9alnmh-4',
},
};

// 체크 박스, 가격 없는 카드
export const NoCheckboxAndNoCost: Story = {
render: (args) => {
Expand All @@ -78,10 +99,17 @@ export const NoCheckboxAndNoCost: Story = {
<Card.TaskTitle>
촬영 업체 선택촬영 업체 선택촬영 업체 선택촬영 업체 선택촬영 업체 선택
</Card.TaskTitle>
<Chip type="blue" rounded="sm" size="sm">
<Chip type='blue' rounded='sm' size='sm'>
예랑
</Chip>
</Card>
);
},
};

NoCheckboxAndNoCost.parameters = {
design: {
type: 'figma',
url: 'https://www.figma.com/design/cr2DuY0vceiMI5LlqWdKR2/Wedvice_%EB%94%94%EC%9E%90%EC%9D%B8?node-id=1899-49633&t=st8bJ1H7LQ9alnmh-4',
},
};
102 changes: 102 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2053,6 +2053,27 @@ __metadata:
languageName: node
linkType: hard

"@figspec/components@npm:^1.0.1":
version: 1.0.3
resolution: "@figspec/components@npm:1.0.3"
dependencies:
lit: "npm:^2.1.3"
checksum: 10c0/78f5ee600ea1d15af7848b9fc601063acd537f49deb08aa16b95d3452c3a5783352e142c970f9a7375817099f2f54c3f9b42911f21c44ce6dab72eab20e6e20a
languageName: node
linkType: hard

"@figspec/react@npm:^1.0.0":
version: 1.0.3
resolution: "@figspec/react@npm:1.0.3"
dependencies:
"@figspec/components": "npm:^1.0.1"
"@lit-labs/react": "npm:^1.0.2"
peerDependencies:
react: ^16.14.0 || ^17.0.0 || ^18.0.0
checksum: 10c0/d5bbb79e106f522f5b867d0f55de01391edd1011e3f5d5a966ac07a5fca75f499d1d4d40a6186cf0afdc4fc4b49d808eb5d4fcbaf1784401a1ace2865dbc19be
languageName: node
linkType: hard

"@humanfs/core@npm:^0.19.1":
version: 0.19.1
resolution: "@humanfs/core@npm:0.19.1"
Expand Down Expand Up @@ -2339,6 +2360,29 @@ __metadata:
languageName: node
linkType: hard

"@lit-labs/react@npm:^1.0.2":
version: 1.2.1
resolution: "@lit-labs/react@npm:1.2.1"
checksum: 10c0/c92364101348400a06c3eb45a6384ca7d47c32765fdcad892827b360d0bad6cef7916f9a17744f2f471a5da3d7d73750767b885fc1521cd5e5e724badb71f014
languageName: node
linkType: hard

"@lit-labs/ssr-dom-shim@npm:^1.0.0, @lit-labs/ssr-dom-shim@npm:^1.1.0":
version: 1.3.0
resolution: "@lit-labs/ssr-dom-shim@npm:1.3.0"
checksum: 10c0/743a9b295ef2f186712f08883da553c9990be291409615309c99aa4946cfe440a184e4213c790c24505c80beb86b9cfecf10b5fb30ce17c83698f8424f48678d
languageName: node
linkType: hard

"@lit/reactive-element@npm:^1.3.0, @lit/reactive-element@npm:^1.6.0":
version: 1.6.3
resolution: "@lit/reactive-element@npm:1.6.3"
dependencies:
"@lit-labs/ssr-dom-shim": "npm:^1.0.0"
checksum: 10c0/10f1d25e24e32feb21c4c6f9e11d062901241602e12c4ecf746b3138f87fed4d8394194645514d5c1bfd5f33f3fd56ee8ef41344e2cb4413c40fe4961ec9d419
languageName: node
linkType: hard

"@mdx-js/react@npm:^3.0.0":
version: 3.1.0
resolution: "@mdx-js/react@npm:3.1.0"
Expand Down Expand Up @@ -2740,6 +2784,32 @@ __metadata:
languageName: node
linkType: hard

"@storybook/addon-designs@npm:^8.2.0":
version: 8.2.0
resolution: "@storybook/addon-designs@npm:8.2.0"
dependencies:
"@figspec/react": "npm:^1.0.0"
peerDependencies:
"@storybook/blocks": ^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
"@storybook/components": ^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
"@storybook/theming": ^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@storybook/blocks":
optional: true
"@storybook/components":
optional: true
"@storybook/theming":
optional: true
react:
optional: true
react-dom:
optional: true
checksum: 10c0/6a6ff46696daaea42a870cf18cb028f94d57048b88f8089addcfef7aca503146970ffdaaad1647e02b8cb6e4f9c030f06a4c373c634fac66291c9eaa25a5b507
languageName: node
linkType: hard

"@storybook/addon-docs@npm:8.5.2":
version: 8.5.2
resolution: "@storybook/addon-docs@npm:8.5.2"
Expand Down Expand Up @@ -9161,6 +9231,37 @@ __metadata:
languageName: node
linkType: hard

"lit-element@npm:^3.3.0":
version: 3.3.3
resolution: "lit-element@npm:3.3.3"
dependencies:
"@lit-labs/ssr-dom-shim": "npm:^1.1.0"
"@lit/reactive-element": "npm:^1.3.0"
lit-html: "npm:^2.8.0"
checksum: 10c0/f44c12fa3423a4e9ca5b84651410687e14646bb270ac258325e6905affac64a575f041f8440377e7ebaefa3910b6f0d6b8b1e902cb1aa5d0849b3fdfbf4fb3b6
languageName: node
linkType: hard

"lit-html@npm:^2.8.0":
version: 2.8.0
resolution: "lit-html@npm:2.8.0"
dependencies:
"@types/trusted-types": "npm:^2.0.2"
checksum: 10c0/90057dee050803823ac884c1355b0213ab8c05fbe2ec63943c694b61aade5d36272068f3925f45a312835e504f9c9784738ef797009f0a756a750351eafb52d5
languageName: node
linkType: hard

"lit@npm:^2.1.3":
version: 2.8.0
resolution: "lit@npm:2.8.0"
dependencies:
"@lit/reactive-element": "npm:^1.6.0"
lit-element: "npm:^3.3.0"
lit-html: "npm:^2.8.0"
checksum: 10c0/bf33c26b1937ee204aed1adbfa4b3d43a284e85aad8ea9763c7865365917426eded4e5888158b4136095ea42054812561fe272862b61775f1198fad3588b071f
languageName: node
linkType: hard

"loader-runner@npm:^4.2.0":
version: 4.3.0
resolution: "loader-runner@npm:4.3.0"
Expand Down Expand Up @@ -13429,6 +13530,7 @@ __metadata:
"@chromatic-com/storybook": "npm:^3.2.2"
"@commitlint/cli": "npm:^19.7.1"
"@commitlint/config-conventional": "npm:^19.7.1"
"@storybook/addon-designs": "npm:^8.2.0"
"@storybook/addon-essentials": "npm:^8.5.2"
"@storybook/addon-interactions": "npm:^8.5.2"
"@storybook/addon-onboarding": "npm:^8.5.2"
Expand Down