스토리북 세팅

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,27 @@
+name: 스토리북 Github Pages 배포
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - uses: bitovi/[email protected]
+        with:
+          install_command: npm install
+          build_command: npm run build-storybook
+          path: storybook-static
+          checkout: false

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-themes',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+export default config;

.storybook/manager-head.html

@@ -0,0 +1,10 @@
+<title>Semo UI Components</title>
+<meta property="og:title" content="Semo UI Components" />
+<meta charset="UTF-8" />
+<meta name="description" content="Semo UI Components" />
+<meta property="og:title" content="Semo UI Components" />
+<meta property="og:image" content="/images/mainLogo.png" />
+<meta property="og:description" content="Semo 의 UI Components 문서입니다!" />
+<meta property="og:site_name" content="Semo UI Components" />
+<meta property="title" content="Semo UI Components" />
+<meta property="description" content="Semo 의 UI Components 문서입니다!" />

.storybook/manager.ts

@@ -0,0 +1,29 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  navSize: 300,
+  bottomPanelHeight: 300,
+  rightPanelWidth: 300,
+  panelPosition: 'bottom',
+  enableShortcuts: true,
+  showToolbar: true,
+  theme: {
+    ...themes.light,
+    brandTitle: 'Semo UI Components ✨',
+    base: 'light',
+  },
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  sidebar: {
+    showRoots: false,
+    collapsedRoots: ['other'],
+  },
+  toolbar: {
+    title: { hidden: false },
+    zoom: { hidden: false },
+    eject: { hidden: false },
+    copy: { hidden: false },
+    fullscreen: { hidden: false },
+  },
+});

.storybook/preview.ts

@@ -0,0 +1,29 @@
+import { ThemeProvider } from 'styled-components';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import type { Preview } from '@storybook/react';
+import { SemoGlobalStyles } from '../src/ui/styles/SemoGlobalStyles';
+import { theme } from '../src/ui/styles/theme';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    withThemeFromJSXProvider({
+      themes: {
+        light: theme,
+      },
+      defaultTheme: 'light',
+      Provider: ThemeProvider,
+      GlobalStyles: SemoGlobalStyles,
+    }),
+  ],
+};
+
+export default preview;

eslint.config.mjs

@@ -5,7 +5,7 @@ import tseslint from 'typescript-eslint';
 import js from '@eslint/js';
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'storybook-static'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],