Feat/update component base UI

.github/workflows/changeset-check.yml

@@ -0,0 +1,85 @@
+name: Changeset Check
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  changeset-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Check if changeset is required
+        id: check-skip
+        run: |
+          # PR에 'skip-changeset' 라벨이 있는지 확인
+          if [[ "${{ contains(github.event.pull_request.labels.*.name, 'skip-changeset') }}" == "true" ]]; then
+            echo "skip=true" >> $GITHUB_OUTPUT
+            echo "⏭️  Skipping changeset check due to 'skip-changeset' label"
+            exit 0
+          fi
+
+          # 변경된 파일 목록 가져오기
+          git fetch origin ${{ github.base_ref }}
+          CHANGED_FILES=$(git diff --name-only origin/${{ github.base_ref }}...HEAD)
+
+          # 문서, CI, 설정 파일만 변경된 경우 체크
+          if echo "$CHANGED_FILES" | grep -qvE '^(\.github/|\.changeset/|\.vscode/|docs/|README\.md|LICENSE|\.gitignore|\.prettierrc|\.eslintrc|package\.json|tsconfig\.json|vite\.config\.ts)'; then
+            echo "skip=false" >> $GITHUB_OUTPUT
+            echo "📦 Source code changes detected - changeset required"
+          else
+            echo "skip=true" >> $GITHUB_OUTPUT
+            echo "⏭️  Only docs/config changes detected - skipping changeset check"
+          fi
+
+      - name: Setup pnpm
+        if: steps.check-skip.outputs.skip != 'true'
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        if: steps.check-skip.outputs.skip != 'true'
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        if: steps.check-skip.outputs.skip != 'true'
+        run: pnpm install --frozen-lockfile
+
+      - name: Check for changesets
+        if: steps.check-skip.outputs.skip != 'true'
+        run: |
+          # .changeset 디렉토리에 있는 .md 파일 개수 확인 (config.json, README.md 제외)
+          CHANGESET_COUNT=$(find .changeset -name "*.md" ! -name "README.md" | wc -l)
+
+          echo "Found $CHANGESET_COUNT changeset(s)"
+
+          if [ "$CHANGESET_COUNT" -eq 0 ]; then
+            echo "❌ Error: No changeset found!"
+            echo ""
+            echo "Please add a changeset to describe your changes:"
+            echo "  pnpm changeset"
+            echo ""
+            echo "This helps us maintain a proper changelog and version history."
+            echo ""
+            echo "If you believe this PR doesn't need a changeset (docs/config only),"
+            echo "please add the 'skip-changeset' label to this PR."
+            exit 1
+          else
+            echo "✅ Changeset found!"
+            echo ""
+            echo "Changeset files:"
+            find .changeset -name "*.md" ! -name "README.md" -exec echo "  - {}" \;
+          fi
+
+      - name: Validate changeset format
+        if: steps.check-skip.outputs.skip != 'true'
+        run: pnpm changeset status --verbose

.gitignore

@@ -16,6 +16,7 @@ storybook-static
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea
 .DS_Store
 *.suo

.storybook/ThemeWrapper.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { ThemeProvider } from "../packages/providers";
+import { ThemeProvider } from "../src/providers";
 import {
 	appearanceTheme,
 	applyAppearanceTheme,
 	type AppearanceMode,
-} from "../packages/tokens/appearanceTheme";
+} from "../src/tokens/appearanceTheme";
 
 interface ThemeWrapperProps {
 	mode: AppearanceMode;

.storybook/main.ts

@@ -3,8 +3,8 @@ import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
 	stories: [
 		"../.storybook/**/*.mdx",
-		"../packages/**/*.mdx",
-		"../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+		"../src/**/*.mdx",
+		"../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
 	],
 	addons: [
 		"@storybook/addon-essentials",

.storybook/preview.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import type { Decorator, Preview } from "@storybook/react";
-import "../packages/tokens/theme.css";
+import "../src/tokens/theme.css";
 import { ThemeWrapper } from "./ThemeWrapper";
 import {
 	appearanceTheme,
 	type AppearanceMode,
-} from "../packages/tokens/appearanceTheme";
+} from "../src/tokens/appearanceTheme";
 
 const withTheme: Decorator = (Story, context) => {
 	const theme = (context.globals?.theme || "light") as AppearanceMode;

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+	"explorer.fileNesting.enabled": true,
+	"explorer.fileNesting.expand": false,
+	"explorer.fileNesting.patterns": {
+		"*.tsx": "${capture}.css.ts, ${capture}.spec.tsx, ${capture}.stories.tsx, ${capture}.test.tsx",
+		"*.ts": "${capture}.spec.ts, ${capture}.test.ts",
+		"package.json": "package-lock.json, pnpm-lock.yaml, yarn.lock, .npmrc, .nvmrc, .node-version",
+		"tsconfig.json": "tsconfig.*.json",
+		"vite.config.*": "vitest.config.*, vitest.setup.*",
+		".eslintrc.*": ".eslintignore, .prettierrc*, .prettierignore",
+		".gitignore": ".gitattributes, .gitmodules",
+		"README.md": "CHANGELOG.md, LICENSE, CONTRIBUTING.md",
+		".storybook": "storybook-static"
+	}
+}

package.json

@@ -42,6 +42,9 @@
 		"build": "vite build && tsc --project tsconfig.build.json",
 		"build:lib": "pnpm run build",
 		"lint": "eslint .",
+		"test": "vitest",
+		"test:ui": "vitest --ui",
+		"test:run": "vitest run",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "pnpm run sync-readme && storybook build",
 		"sync-readme": "node scripts/sync-readme.js",
@@ -51,6 +54,7 @@
 		"release": "pnpm run version && pnpm run build:lib && npm publish --access public"
 	},
 	"dependencies": {
+		"@base-ui/react": "^1.0.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -68,25 +72,31 @@
 		"@storybook/react": "^8",
 		"@storybook/react-vite": "^8",
 		"@storybook/test": "^8",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.1",
+		"@testing-library/user-event": "^14.6.1",
 		"@types/node": "^24.10.1",
 		"@types/react": "^19.0.0",
 		"@types/react-dom": "^19.0.0",
 		"@vanilla-extract/css": "^1.17.4",
 		"@vanilla-extract/recipes": "^0.5.7",
 		"@vanilla-extract/vite-plugin": "^5.1.1",
 		"@vitejs/plugin-react": "^5.1.0",
+		"@vitest/ui": "^4.0.16",
 		"eslint": "^9.39.1",
 		"eslint-plugin-react-hooks": "^5.2.0",
 		"eslint-plugin-react-refresh": "^0.4.24",
 		"eslint-plugin-storybook": "^10.0.7",
 		"globals": "^16.5.0",
+		"jsdom": "^27.4.0",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
 		"storybook": "^8",
 		"storybook-dark-mode": "^4.0.2",
 		"typescript": "~5.9.3",
 		"typescript-eslint": "^8.46.3",
-		"vite": "^5.4.11"
+		"vite": "^5.4.11",
+		"vitest": "^4.0.16"
 	},
 	"eslintConfig": {
 		"extends": [