refactor: JDS Checkbox 컴포넌트 vanilla-extract 마이그레이션 (#462)

* chore: @react-aria/checkbox 패키지 의존성 추가

* feat: Checkbox vanilla-extract 마이그레이션 타입 정의

* feat: Checkbox Context 정의

* fix: Checkbox 타입 최신 DS 기준으로 업데이트

* feat: labelTypographyVars CSS vars 유틸리티 추가

* fix: CheckboxContext에서 align 속성 제거

* feat: CheckboxContext에 onChildCheckedChange 콜백 추가

* feat: Checkbox vanilla-extract 스타일 작성

* refactor: checkboxSizeMap을 checkbox.variants로 분리

* refactor: Checkbox prop/타입에서 컴포넌트명 prefix 제거

* fix: Checkbox visual disabled 상태에서 인터랙션 오버레이 제거

* feat: Checkbox vanilla-extract 마이그레이션 구현체 작성

* refactor: Checkbox 스타일 satisfies/어노테이션 표기 통일

* docs: Checkbox 마이그레이션 Storybook 문서 작성

* fix: 그룹 input 요소에 ref 연결

* fix: 그룹 내 Checkbox.Basic의 value 누락 검증 추가

* refactor: Checkbox 타이포그래피를 getLabelClassName으로 통일

* refactor: Checkbox 사이즈 맵을 단일 테이블로 통합

* fix: 체크 상태 타입명을 CheckedState로 복원

* docs: Checkbox 마이그레이션 changeset 추가

* docs: changeset 제목 수정

* refactor: focus ring 억제 로직을 globalStyle에서 variant로 전환

* fix: 라벨 색상을 labelColorVar 주입으로 변경해 cascade 순서 의존 제거

# Conflicts:
#	packages/jds/src/utils/typography.css.ts

* style: ::before/::after 동일 shape를 쉼표 셀렉터로 통합

* feat: Label 클릭 시 체크박스가 토글되도록 controlId 연결

* fix: Item 내부에서 Checkbox visual 오버레이 이중 적용 제거

* fix: Checkbox.Item 클릭 영역 불일치 및 구조 수정 (#471)

* refactor: Checkbox.Item을 단일 label로 전환해 아이템 전체 토글 통일

* feat: Checkbox.Helper를 aria-describedby로 input에 연결

* fix: CheckboxItemProps 기반 타입을 label로 수정

* fix: Checkbox.Helper를 span으로 변경

* refactor: checkbox.variants.ts 제거 및 사이즈맵을 소비처로 분리

* refactor: 클래스명을 역할에 맞게 변경

* refactor: 컨텍스트를 공통 설정과 Item 내부 상태 공유 용도로 분리

* refactor: parentContext를 parentConfig로 수정

* refactor: 마이그레이션 구현체 교체 및 소비처 정리

Author: itwillbeoptimal

.changeset/checkbox-migration.md

@@ -0,0 +1,74 @@
+---
+"@jects/jds": minor
+---
+
+**Checkbox**
+
+Checkbox가 vanilla-extract 기반으로 재작성되면서 API를 Compound Component 패턴으로 재설계했습니다. 단일 컴포넌트(`Checkbox.Basic` / `Checkbox.Content`)에서 복합 컴포넌트 구조로 바뀌고, 일부 prop의 이름·값과 public 타입이 변경/제거됩니다.
+
+| AS-IS | TO-BE |
+| --- | --- |
+| `Checkbox.Basic`, `Checkbox.Content` | `Checkbox.Root`, `Checkbox.Item`, `Checkbox.Basic`, `Checkbox.Label`, `Checkbox.Helper` |
+| `Checkbox.Content`의 `label` / `subLabel` props 프리셋 | `Checkbox.Item` + `Basic` + `Label` + `Helper` 조합 |
+| `subLabel` | `Checkbox.Helper` |
+| `variant = "empty" \| "outlined"` | `variant = "hollow" \| "outlined"` |
+| `align = "left" \| "right"` | 제거 |
+| `CheckboxBasicProps`, `CheckboxBoxProps`, `CheckboxContentProps` | `CheckboxRootProps`, `CheckboxItemProps`, `CheckboxBasicProps`, `CheckboxLabelProps`, `CheckboxHelperProps` |
+| `CheckboxAlign` | 제거 |
+
+`Checkbox.Root`가 추가되었습니다. 여러 Checkbox를 그룹으로 관리하기 위한 컨테이너 컴포넌트이며, 선택된 항목은 `string[]` 형태로 관리됩니다.
+
+그룹 내에서 사용하는 `Checkbox.Basic`에는 항목을 식별하기 위한 `value` prop이 필수입니다. `value`가 누락되면 런타임 에러가 발생합니다. 단독으로 사용하는 경우에는 `value` 없이 `checked` 또는 `defaultChecked`로 상태를 제어할 수 있습니다.
+
+또한 `defaultChecked`를 통한 비제어 방식을 지원합니다. 기존의 제어 방식(`checked`)도 계속 사용할 수 있습니다.
+
+`indeterminate` 상태는 제어 모드(`checked="indeterminate"`)에서만 지원됩니다. `defaultChecked`는 `boolean` 값만 허용하므로 `indeterminate` 상태의 초기값으로 사용할 수 없습니다.
+
+이제 `invalid` 스타일은 unchecked 상태에서만 적용됩니다. checked 또는 indeterminate 상태에서는 invalid 스타일이 적용되지 않습니다.
+
+**AS-IS**
+
+```tsx
+import { Checkbox } from "@jects/jds";
+import type { CheckedState } from "@jects/jds";
+
+// 단일
+<Checkbox.Basic size='md' checked={checked} onCheckedChange={setChecked} />;
+
+// 라벨 프리셋
+<Checkbox.Content
+  size='md'
+  variant='empty'
+  align='left'
+  label='레이블'
+  subLabel='헬퍼 텍스트'
+  checked={checked}
+  onCheckedChange={setChecked}
+/>;
+```
+
+**TO-BE**
+
+```tsx
+import { Checkbox } from "@jects/jds";
+import type { CheckedState } from "@jects/jds";
+
+// 단일
+<Checkbox.Item size='md' variant='hollow'>
+  <Checkbox.Basic checked={checked} onCheckedChange={setChecked} />
+  <Checkbox.Label>레이블</Checkbox.Label>
+  <Checkbox.Helper>헬퍼 텍스트</Checkbox.Helper>
+</Checkbox.Item>;
+
+// 그룹
+<Checkbox.Root value={selected} onChange={setSelected} variant='outlined'>
+  <Checkbox.Item>
+    <Checkbox.Basic value='1' />
+    <Checkbox.Label>옵션 1</Checkbox.Label>
+  </Checkbox.Item>
+  <Checkbox.Item>
+    <Checkbox.Basic value='2' />
+    <Checkbox.Label>옵션 2</Checkbox.Label>
+  </Checkbox.Item>
+</Checkbox.Root>;
+```

package-lock.json

@@ -68,6 +68,7 @@
   },
   "dependencies": {
     "@react-aria/button": "^3.15.0",
+    "@react-aria/checkbox": "^3.17.1",
     "@react-aria/focus": "^3.22.0",
     "@react-aria/interactions": "^3.28.0",
     "@react-aria/radio": "^3.13.0",