[Feat] Image Box 컴포넌트 제작

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,59 @@
+name: Deploy Storybook
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Storybook
+        run: pnpm build-storybook
+        env:
+          STORYBOOK_BASE_PATH: /makers-admin-fe/
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: storybook-static
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.storybook/main.ts

@@ -0,0 +1,30 @@
+import path from 'path'
+import { fileURLToPath } from 'node:url'
+import tailwindcss from '@tailwindcss/vite'
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
+  framework: '@storybook/react-vite',
+  viteFinal: (viteConfig) => {
+    viteConfig.plugins ??= []
+    viteConfig.plugins.push(tailwindcss())
+    viteConfig.resolve ??= {}
+    viteConfig.resolve.alias = {
+      '@': path.resolve(dirname, '../src'),
+      '@api': path.resolve(dirname, '../src/api'),
+      '@components': path.resolve(dirname, '../src/components'),
+      '@hooks': path.resolve(dirname, '../src/hooks'),
+      '@lib': path.resolve(dirname, '../src/lib'),
+      '@pages': path.resolve(dirname, '../src/pages'),
+    }
+    if (process.env.STORYBOOK_BASE_PATH) {
+      viteConfig.base = process.env.STORYBOOK_BASE_PATH
+    }
+    return viteConfig
+  },
+}
+export default config

.storybook/preview.tsx

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react-vite'
+import '../src/index.css'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

eslint.config.js

@@ -6,11 +6,13 @@ import jsxA11y from 'eslint-plugin-jsx-a11y'
 import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 import prettierConfig from 'eslint-config-prettier'
+import storybook from 'eslint-plugin-storybook'
 
 export default defineConfig([
   globalIgnores([
     'dist',
     'build',
+    'storybook-static',
     'node_modules',
     'coverage',
     'playwright-report',
@@ -31,7 +33,12 @@ export default defineConfig([
     files: ['**/*.{jsx,tsx}'],
   },
   {
-    files: ['*.config.{ts,js}', 'e2e/**/*.ts', '.claude/hooks/**/*.mjs'],
+    files: [
+      '*.config.{ts,js}',
+      'e2e/**/*.ts',
+      '.claude/hooks/**/*.mjs',
+      '.storybook/**/*.{ts,tsx}',
+    ],
     languageOptions: {
       globals: {
         ...globals.node,
@@ -51,7 +58,7 @@ export default defineConfig([
     },
   },
   {
-    files: ['src/**/*.{ts,tsx}', 'scripts/**/*.ts'],
+    files: ['src/**/*.{ts,tsx}', 'scripts/**/*.ts', '.storybook/**/*.{ts,tsx}'],
     extends: [...tseslint.configs.strictTypeChecked, ...tseslint.configs.stylisticTypeChecked],
     languageOptions: {
       globals: {
@@ -76,4 +83,5 @@ export default defineConfig([
     },
   },
   prettierConfig,
+  ...storybook.configs['flat/recommended'],
 ])

package.json

@@ -18,7 +18,9 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
-    "test:e2e": "playwright test"
+    "test:e2e": "playwright test",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@base-ui/react": "^1.4.1",
@@ -33,10 +35,8 @@
     "react-dom": "^19.2.6",
     "react-hook-form": "^7.76.0",
     "react-router": "^8.1.0",
-    "shadcn": "^4.7.0",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2",
-    "tw-animate-css": "^1.4.0",
     "zod": "^4.4.3",
     "zustand": "^5.0.13"
   },
@@ -45,6 +45,9 @@
     "@commitlint/config-conventional": "^21.2.0",
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.60.0",
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/react-vite": "10.4.6",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
@@ -61,12 +64,14 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-storybook": "10.4.6",
     "globals": "^17.6.0",
     "happy-dom": "^20.9.0",
     "husky": "^8.0.0",
     "lint-staged": "^16.4.0",
     "prettier": "^3.8.3",
     "prettier-plugin-tailwindcss": "^0.8.0",
+    "storybook": "10.4.6",
     "tailwindcss": "^4.3.0",
     "tsx": "^4.22.4",
     "typescript": "~6.0.2",