[chore] addon-design 적용

Author: jungjunhyung99

.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'),

src/components/atoms/modal/Modal.stories.tsx

@@ -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>
@@ -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',
+  },
+};

src/components/molecules/card/Card.stories.tsx

@@ -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) => {
@@ -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',
+  },
+};