style: storybook dialog 수정

sopt-makers · Dec 7, 2023 · 3768edf · 3768edf
1 parent 701492b
commit 3768edf
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 8 deletions.
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -9,7 +9,8 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_98c750b6bad066a"
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.14.0",
@@ -32,12 +33,15 @@
     "@typescript-eslint/parser": "^6.10.0",
     "@vanilla-extract/vite-plugin": "^3.9.2",
     "@vitejs/plugin-react": "^4.2.0",
+    "chromatic": "^10.0.0",
     "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-storybook": "^0.6.15",
     "storybook": "^7.6.3",
     "typescript": "^5.2.2",
     "vite": "^5.0.0"
-  }
+  },
+  "readme": "ERROR: No README data found!",
+  "_id": "[email protected]"
 }
diff --git a/apps/docs/src/stories/Button.stories.tsx b/apps/docs/src/stories/Button.stories.tsx
@@ -56,3 +56,18 @@ export const Another: StoryObj<ButtonStoryProps> = {
     },
   },
 };
+
+export const DefaultDisabled: StoryObj = {
+  name: "Disabled",
+  render: () => <Button disabled>Disabled</Button>,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark', // 기본 배경을 'dark'로 설정
+      values: [
+        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
+        { name: 'white', value: '#ffffff' }
+      ],
+    },
+  },
+};
diff --git a/apps/docs/src/stories/Dialog.stories.tsx b/apps/docs/src/stories/Dialog.stories.tsx
@@ -1,9 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import Dialog from 'ui/Dialog';
+import { Button } from 'ui';
 
 import { useState } from 'react';
 
+interface DialogProps {
+  buttonType: 'default' | 'danger' | 'single';
+  checkbox?: boolean;
+}
 
 export default {
     title: 'Components/Dialog',
@@ -45,8 +50,8 @@ export const DesktopDefault:StoryObj = {
                 피드백은 언제나 환영입니다!
                 </Dialog.Description>
               <Dialog.Footer align='right'>
-              <button>버튼1</button>
-              <button>버튼2</button>
+              <Button size="md" rounded="md" theme="black">버튼1</Button>
+              <Button size="md" rounded="md" theme="white">버튼2</Button>
               </Dialog.Footer>
           </Dialog>
         </>
@@ -65,6 +70,105 @@ export const DesktopDefault:StoryObj = {
     },
   };
 
+  export const DesktopDanger:StoryObj = {
+    render: function Render() {
+      const [isOpen, setIsOpen] = useState<boolean>(false);
+
+      const onOpen = () => {
+        setIsOpen(true);
+      };
+      const onClose = () => {
+        setIsOpen(false);
+      };
+
+      return (
+          <>
+            <button onClick={onOpen}>클릭하여 모달 열기</button>
+            <Dialog isOpen={isOpen} onClose={onClose} device={'desktop'}>
+                <Dialog.Title>타이틀 자리입니다</Dialog.Title>
+                <Dialog.Description>
+                  안녕하세요! makers입니다.
+                  이번 업데이트에서는 아래와 같은 내용들이 반영되었습니다.
+
+                  공지 기능 추가
+                  솝트 내 공지를 한 곳에서 확인하세요.
+                  출석 기능 추가
+                  솝트 출석을 더 편하게 관리하세요.
+                  많은 관심 부탁드리며
+                  피드백은 언제나 환영입니다!
+                  피드백은 언제나 환영입니다!
+                  피드백은 언제나 환영입니다!
+                  </Dialog.Description>
+                <Dialog.Footer align='right'>
+                <Button size="md" rounded="md" theme="black">버튼1</Button>
+                <Button size="md" rounded="md" theme="red">버튼2</Button>
+                </Dialog.Footer>
+            </Dialog>
+          </>
+        );
+      },
+      name: '다이얼로그 데스크탑 - danger',
+      parameters: {
+        layout: 'centered',
+        backgrounds: {
+          default: 'dark', // 기본 배경을 'dark'로 설정
+          values: [
+            { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
+            { name: 'white', value: '#ffffff' }
+          ],
+        },
+      },
+    };
+
+    export const DesktopSingle:StoryObj = {
+      render: function Render() {
+        const [isOpen, setIsOpen] = useState<boolean>(false);
+
+        const onOpen = () => {
+          setIsOpen(true);
+        };
+        const onClose = () => {
+          setIsOpen(false);
+        };
+
+        return (
+            <>
+              <button onClick={onOpen}>클릭하여 모달 열기</button>
+              <Dialog isOpen={isOpen} onClose={onClose} device={'desktop'}>
+                  <Dialog.Title>타이틀 자리입니다</Dialog.Title>
+                  <Dialog.Description>
+                    안녕하세요! makers입니다.
+                    이번 업데이트에서는 아래와 같은 내용들이 반영되었습니다.
+
+                    공지 기능 추가
+                    솝트 내 공지를 한 곳에서 확인하세요.
+                    출석 기능 추가
+                    솝트 출석을 더 편하게 관리하세요.
+                    많은 관심 부탁드리며
+                    피드백은 언제나 환영입니다!
+                    피드백은 언제나 환영입니다!
+                    피드백은 언제나 환영입니다!
+                    </Dialog.Description>
+                  <Dialog.Footer align='right'>
+                  <Button size="md" rounded="md" theme="white">버튼</Button>
+                  </Dialog.Footer>
+              </Dialog>
+            </>
+          );
+        },
+        name: '다이얼로그 데스크탑 - single',
+        parameters: {
+          layout: 'centered',
+          backgrounds: {
+            default: 'dark', // 기본 배경을 'dark'로 설정
+            values: [
+              { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
+              { name: 'white', value: '#ffffff' }
+            ],
+          },
+        },
+      };
+
   export const DesktopLong:StoryObj = {
     render: function Render() {
       const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -120,13 +224,18 @@ export const DesktopDefault:StoryObj = {
                   피드백은 언제나 환영입니다!
                   </Dialog.Description>
                 <Dialog.Footer align='right'>
-                <button>버튼1</button>
-                <button>버튼2</button>
+                <Button size="md" rounded="md" theme="white">버튼</Button>
                 </Dialog.Footer>
             </Dialog>
           </>
         );
       },
+      args: {
+        children: 'Default Button',
+        size: 'md',
+        theme: 'white',
+        rounded: 'md',
+      },
       name: '다이얼로그 데스크탑 - long',
       parameters: {
         layout: 'centered',
@@ -171,8 +280,10 @@ export const DesktopDefault:StoryObj = {
                   피드백은 언제나 환영입니다!
                   </Dialog.Description>
                 <Dialog.Footer align='center'>
-                <button>버튼1</button>
-                <button>버튼2</button>
+                  <div style={{ display: 'flex', gap: '9px' }}>
+                    <Button size="md" rounded="md" theme="black" style={{ width: '137px' }}>버튼1</Button>
+                    <Button size="md" rounded="md" theme="white" style={{ width: '137px' }}>버튼2</Button>
+                  </div>
                 </Dialog.Footer>
             </Dialog>
           </>

diff --git a/yarn.lock b/yarn.lock
@@ -4735,6 +4735,11 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
+chromatic@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-10.0.0.tgz#56c643a59a3b99b71ddca652869f7b89caf60e67"
+  integrity sha512-RLU/Y0FdYVnPJIhm/gG3CSJO1hKg2O/nvfutyWT88Tg2o4aIGqSrQKCBiAUAHKrQKpfF+9Dvn/oHRTPtRcinHA==
+
 ci-info@^3.2.0, ci-info@^3.7.0, ci-info@^3.8.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"