[Feature] Button 컴포넌트 구현 (#62)

* feat: 버튼 기본 틀 작성

* fix: style 변수명 변경

* feat: 다형성 고려하기

* feat: Enter 키보드 이벤트 추가

* feat: useButton hook 분리

* chore: 속성 정의

* design: disabled되지 않았을 때만 hover 스타일 적용

* feat: shadows token 등록

* feat: 기본 Button 상태 스타일 정리

* feat: hover pseudo class 재정의

* chore: Button 파일명 변경 & sm padding 변경

* feat: TextButton 컴포넌트 구현

* fix: codegen 관련 오류 수정

* feat: Button 스토리북 작성

* feat: TextButton disabled 상태에서의 커서 변경

* chore: Button props 순서 변경

* feat: TextButton 스토리북 작성

* fix: color contrast a11y 비활성화

* chore: pressed 관련 함수 네이밍 변경

* fix: pressed 이벤트 모바일에서도 적용될 수 있도록 이벤트 변경

* fix: TextButton 문서 누락

* design: PC에서만 버튼 너비 최솟값 지정

* fix: Button 컴포넌트의 label을 ReactNode를 받을 수 있게 수정, children으로 네이밍 변경

* chore: TextButton underline css 속성 적용 방법 변경

* feat: 내부 중복 이벤트 외부에서도 받도록 수정

* chore: TextButton label 네이밍 text로 수정

* fix: storybook args 이름 수정

packages/codegen/package.json

@@ -1,6 +1,7 @@
 {
   "name": "codegen",
   "private": true,
+  "type": "module",
   "devDependencies": {
     "plop": "^4.0.1"
   }

packages/theme/src/tokens/index.ts

@@ -6,6 +6,7 @@ import { defineTokens } from "@pandacss/dev";
 
 import { colors, gradients } from "./color.ts";
 import { radii } from "./radius.ts";
+import { shadows } from "./shadows.ts";
 import { spacing } from "./space.ts";
 import { borderWidths } from "./stroke.ts";
 import { zIndex } from "./zIndex.ts";
@@ -17,4 +18,5 @@ export const tokens = defineTokens({
   radii,
   borderWidths,
   zIndex,
+  shadows,
 });

packages/theme/src/tokens/shadows.ts

@@ -0,0 +1,7 @@
+import { defineTokens } from "@pandacss/dev";
+import { shadow } from "wowds-tokens";
+
+export const shadows = defineTokens.shadows({
+  blue: { value: shadow.blue },
+  mono: { value: shadow.mono },
+});

packages/wow-tokens/src/index.ts

@@ -1,6 +1,7 @@
 export * as breakpoint from "./breakpoint.ts";
 export * as color from "./color.ts";
 export * as radius from "./radius.ts";
+export * as shadow from "./shadow.ts";
 export * as space from "./space.ts";
 export * as stroke from "./stroke.ts";
 export * as typography from "./typography.ts";

packages/wow-tokens/src/shadow.ts

@@ -0,0 +1,17 @@
+import { color } from "./index.ts";
+
+export const blue = {
+  offsetX: 0,
+  offsetY: 4,
+  blur: 8,
+  spread: 0,
+  color: color.blueShadow,
+};
+
+export const mono = {
+  offsetX: 0,
+  offsetY: 4,
+  blur: 8,
+  spread: 0,
+  color: color.shadowMedium,
+};

packages/wow-ui/package.json

@@ -25,6 +25,11 @@
       "require": "./dist/TextField.cjs",
       "import": "./dist/TextField.js"
     },
+    "./TextButton": {
+      "types": "./dist/components/TextButton/index.d.ts",
+      "require": "./dist/TextButton.cjs",
+      "import": "./dist/TextButton.js"
+    },
     "./Switch": {
       "types": "./dist/components/Switch/index.d.ts",
       "require": "./dist/Switch.cjs",

packages/wow-ui/panda.config.ts

@@ -44,4 +44,7 @@ export default defineConfig({
     semanticTokens,
     breakpoints,
   },
+  conditions: {
+    hover: "&[aria-pressed=false]:not(:disabled):hover",
+  },
 });

packages/wow-ui/rollup.config.js

@@ -21,6 +21,7 @@ process.env.BABEL_ENV = "production";
 export default {
   input: {
     TextField: "./src/components/TextField",
+    TextButton: "./src/components/TextButton",
     Switch: "./src/components/Switch",
     RadioButton: "./src/components/RadioGroup/RadioButton",
     RadioGroup: "./src/components/RadioGroup/RadioGroup",

packages/wow-ui/src/components/Button/Button.stories.tsx

@@ -0,0 +1,168 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Button from "@/components/Button";
+
+const meta = {
+  title: "UI/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "버튼 컴포넌트",
+    a11y: {
+      config: {
+        rules: [{ id: "color-contrast", enabled: false }],
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      description: "버튼의 라벨을 나타냅니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: {
+        type: "text",
+      },
+    },
+    as: {
+      description: "버튼을 구성할 HTML 태그의 종류를 나타냅니다.",
+      table: {
+        type: { summary: "ElementType" },
+      },
+      control: false,
+    },
+    disabled: {
+      description: "버튼이 비활성화되어 있는지 여부를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    size: {
+      description: "버튼의 크기를 나타냅니다.",
+      table: {
+        type: { summary: "lg | sm" },
+        defaultValue: { summary: "lg" },
+      },
+      control: {
+        type: "radio",
+        options: ["lg", "sm"],
+      },
+    },
+    variant: {
+      description: "버튼의 종류를 나타냅니다.",
+      table: {
+        type: { summary: "solid | outline" },
+        defaultValue: { summary: "solid" },
+      },
+      control: {
+        type: "radio",
+        options: ["solid", "outline"],
+      },
+    },
+    onKeyDown: {
+      description:
+        "버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      control: false,
+    },
+    onKeyUp: {
+      description:
+        "버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트를 나타냅니다.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      control: false,
+    },
+    onMouseLeave: {
+      description:
+        "버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트를 나타냅니다.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      control: false,
+    },
+    onPointerDown: {
+      description:
+        "버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      control: false,
+    },
+    onPointerUp: {
+      description:
+        "버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트를 나타냅니다.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      control: false,
+    },
+    style: {
+      description: "버튼의 커스텀 스타일을 나타냅니다.",
+      table: {
+        type: { summary: "CSSProperties" },
+      },
+      control: false,
+    },
+    className: {
+      description: "버튼에 전달하는 커스텀 클래스를 나타냅니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: false,
+    },
+    ref: {
+      description: "렌더링된 요소 또는 컴포넌트에 연결할 ref를 나타냅니다.",
+      table: {
+        type: { summary: 'ComponentPropsWithRef<T>["ref"]' },
+      },
+      control: false,
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: "버튼",
+  },
+};
+
+export const LargeSolid: Story = {
+  args: {
+    children: "버튼",
+    variant: "solid",
+  },
+};
+
+export const LargeOutline: Story = {
+  args: {
+    children: "버튼",
+    variant: "outline",
+  },
+};
+
+export const SmallSolid: Story = {
+  args: {
+    children: "버튼",
+    size: "sm",
+    variant: "solid",
+  },
+};
+
+export const SmallOutline: Story = {
+  args: {
+    children: "버튼",
+    size: "sm",
+    variant: "outline",
+  },
+};