[feat] 버튼 섹션 컴포넌트들 추가

.biomeignore

@@ -1,2 +1,3 @@
 **/*.md
 
+

.coderabbit.yaml

@@ -1,28 +1,20 @@
-# CodeRabbit 설정 파일
-# 모든 브랜치에서 자동 리뷰 활성화
+# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
+language: "ko-KR"
+early_access: false
 
 reviews:
-  # 모든 브랜치에서 리뷰 활성화
+  profile: "chill"
+  request_changes_workflow: false
+  high_level_summary: true
+  poem: false
   review_status: true
-  # 기본 브랜치가 아닌 브랜치에서도 리뷰 실행
-  base_branches:
-    - main
-    - develop
-    - "feature/**"
-    - "fix/**"
-    - "release/**"
-
-# 리뷰 범위 설정
-language:
-  # TypeScript, JavaScript 파일 리뷰
-  typescript:
-    enabled: true
-  javascript:
+  collapse_walkthrough: false
+  auto_review:
     enabled: true
+    drafts: false
+    base_branches:
+      - main
+      - develop
 
-# 리뷰 스타일 설정
-review:
-  # 간결한 리뷰
-  concise: true
-  # 코드 개선 제안 포함
-  suggestions: true
+chat:
+  auto_reply: true

.github/ACCESSIBILITY.md

@@ -314,3 +314,4 @@ CI 환경에서는 접근성 테스트가 자동으로 실행되며, 위반 사
 
 
 
+

.github/HUSKY_SETUP.md

@@ -131,3 +131,4 @@ TypeScript 타입 오류를 수정한 후 다시 커밋을 시도하세요.
 
 
 
+

.github/ISSUE_TEMPLATE/bug_report.md

@@ -69,3 +69,4 @@ disabled 상태에서도 onClick 이벤트가 발생합니다
 
 
 
+

.github/ISSUE_TEMPLATE/feature_request.md

@@ -55,3 +55,4 @@ Input 컴포넌트를 추가하고 싶습니다. 다음 기능이 필요합니
 
 
 
+

.github/RELEASE_TEMPLATE.md

@@ -103,3 +103,4 @@ function App() {
 
 
 
+

.storybook/main.ts

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import tsconfigPaths from "vite-tsconfig-paths";
 import path from "path";
 import { fileURLToPath } from "url";
 
@@ -21,15 +22,22 @@ const config: StorybookConfig = {
   },
   async viteFinal(config) {
     if (config.plugins) {
+      config.plugins.push(
+        tsconfigPaths({
+          root: path.resolve(dirname, ".."),
+        })
+      );
       config.plugins.push(vanillaExtractPlugin());
     }
     // Storybook에서도 alias 사용 가능하도록 설정
     // @storybook/* 패키지는 node_modules에서 찾아야 하므로 alias에서 제외
     if (config.resolve) {
       config.resolve.alias = {
+        ...config.resolve.alias,
         "@": path.resolve(dirname, "../src"),
         "@/components": path.resolve(dirname, "../src/components"),
         "@/tokens": path.resolve(dirname, "../src/tokens"),
+        "@/icons": path.resolve(dirname, "../src/icons"),
         "@/stories": path.resolve(dirname, "../src/stories"),
       };
     }

.storybook/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "types": ["vite/client", "@testing-library/jest-dom", "@storybook/addon-vitest"]
+  },
+  "include": ["../src/**/*", "**/*"]
+}
+

.storybook/utils.ts

@@ -14,18 +14,24 @@ export const isTestEnvironment =
 /**
  * vitest 환경에서 전역 expect를 안전하게 가져옵니다.
  * isTestEnvironment가 true일 때만 호출해야 하며, 이 경우 expect는 항상 정의되어 있습니다.
+ * @testing-library/jest-dom/vitest를 통해 jest-dom matcher가 포함된 expect를 반환합니다.
  *
- * @returns vitest의 expect 함수
+ * @returns vitest의 expect 함수 (jest-dom matcher 포함)
  * @throws isTestEnvironment가 false일 때 호출하면 에러 발생
  */
-export function getExpect(): typeof import("vitest").expect {
+export function getExpect() {
   if (!isTestEnvironment) {
     throw new Error(
       "expect는 테스트 환경에서만 사용할 수 있습니다. isTestEnvironment를 확인해주세요."
     );
   }
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  return (globalThis as { expect: typeof import("vitest").expect }).expect!;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-explicit-any
+  // @testing-library/jest-dom/vitest가 vitest의 expect 타입을 모듈 확장을 통해 확장하지만,
+  // 함수 반환 타입에서는 확장된 타입을 직접 참조할 수 없습니다.
+  // 따라서 타입 단언을 사용하여 jest-dom matcher가 포함된 expect를 반환합니다.
+  // 실제 런타임에서는 @testing-library/jest-dom/vitest가 이미 로드되어 있으므로
+  // jest-dom matcher들이 정상적으로 작동합니다.
+  return (globalThis as unknown as { expect: any }).expect!;
 }
 
 /**

CHANGELOG.md

@@ -27,3 +27,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 
 
+

LICENSE

@@ -18,3 +18,4 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 
 
 
+

biome.json

@@ -15,7 +15,10 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "a11y": {
+        "noSvgWithoutTitle": "off"
+      }
     }
   },
   "javascript": {

docs/STYLING.md

@@ -218,3 +218,4 @@ export const buttonLoading = style({
 
 
 
+

docs/THEMING.md

@@ -223,3 +223,4 @@ export const button = style({
 
 
 
+

package.json

@@ -87,6 +87,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^4.0.13"
   },
   "dependencies": {

src/components/Button/Button.css.ts

@@ -1,9 +1,100 @@
-import { style } from "@vanilla-extract/css";
+import { style, styleVariants } from "@vanilla-extract/css";
+import { colors, radius, shadows, textStyles } from "../../tokens";
 
-export const button = style({
-	padding: "8px 12px",
-	borderRadius: "9999px",
+const baseButton = style({
+	...textStyles.heading4,
+	padding: "0px 16px",
+	borderRadius: radius.base,
 	border: "none",
 	cursor: "pointer",
-	fontWeight: 500,
+
+	display: "grid",
+	gridTemplateColumns: "24px 1fr 24px",
+	alignItems: "center",
+	transition: "background-color 0.2s, box-shadow 0.2s",
+	width: "100%",
+	height: "48px",
+});
+
+// Variant styles
+export const buttonVariants = styleVariants({
+	default: [
+		baseButton,
+		{
+			backgroundColor: colors.grey[50],
+			color: colors.grey[500],
+			":hover": {
+				backgroundColor: colors.grey[100],
+			},
+			selectors: {
+				'&[data-pressed="true"]': {
+					backgroundColor: colors.grey[100],
+					boxShadow: shadows["btn-pressed"],
+				},
+				"&:disabled": {
+					backgroundColor: colors.grey[50],
+					color: colors.grey[300],
+					cursor: "not-allowed",
+				},
+			},
+		},
+	],
+	gray: [
+		baseButton,
+		{
+			backgroundColor: colors.grey[800],
+			color: colors.base.white,
+			":hover": {
+				backgroundColor: colors.grey[700],
+			},
+			selectors: {
+				'&[data-pressed="true"]': {
+					backgroundColor: colors.grey[900],
+					boxShadow: shadows["btn-pressed"],
+				},
+				"&:disabled": {
+					backgroundColor: colors.grey[300],
+					color: colors.grey[100],
+					cursor: "not-allowed",
+				},
+			},
+		},
+	],
+	primary: [
+		baseButton,
+		{
+			backgroundColor: colors.orange[500],
+			color: colors.base.white,
+			":hover": {
+				backgroundColor: colors.orange[600],
+			},
+			selectors: {
+				'&[data-pressed="true"]': {
+					backgroundColor: colors.orange[600],
+					boxShadow: shadows["btn-pressed"],
+				},
+				"&:disabled": {
+					backgroundColor: colors.orange[100],
+					cursor: "not-allowed",
+				},
+			},
+		},
+	],
+});
+
+// Default export for backward compatibility
+export const button = buttonVariants.default;
+
+// Icon wrapper
+export const iconWrapper = style({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "24px",
+});
+
+export const contentWrapper = style({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
 });