Feat: SOSO UI 패키지 설정 및 버튼 추가

.github/workflows/analysis.yml

@@ -39,12 +39,12 @@ jobs:
 
       - name: 📦 Setup pnpm
         uses: pnpm/action-setup@v3
-        with: { version: 9 }
+        with: { version: 10 }
 
       - name: 🏗️ Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
           cache: 'pnpm'
 
       - name: 📂 Install dependencies

.github/workflows/ci.yml

@@ -40,12 +40,12 @@ jobs:
 
       - name: 📦 Setup pnpm
         uses: pnpm/action-setup@v3
-        with: { version: 9 }
+        with: { version: 10 }
 
       - name: 🏗️ Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
           cache: pnpm
 
       - name: 📂 Install dependencies

.npmrc

@@ -1 +1 @@
-package-manager=pnpm@9.1.0
+package-manager=pnpm@10.24.0

apps/web/.eslintrc.cjs

@@ -1,29 +1,11 @@
-// apps/web/.eslintrc.js
 module.exports = {
   root: true,
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    project: './tsconfig.json',
-  },
-  ignorePatterns: ['stylelint.config.js', 'postcss.config.mjs', '**/__tests__/e2e/**', 'server.mjs'],
-  extends: [
-    'next',
-    'next/core-web-vitals',
-    'plugin:@typescript-eslint/recommended',
-  ],
-  overrides: [
-    {
-      // 이 패턴에 걸리는 파일은 타입 검사(parserOptions.project) 하지 않음
-      files: [
-        'next.config.js',
-        'postcss.config.cjs',
-        'tailwind.config.js',
-        '.eslintrc.js',
-      ],
-      parserOptions: {
-        project: null, // or []
-      },
-    },
+  extends: ['next', 'next/core-web-vitals'],
+  ignorePatterns: [
+    'stylelint.config.js',
+    'postcss.config.mjs',
+    '**/__tests__/e2e/**',
+    'server.mjs',
   ],
   rules: {
     // 기존 규칙

apps/web/package.json

@@ -48,6 +48,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@lhci/cli": "^0.15.1",
+    "eslint": "^8.56.0",
     "@next/bundle-analyzer": "^15.5.3",
     "@playwright/test": "^1.56.1",
     "@stylistic/stylelint-config": "^2.0.0",
@@ -58,7 +59,7 @@
     "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20",
+    "@types/node": "^24",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^4.3.3",

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "packageManager": "pnpm@9.15.9",
+  "packageManager": "pnpm@10.24.0",
   "scripts": {
     "dev": " turbo run dev --parallel",
     "dev:web": "pnpm --filter web dev:https",
@@ -26,13 +26,29 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "Apache-2.0",
   "private": true,
+  "engines": {
+    "node": "^24",
+    "pnpm": "^10"
+  },
   "workspaces": [
     "apps/*",
     "packages/*",
     "tools/*"
   ],
+  "pnpm": {
+    "overrides": {
+      "@types/node": "^24"
+    },
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "@typescript-eslint/eslint-plugin": "8",
+        "@typescript-eslint/parser": "8",
+        "eslint-plugin-react-hooks": "5"
+      }
+    }
+  },
   "lint-staged": {
     "*.{ts,tsx}": [
       "eslint --fix",
@@ -49,6 +65,7 @@
     "@changesets/cli": "^2.29.8",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
+    "@types/node": "24.10.1",
     "@typescript-eslint/eslint-plugin": "^8.35.1",
     "@typescript-eslint/parser": "^8.35.1",
     "eslint": "^8.56.0",

packages/eslint-config/library.cjs

@@ -36,5 +36,15 @@ module.exports = {
         devDependencies: true,
       },
     ],
+    // 라이브러리에서는 props spreading 허용 (유연한 API를 위해)
+    'react/jsx-props-no-spreading': 'off',
+    // TypeScript 사용 시 defaultProps 불필요 (optional props 사용)
+    'react/require-default-props': 'off',
+    // named export를 선호 (Tree-shaking에 유리)
+    'import/prefer-default-export': 'off',
+    // 화살표 함수 스타일 자유롭게
+    'arrow-body-style': 'off',
+    // useEffect cleanup 함수 등에서 유연한 return 허용
+    'consistent-return': 'off',
   },
 };

packages/ui/.eslintignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+*.config.ts

packages/ui/.eslintrc.cjs

@@ -0,0 +1,17 @@
+const path = require('path');
+
+module.exports = {
+  root: true,
+  extends: [require.resolve('@soso/eslint-config/library.cjs')],
+  parserOptions: {
+    project: path.resolve(__dirname, './tsconfig.json'),
+    tsconfigRootDir: __dirname,
+  },
+  ignorePatterns: [
+    'dist',
+    '*.config.ts',
+    '*.config.js',
+    '*.config.mjs',
+    '.eslintrc.*',
+  ],
+};

packages/ui/.npmignore

@@ -0,0 +1,38 @@
+# Source files
+src/
+*.ts
+*.tsx
+!*.d.ts
+
+# Config files
+tsconfig.json
+tsup.config.ts
+vitest.config.ts
+.eslintrc.cjs
+
+# Test files
+**/*.test.*
+**/*.spec.*
+src/test/
+__tests__/
+tests/
+coverage/
+
+# Development
+.turbo/
+node_modules/
+.DS_Store
+*.log
+
+# Git
+.git/
+.gitignore
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Misc
+.changeset/

packages/ui/README.md

@@ -0,0 +1,89 @@
+# @soso/ui
+
+SOSO UI component library - Production-grade React components for SOSO applications.
+
+## Installation
+
+```bash
+# Using pnpm
+pnpm add @soso/ui
+
+# Using npm
+npm install @soso/ui
+
+# Using yarn
+yarn add @soso/ui
+```
+
+## Usage
+
+```tsx
+import { Button } from '@soso/ui';
+
+function App() {
+  return (
+    <Button onClick={() => console.log('Clicked!')}>Click me</Button>
+  );
+}
+```
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+
+- pnpm 8+
+
+### Setup
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run tests
+pnpm test
+
+# Run tests in watch mode
+pnpm test:watch
+
+# Build the library
+pnpm build
+
+# Type check
+pnpm typecheck
+
+# Lint
+pnpm lint
+```
+
+### Scripts
+
+- `pnpm build` - Build the library (ESM + CJS + TypeScript declarations)
+- `pnpm dev` - Build in watch mode
+- `pnpm test` - Run unit tests
+- `pnpm test:watch` - Run tests in watch mode
+- `pnpm test:coverage` - Generate coverage report
+- `pnpm test:ui` - Open Vitest UI
+- `pnpm typecheck` - Run TypeScript type checking
+- `pnpm lint` - Lint the codebase
+- `pnpm clean` - Clean build artifacts
+
+## Features
+
+- ✅ **TypeScript**: Full TypeScript support with type definitions
+- ✅ **Tree-shakeable**: ESM and CJS builds with tree-shaking support
+- ✅ **Tested**: Comprehensive unit tests with Vitest
+- ✅ **Accessible**: Built with accessibility in mind
+- ✅ **Modern**: Uses latest React patterns and best practices
+
+## Components
+
+_(Component documentation will be added as components are developed)_
+
+## License
+
+MIT
+
+## Contributing
+
+See [CONTRIBUTING.md](../../CONTRIBUTING.md) for details.

packages/ui/package.json

@@ -1 +1,91 @@
-{ "name": "@soso/ui", "version": "0.0.0", "private": true }
+{
+  "name": "@soso/ui",
+  "version": "0.0.0",
+  "description": "SOSO UI component library",
+  "author": "SOSO Team",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./components/*": {
+      "import": {
+        "types": "./dist/components/*.d.mts",
+        "default": "./dist/components/*.mjs"
+      },
+      "require": {
+        "types": "./dist/components/*.d.ts",
+        "default": "./dist/components/*.js"
+      }
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "motion": "^12.23.24",
+    "tailwind-merge": "^3.3.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@soso/eslint-config": "workspace:*",
+    "@soso/tsconfig": "workspace:*",
+    "@testing-library/jest-dom": "^6.6.1",
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "eslint": "^8.56.0",
+    "jsdom": "^25.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.4.2",
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "design-system",
+    "soso"
+  ]
+}