버튼 컴포넌트를 제작한다. (SWYP-team-2th#74)

* cva, radix page install

* 버튼, 플로팅 버튼 구현

* 사이즈 네이밍 컨벤션 수정

* size 고정으로 인한 불필요 padding 값 삭제, 디자인 일부 수정, buttonType optional 수정

package.json

@@ -14,9 +14,11 @@
     "build-storybook": "storybook build --config-dir .storybook"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.1.2",
     "@tailwindcss/vite": "^4.0.0",
     "@tanstack/react-query": "^5.64.2",
     "axios": "^1.7.9",
+    "class-variance-authority": "^0.7.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3",

src/components/common/button/Button.tsx

@@ -0,0 +1,61 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, VariantProps } from 'class-variance-authority';
+import React from 'react';
+import { cn } from '@/utils/cn';
+
+const buttonVariants = cva('flex items-center justify-center cursor-pointer', {
+  variants: {
+    variant: {
+      solid: '',
+      outline: 'border bg-gray-100',
+    },
+    size: {
+      small: 'w-[157px] h-[40px]  rounded-lg text-label-medium',
+      medium: 'w-[212px] h-[48px]  rounded-xl text-title-small',
+      large: 'w-full h-[63px] rounded-2xl text-title-medium',
+    },
+    solidType: {
+      primary: 'bg-primary-400',
+      secondary: 'bg-primary-600 ',
+      disabled: 'bg-gray-500 text-gray-100',
+    },
+    outlineType: {
+      primary: 'border-primary-400 text-primary-400',
+      secondary: 'border-primary-600 text-primary-600',
+      disabled: 'border-gray-400 text-gray-400',
+    },
+    borderSize: {
+      small: 'border-[1.5px]',
+      medium: 'border-[1.8px]',
+      large: 'border-[2px]',
+    },
+  },
+});
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  buttonType: 'primary' | 'secondary' | 'disabled';
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant, size, buttonType, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+
+    const type =
+      variant === 'solid'
+        ? buttonVariants({ solidType: buttonType })
+        : buttonVariants({ outlineType: buttonType, borderSize: size });
+
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size }), type)}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);

src/components/common/button/FloatingButton.tsx

@@ -0,0 +1,40 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '@/utils/cn';
+
+const floatingButtonVariants = cva(
+  'flex items-center justify-center rounded-full cursor-pointer',
+  {
+    variants: {
+      size: {
+        small: 'w-[56px] h-[56px]',
+        large: 'w-[72px] h-[72px]',
+      },
+      buttonType: {
+        primary: 'bg-primary-400',
+        secondary: 'bg-accent-500',
+      },
+    },
+  },
+);
+
+interface FloatingButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof floatingButtonVariants> {
+  children: React.ReactNode;
+}
+
+export const FloatingButton = React.forwardRef<
+  HTMLButtonElement,
+  FloatingButtonProps
+>(({ size, buttonType, children, className, ...props }, ref) => {
+  return (
+    <button
+      className={cn(floatingButtonVariants({ size, buttonType }), className)}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+});

yarn.lock

@@ -547,6 +547,18 @@
   resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-2.1.0.tgz#0acf32f470af2ceaf47f095cdecd40d68666efda"
   integrity sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==
 
+"@radix-ui/[email protected]":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz#6f766faa975f8738269ebb8a23bad4f5a8d2faec"
+  integrity sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==
+
+"@radix-ui/react-slot@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.2.tgz#daffff7b2bfe99ade63b5168407680b93c00e1c6"
+  integrity sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.1"
+
 "@rollup/pluginutils@^4.2.1":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
@@ -1693,6 +1705,13 @@ check-error@^2.1.1:
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
   integrity sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==
 
+class-variance-authority@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.1.tgz#4008a798a0e4553a781a57ac5177c9fb5d043787"
+  integrity sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==
+  dependencies:
+    clsx "^2.1.1"
+
 cli-width@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-4.1.0.tgz#42daac41d3c254ef38ad8ac037672130173691c5"