From 33449db0b0abf6210d2dbda37d5526ea9db69495 Mon Sep 17 00:00:00 2001 From: jungjunhyung99 <55770796+jungjunhyung99@users.noreply.github.com> Date: Sat, 1 Mar 2025 15:38:09 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[chore]=20addon-designs=20=EC=84=A4?= =?UTF-8?q?=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + yarn.lock | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+) diff --git a/package.json b/package.json index 46b1580..c2dde85 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 368887c..b545755 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" @@ -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" @@ -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" @@ -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" @@ -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" From dbd0fd8d1cd4fff8b340f43c64a1a90fa0dc2f6f Mon Sep 17 00:00:00 2001 From: jungjunhyung99 <55770796+jungjunhyung99@users.noreply.github.com> Date: Sat, 1 Mar 2025 15:38:30 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[chore]=20addon-design=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/main.ts | 9 ++-- src/components/atoms/modal/Modal.stories.tsx | 32 ++++++++++---- .../molecules/card/Card.stories.tsx | 42 +++++++++++++++---- 3 files changed, 63 insertions(+), 20 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index ede3fc5..ec382a0 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -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'), diff --git a/src/components/atoms/modal/Modal.stories.tsx b/src/components/atoms/modal/Modal.stories.tsx index 6b70b21..c7a3116 100644 --- a/src/components/atoms/modal/Modal.stories.tsx +++ b/src/components/atoms/modal/Modal.stories.tsx @@ -13,16 +13,16 @@ type Story = StoryObj; export const BasicModal: Story = { args: { children: ( -
- Title +
+ Title - Description + Description
- -
@@ -31,16 +31,23 @@ 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: ( -
- Title +
+ Title - Description + Description
-
@@ -48,3 +55,10 @@ export const ConfirmModal: Story = { ), }, }; + +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', + }, +}; diff --git a/src/components/molecules/card/Card.stories.tsx b/src/components/molecules/card/Card.stories.tsx index e23861a..77f610f 100644 --- a/src/components/molecules/card/Card.stories.tsx +++ b/src/components/molecules/card/Card.stories.tsx @@ -23,10 +23,10 @@ export const Default: Story = { 촬영 업체 선택 400,000 원 - + 2024.11.19 - + 예랑 @@ -34,6 +34,13 @@ export const Default: Story = { }, }; +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) => { @@ -41,10 +48,10 @@ export const NoPriceCard: Story = { 촬영 업체 선택 - + 2024.11.19 - + 예랑 @@ -52,6 +59,13 @@ export const NoPriceCard: Story = { }, }; +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) => { @@ -59,10 +73,10 @@ export const NoCheckboxCard: Story = { 촬영 업체 선택 400,000 원 - + 2024.11.19 - + 예랑 @@ -70,6 +84,13 @@ export const NoCheckboxCard: Story = { }, }; +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) => { @@ -78,10 +99,17 @@ export const NoCheckboxAndNoCost: Story = { 촬영 업체 선택촬영 업체 선택촬영 업체 선택촬영 업체 선택촬영 업체 선택 - + 예랑 ); }, }; + +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', + }, +};