Merge pull request #12 from Findy-org/feat/#7-button

[FEAT] Button 컴포넌트, 스토리북 구현

package.json

@@ -27,12 +27,14 @@
     "@testing-library/react": "^16.0.1",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-router-dom": "^6.26.2",
     "storybook": "^8.3.5",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.13",
     "vite-plugin-svgr": "^4.2.0"
   },

src/components/common/Button/Button.stories.tsx

@@ -12,4 +12,30 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-export const Basic: Story = {};
+export const Basic: Story = {
+  args: {
+    variant: 'primary',
+    size: 'large',
+    children: '확인',
+    disabled: false,
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['primary', 'gray'],
+    },
+    size: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['medium', 'large'],
+    },
+  },
+  render: (args) => (
+    <div className="max-w-96">
+      <Button {...args}>{args.children}</Button>
+    </div>
+  ),
+};

src/components/common/Button/Button.types.ts

@@ -0,0 +1,18 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+
+export type Props = {
+  /**
+   * The variant of the button.
+   *  @default 'primary'
+   */
+  variant?: 'primary' | 'gray';
+  /**
+   * The height of the button.
+   *  @default 'large'
+   */
+  size?: 'medium' | 'large';
+  /**
+   * Optional children for the button, typically a string.
+   */
+  children: React.ReactNode;
+} & ComponentPropsWithoutRef<'button'>;

src/components/common/Button/Button.variants.ts

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+
+// TODO : hover, disable 됐을 경우 색상 추가
+export const ButtonVariants = cva(
+  `flex items-center justify-center whitespace-nowrap select-none rounded-xl`,
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary text-white disabled:opacity-50 disabled:cursor-not-allowed',
+        gray: 'bg-gray-100 text-gray-950 disabled:opacity-50 disabled:cursor-not-allowed',
+      },
+      size: {
+        large: 'w-full h-14 text-xl font-medium',
+        medium: 'w-72 h-12 text-lg font-medium',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+    },
+  }
+);

src/components/common/Button/index.tsx

@@ -1,3 +1,16 @@
-export const Button = () => {
-  return <></>;
-};
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/core';
+
+import { Props } from './Button.types';
+import { ButtonVariants } from './Button.variants';
+
+export const Button = forwardRef<HTMLButtonElement, Props>(
+  ({ variant = 'primary', size = 'large', children, ...props }, ref) => {
+    return (
+      <button type="button" className={cn(ButtonVariants({ variant, size }))} ref={ref} {...props}>
+        {children}
+      </button>
+    );
+  }
+);

src/components/common/Typography/index.tsx

@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { Props, TypographyVariant } from './Typography.type';
+import { Props, TypographyVariant } from './Typography.types';
 
 const variantClasses = cva('whitespace-pre-wrap', {
   variants: {

src/index.css

@@ -2,7 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: 'Pretendard';
-  src: url('/fonts/PretendardVariable.woff2');
+@layer base {
+  html {
+    font-family: 'Pretendard';
+  }
 }

src/lib/core.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};

tailwind.config.ts

@@ -6,10 +6,10 @@ export default {
   content: ['./src/**/*.{ts,tsx}'],
   theme: {
     colors,
+    fontFamily: {
+      pretendard: ['Pretendard'],
+    },
     extend: {
-      fontFamily: {
-        pretendard: ['Pretendard'],
-      },
       fontSize: {
         title1: '32px',
         title2: '28px',

yarn.lock

@@ -4274,6 +4274,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -5902,6 +5909,7 @@ __metadata:
     axios: "npm:^1.7.7"
     chromatic: "npm:^11.12.5"
     class-variance-authority: "npm:^0.7.0"
+    clsx: "npm:^2.1.1"
     eslint: "npm:^8.45.0"
     eslint-config-prettier: "npm:^9.1.0"
     eslint-import-resolver-typescript: "npm:^3.6.3"
@@ -5926,6 +5934,7 @@ __metadata:
     react-router-dom: "npm:^6.26.2"
     storybook: "npm:^8.3.5"
     storybook-addon-sass-postcss: "npm:^0.3.2"
+    tailwind-merge: "npm:^2.5.4"
     tailwindcss: "npm:^3.4.13"
     ts-jest: "npm:^29.2.5"
     typescript: "npm:5.3.3"
@@ -10222,6 +10231,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-merge@npm:^2.5.4":
+  version: 2.5.4
+  resolution: "tailwind-merge@npm:2.5.4"
+  checksum: 10c0/6c3d2a1d44344f373859f005e6366f0dbd7f66131d330a51dbe823dab08f71c388b2efcbb2b6a2170ca469581d27079c25cd40c234ca1356c4893ae99c2febb3
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:^3.4.13":
   version: 3.4.13
   resolution: "tailwindcss@npm:3.4.13"