JECT-Study · alwubin · Dec 21, 2024 · Dec 7, 2024 · Dec 8, 2024 · Dec 8, 2024
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -11,6 +11,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
+    '@storybook/addon-viewport',
   ],
   framework: {
     name: '@storybook/react-webpack5',

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,6 +1,19 @@
 import type { Preview } from '@storybook/react';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; 
 import '../src/styles/reset.css';
 
+const customViewports = {
+  mobile: {
+    name: 'mobile',
+    styles: {
+      width: '430px',
+      height: '400px', 
+    },
+    type: 'mobile',
+  },
+};
-const customViewports = {
-  mobile: {
-    name: 'mobile',
-    styles: {
-      width: '430px',
-      height: '400px', 
-    },
-    type: 'mobile',
-  },
-};
+const customViewports = {
+  mobile: {
+    name: 'mobile',
+    styles: {
+      width: '430px',
+      height: '932px',
+    },
+    type: 'mobile',
+  },
+  mobileSM: {
+    name: 'mobile-small',
+    styles: {
+      width: '360px',
+      height: '780px',
+    },
+    type: 'mobile',
+  },
+  mobileXL: {
+    name: 'mobile-large',
+    styles: {
+      width: '480px',
+      height: '1040px',
+    },
+    type: 'mobile',
+  },
+};
-const customViewports = {
-  mobile: {
-    name: 'mobile',
-    styles: {
-      width: '430px',
-      height: '400px', 
-    },
-    type: 'mobile',
-  },
-};
+const customViewports = {
+  mobile: {
+    name: 'mobile',
+    styles: {
+      width: '430px',
+      height: '932px',
+    },
+    type: 'mobile',
+  },
+  mobileSM: {
+    name: 'mobile-small',
+    styles: {
+      width: '360px',
+      height: '780px',
+    },
+    type: 'mobile',
+  },
+  mobileXL: {
+    name: 'mobile-large',
+    styles: {
+      width: '480px',
+      height: '1040px',
+    },
+    type: 'mobile',
+  },
+};
+
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -9,7 +22,13 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        ...INITIAL_VIEWPORTS,
+        ...customViewports
+      },
+    },
   },
 };
 
-export default preview;
+export default preview;