deps: Storybook 설치 및 버튼 컴포넌트 스토리 작성

.gitignore

@@ -25,4 +25,5 @@ dist-ssr
 
 ## Panda
 styled-system
-styled-system-studio
+styled-system-studio
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,34 @@
+import { resolve } from 'node:path';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  typescript: {
+    reactDocgen: 'react-docgen',
+  },
+  async viteFinal(config) {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve?.alias,
+          '@': resolve(__dirname, '../src/'),
+        },
+      },
+    };
+  },
+};
+
+export default config;

.storybook/preview.ts

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

package.json

@@ -38,7 +38,9 @@
     "dev": "vite",
     "build": "rm -rf ./dist && tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": "^18.3.1",
@@ -50,11 +52,24 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "class-variance-authority": "^0.7.0",
     "glob": "^11.0.0",
+    "init": "^0.1.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "storybook": "^8.2.9",
+    "strip-ansi": "^4.0.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.8.0",
     "@eslint/js": "^9.9.0",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/builder-vite": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@svgr/rollup": "^8.1.0",
     "@types/node": "^22.5.1",
     "@types/react": "^18.3.3",
@@ -64,6 +79,7 @@
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-storybook": "^0.8.0",
     "globals": "^15.9.0",
     "tailwind": "^4.0.0",
     "typescript": "^5.5.3",
@@ -73,5 +89,10 @@
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^5.0.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }

panda.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
   },
 
   // The output directory for your css system
-  outdir: 'src/styled-system',
+  outdir: 'styled-system',
 
   globalFontface: {
     pretendard: {

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { css, cva } from 'styled-system/css';
 import { ReactComponent as Loading } from '@/assets/icons/loading.svg';
 import { ReactComponent as LoadingDark } from '@/assets/icons/loading_dark.svg';
@@ -37,10 +37,15 @@ const button = cva({
         borderColor: 'stone.800',
         color: 'stone.800',
       },
-      iconText: {},
+      iconText: {
+        border: '1px solid',
+        borderColor: 'transparent',
+      },
       icon: {
         minWidth: '36px',
         minHeight: '36px',
+        border: '1px solid',
+        borderColor: 'transparent',
       },
       link: {
         bg: 'transparent',
@@ -67,6 +72,7 @@ const button = cva({
       },
     },
     outlineColor: {
+      white: { borderColor: 'white', color: 'white' },
       black: { borderColor: 'black', color: 'black' },
       red: { borderColor: 'red', color: 'red' },
       orange: { borderColor: 'orange', color: 'orange' },
@@ -82,6 +88,7 @@ const button = cva({
       brown: { borderColor: 'brown', color: 'brown' },
     },
     color: {
+      white: { bg: 'white', color: 'black' },
       black: { bg: 'black', color: 'white' },
       red: { bg: 'red', color: 'white' },
       orange: { bg: 'orange', color: 'white' },
@@ -116,8 +123,6 @@ const iconTextStyle = css({
   fontStyle: 'normal',
 });
 
-type ButtonCVAProps = NonNullable<Parameters<typeof button>[0]>;
-
 type ButtonProps = {
   className?: string;
   children?: React.ReactNode;
@@ -132,7 +137,7 @@ type ButtonProps = {
   icon?: React.ReactNode;
 };
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       className,
@@ -146,7 +151,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       icon,
       loading = false,
       ...rest
-    },
+    }: ButtonProps,
     ref
   ) => {
     return (
@@ -181,4 +186,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 
 export default Button;
-export type { ButtonCVAProps, ButtonProps };
+export type { ButtonProps };

src/components/Button/Button.type.ts

@@ -1,6 +1,7 @@
 type Size = 'icon' | 'sm' | 'md' | 'lg';
 
 type Colors =
+  | 'white'
   | 'black'
   | 'red'
   | 'orange'

src/components/Button/index.ts

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

src/components/index.ts

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

src/stories/Atoms/Button/Button.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button, { ButtonProps } from '@/components/Button/Button';
+import { Colors, Size, Variant } from '@/components/Button/Button.type';
+import { ReactComponent as DownloadIcon } from '@/assets/icons/download.svg';
+
+const sizeOptions: Size[] = ['icon', 'sm', 'md', 'lg'];
+const colorOptions: Colors[] = [
+  'black',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'mint',
+  'teal',
+  'cyan',
+  'blue',
+  'indigo',
+  'purple',
+  'pink',
+  'brown',
+  'white',
+];
+const variantOptions: Variant[] = [
+  'filled',
+  'outline',
+  'iconText',
+  'icon',
+  'link',
+];
+
+const meta: Meta<typeof Button> = {
+  title: 'Atoms/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: colorOptions,
+      description: 'background color 설정',
+    },
+    outlineColor: {
+      control: { type: 'select' },
+      options: colorOptions,
+      description: 'outline 컬러 + text 컬러 설정',
+    },
+    size: {
+      control: { type: 'radio' },
+      options: sizeOptions,
+      description: '사이즈 선택 props',
+    },
+    variant: {
+      control: { type: 'radio' },
+      options: variantOptions,
+      description: '버튼 스타일 유형 선택',
+    },
+    rounded: {
+      control: { type: 'boolean' },
+      description: 'radius를 circle 형태로 설정',
+    },
+    fullWidth: {
+      control: { type: 'boolean' },
+      description: '부모 사이즈 크기에 맞게 width 100% 설정',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'disabled 스타일',
+    },
+    loading: {
+      control: { type: 'boolean' },
+      description: 'loading 스타일',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs: Partial<ButtonProps> = {
+  disabled: false,
+  loading: false,
+  rounded: false,
+  size: 'md',
+  variant: 'filled',
+};
+
+export const Filled: Story = {
+  args: {
+    ...defaultArgs,
+    children: '버튼',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'outline',
+    children: '버튼',
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'icon',
+    size: 'icon',
+    icon: <DownloadIcon />,
+    outlineColor: 'black',
+    color: 'black',
+  },
+};
+
+export const IconText: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'iconText',
+    icon: <DownloadIcon />,
+    children: '아이콘 텍스트 버튼',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'link',
+    children: '링크',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    ...defaultArgs,
+    loading: true,
+    children: '버튼',
+  },
+};

src/stories/Configure.mdx

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title='Configure Storybook' />
+
+# `@waterbin/ui-kit` Storybook
+
+`@waterbin/ui-kit` is a personal UI component library designed for use in React applications, built with TypeScript, Panda CSS, and Vite for optimal development speed and flexibility. The library includes a variety of reusable UI components that follow consistent design patterns and are fully documented in this Storybook.
+
+## Project Details
+
+- **Package Name**: `@waterbin/ui-kit`
+- **Author**: Subin
+- **Repository**: [GitHub - waterbin-ui-kit](https://github.com/waterbinnn/waterbin-ui-kit)
+- **License**: MIT
+- **Version**: 0.0.1
+
+This Storybook showcases the various components available in the UI kit, providing an interactive playground for testing and exploring different props and configurations.
+
+## How to Use Storybook
+
+You can explore the various components of the UI Kit through this Storybook interface. Use the **Controls** section to dynamically adjust properties and see how the components respond to different configurations.
+
+To run Storybook locally:
+
+```bash
+yarn storybook
+```