Merge pull request #53 from depromeet/chore/button

chore: 공용 button 컴포넌트 작성 및 스토리북 설정을 변경했습니다.

.github/workflows/deploy-storybook.yml

@@ -36,6 +36,9 @@ jobs:
         if: steps.cache.outputs.cache-hit != 'true'
         run: pnpm install
 
+      - name: Generate CSS
+        run: pnpm panda cssgen
+
       - name: Publish to chromatic
         id: chromatic
         uses: chromaui/action@v1

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/nextjs';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -13,5 +14,15 @@ const config: StorybookConfig = {
     name: '@storybook/nextjs',
     options: {},
   },
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '..'),
+      };
+    }
+    return config;
+  },
 };
+
 export default config;

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import '../styled-system/styles.css';
 
 const preview: Preview = {
   parameters: {

components/atoms/button/button.stories.tsx

@@ -1,24 +1,78 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { css } from '@/styled-system/css';
+
 import { Button } from './button';
 
 const meta: Meta<typeof Button> = {
-  title: 'components/atoms/button',
+  title: 'Example/Button',
   component: Button,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className={css({ margin: 10 })}>
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
+    size: {
+      control: { type: 'select', options: ['small', 'medium', 'large'] },
+    },
     disabled: {
       control: 'boolean',
     },
-    onClick: { action: 'clicked' },
+    variant: {
+      control: { type: 'select', options: ['solid', 'outlined', 'text'] },
+    },
+    type: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'assistive'],
+      },
+    },
+    interaction: {
+      control: {
+        type: 'select',
+        options: ['normal', 'hovered', 'focused', 'pressed'],
+      },
+    },
+    label: {
+      control: 'text',
+    },
+    leftIconSrc: {
+      control: 'text',
+    },
+    rightIconSrc: {
+      control: 'text',
+    },
   },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof Button>;
 
-export const Basic: Story = {
+export const Default: Story = {
+  args: {
+    label: 'Label',
+    size: 'large',
+    variant: 'solid',
+    type: 'primary',
+    interaction: 'normal',
+  },
+};
+
+export const outlined: Story = {
+  args: {
+    ...Default.args,
+    variant: 'outlined',
+  },
+};
+
+export const text: Story = {
   args: {
-    children: 'Button',
+    ...Default.args,
+    variant: 'text',
   },
 };

components/atoms/button/button.tsx

@@ -1,9 +1,184 @@
-import { ButtonHTMLAttributes, forwardRef } from 'react';
+import Image from 'next/image';
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+import { css, cx } from '@/styled-system/css';
+import { flex } from '@/styled-system/patterns';
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ ...props }, ref) => <button ref={ref} {...props} />,
-);
+import { ButtonProps } from './type';
 
-Button.displayName = 'Button';
+export const Button = ({
+  size = 'medium',
+  disabled = false,
+  leftIconSrc,
+  rightIconSrc,
+  label,
+  variant = 'solid',
+  type = 'primary',
+  interaction = 'normal',
+}: ButtonProps) => {
+  const baseStyles = flex({
+    alignItems: 'center',
+    justifyContent: leftIconSrc && rightIconSrc ? 'space-between' : 'center',
+    position: 'relative',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+  });
+
+  const sizeStylesMap = new Map([
+    [
+      'large',
+      css({
+        height: '48px',
+        padding: '12px 28px',
+        borderRadius: '10px',
+        textStyle: 'body1.normal',
+        gap: '6px',
+      }),
+    ],
+    [
+      'medium',
+      css({
+        height: '40px',
+        padding: '9px 20px',
+        borderRadius: '8px',
+        textStyle: 'body2.normal',
+        gap: '5px',
+      }),
+    ],
+    [
+      'small',
+      css({
+        height: '32px',
+        padding: '7px 14px',
+        borderRadius: '6px',
+        textStyle: 'label2',
+        gap: '4px',
+      }),
+    ],
+  ]);
+
+  const variantStylesMap = new Map([
+    [
+      'solid',
+      css({
+        backgroundColor: disabled ? 'fill.disable' : 'blue.60',
+        border: 'none',
+      }),
+    ],
+    [
+      'outlined',
+      css({
+        backgroundColor: 'white',
+        border: '1px solid',
+        borderColor: disabled
+          ? 'line.normal'
+          : type === 'primary'
+            ? '#3B87F4'
+            : '#70737C38',
+      }),
+    ],
+    [
+      'text',
+      css({ backgroundColor: 'white', border: 'none', padding: '4px 0px' }),
+    ],
+  ]);
+
+  const typeStylesMap = new Map([
+    [
+      'primary',
+      css({
+        color: disabled
+          ? 'text.placeHolder'
+          : variant === 'solid'
+            ? 'white'
+            : 'blue.60',
+      }),
+    ],
+    [
+      'secondary',
+      css({
+        color: disabled
+          ? 'text.placeHolder'
+          : variant === 'solid'
+            ? 'white'
+            : '#3B87F4',
+      }),
+    ],
+    [
+      'assistive',
+      css({
+        color: disabled
+          ? 'text.placeHolder'
+          : variant === 'solid'
+            ? 'white'
+            : variant === 'outlined'
+              ? 'text.normal'
+              : 'text.alternative',
+      }),
+    ],
+  ]);
+
+  const interactionStylesMap = new Map([
+    ['hovered', css({ '&:hover::after': { opacity: 0.075 } })],
+    ['focused', css({ '&:focus::after': { opacity: 0.12 } })],
+    ['pressed', css({ '&:active::after': { opacity: 0.18 } })],
+  ]);
+
+  const buttonStyles = cx(
+    baseStyles,
+    sizeStylesMap.get(size),
+    variantStylesMap.get(variant),
+    typeStylesMap.get(type),
+    interactionStylesMap.get(interaction),
+    css({
+      fontWeight: '600',
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        borderRadius: 'inherit',
+        backgroundColor:
+          type === 'primary' && (variant === 'outlined' || variant === 'text')
+            ? 'blue.60'
+            : 'text.normal',
+        opacity: 0,
+      },
+    }),
+  );
+
+  const iconSize = size === 'large' ? 20 : size === 'medium' ? 18 : 16;
+
+  const iconWrapperStyles = flex({
+    width: `${iconSize}px`,
+    height: `${iconSize}px`,
+    alignItems: 'center',
+    justifyContent: 'center',
+  });
+
+  return (
+    <button className={buttonStyles}>
+      {leftIconSrc && (
+        <div className={iconWrapperStyles}>
+          <Image
+            src={leftIconSrc}
+            alt="left icon"
+            width={iconSize}
+            height={iconSize}
+          />
+        </div>
+      )}
+      {label}
+      {rightIconSrc && (
+        <div className={iconWrapperStyles}>
+          <Image
+            src={rightIconSrc}
+            alt="right icon"
+            width={iconSize}
+            height={iconSize}
+          />
+        </div>
+      )}
+    </button>
+  );
+};

components/atoms/button/type.ts

@@ -0,0 +1,11 @@
+export interface ButtonProps {
+  size: 'large' | 'medium' | 'small';
+  disabled?: boolean;
+  label: string;
+  interaction: 'normal' | 'hovered' | 'focused' | 'pressed';
+  variant?: 'solid' | 'outlined' | 'text';
+  type?: 'primary' | 'secondary' | 'assistive';
+  leftIconSrc?: string;
+  rightIconSrc?: string;
+  onClick?: () => void;
+}

panda.config.ts

@@ -22,6 +22,7 @@ export default defineConfig({
     './app/**/*.{js,jsx,ts,tsx}',
     './components/**/*.{js,jsx,ts,tsx}',
     './features/**/*.{js,jsx,ts,tsx}',
+    './stories/**/*.{js,jsx,ts,tsx}',
   ],
 
   // Files to exclude