husky, pre-commit rules 적용

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint-staged

.lintstagedrc.mjs

@@ -0,0 +1,8 @@
+export default {
+  '**/*.{js,jsx,ts,tsx,mjs,md,mdx,json,json5,jsonc}': (files) => {
+    return [
+      `npx eslint --config eslint.config.mjs --fix ${files.join(' ')}`,
+      `git add ${files.join(' ')}`,
+    ]
+  },
+}

README.md

@@ -2,7 +2,6 @@
   <img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
 </div>
 
-
 <h3 align="center">
     Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
 </h3>
@@ -23,8 +22,8 @@
 <a href="https://discord.gg/8zjcGc7cWh">
 <img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
 </a>
-<a href="https://codecov.io/gh/dev-five-git/devup-ui" > 
- <img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/> 
+<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
+ <img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
 </a>
 </div>
 
@@ -76,48 +75,58 @@ npm install @devup-ui/webpack-plugin
 
 Next.js Build Time and Build Size (github action - ubuntu-latest)
 
-| Library                  | Version  | Build Time | Build Size        |
-|--------------------------|----------|------------|-------------------|
-| tailwindcss              | 4.1.13   | 20.22s     | 57,415,796 bytes  |
-| styleX                   | 0.15.4   | 38.97s     | 76,257,820 bytes  |
-| vanilla-extract          | 1.17.4   | 20.09s     | 59,366,237 bytes  |
-| kuma-ui                  | 1.5.9    | 21.61s     | 67,422,085 bytes  |
-| panda-css                | 1.3.1    | 22.01s     | 62,431,065 bytes  |
-| chakra-ui                | 3.27.0   | 29.99s     | 210,122,493 bytes |
-| mui                      | 7.3.2    | 22.21s     | 94,231,958 bytes  |
-| devup-ui(per-file css)   | 1.0.18   | 18.23s     | 57,440,953 bytes  |
-| devup-ui(single css)     | 1.0.18   | 18.35s     | 57,409,008 bytes  |
+| Library                | Version | Build Time | Build Size        |
+| ---------------------- | ------- | ---------- | ----------------- |
+| tailwindcss            | 4.1.13  | 20.22s     | 57,415,796 bytes  |
+| styleX                 | 0.15.4  | 38.97s     | 76,257,820 bytes  |
+| vanilla-extract        | 1.17.4  | 20.09s     | 59,366,237 bytes  |
+| kuma-ui                | 1.5.9   | 21.61s     | 67,422,085 bytes  |
+| panda-css              | 1.3.1   | 22.01s     | 62,431,065 bytes  |
+| chakra-ui              | 3.27.0  | 29.99s     | 210,122,493 bytes |
+| mui                    | 7.3.2   | 22.21s     | 94,231,958 bytes  |
+| devup-ui(per-file css) | 1.0.18  | 18.23s     | 57,440,953 bytes  |
+| devup-ui(single css)   | 1.0.18  | 18.35s     | 57,409,008 bytes  |
 
 ## How it works
 
 Devup UI is a CSS in JS preprocessor that does not require runtime.
 Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
 We develop a preprocessor that considers all grammatical cases.
 
-```typescript
-const before = <Box bg={"red"}/>
+```tsx
+const before = <Box bg="red" />
 
-const after = <div className="d0"/>
+const after = <div className="d0" />
 ```
 
 Variables are fully supported.
 
-```typescript
-const before = <Box bg={colorVariable}/>
-
-const after = <div className="d0" style={{
-    "--d0": colorVariable
-}}/>
+```tsx
+const before = <Box bg={colorVariable} />
+
+const after = (
+  <div
+    className="d0"
+    style={{
+      '--d0': colorVariable,
+    }}
+  />
+)
 ```
 
 Various expressions and responsiveness are also fully supported.
 
-```typescript
-const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
-
-const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
-    "--d2": variable
-}}/>
+```tsx
+const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
+
+const after = (
+  <div
+    className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
+    style={{
+      '--d2': variable,
+    }}
+  />
+)
 ```
 
 Support Theme with Typing
@@ -139,36 +148,40 @@ Support Theme with Typing
 }
 ```
 
-```typescript
+```tsx
 // Type Safe
-<Text color="$text"/>
+<Text color="$text" />
 ```
 
 Support Responsive And Pseudo Selector
 
 You can use responsive and pseudo selector.
 
-```typescript
+```tsx
 // Responsive with Selector
-const box = <Box _hover={{bg: ["red", "blue"]}}/>
+const box = <Box _hover={{ bg: ['red', 'blue'] }} />
 
 // Same
-const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
+const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
 ```
 
 ## How to Contribute
 
 ### Requirements
+
 - [Node.js](https://nodejs.org) (LTS version recommended)
 - [Rust](https://rustup.rs) compiler
 - pnpm package manager (`npm install -g pnpm`)
 
 ### Development Setup
+
 To set up the development environment, install the following packages:
+
 ```sh
 pnpm i
 pnpm build
 cargo install cargo-tarpaulin
 cargo install wasm-pack
 ```
-After installation, run `pnpm test` to ensure everything works correctly.
+
+After installation, run `pnpm test` to ensure everything works correctly.

README_ko.md

@@ -2,7 +2,6 @@
   <img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
 </div>
 
-
 <h3 align="center">
     Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
 </h3>
@@ -23,8 +22,8 @@
 <a href="https://discord.gg/8zjcGc7cWh">
 <img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
 </a>
-<a href="https://codecov.io/gh/dev-five-git/devup-ui" > 
- <img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/> 
+<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
+ <img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
 </a>
 </div>
 
@@ -70,48 +69,58 @@ npm install @devup-ui/vite-plugin
 
 Next.js Build Time and Build Size (github action - ubuntu-latest)
 
-| 라이브러리                 |  버전    | 빌드 시간    | 빌드 사이즈        |
-|--------------------------|----------|------------|-------------------|
-| tailwindcss              | 4.1.13   | 20.22s     | 57,415,796 bytes  |
-| styleX                   | 0.15.4   | 38.97s     | 76,257,820 bytes  |
-| vanilla-extract          | 1.17.4   | 20.09s     | 59,366,237 bytes  |
-| kuma-ui                  | 1.5.9    | 21.61s     | 67,422,085 bytes  |
-| panda-css                | 1.3.1    | 22.01s     | 62,431,065 bytes  |
-| chakra-ui                | 3.27.0   | 29.99s     | 210,122,493 bytes |
-| mui                      | 7.3.2    | 22.21s     | 94,231,958 bytes  |
-| devup-ui(per-file css)   | 1.0.18   | 18.23s     | 57,440,953 bytes  |
-| devup-ui(single css)     | 1.0.18   | 18.35s     | 57,409,008 bytes  |
+| 라이브러리             | 버전   | 빌드 시간 | 빌드 사이즈       |
+| ---------------------- | ------ | --------- | ----------------- |
+| tailwindcss            | 4.1.13 | 20.22s    | 57,415,796 bytes  |
+| styleX                 | 0.15.4 | 38.97s    | 76,257,820 bytes  |
+| vanilla-extract        | 1.17.4 | 20.09s    | 59,366,237 bytes  |
+| kuma-ui                | 1.5.9  | 21.61s    | 67,422,085 bytes  |
+| panda-css              | 1.3.1  | 22.01s    | 62,431,065 bytes  |
+| chakra-ui              | 3.27.0 | 29.99s    | 210,122,493 bytes |
+| mui                    | 7.3.2  | 22.21s    | 94,231,958 bytes  |
+| devup-ui(per-file css) | 1.0.18 | 18.23s    | 57,440,953 bytes  |
+| devup-ui(single css)   | 1.0.18 | 18.35s    | 57,409,008 bytes  |
 
 ## 작동 원리
 
 Devup UI는 런타임이 필요 없는 CSS in JS 전처리기입니다.
 Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 원천적으로 제거합니다.
 모든 문법적 경우의 수를 고려하여 전처리기를 개발합니다.
 
-```typescript
-const before = <Box bg={"red"}/>
+```tsx
+const before = <Box bg="red" />
 
-const after = <div className="d0"/>
+const after = <div className="d0" />
 ```
 
 변수 사용도 완전히 지원합니다.
 
-```typescript
-const before = <Box bg={colorVariable}/>
-
-const after = <div className="d0" style={{
-    "--d0": colorVariable
-}}/>
+```tsx
+const before = <Box bg={colorVariable} />
+
+const after = (
+  <div
+    className="d0"
+    style={{
+      '--d0': colorVariable,
+    }}
+  />
+)
 ```
 
 다양한 표현식과 반응형도 모두 지원합니다.
 
-```typescript
-const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
-
-const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
-    "--d2": variable
-}}/>
+```tsx
+const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
+
+const after = (
+  <div
+    className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
+    style={{
+      '--d2': variable,
+    }}
+  />
+)
 ```
 
 타이핑이 되는 테마를 지원합니다.
@@ -133,36 +142,40 @@ const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
 }
 ```
 
-```typescript
+```tsx
 // Type Safe
-<Text color="$text"/>
+<Text color="$text" />
 ```
 
 반응형과 가상 선택자도 지원합니다.
 
 물론 동시 사용도 가능합니다.
 
-```typescript
+```tsx
 // Responsive with Selector
-const box = <Box _hover={{bg: ["red", "blue"]}}/>
+const box = <Box _hover={{ bg: ['red', 'blue'] }} />
 
 // Same
-const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
+const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
 ```
 
 ## 기여 방법
 
 ### 요구 사항
+
 - [Node.js](https://nodejs.org) (LTS 버전 권장)
 - [Rust](https://rustup.rs) 컴파일러
 - pnpm 패키지 매니저 (`npm install -g pnpm`)
 
 ### 개발 환경 설정
+
 개발 환경을 위해 아래 패키지들을 설치합니다:
+
 ```sh
 pnpm i
 pnpm build
 cargo install cargo-tarpaulin
 cargo install wasm-pack
 ```
+
 설치 후 `pnpm test`를 실행하여 문제가 없는지 확인합니다.

apps/landing/src/app/(detail)/components/[component]/bottom-sheet/Api.mdx

@@ -1 +0,0 @@
-

apps/landing/src/app/(detail)/components/[component]/bottom-sheet/index.mdx

@@ -1 +1 @@
-`Bottom Sheet` component displays content in a slide-up panel from the bottom of the screen. 
+`Bottom Sheet` component displays content in a slide-up panel from the bottom of the screen.

apps/landing/src/app/(detail)/components/[component]/button/Api.mdx

@@ -1,5 +1,6 @@
 ###### API
-`Button` props extends the button HTML attributes. 
+
+`Button` props extends the button HTML attributes.
 
 <div style={{ width: '100%', overflow: 'auto'}}>
 | Property | Description | Type | Default |

apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx

@@ -1 +0,0 @@
-

apps/landing/src/app/(detail)/components/[component]/checkbox/index.mdx

@@ -1 +1 @@
-`Checkbox` component allows users to select multiple options. 
+`Checkbox` component allows users to select multiple options.

apps/landing/src/app/(detail)/components/[component]/color-picker/Api.mdx

@@ -1 +0,0 @@
-

apps/landing/src/app/(detail)/components/[component]/color-picker/index.mdx

@@ -1 +1 @@
-`Color Picker` component allows users to select colors from a color palette. 
+`Color Picker` component allows users to select colors from a color palette.

apps/landing/src/app/(detail)/components/[component]/confirm/Api.mdx

@@ -1 +0,0 @@
-

apps/landing/src/app/(detail)/components/[component]/confirm/index.mdx

@@ -1 +1 @@
-`Confirm` component displays a confirmation dialog to users. 
+`Confirm` component displays a confirmation dialog to users.

apps/landing/src/app/(detail)/components/[component]/date-picker/Api.mdx

@@ -1 +0,0 @@
-

apps/landing/src/app/(detail)/components/[component]/date-picker/index.mdx

@@ -1 +1 @@
-`Date Picker` component allows users to select a date from a calendar interface. 
+`Date Picker` component allows users to select a date from a calendar interface.

apps/landing/src/app/(detail)/components/[component]/dropdown/Api.mdx

@@ -1 +0,0 @@
-

apps/landing/src/app/(detail)/components/[component]/dropdown/index.mdx

@@ -1 +1 @@
-`Dropdown` component displays a list of options that can be toggled. 
+`Dropdown` component displays a list of options that can be toggled.

apps/landing/src/app/(detail)/components/[component]/footer/Api.mdx

@@ -1 +0,0 @@
-

apps/landing/src/app/(detail)/components/[component]/footer/index.mdx

@@ -1 +1 @@
-`Footer` component displays the bottom section of a page. 
+`Footer` component displays the bottom section of a page.

apps/landing/src/app/(detail)/components/[component]/header/Api.mdx

@@ -1 +0,0 @@
-

apps/landing/src/app/(detail)/components/[component]/header/index.mdx

@@ -1 +1 @@
-`Header` component displays the top navigation area of a page. 
+`Header` component displays the top navigation area of a page.