Feature/#162 - 스토리북 설정 (#164)

.github/workflows/storybook.yml

@@ -0,0 +1,58 @@
+name: storybook deploy
+
+on:
+  push:
+    branches: ['dev-fe']
+
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    concurrency:
+      group: ${{ github.workflow }}
+      cancel-in-progress: true
+
+    steps:
+      - name: Use repository source
+        uses: actions/checkout@v3
+
+      - name: Use node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Cache node_modules
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: yarn ci
+        if: steps.cache.outputs.cache-hit != 'true'
+
+      - name: Set PUBLIC_URL
+        run: |
+          PUBLIC_URL=$(echo $GITHUB_REPOSITORY | sed -r 's/^.+\/(.+)$/\/\1\//')
+          echo PUBLIC_URL=$PUBLIC_URL > .env
+
+      - name: Build app
+        run: |
+          yarn run build
+          cp ./build/index.html ./build/404.html
+
+      - name: Build storybook
+        run: |
+          yarn run build-storybook
+          mv ./storybook-static ./build/storybook
+      - name: Deploy to gh-pages branch
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build

packages/frontend/.gitignore

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

packages/frontend/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+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'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  core: {
+    builder: getAbsolutePath('@storybook/builder-vite'),
+  },
+};
+export default config;

packages/frontend/.storybook/preview.ts

@@ -0,0 +1,11 @@
+import '@/index.css';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

packages/frontend/package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.59.19",
@@ -20,7 +22,16 @@
     "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "3.2.2",
     "@eslint/js": "^9.13.0",
+    "@storybook/addon-essentials": "8.4.3",
+    "@storybook/addon-interactions": "8.4.3",
+    "@storybook/addon-onboarding": "8.4.3",
+    "@storybook/blocks": "8.4.3",
+    "@storybook/builder-vite": "^8.4.3",
+    "@storybook/react": "8.4.3",
+    "@storybook/react-vite": "8.4.3",
+    "@storybook/test": "8.4.3",
     "@types/node": "^22.8.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -30,13 +41,20 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^0.11.0",
     "globals": "^15.11.0",
     "postcss": "^8.4.47",
     "prettier-plugin-tailwindcss": "^0.6.8",
+    "storybook": "8.4.3",
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10",
     "vite-plugin-svgr": "^4.3.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }

packages/frontend/src/components/ui/button/Button.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button, type ButtonProps } from '.';
+
+const meta: Meta<ButtonProps> = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: {
+      control: 'select',
+      options: ['default', 'gray', 'orange'],
+    },
+    textColor: {
+      control: 'select',
+      options: ['default', 'white'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm'],
+    },
+  },
+  args: { children: 'Button' },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Button',
+  },
+};
+
+export const OrangeButton: Story = {
+  args: {
+    backgroundColor: 'orange',
+    textColor: 'white',
+    children: 'Button',
+  },
+};
+
+export const GrayButton: Story = {
+  args: {
+    backgroundColor: 'gray',
+    textColor: 'white',
+    children: 'Button',
+  },
+};
+
+export const SmallButton: Story = {
+  args: {
+    backgroundColor: 'orange',
+    textColor: 'white',
+    children: 'Button',
+    size: 'sm',
+  },
+};

packages/frontend/src/components/ui/Button.tsx → packages/frontend/src/components/ui/button/Button.tsx

@@ -9,11 +9,11 @@ export const ButtonVariants = cva(
       backgroundColor: {
         default: 'bg-white',
         gray: 'bg-gray',
-        white: 'bg-white',
+        orange: 'bg-orange',
       },
       textColor: {
-        default: 'text-white',
-        orange: 'text-orange',
+        default: 'text-orange',
+        white: 'text-white',
       },
       size: {
         default: 'w-24',
@@ -28,7 +28,7 @@ export const ButtonVariants = cva(
   },
 );
 
-interface ButtonProps
+export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof ButtonVariants> {
   children: ReactNode;

packages/frontend/src/components/ui/button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

packages/frontend/src/components/ui/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip, TooltipProps } from '.';
+
+const TooltipWrapper = ({ children }: TooltipProps) => {
+  return (
+    <div className="group relative bg-white">
+      <Tooltip className="absolute bottom-full mb-2">{children}</Tooltip>
+      <button className="text-blue rounded px-4 py-3">Hover me</button>
+    </div>
+  );
+};
+
+const meta: Meta<TooltipProps> = {
+  title: 'Example/Tooltip',
+  component: TooltipWrapper,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+
+  args: { children: 'Tooltip' },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Tooltip',
+  },
+};

packages/frontend/src/components/ui/Tooltip.tsx → packages/frontend/src/components/ui/tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import { cn } from '@/utils/cn';
 
-interface TooltipProps {
+export interface TooltipProps {
   className?: string;
   children?: ReactNode;
 }

packages/frontend/src/components/ui/index.ts → packages/frontend/src/components/ui/tooltip/index.ts

@@ -1,2 +1 @@
-export * from './Button';
 export * from './Tooltip';

packages/frontend/src/pages/stock-detail/StockDetail.tsx

@@ -6,16 +6,14 @@ import {
   StockMetricsPanel,
 } from '.';
 import Plus from '@/assets/plus.svg?react';
-import { Button } from '@/components/ui';
+import { Button } from '@/components/ui/button';
 
 export const StockDetail = () => {
   return (
     <div className="flex flex-col gap-7">
       <header className="flex gap-7">
         <h1 className="display-bold24">삼성전자</h1>
         <Button
-          backgroundColor="white"
-          textColor="orange"
           type="button"
           className="flex items-center justify-center gap-1"
         >

packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx

@@ -1,5 +1,5 @@
 import { MetricSection, Title } from './components';
-import { Tooltip } from '@/components/ui';
+import { Tooltip } from '@/components/ui/tooltip';
 import { METRIC_DETAILS } from '@/constants/METRIC_DETAILS';
 
 export const StockMetricsPanel = () => {

packages/frontend/src/pages/stock-detail/components/MetricItem.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from '@/components/ui';
+import { Tooltip } from '@/components/ui/tooltip';
 
 export interface MetricItemProps {
   name: string;