[#9] 버튼 컴포넌트 구현

src/components/button/Button.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import Button from "./basic-button";
+import IconButton from "./icon-button";
+import ArrowButton from "./arrow-button";
+import ICON_MAP from "../icon/icon-map";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "공통으로 사용되는 버튼 컴포넌트입니다.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["default", "outline", "secondary"],
+      description: "버튼 상태",
+    },
+    icon: {
+      control: "select",
+      options: Object.keys(ICON_MAP),
+      description: "버튼 아이콘",
+    },
+
+    className: {
+      control: "text",
+      description: "추가 CSS 클래스",
+    },
+    shape: {
+      control: "text",
+      description: "-",
+      table: {
+        category: "X",
+      },
+    },
+    label: {
+      control: "text",
+      description: "버튼에 들어가는 텍스트",
+    },
+    textColor: {
+      description: "-",
+      table: {
+        category: "X",
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description: "비활성화 여부",
+      table: {
+        category: "X",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    appearance: "default",
+    label: "버튼 이름을 입력해보세요",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    appearance: "outline",
+    label: "버튼 이름을 입력해보세요",
+  },
+};
+
+export const Icon: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <IconButton icon="FilterIcon" aria-label="필터 버튼" />
+      <IconButton icon="HamburgerIcon" aria-label="햄버거 버튼" />
+      <IconButton icon="LikeOnIcon" aria-label="찜 버튼" />
+    </div>
+  ),
+};
+
+export const Arrow: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 p-4">
+      <ArrowButton direction="prev" />
+      <ArrowButton direction="next" />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    appearance: "default",
+    label: "비활성 버튼",
+    disabled: true,
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 p-4">
+      <h3 className="text-lg font-bold">대표 버튼</h3>
+
+      <div className="grid gap-4">
+        <Button label="기본" />
+        <Button appearance="outline" label="아웃라인" />
+      </div>
+
+      <h3 className="text-lg font-bold">아이콘이 들어간 버튼</h3>
+      <div className="grid gap-4">
+        <Button appearance="outline" label="카카오 로그인" icon="KakaoIcon" />
+        <Button appearance="outline" label="구글 로그인" icon="GoogleIcon" />
+        <div className="flex flex-wrap gap-4">
+          <IconButton icon="FilterIcon" aria-label="필터 버튼" />
+          <IconButton icon="HamburgerIcon" aria-label="햄버거 버튼" />
+          <IconButton icon="LikeOnIcon" aria-label="찜 버튼" />
+          <ArrowButton direction="prev" />
+          <ArrowButton direction="next" />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+  },
+};

src/components/button/arrow-button.tsx

@@ -0,0 +1,34 @@
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+import Icon from "../icon/icon";
+import {
+  COMMON_BUTTON_STYLES,
+  BUTTON_SHAPE_VARIANTS,
+  BUTTON_STATE_VARIANTS,
+} from "./style";
+
+interface ArrowButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  direction: "prev" | "next";
+  className?: string;
+}
+
+const ArrowButton = ({ direction, className, ...props }: ArrowButtonProps) => {
+  const iconName = direction === "prev" ? "ArrowLeftIcon" : "ArrowRightIcon";
+  const ariaLabel = direction === "prev" ? "이전으로 이동" : "다음으로 이동";
+  return (
+    <button
+      aria-label={ariaLabel}
+      className={cn(
+        COMMON_BUTTON_STYLES,
+        BUTTON_SHAPE_VARIANTS.round,
+        BUTTON_STATE_VARIANTS.secondary,
+        className
+      )}
+      {...props}
+    >
+      <Icon icon={iconName} />
+    </button>
+  );
+};
+
+export default ArrowButton;

src/components/button/basic-button.tsx

@@ -0,0 +1,50 @@
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+import {
+  COMMON_BUTTON_STYLES,
+  BUTTON_SHAPE_VARIANTS,
+  BUTTON_STATE_VARIANTS,
+  BUTTON_TEXT_COLOR_VARIANTS,
+  ButtonShape,
+  ButtonState,
+  ButtonTextColor,
+} from "./style";
+import Icon from "../icon/icon";
+import type { IconName } from "../icon/icon-map";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: IconName;
+  appearance?: ButtonState;
+  label?: string;
+  shape?: ButtonShape;
+  textColor?: ButtonTextColor;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const Button = ({
+  appearance = "default",
+  icon,
+  label,
+  className,
+  children,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={cn(
+        COMMON_BUTTON_STYLES,
+        BUTTON_SHAPE_VARIANTS.default,
+        BUTTON_STATE_VARIANTS[appearance],
+        className
+      )}
+      {...props}
+    >
+      {icon && <Icon icon={icon} />}
+      <span className={BUTTON_TEXT_COLOR_VARIANTS[appearance]}>{label}</span>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/components/button/icon-button.tsx

@@ -0,0 +1,34 @@
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+import Icon from "../icon/icon";
+import type { IconName } from "../icon/icon-map";
+
+import {
+  COMMON_BUTTON_STYLES,
+  BUTTON_SHAPE_VARIANTS,
+  BUTTON_STATE_VARIANTS,
+} from "./style";
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: IconName;
+  className?: string;
+  "aria-label": string; //접근성을 위해 아이콘 버튼 사용시 필수적으로 넣어주세요
+}
+
+const IconButton = ({ icon, className, ...props }: IconButtonProps) => {
+  return (
+    <button
+      className={cn(
+        COMMON_BUTTON_STYLES,
+        BUTTON_SHAPE_VARIANTS.square,
+        BUTTON_STATE_VARIANTS.secondary,
+        className
+      )}
+      {...props}
+    >
+      <Icon icon={icon} />
+    </button>
+  );
+};
+
+export default IconButton;

src/components/button/style.ts

@@ -0,0 +1,30 @@
+export type ButtonShape = "default" | "round" | "square";
+export type ButtonState = "default" | "outline" | "secondary";
+export type ButtonTextColor = "default" | "outline" | "secondary";
+
+export const COMMON_BUTTON_STYLES =
+  "group w-full h-[42px] tablet:h-[50px] pc:h-[50px] inline-flex flex-center gap-x-[8px] tablet:gap-x-[12px] pc:gap-x-[12px] whitespace-nowrap transition-colors disabled:pointer-events-none";
+
+export const BUTTON_SHAPE_VARIANTS = {
+  default: "rounded-[4px] px-[23px]",
+  round: "rounded-full w-[48px] h-[48px] active:text-gray-100",
+  square:
+    "rounded-[8px] w-[42px] tablet:w-[50px] pc:w-[50px] active:text-gray-100",
+};
+
+export const BUTTON_STATE_VARIANTS = {
+  default:
+    "bg-black hover:bg-default active:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-600",
+  outline:
+    "bg-white border border-gray-300 hover:bg-gray-100 active:bg-gray-200 disabled:border-gray-300",
+  secondary:
+    "bg-white border border-gray-200 hover:bg-gray-100 active:bg-gray-600 disabled:border-gray-300 disabled:text-gray-400",
+};
+
+export const BUTTON_TEXT_COLOR_VARIANTS = {
+  default:
+    "text-gray-100 mobile:text-button-md tablet:text-button-lg pc:text-button-lg group-disabled:text-gray-600 group-disabled:bg-gray-300",
+  outline:
+    "text-default mobile:text-button-md tablet:text-button-lg pc:text-button-lg group-disabled:text-gray-400",
+  secondary: "text-gray-800 group-disabled:text-gray-400",
+};

src/components/icon/icon-map.ts

@@ -39,4 +39,5 @@ const ICON_MAP = {
   VanillaIcon: () => import("/public/icons/flavor/ic-vanilla.svg"),
 };
 
+export type IconName = keyof typeof ICON_MAP;
 export default ICON_MAP;

src/components/index.ts

@@ -9,3 +9,6 @@ export { default as Icon } from "./icon/icon";
 export { default as BlockGauge } from "./gauge/block-gauge";
 export { default as DetailTaste } from "./taste/detail-taste";
 export { default as ReviewTaste } from "./taste/review-taste";
+export { default as Button } from "./button/basic-button";
+export { default as ArrowButton } from "./button/arrow-button";
+export { default as IconButton } from "./button/icon-button";

src/components/select-type/select-type.tsx

@@ -68,7 +68,7 @@ const SelectType = ({ isError, ...props }: SelectTypeValue) => {
   return (
     <div className="flex flex-col gap-2">
       <div className="flex items-center gap-2">
-        <p className="text-default text-body-sm tracking-[-0.02em]">타입</p>
+        <p className="text-body-sm tracking-[-0.02em] text-default">타입</p>
         {isError && (
           <p className="text-component-notes-md tracking-[-0.02em] text-red-400">
             와인 타입은 필수 입력이에요