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

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

* feat: 컨테이너 요소용 인터랙션 훅 구현

* chore: focusRing, forwardRef, overlay 유틸 export 추가

* refactor: Radio VE 마이그레이션

* fix: Radio.Item empty 탭 확장 영역 비대칭 수정 및 inset으로 단순화

* fix: Radio.Item empty 탭 영역 inset 값을 피그마 기준으로 수정

* refactor: Radio 타이포 토큰 vars 참조 교체 및 recipe defaultVariants 제거

* refactor: Radio variant 옵션 상수 분리

* fix: Radio Item inset 단위를 px에서 rem으로 수정

* refactor: 제어/비제어 모드 타입 내로잉

* refactor: radioGroup 스타일링을 VE className으로 교체

* fix: Radio.Basic 그룹에서 개별 onChange가 누락되는 문제 수정

* fix: Radio.Basic isDisabled 계산 시 상위 컨텍스트의 disabled 무시되는 문제 수정

* fix: Radio.Basic value를 필수값으로 강제

Author: itwillbeoptimal

package-lock.json

@@ -69,9 +69,11 @@
     "@react-aria/button": "^3.15.0",
     "@react-aria/focus": "^3.22.0",
     "@react-aria/interactions": "^3.28.0",
+    "@react-aria/radio": "^3.13.0",
     "@react-aria/utils": "^3.34.0",
     "clsx": "^2.1.1",
-    "radix-ui": "^1.4.3"
+    "radix-ui": "^1.4.3",
+    "react-stately": "^3.46.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",

packages/jds/package.json

@@ -9,12 +9,6 @@ const meta: Meta<typeof Radio.Item> = {
   parameters: {
     layout: "centered",
   },
-  argTypes: {
-    radioSize: {
-      control: { type: "radio" },
-      options: ["lg", "md", "sm", "xs"],
-    },
-  },
 } satisfies Meta<typeof Radio.Item>;
 
 export default meta;
@@ -40,13 +34,13 @@ export const RadioBasicDisabled: Story = {
       </FlexRow>
       <span>Radio.Root를 통해 그룹 전체를 비활성화합니다.</span>
       <FlexRow>
-        <Radio.Root disabled name='rootControl'>
+        <Radio.Root disabled defaultValue='2' name='rootControl'>
           <Radio.Item>
             <Radio.Basic value='1' />
             <Radio.Label>레이블</Radio.Label>
           </Radio.Item>
           <Radio.Item>
-            <Radio.Basic value='2' checked />
+            <Radio.Basic value='2' />
             <Radio.Label>레이블</Radio.Label>
           </Radio.Item>
         </Radio.Root>
@@ -140,7 +134,7 @@ export const RadioAlign: Story = {
   render: () => (
     <FlexColumn>
       <FlexRow style={{ alignItems: "flex-start" }}>
-        <Radio.Root radioStyle='empty' radioSize='lg' radioAlign='right' name='emptyStyle'>
+        <Radio.Root radioStyle='empty' radioSize='lg' radioAlign='right' name='emptyRight'>
           <Radio.Item>
             <Radio.Label>레이블</Radio.Label>
             <Radio.Basic value='1' />
@@ -162,7 +156,7 @@ export const RadioAlign: Story = {
         </Radio.Root>
       </FlexRow>
       <FlexRow style={{ alignItems: "flex-start" }}>
-        <Radio.Root radioStyle='outline' radioSize='lg' radioAlign='right' name='outlineStyle'>
+        <Radio.Root radioStyle='outline' radioSize='lg' radioAlign='right' name='outlineRight'>
           <Radio.Item>
             <Radio.Label>레이블</Radio.Label>
             <Radio.Basic value='1' />