From a9b39edf36c7dcc311d0f95818473623ff24f408 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Wed, 1 Oct 2025 20:12:54 +0900
Subject: [PATCH 01/25] =?UTF-8?q?feat:=20Radio(basic)=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EA=B5=AC=ED=98=84=ED=95=A9?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jds/src/components/Radio/Radio.style.ts   | 55 +++++++++++++++++++
 packages/jds/src/components/Radio/Radio.tsx   | 34 ++++++++++++
 packages/jds/src/components/Radio/index.ts    |  1 +
 .../src/components/Radio/radio.variants.ts    | 18 ++++++
 4 files changed, 108 insertions(+)
 create mode 100644 packages/jds/src/components/Radio/Radio.style.ts
 create mode 100644 packages/jds/src/components/Radio/Radio.tsx
 create mode 100644 packages/jds/src/components/Radio/index.ts
 create mode 100644 packages/jds/src/components/Radio/radio.variants.ts

diff --git a/packages/jds/src/components/Radio/Radio.style.ts b/packages/jds/src/components/Radio/Radio.style.ts
new file mode 100644
index 00000000..48fa09d6
--- /dev/null
+++ b/packages/jds/src/components/Radio/Radio.style.ts
@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+import { RadioSize } from './Radio';
+import { RADIO_SIZE } from './radio.variants';
+import { interaction, pxToRem } from 'utils';
+
+interface RadioStyledProps {
+  size: RadioSize;
+}
+
+export const RadioLabel = styled.label<RadioStyledProps>(({ theme, size }) => {
+  return {
+    display: 'inline-flex',
+    position: 'relative',
+
+    [`input[type="radio"]:checked + .visual`]: {
+      backgroundColor: theme.color.surface.static.standard,
+      border: `${RADIO_SIZE[size].border}px solid ${theme.color.accent.neutral}`,
+    },
+
+    [`input[type="radio"]:disabled + .visual`]: {
+      backgroundColor: theme.color.fill.assistive,
+      borderColor: theme.color.stroke.subtle,
+      ...interaction(theme, 'normal', 'normal', 'default', 'disabled'),
+    },
+
+    [`input[type="radio"]:focus-visible + .visual`]: {
+      boxShadow: `0 0 0 3px ${theme.color.interaction.focus}`,
+    },
+  };
+});
+
+export const RadioInput = styled.input({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  border: 0,
+  overflow: 'hidden',
+  clipPath: 'inset(50%)',
+  whiteSpace: 'nowrap',
+});
+
+export const Visual = styled.span<RadioStyledProps>(({ theme, size }) => {
+  const sizeValue = pxToRem(RADIO_SIZE[size].size);
+
+  return {
+    borderRadius: theme.scheme.desktop.radius.max,
+    width: sizeValue,
+    height: sizeValue,
+    border: `1px solid ${theme.color.stroke.alpha.assistive}`,
+    backgroundColor: theme.color.surface.shallow,
+    ...interaction(theme, 'normal', 'normal', 'default'),
+  };
+});
diff --git a/packages/jds/src/components/Radio/Radio.tsx b/packages/jds/src/components/Radio/Radio.tsx
new file mode 100644
index 00000000..0f9c551c
--- /dev/null
+++ b/packages/jds/src/components/Radio/Radio.tsx
@@ -0,0 +1,34 @@
+import { ChangeEvent, forwardRef } from 'react';
+import { RadioInput, RadioLabel, Visual } from './Radio.style';
+
+export type RadioSize = 'lg' | 'md' | 'sm' | 'xs';
+
+export interface RadioProps {
+  isChecked: boolean;
+  isDisabled?: boolean;
+  size?: RadioSize;
+  name?: string;
+  value?: string;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ size = 'md', name, value, isChecked, onChange, isDisabled = false }, ref) => {
+    return (
+      <RadioLabel size={size}>
+        <RadioInput
+          ref={ref}
+          type='radio'
+          name={name}
+          value={value}
+          checked={isChecked}
+          onChange={onChange}
+          disabled={isDisabled}
+        />
+        <Visual className='visual' aria-hidden='true' size={size} />
+      </RadioLabel>
+    );
+  },
+);
+
+Radio.displayName = 'Radio';
diff --git a/packages/jds/src/components/Radio/index.ts b/packages/jds/src/components/Radio/index.ts
new file mode 100644
index 00000000..bfbe6d09
--- /dev/null
+++ b/packages/jds/src/components/Radio/index.ts
@@ -0,0 +1 @@
+export * from './Radio';
diff --git a/packages/jds/src/components/Radio/radio.variants.ts b/packages/jds/src/components/Radio/radio.variants.ts
new file mode 100644
index 00000000..0532d94b
--- /dev/null
+++ b/packages/jds/src/components/Radio/radio.variants.ts
@@ -0,0 +1,18 @@
+export const RADIO_SIZE = {
+  lg: {
+    size: 20,
+    border: 6,
+  },
+  md: {
+    size: 18,
+    border: 5,
+  },
+  sm: {
+    size: 16,
+    border: 5,
+  },
+  xs: {
+    size: 14,
+    border: 4,
+  },
+};

From 4b32e07140ff06587096fae95edf35d4056b6f3d Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Wed, 1 Oct 2025 20:13:31 +0900
Subject: [PATCH 02/25] =?UTF-8?q?fix:=20interaction=20=ED=95=A8=EC=88=98?=
 =?UTF-8?q?=EC=97=90=20borderRadius=20inherit=20=EC=86=8D=EC=84=B1?=
 =?UTF-8?q?=EC=9D=84=20=EC=B6=94=EA=B0=80=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/utils/interaction.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/jds/src/utils/interaction.ts b/packages/jds/src/utils/interaction.ts
index c88ae0a4..106154ce 100644
--- a/packages/jds/src/utils/interaction.ts
+++ b/packages/jds/src/utils/interaction.ts
@@ -22,6 +22,7 @@ export function interaction(
       width: '100%',
       height: '100%',
       backgroundColor: backgroundColor,
+      borderRadius: 'inherit',
     };
 
     if (state === 'locked') {

From 207c47b66031a3b73bd07b804a677757e295b474 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Wed, 1 Oct 2025 20:13:47 +0900
Subject: [PATCH 03/25] =?UTF-8?q?docs:=20Radio(basic)=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81?=
 =?UTF-8?q?=EC=9D=84=20=EC=9E=91=EC=84=B1=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Radio/Radio.stories.tsx    | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 packages/jds/src/components/Radio/Radio.stories.tsx

diff --git a/packages/jds/src/components/Radio/Radio.stories.tsx b/packages/jds/src/components/Radio/Radio.stories.tsx
new file mode 100644
index 00000000..0bc01577
--- /dev/null
+++ b/packages/jds/src/components/Radio/Radio.stories.tsx
@@ -0,0 +1,68 @@
+// Radio.stories.tsx
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Radio, RadioProps, RadioSize } from './Radio';
+
+const meta: Meta<typeof Radio> = {
+  title: 'Components/Radio',
+  component: Radio,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: { type: 'radio' },
+      options: ['lg', 'md', 'sm', 'xs'],
+    },
+    isChecked: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    name: { control: 'text' },
+    value: { control: 'text' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {
+  args: {
+    size: 'lg',
+    isChecked: false,
+    isDisabled: false,
+    name: 'defaultRadio',
+    value: '1',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => {
+    const [checkedSize, setCheckedSize] = useState<RadioSize | undefined>('md');
+
+    const sizes: RadioProps['size'][] = ['lg', 'md', 'sm', 'xs'];
+
+    return (
+      <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
+        {sizes.map(size => (
+          <Radio
+            key={size}
+            size={size}
+            name='sizeGroup'
+            value={size}
+            isChecked={checkedSize === size}
+            onChange={() => setCheckedSize(size)}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 20 }}>
+      <Radio size='md' name='disabledGroup' value='2' isChecked={false} isDisabled={true} />
+      <Radio size='md' name='disabledGroup' value='1' isChecked={true} isDisabled={true} />
+    </div>
+  ),
+};

From 17ea064bdeea116476e4798ec1f05bd84c5a8a5a Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Thu, 2 Oct 2025 19:19:54 +0900
Subject: [PATCH 04/25] =?UTF-8?q?refactor:=20Radio=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20ComponentPropsWithoutRef?=
 =?UTF-8?q?=EB=A5=BC=20=ED=99=95=EC=9E=A5=ED=95=98=EC=97=AC=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=ED=95=A9=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

isChecked -> props의 checked 사용
isDisabled -> props의 disabled 사용
---
 .../src/components/Radio/Radio.stories.tsx    | 30 +++++++------------
 .../jds/src/components/Radio/Radio.style.ts   | 10 +++----
 packages/jds/src/components/Radio/Radio.tsx   | 27 +++++------------
 .../src/components/Radio/radio.variants.ts    |  8 ++---
 4 files changed, 27 insertions(+), 48 deletions(-)

diff --git a/packages/jds/src/components/Radio/Radio.stories.tsx b/packages/jds/src/components/Radio/Radio.stories.tsx
index 0bc01577..53046b4a 100644
--- a/packages/jds/src/components/Radio/Radio.stories.tsx
+++ b/packages/jds/src/components/Radio/Radio.stories.tsx
@@ -10,14 +10,10 @@ const meta: Meta<typeof Radio> = {
     layout: 'centered',
   },
   argTypes: {
-    size: {
+    radioSize: {
       control: { type: 'radio' },
       options: ['lg', 'md', 'sm', 'xs'],
     },
-    isChecked: { control: 'boolean' },
-    isDisabled: { control: 'boolean' },
-    name: { control: 'text' },
-    value: { control: 'text' },
   },
 };
 
@@ -27,11 +23,7 @@ type Story = StoryObj<typeof Radio>;
 
 export const Default: Story = {
   args: {
-    size: 'lg',
-    isChecked: false,
-    isDisabled: false,
-    name: 'defaultRadio',
-    value: '1',
+    radioSize: 'lg',
   },
 };
 
@@ -39,18 +31,18 @@ export const Sizes: Story = {
   render: () => {
     const [checkedSize, setCheckedSize] = useState<RadioSize | undefined>('md');
 
-    const sizes: RadioProps['size'][] = ['lg', 'md', 'sm', 'xs'];
+    const sizes: RadioProps['radioSize'][] = ['lg', 'md', 'sm', 'xs'];
 
     return (
       <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
-        {sizes.map(size => (
+        {sizes.map(radioSize => (
           <Radio
-            key={size}
-            size={size}
+            key={radioSize}
+            radioSize={radioSize}
             name='sizeGroup'
-            value={size}
-            isChecked={checkedSize === size}
-            onChange={() => setCheckedSize(size)}
+            value={radioSize}
+            checked={checkedSize === radioSize}
+            onChange={() => setCheckedSize(radioSize)}
           />
         ))}
       </div>
@@ -61,8 +53,8 @@ export const Sizes: Story = {
 export const Disabled: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: 20 }}>
-      <Radio size='md' name='disabledGroup' value='2' isChecked={false} isDisabled={true} />
-      <Radio size='md' name='disabledGroup' value='1' isChecked={true} isDisabled={true} />
+      <Radio radioSize='md' name='disabledGroup' value='2' checked={false} disabled={true} />
+      <Radio radioSize='md' name='disabledGroup' value='1' checked={true} disabled={true} />
     </div>
   ),
 };
diff --git a/packages/jds/src/components/Radio/Radio.style.ts b/packages/jds/src/components/Radio/Radio.style.ts
index 48fa09d6..8d82e686 100644
--- a/packages/jds/src/components/Radio/Radio.style.ts
+++ b/packages/jds/src/components/Radio/Radio.style.ts
@@ -4,17 +4,17 @@ import { RADIO_SIZE } from './radio.variants';
 import { interaction, pxToRem } from 'utils';
 
 interface RadioStyledProps {
-  size: RadioSize;
+  radioSize: RadioSize;
 }
 
-export const RadioLabel = styled.label<RadioStyledProps>(({ theme, size }) => {
+export const RadioLabel = styled.label<RadioStyledProps>(({ theme, radioSize }) => {
   return {
     display: 'inline-flex',
     position: 'relative',
 
     [`input[type="radio"]:checked + .visual`]: {
       backgroundColor: theme.color.surface.static.standard,
-      border: `${RADIO_SIZE[size].border}px solid ${theme.color.accent.neutral}`,
+      border: `${RADIO_SIZE[radioSize].border}px solid ${theme.color.accent.neutral}`,
     },
 
     [`input[type="radio"]:disabled + .visual`]: {
@@ -41,8 +41,8 @@ export const RadioInput = styled.input({
   whiteSpace: 'nowrap',
 });
 
-export const Visual = styled.span<RadioStyledProps>(({ theme, size }) => {
-  const sizeValue = pxToRem(RADIO_SIZE[size].size);
+export const Visual = styled.span<RadioStyledProps>(({ theme, radioSize }) => {
+  const sizeValue = pxToRem(RADIO_SIZE[radioSize].radioSize);
 
   return {
     borderRadius: theme.scheme.desktop.radius.max,
diff --git a/packages/jds/src/components/Radio/Radio.tsx b/packages/jds/src/components/Radio/Radio.tsx
index 0f9c551c..5511dd2b 100644
--- a/packages/jds/src/components/Radio/Radio.tsx
+++ b/packages/jds/src/components/Radio/Radio.tsx
@@ -1,31 +1,18 @@
-import { ChangeEvent, forwardRef } from 'react';
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
 import { RadioInput, RadioLabel, Visual } from './Radio.style';
 
 export type RadioSize = 'lg' | 'md' | 'sm' | 'xs';
 
-export interface RadioProps {
-  isChecked: boolean;
-  isDisabled?: boolean;
-  size?: RadioSize;
-  name?: string;
-  value?: string;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+export interface RadioProps extends ComponentPropsWithoutRef<'input'> {
+  radioSize?: RadioSize;
 }
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ size = 'md', name, value, isChecked, onChange, isDisabled = false }, ref) => {
+  ({ radioSize = 'md', ...props }, ref) => {
     return (
-      <RadioLabel size={size}>
-        <RadioInput
-          ref={ref}
-          type='radio'
-          name={name}
-          value={value}
-          checked={isChecked}
-          onChange={onChange}
-          disabled={isDisabled}
-        />
-        <Visual className='visual' aria-hidden='true' size={size} />
+      <RadioLabel radioSize={radioSize}>
+        <RadioInput ref={ref} type='radio' {...props} />
+        <Visual className='visual' aria-hidden='true' radioSize={radioSize} />
       </RadioLabel>
     );
   },
diff --git a/packages/jds/src/components/Radio/radio.variants.ts b/packages/jds/src/components/Radio/radio.variants.ts
index 0532d94b..8c594fbf 100644
--- a/packages/jds/src/components/Radio/radio.variants.ts
+++ b/packages/jds/src/components/Radio/radio.variants.ts
@@ -1,18 +1,18 @@
 export const RADIO_SIZE = {
   lg: {
-    size: 20,
+    radioSize: 20,
     border: 6,
   },
   md: {
-    size: 18,
+    radioSize: 18,
     border: 5,
   },
   sm: {
-    size: 16,
+    radioSize: 16,
     border: 5,
   },
   xs: {
-    size: 14,
+    radioSize: 14,
     border: 4,
   },
 };

From 4b0271f0913763d77f43aba3e1afd7fd443eb233 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Thu, 2 Oct 2025 22:15:26 +0900
Subject: [PATCH 05/25] =?UTF-8?q?move:=20Radio=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A5=BC=20radioBasic=20=ED=8F=B4=EB=8D=94?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Radio/index.ts                      | 2 +-
 .../jds/src/components/Radio/{ => radioBasic}/Radio.stories.tsx | 1 -
 .../jds/src/components/Radio/{ => radioBasic}/Radio.style.ts    | 0
 packages/jds/src/components/Radio/{ => radioBasic}/Radio.tsx    | 0
 .../jds/src/components/Radio/{ => radioBasic}/radio.variants.ts | 0
 5 files changed, 1 insertion(+), 2 deletions(-)
 rename packages/jds/src/components/Radio/{ => radioBasic}/Radio.stories.tsx (98%)
 rename packages/jds/src/components/Radio/{ => radioBasic}/Radio.style.ts (100%)
 rename packages/jds/src/components/Radio/{ => radioBasic}/Radio.tsx (100%)
 rename packages/jds/src/components/Radio/{ => radioBasic}/radio.variants.ts (100%)

diff --git a/packages/jds/src/components/Radio/index.ts b/packages/jds/src/components/Radio/index.ts
index bfbe6d09..f8bfb960 100644
--- a/packages/jds/src/components/Radio/index.ts
+++ b/packages/jds/src/components/Radio/index.ts
@@ -1 +1 @@
-export * from './Radio';
+export * from './radioBasic/Radio';
diff --git a/packages/jds/src/components/Radio/Radio.stories.tsx b/packages/jds/src/components/Radio/radioBasic/Radio.stories.tsx
similarity index 98%
rename from packages/jds/src/components/Radio/Radio.stories.tsx
rename to packages/jds/src/components/Radio/radioBasic/Radio.stories.tsx
index 53046b4a..0955426c 100644
--- a/packages/jds/src/components/Radio/Radio.stories.tsx
+++ b/packages/jds/src/components/Radio/radioBasic/Radio.stories.tsx
@@ -1,4 +1,3 @@
-// Radio.stories.tsx
 import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { Radio, RadioProps, RadioSize } from './Radio';
diff --git a/packages/jds/src/components/Radio/Radio.style.ts b/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
similarity index 100%
rename from packages/jds/src/components/Radio/Radio.style.ts
rename to packages/jds/src/components/Radio/radioBasic/Radio.style.ts
diff --git a/packages/jds/src/components/Radio/Radio.tsx b/packages/jds/src/components/Radio/radioBasic/Radio.tsx
similarity index 100%
rename from packages/jds/src/components/Radio/Radio.tsx
rename to packages/jds/src/components/Radio/radioBasic/Radio.tsx
diff --git a/packages/jds/src/components/Radio/radio.variants.ts b/packages/jds/src/components/Radio/radioBasic/radio.variants.ts
similarity index 100%
rename from packages/jds/src/components/Radio/radio.variants.ts
rename to packages/jds/src/components/Radio/radioBasic/radio.variants.ts

From 12c73cdb5b8078fb69d18e67f143040ded1286fc Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Thu, 2 Oct 2025 22:25:35 +0900
Subject: [PATCH 06/25] =?UTF-8?q?feat:=20RadioContent(empty,=20left,=20non?=
 =?UTF-8?q?-checked)=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=EC=9D=84=20=EA=B5=AC=ED=98=84=ED=95=A9?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../radioContent/RadioContent.stories.tsx     | 34 ++++++++++++
 .../Radio/radioContent/RadioContent.style.ts  | 55 +++++++++++++++++++
 .../Radio/radioContent/RadioContent.tsx       | 55 +++++++++++++++++++
 .../radioContent/radioContent.variants.ts     | 16 ++++++
 4 files changed, 160 insertions(+)
 create mode 100644 packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
 create mode 100644 packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
 create mode 100644 packages/jds/src/components/Radio/radioContent/RadioContent.tsx
 create mode 100644 packages/jds/src/components/Radio/radioContent/radioContent.variants.ts

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
new file mode 100644
index 00000000..c7767d75
--- /dev/null
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { RadioContent } from './RadioContent';
+
+const meta: Meta<typeof RadioContent> = {
+  title: 'Components/RadioContent',
+  component: RadioContent,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    radioSize: {
+      control: { type: 'radio' },
+      options: ['lg', 'md', 'sm', 'xs'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioContent>;
+
+export const Default: Story = {
+  args: {
+    radioSize: 'lg',
+    radioStyle: 'empty',
+    align: 'left',
+    isChecked: false,
+    isDisabled: false,
+    subLabelVisible: false,
+    subLabel: '',
+    children: '레이블',
+  },
+};
diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
new file mode 100644
index 00000000..fc953710
--- /dev/null
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+import { RadioSize } from './RadioContent';
+import { interaction, pxToRem } from 'utils';
+import { RADIO_CONTAINER_SIZE } from './radioContent.variants';
+
+interface RadioContainerProps {
+  radioSize: RadioSize;
+  isDisabled: boolean;
+}
+
+export const RadioContainer = styled.div<RadioContainerProps>(
+  ({ theme, isDisabled, radioSize }) => {
+    const gap = pxToRem(RADIO_CONTAINER_SIZE(theme)[radioSize].gap);
+    const interactionStyles = interaction(
+      theme,
+      'normal',
+      'normal',
+      'default',
+      isDisabled ? 'disabled' : 'default',
+    );
+
+    return {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap,
+      ...interactionStyles,
+
+      '::after': {
+        ...interactionStyles['::after'],
+        transform: 'scale(1.175, 1.33)',
+        borderRadius: theme.scheme.desktop.radius[6],
+        pointerEvents: 'none',
+      },
+
+      '&:not(:active):hover::after': {
+        ...interactionStyles['&:hover::after'],
+        transition: `transform ${theme.environment.duration[100]}ms ${theme.environment.motion.fluent}, opacity ${theme.environment.duration[500]}ms ${theme.environment.motion.fluent}`,
+      },
+
+      '&:has(input[type="radio"]:focus-visible)::before': {
+        content: '""',
+        position: 'absolute',
+        inset: 0,
+        borderRadius: theme.scheme.desktop.radius[6],
+        transform: 'scale(1.175, 1.33)',
+        boxShadow: `0 0 0 3px ${theme.color.interaction.focus}`,
+      },
+
+      [`input[type="radio"]:focus-visible + .visual`]: {
+        boxShadow: 'none !important',
+      },
+    };
+  },
+);
diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
new file mode 100644
index 00000000..92d8b638
--- /dev/null
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
@@ -0,0 +1,55 @@
+import { forwardRef, ReactNode } from 'react';
+import { Radio, RadioProps } from '../radioBasic/Radio';
+import { Label } from '@/components/Label';
+import { RadioContainer } from './RadioContent.style';
+import { useTheme } from 'theme';
+
+export type RadioSize = 'lg' | 'md' | 'sm' | 'xs';
+
+export interface RadioContentProps extends RadioProps {
+  radioStyle?: 'empty' | 'outline';
+  align?: 'left' | 'right';
+  isChecked?: boolean;
+  isDisabled?: boolean;
+  subLabelVisible?: boolean;
+  subLabel?: ReactNode;
+  children: ReactNode;
+}
+
+export const RadioContent = forwardRef<HTMLInputElement, RadioContentProps>(
+  (
+    {
+      radioSize = 'md',
+      radioStyle = 'empty',
+      align = 'left',
+      isChecked = false,
+      isDisabled = false,
+      subLabelVisible = false,
+      subLabel = '',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const theme = useTheme();
+    const labelColor = isDisabled ? theme.color.object.subtle : theme.color.object.bold;
+
+    return (
+      <RadioContainer radioSize={radioSize} isDisabled={isDisabled}>
+        <Radio
+          ref={ref}
+          radioSize={radioSize}
+          checked={isChecked}
+          disabled={isDisabled}
+          {...props}
+        />
+        <Label size={radioSize} textAlign='left' weight='normal' color={labelColor}>
+          {children}
+        </Label>
+        {/* <Label>{children}</Label> */}
+      </RadioContainer>
+    );
+  },
+);
+
+RadioContent.displayName = 'RadioContent';
diff --git a/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts b/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
new file mode 100644
index 00000000..33c38358
--- /dev/null
+++ b/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
@@ -0,0 +1,16 @@
+import { Theme } from '@emotion/react';
+
+export const RADIO_CONTAINER_SIZE = (theme: Theme) => ({
+  lg: {
+    gap: theme.scheme.desktop.spacing[12],
+  },
+  md: {
+    gap: theme.scheme.desktop.spacing[10],
+  },
+  sm: {
+    gap: theme.scheme.desktop.spacing[8],
+  },
+  xs: {
+    gap: theme.scheme.desktop.spacing[8],
+  },
+});

From 27d75c0791195c01475fc2b460829030023c1c8e Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Fri, 3 Oct 2025 15:42:24 +0900
Subject: [PATCH 07/25] =?UTF-8?q?fix:=20Radio(basic)=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20checked,=20disabled=20?=
 =?UTF-8?q?=EC=A1=B0=EA=B1=B4=20=EC=97=AC=EB=B6=80=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=A5=B8=20=EC=83=89=EC=83=81=EC=9D=84=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Radio/radioBasic/Radio.style.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioBasic/Radio.style.ts b/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
index 8d82e686..5428c5ea 100644
--- a/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
+++ b/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
@@ -12,14 +12,20 @@ export const RadioLabel = styled.label<RadioStyledProps>(({ theme, radioSize })
     display: 'inline-flex',
     position: 'relative',
 
-    [`input[type="radio"]:checked + .visual`]: {
+    [`input[type="radio"]:not(:disabled):checked + .visual`]: {
       backgroundColor: theme.color.surface.static.standard,
       border: `${RADIO_SIZE[radioSize].border}px solid ${theme.color.accent.neutral}`,
     },
 
-    [`input[type="radio"]:disabled + .visual`]: {
-      backgroundColor: theme.color.fill.assistive,
-      borderColor: theme.color.stroke.subtle,
+    [`input[type="radio"]:not(:checked):disabled + .visual`]: {
+      backgroundColor: theme.color.surface.standard,
+      borderColor: theme.color.stroke.alpha.subtler,
+      ...interaction(theme, 'normal', 'normal', 'default', 'disabled'),
+    },
+
+    [`input[type="radio"]:checked:disabled + .visual`]: {
+      backgroundColor: theme.color.fill.subtle,
+      border: `${RADIO_SIZE[radioSize].border}px solid ${theme.color.stroke.subtler}`,
       ...interaction(theme, 'normal', 'normal', 'default', 'disabled'),
     },
 

From 576b1bdd11b4c864c04f4e702cd288be12c05230 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Fri, 3 Oct 2025 15:43:00 +0900
Subject: [PATCH 08/25] =?UTF-8?q?docs:=20Radio(basic)=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=20checked=20=EC=8A=A4=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=EB=A5=BC=20=EC=9E=91=EC=84=B1=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Radio/radioBasic/Radio.stories.tsx        | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioBasic/Radio.stories.tsx b/packages/jds/src/components/Radio/radioBasic/Radio.stories.tsx
index 0955426c..43a8d865 100644
--- a/packages/jds/src/components/Radio/radioBasic/Radio.stories.tsx
+++ b/packages/jds/src/components/Radio/radioBasic/Radio.stories.tsx
@@ -26,6 +26,19 @@ export const Default: Story = {
   },
 };
 
+export const Checked: Story = {
+  render: () => <Radio radioSize='md' name='disabledGroup' value='1' checked={true} />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 20 }}>
+      <Radio radioSize='md' name='disabledGroup' value='2' checked={false} disabled={true} />
+      <Radio radioSize='md' name='disabledGroup' value='1' checked={true} disabled={true} />
+    </div>
+  ),
+};
+
 export const Sizes: Story = {
   render: () => {
     const [checkedSize, setCheckedSize] = useState<RadioSize | undefined>('md');
@@ -48,12 +61,3 @@ export const Sizes: Story = {
     );
   },
 };
-
-export const Disabled: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: 20 }}>
-      <Radio radioSize='md' name='disabledGroup' value='2' checked={false} disabled={true} />
-      <Radio radioSize='md' name='disabledGroup' value='1' checked={true} disabled={true} />
-    </div>
-  ),
-};

From 9869c917a68d617ba6b6728da035d4ad8ed39252 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Fri, 3 Oct 2025 15:44:12 +0900
Subject: [PATCH 09/25] =?UTF-8?q?feat:=20RadioContent=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20(empty,=20left,=20checked)=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=EC=9D=84=20=EA=B5=AC=ED=98=84=ED=95=A9?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Radio/radioContent/RadioContent.style.ts    | 17 +++++++++++++----
 .../Radio/radioContent/RadioContent.tsx         | 10 ++++++++--
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
index fc953710..aa243497 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
@@ -16,7 +16,7 @@ export const RadioContainer = styled.div<RadioContainerProps>(
       'normal',
       'normal',
       'default',
-      isDisabled ? 'disabled' : 'default',
+      isDisabled ? 'readonly' : 'default',
     );
 
     return {
@@ -24,25 +24,34 @@ export const RadioContainer = styled.div<RadioContainerProps>(
       justifyContent: 'center',
       alignItems: 'center',
       gap,
+      borderRadius: theme.scheme.desktop.radius[6],
       ...interactionStyles,
 
+      [`&:has(input[type="radio"]:checked)`]: {
+        ...interaction(
+          theme,
+          'accent',
+          'assistive',
+          'default',
+          isDisabled ? 'readonly' : 'default',
+        ),
+      },
+
       '::after': {
         ...interactionStyles['::after'],
         transform: 'scale(1.175, 1.33)',
-        borderRadius: theme.scheme.desktop.radius[6],
         pointerEvents: 'none',
       },
 
       '&:not(:active):hover::after': {
         ...interactionStyles['&:hover::after'],
-        transition: `transform ${theme.environment.duration[100]}ms ${theme.environment.motion.fluent}, opacity ${theme.environment.duration[500]}ms ${theme.environment.motion.fluent}`,
+        transition: `transform ${theme.environment.duration[100]}ms ${theme.environment.motion.fluent}, opacity ${theme.environment.duration[100]}ms ${theme.environment.motion.fluent}`,
       },
 
       '&:has(input[type="radio"]:focus-visible)::before': {
         content: '""',
         position: 'absolute',
         inset: 0,
-        borderRadius: theme.scheme.desktop.radius[6],
         transform: 'scale(1.175, 1.33)',
         boxShadow: `0 0 0 3px ${theme.color.interaction.focus}`,
       },
diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
index 92d8b638..b508154d 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode } from 'react';
+import { forwardRef, ReactNode, useEffect, useState } from 'react';
 import { Radio, RadioProps } from '../radioBasic/Radio';
 import { Label } from '@/components/Label';
 import { RadioContainer } from './RadioContent.style';
@@ -31,16 +31,22 @@ export const RadioContent = forwardRef<HTMLInputElement, RadioContentProps>(
     },
     ref,
   ) => {
+    const [checked, setChecked] = useState(false);
     const theme = useTheme();
     const labelColor = isDisabled ? theme.color.object.subtle : theme.color.object.bold;
 
+    useEffect(() => {
+      setChecked(isChecked);
+    }, [isChecked]);
+
     return (
       <RadioContainer radioSize={radioSize} isDisabled={isDisabled}>
         <Radio
           ref={ref}
           radioSize={radioSize}
-          checked={isChecked}
+          checked={checked}
           disabled={isDisabled}
+          onChange={e => setChecked(e.target.checked)}
           {...props}
         />
         <Label size={radioSize} textAlign='left' weight='normal' color={labelColor}>

From 47e3cc6db711ab405aaf06e55bf02f23654820e0 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Fri, 3 Oct 2025 21:17:18 +0900
Subject: [PATCH 10/25] =?UTF-8?q?feat:=20RadioContent=EC=97=90=20left,=20r?=
 =?UTF-8?q?ight=20=EC=86=8D=EC=84=B1=EC=97=90=20=EB=94=B0=EB=A5=B8=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EB=B8=94=20=EC=9C=84=EC=B9=98,=20=EC=84=9C?=
 =?UTF-8?q?=EB=B8=8C=20=EB=A0=88=EC=9D=B4=EB=B8=94=EC=9D=84=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Radio/radioContent/RadioContent.style.ts  | 79 ++++++++++++-------
 .../Radio/radioContent/RadioContent.tsx       | 53 +++++++------
 .../radioContent/radioContent.variants.ts     | 31 ++++++--
 3 files changed, 101 insertions(+), 62 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
index aa243497..a4f74f0a 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
@@ -1,17 +1,25 @@
 import styled from '@emotion/styled';
-import { RadioSize } from './RadioContent';
-import { interaction, pxToRem } from 'utils';
-import { RADIO_CONTAINER_SIZE } from './radioContent.variants';
+import { interaction } from 'utils';
+import { RADIO_CONTAINER_SIZE, RadioSize } from './radioContent.variants';
 
 interface RadioContainerProps {
   radioSize: RadioSize;
   isDisabled: boolean;
 }
 
-export const RadioContainer = styled.div<RadioContainerProps>(
+export const RadioContainer = styled.label<RadioContainerProps>(
   ({ theme, isDisabled, radioSize }) => {
-    const gap = pxToRem(RADIO_CONTAINER_SIZE(theme)[radioSize].gap);
-    const interactionStyles = interaction(
+    const rowGap = RADIO_CONTAINER_SIZE[radioSize].gap;
+    const interactionWidth = RADIO_CONTAINER_SIZE[radioSize].width;
+    const interactionHeight = RADIO_CONTAINER_SIZE[radioSize].height;
+    const checkedInteraction = interaction(
+      theme,
+      'accent',
+      'assistive',
+      'default',
+      isDisabled ? 'readonly' : 'default',
+    );
+    const nonCheckedInteraction = interaction(
       theme,
       'normal',
       'normal',
@@ -20,43 +28,56 @@ export const RadioContainer = styled.div<RadioContainerProps>(
     );
 
     return {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap,
+      display: 'grid',
+      gridTemplateColumns: 'auto 1fr',
+      gap: `6px ${rowGap}px `,
+      '& > :nth-child(1)': {
+        gridColumn: 1,
+        gridRow: 1,
+        justifyItems: 'center',
+        alignItems: 'center',
+      },
+      '& > :nth-child(2)': { gridColumn: 2, gridRow: 1 },
+      '& > :nth-child(3)': { gridColumn: 2, gridRow: 2 },
       borderRadius: theme.scheme.desktop.radius[6],
-      ...interactionStyles,
+      cursor: isDisabled ? 'default' : 'pointer',
+      '& *': { cursor: 'inherit' },
+      ...nonCheckedInteraction,
 
-      [`&:has(input[type="radio"]:checked)`]: {
-        ...interaction(
-          theme,
-          'accent',
-          'assistive',
-          'default',
-          isDisabled ? 'readonly' : 'default',
-        ),
+      '::after': {
+        ...nonCheckedInteraction['::after'],
+        width: `calc(100% + ${interactionWidth}px)`,
+        height: `calc(100% + ${interactionHeight}px)`,
+        transform: `translate(-${Math.floor(interactionWidth / 2) + 1}px , -${Math.floor(interactionHeight / 2)}px)`,
+        transition: `all ${theme.environment.duration[100]}ms ${theme.environment.motion.fluent}`,
       },
 
-      '::after': {
-        ...interactionStyles['::after'],
-        transform: 'scale(1.175, 1.33)',
-        pointerEvents: 'none',
+      '&:active::after': {
+        ...nonCheckedInteraction['&:active::after'],
+        transition: 'none',
       },
 
-      '&:not(:active):hover::after': {
-        ...interactionStyles['&:hover::after'],
-        transition: `transform ${theme.environment.duration[100]}ms ${theme.environment.motion.fluent}, opacity ${theme.environment.duration[100]}ms ${theme.environment.motion.fluent}`,
+      '&:has(input[type="radio"]:checked)': {
+        ...checkedInteraction,
+        '::after': {
+          ...checkedInteraction['::after'],
+          width: `calc(100% + ${interactionWidth}px)`,
+          height: `calc(100% + ${interactionHeight}px)`,
+        },
       },
 
       '&:has(input[type="radio"]:focus-visible)::before': {
+        boxShadow: `0 0 0 3px ${theme.color.interaction.focus}`,
         content: '""',
         position: 'absolute',
         inset: 0,
-        transform: 'scale(1.175, 1.33)',
-        boxShadow: `0 0 0 3px ${theme.color.interaction.focus}`,
+        width: `calc(100% + ${interactionWidth}px)`,
+        height: `calc(100% + ${interactionHeight}px)`,
+        transform: `translate(-${Math.floor(interactionWidth / 2) + 1}px , -${Math.floor(interactionHeight / 2)}px)`,
+        borderRadius: theme.scheme.desktop.radius[6],
       },
 
-      [`input[type="radio"]:focus-visible + .visual`]: {
+      'input[type="radio"]:focus-visible + .visual': {
         boxShadow: 'none !important',
       },
     };
diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
index b508154d..59036000 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
@@ -1,16 +1,13 @@
-import { forwardRef, ReactNode, useEffect, useState } from 'react';
+import { forwardRef, ReactNode } from 'react';
 import { Radio, RadioProps } from '../radioBasic/Radio';
 import { Label } from '@/components/Label';
 import { RadioContainer } from './RadioContent.style';
 import { useTheme } from 'theme';
 
-export type RadioSize = 'lg' | 'md' | 'sm' | 'xs';
-
 export interface RadioContentProps extends RadioProps {
   radioStyle?: 'empty' | 'outline';
   align?: 'left' | 'right';
-  isChecked?: boolean;
-  isDisabled?: boolean;
+  disabled?: boolean;
   subLabelVisible?: boolean;
   subLabel?: ReactNode;
   children: ReactNode;
@@ -22,8 +19,7 @@ export const RadioContent = forwardRef<HTMLInputElement, RadioContentProps>(
       radioSize = 'md',
       radioStyle = 'empty',
       align = 'left',
-      isChecked = false,
-      isDisabled = false,
+      disabled = false,
       subLabelVisible = false,
       subLabel = '',
       children,
@@ -31,28 +27,33 @@ export const RadioContent = forwardRef<HTMLInputElement, RadioContentProps>(
     },
     ref,
   ) => {
-    const [checked, setChecked] = useState(false);
     const theme = useTheme();
-    const labelColor = isDisabled ? theme.color.object.subtle : theme.color.object.bold;
-
-    useEffect(() => {
-      setChecked(isChecked);
-    }, [isChecked]);
+    const labelColor = disabled ? theme.color.object.subtle : theme.color.object.bold;
+    const subLabelColor = disabled ? theme.color.object.subtle : theme.color.object.assistive;
 
     return (
-      <RadioContainer radioSize={radioSize} isDisabled={isDisabled}>
-        <Radio
-          ref={ref}
-          radioSize={radioSize}
-          checked={checked}
-          disabled={isDisabled}
-          onChange={e => setChecked(e.target.checked)}
-          {...props}
-        />
-        <Label size={radioSize} textAlign='left' weight='normal' color={labelColor}>
-          {children}
-        </Label>
-        {/* <Label>{children}</Label> */}
+      <RadioContainer radioSize={radioSize} isDisabled={disabled}>
+        {align === 'right' && (
+          <Label size={radioSize} textAlign='left' weight='normal' color={labelColor}>
+            {children}
+          </Label>
+        )}
+        <Radio ref={ref} radioSize={radioSize} disabled={disabled} {...props} />
+        {align === 'left' && (
+          <Label size={radioSize} textAlign='left' weight='normal' color={labelColor}>
+            {children}
+          </Label>
+        )}
+        {subLabelVisible && (
+          <Label
+            size={SUB_LABEL_SIZE[radioSize]}
+            textAlign='left'
+            weight='subtle'
+            color={subLabelColor}
+          >
+            {subLabel}
+          </Label>
+        )}
       </RadioContainer>
     );
   },
diff --git a/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts b/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
index 33c38358..83ae3272 100644
--- a/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
+++ b/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
@@ -1,16 +1,33 @@
-import { Theme } from '@emotion/react';
+import { LabelSize } from '@/components/Label/Label.style';
 
-export const RADIO_CONTAINER_SIZE = (theme: Theme) => ({
+export type RadioSize = 'lg' | 'md' | 'sm' | 'xs';
+
+export const RADIO_CONTAINER_SIZE = {
   lg: {
-    gap: theme.scheme.desktop.spacing[12],
+    width: 13,
+    height: 8,
+    gap: 12,
   },
   md: {
-    gap: theme.scheme.desktop.spacing[10],
+    width: 13,
+    height: 8,
+    gap: 10,
   },
   sm: {
-    gap: theme.scheme.desktop.spacing[8],
+    width: 11,
+    height: 6,
+    gap: 8,
   },
   xs: {
-    gap: theme.scheme.desktop.spacing[8],
+    width: 9,
+    height: 6,
+    gap: 8,
   },
-});
+};
+
+export const SUB_LABEL_SIZE: Record<RadioSize, LabelSize> = {
+  lg: 'md',
+  md: 'sm',
+  sm: 'xs',
+  xs: 'sm',
+};

From 61a8cfc790fed4149e003d35f4adf3534bb27d84 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Fri, 3 Oct 2025 21:18:07 +0900
Subject: [PATCH 11/25] =?UTF-8?q?fix:=20SUB=5FLABEL=5FSIZE=20=EC=9E=84?=
 =?UTF-8?q?=ED=8F=AC=ED=8A=B8=20=EA=B2=BD=EB=A1=9C=EB=A1=9C=20=EC=9D=B8?=
 =?UTF-8?q?=ED=95=9C=20=EB=B2=84=EA=B7=B8=EB=A5=BC=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Radio/radioContent/RadioContent.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
index 59036000..829c86e5 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
@@ -3,6 +3,7 @@ import { Radio, RadioProps } from '../radioBasic/Radio';
 import { Label } from '@/components/Label';
 import { RadioContainer } from './RadioContent.style';
 import { useTheme } from 'theme';
+import { SUB_LABEL_SIZE } from './radioContent.variants';
 
 export interface RadioContentProps extends RadioProps {
   radioStyle?: 'empty' | 'outline';

From 1181295e54e3a31b77d02f1f63f4e10ecc5df09f Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Fri, 3 Oct 2025 21:32:06 +0900
Subject: [PATCH 12/25] =?UTF-8?q?fix:=20align=EC=9D=B4=20right=EC=9D=BC=20?=
 =?UTF-8?q?=EB=95=8C=EC=9D=98=20=EC=84=9C=EB=B8=8C=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=94=20=EC=9C=84=EC=B9=98=EB=A5=BC=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Radio/radioContent/RadioContent.style.ts        | 13 ++++++++++---
 .../components/Radio/radioContent/RadioContent.tsx  |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
index a4f74f0a..8d1ab56e 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
@@ -5,10 +5,11 @@ import { RADIO_CONTAINER_SIZE, RadioSize } from './radioContent.variants';
 interface RadioContainerProps {
   radioSize: RadioSize;
   isDisabled: boolean;
+  isAlignRight: boolean;
 }
 
 export const RadioContainer = styled.label<RadioContainerProps>(
-  ({ theme, isDisabled, radioSize }) => {
+  ({ theme, radioSize, isDisabled, isAlignRight }) => {
     const rowGap = RADIO_CONTAINER_SIZE[radioSize].gap;
     const interactionWidth = RADIO_CONTAINER_SIZE[radioSize].width;
     const interactionHeight = RADIO_CONTAINER_SIZE[radioSize].height;
@@ -37,8 +38,14 @@ export const RadioContainer = styled.label<RadioContainerProps>(
         justifyItems: 'center',
         alignItems: 'center',
       },
-      '& > :nth-child(2)': { gridColumn: 2, gridRow: 1 },
-      '& > :nth-child(3)': { gridColumn: 2, gridRow: 2 },
+      '& > :nth-child(2)': {
+        gridColumn: 2,
+        gridRow: 1,
+      },
+      '& > :nth-child(3)': {
+        gridColumn: isAlignRight ? '1 / span 2' : 2,
+        gridRow: 2,
+      },
       borderRadius: theme.scheme.desktop.radius[6],
       cursor: isDisabled ? 'default' : 'pointer',
       '& *': { cursor: 'inherit' },
diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
index 829c86e5..3c58b409 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
@@ -33,7 +33,7 @@ export const RadioContent = forwardRef<HTMLInputElement, RadioContentProps>(
     const subLabelColor = disabled ? theme.color.object.subtle : theme.color.object.assistive;
 
     return (
-      <RadioContainer radioSize={radioSize} isDisabled={disabled}>
+      <RadioContainer radioSize={radioSize} isDisabled={disabled} isAlignRight={align === 'right'}>
         {align === 'right' && (
           <Label size={radioSize} textAlign='left' weight='normal' color={labelColor}>
             {children}

From df2df93918277294710b5d0a72e388e8dbc64471 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Fri, 3 Oct 2025 23:06:31 +0900
Subject: [PATCH 13/25] =?UTF-8?q?feat:=20outline=20RadioContent=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EC=9D=84=20=EC=B6=94=EA=B0=80=ED=95=A9=EB=8B=88?=
 =?UTF-8?q?=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

interaction과 border radius에 약간의 틈이 있음.
---
 .../radioContent/RadioContent.stories.tsx     | 70 +++++++++++++++++--
 .../Radio/radioContent/RadioContent.style.ts  | 30 +++++---
 .../Radio/radioContent/RadioContent.tsx       |  7 +-
 .../radioContent/radioContent.variants.ts     |  4 ++
 4 files changed, 95 insertions(+), 16 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
index c7767d75..33f179da 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { RadioContent } from './RadioContent';
+import { RadioContent, RadioGroup } from './RadioContent';
 
 const meta: Meta<typeof RadioContent> = {
   title: 'Components/RadioContent',
@@ -25,10 +25,72 @@ export const Default: Story = {
     radioSize: 'lg',
     radioStyle: 'empty',
     align: 'left',
-    isChecked: false,
-    isDisabled: false,
+    disabled: false,
     subLabelVisible: false,
-    subLabel: '',
+    subLabel: '레이블',
     children: '레이블',
   },
 };
+
+export const OutlineRadio: Story = {
+  render: () => (
+    <RadioContent radioSize='md' radioStyle='outline' name='disabledGroup' value='1'>
+      레이블
+    </RadioContent>
+  ),
+};
+
+export const controlledRadio: Story = {
+  render: () => {
+    const [checked, setChecked] = useState('korea');
+
+    const handleGenderChange = e => {
+      setChecked(e.target.value);
+    };
+
+    const items = ['korea', 'japan', 'us', 'uk'];
+
+    return (
+      <div style={{ display: 'flex', gap: 20 }}>
+        {items.map(item => (
+          <RadioContent
+            key={item}
+            radioSize='md'
+            name='radioGroup'
+            value={item}
+            checked={checked === item}
+            onChange={handleGenderChange}
+          >
+            {item}
+          </RadioContent>
+        ))}
+        <p>결과: {checked}</p>
+      </div>
+    );
+  },
+};
+
+export const uncontrolledRadio: Story = {
+  render: () => (
+    <div>
+      <form
+        style={{ display: 'flex', gap: 20 }}
+        onSubmit={e => {
+          e.preventDefault();
+          alert(`${e.target.groupName.value} 확인!`);
+        }}
+      >
+        <RadioContent radioSize='md' name='groupName' value='apple' defaultChecked>
+          apple
+        </RadioContent>
+        <RadioContent radioSize='md' name='groupName' value='banana'>
+          banana
+        </RadioContent>
+        <RadioContent radioSize='md' name='groupName' value='orange'>
+          orange
+        </RadioContent>
+        <button type='submit'>제출 버튼</button>
+      </form>
+    </div>
+  ),
+};
diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
index 8d1ab56e..3918f129 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
@@ -1,16 +1,18 @@
 import styled from '@emotion/styled';
-import { interaction } from 'utils';
+import { interaction, pxToRem } from 'utils';
 import { RADIO_CONTAINER_SIZE, RadioSize } from './radioContent.variants';
 
 interface RadioContainerProps {
   radioSize: RadioSize;
   isDisabled: boolean;
   isAlignRight: boolean;
+  isStyleOutline: boolean;
 }
 
 export const RadioContainer = styled.label<RadioContainerProps>(
-  ({ theme, radioSize, isDisabled, isAlignRight }) => {
+  ({ theme, radioSize, isDisabled, isAlignRight, isStyleOutline }) => {
     const rowGap = RADIO_CONTAINER_SIZE[radioSize].gap;
+    const padding = RADIO_CONTAINER_SIZE[radioSize].padding;
     const interactionWidth = RADIO_CONTAINER_SIZE[radioSize].width;
     const interactionHeight = RADIO_CONTAINER_SIZE[radioSize].height;
     const checkedInteraction = interaction(
@@ -27,6 +29,15 @@ export const RadioContainer = styled.label<RadioContainerProps>(
       'default',
       isDisabled ? 'readonly' : 'default',
     );
+    const addonInteraction = isStyleOutline
+      ? {
+          border: 'inherit',
+        }
+      : {
+          width: `calc(100% + ${interactionWidth}px)`,
+          height: `calc(100% + ${interactionHeight}px)`,
+          transform: `translate(-${Math.floor(interactionWidth / 2) + 1}px , -${Math.floor(interactionHeight / 2)}px)`,
+        };
 
     return {
       display: 'grid',
@@ -46,16 +57,16 @@ export const RadioContainer = styled.label<RadioContainerProps>(
         gridColumn: isAlignRight ? '1 / span 2' : 2,
         gridRow: 2,
       },
-      borderRadius: theme.scheme.desktop.radius[6],
+      border: isStyleOutline ? `1px solid ${theme.color.stroke.alpha.subtle}` : 'none',
+      borderRadius: pxToRem(theme.scheme.desktop.radius[6]),
+      padding: isStyleOutline ? padding : 'none',
       cursor: isDisabled ? 'default' : 'pointer',
       '& *': { cursor: 'inherit' },
       ...nonCheckedInteraction,
 
       '::after': {
         ...nonCheckedInteraction['::after'],
-        width: `calc(100% + ${interactionWidth}px)`,
-        height: `calc(100% + ${interactionHeight}px)`,
-        transform: `translate(-${Math.floor(interactionWidth / 2) + 1}px , -${Math.floor(interactionHeight / 2)}px)`,
+        ...addonInteraction,
         transition: `all ${theme.environment.duration[100]}ms ${theme.environment.motion.fluent}`,
       },
 
@@ -68,19 +79,16 @@ export const RadioContainer = styled.label<RadioContainerProps>(
         ...checkedInteraction,
         '::after': {
           ...checkedInteraction['::after'],
-          width: `calc(100% + ${interactionWidth}px)`,
-          height: `calc(100% + ${interactionHeight}px)`,
+          ...addonInteraction,
         },
       },
 
       '&:has(input[type="radio"]:focus-visible)::before': {
+        ...addonInteraction,
         boxShadow: `0 0 0 3px ${theme.color.interaction.focus}`,
         content: '""',
         position: 'absolute',
         inset: 0,
-        width: `calc(100% + ${interactionWidth}px)`,
-        height: `calc(100% + ${interactionHeight}px)`,
-        transform: `translate(-${Math.floor(interactionWidth / 2) + 1}px , -${Math.floor(interactionHeight / 2)}px)`,
         borderRadius: theme.scheme.desktop.radius[6],
       },
 
diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
index 3c58b409..e6d1553e 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
@@ -33,7 +33,12 @@ export const RadioContent = forwardRef<HTMLInputElement, RadioContentProps>(
     const subLabelColor = disabled ? theme.color.object.subtle : theme.color.object.assistive;
 
     return (
-      <RadioContainer radioSize={radioSize} isDisabled={disabled} isAlignRight={align === 'right'}>
+      <RadioContainer
+        radioSize={radioSize}
+        isDisabled={disabled}
+        isAlignRight={align === 'right'}
+        isStyleOutline={radioStyle === 'outline'}
+      >
         {align === 'right' && (
           <Label size={radioSize} textAlign='left' weight='normal' color={labelColor}>
             {children}
diff --git a/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts b/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
index 83ae3272..4c465955 100644
--- a/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
+++ b/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
@@ -7,21 +7,25 @@ export const RADIO_CONTAINER_SIZE = {
     width: 13,
     height: 8,
     gap: 12,
+    padding: 12,
   },
   md: {
     width: 13,
     height: 8,
     gap: 10,
+    padding: 10,
   },
   sm: {
     width: 11,
     height: 6,
     gap: 8,
+    padding: 8,
   },
   xs: {
     width: 9,
     height: 6,
     gap: 8,
+    padding: 6,
   },
 };
 

From e5b4d5ca0f5ab8f2d8298217b17af64179577433 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Fri, 3 Oct 2025 23:15:10 +0900
Subject: [PATCH 14/25] =?UTF-8?q?fix:=20RADIO=5FCONTAINER=5FSIZE=EC=97=90?=
 =?UTF-8?q?=20borderRadius=20=EC=86=8D=EC=84=B1=EC=9D=84=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Radio/radioContent/RadioContent.style.ts    | 7 +++++--
 .../components/Radio/radioContent/radioContent.variants.ts | 6 +++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
index 3918f129..4c41f976 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
@@ -13,6 +13,7 @@ export const RadioContainer = styled.label<RadioContainerProps>(
   ({ theme, radioSize, isDisabled, isAlignRight, isStyleOutline }) => {
     const rowGap = RADIO_CONTAINER_SIZE[radioSize].gap;
     const padding = RADIO_CONTAINER_SIZE[radioSize].padding;
+    const borderRadius = RADIO_CONTAINER_SIZE[radioSize].borderRadius;
     const interactionWidth = RADIO_CONTAINER_SIZE[radioSize].width;
     const interactionHeight = RADIO_CONTAINER_SIZE[radioSize].height;
     const checkedInteraction = interaction(
@@ -52,13 +53,15 @@ export const RadioContainer = styled.label<RadioContainerProps>(
       '& > :nth-child(2)': {
         gridColumn: 2,
         gridRow: 1,
+        justifyItems: 'center',
+        alignItems: 'center',
       },
       '& > :nth-child(3)': {
         gridColumn: isAlignRight ? '1 / span 2' : 2,
         gridRow: 2,
       },
       border: isStyleOutline ? `1px solid ${theme.color.stroke.alpha.subtle}` : 'none',
-      borderRadius: pxToRem(theme.scheme.desktop.radius[6]),
+      borderRadius,
       padding: isStyleOutline ? padding : 'none',
       cursor: isDisabled ? 'default' : 'pointer',
       '& *': { cursor: 'inherit' },
@@ -89,7 +92,7 @@ export const RadioContainer = styled.label<RadioContainerProps>(
         content: '""',
         position: 'absolute',
         inset: 0,
-        borderRadius: theme.scheme.desktop.radius[6],
+        borderRadius,
       },
 
       'input[type="radio"]:focus-visible + .visual': {
diff --git a/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts b/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
index 4c465955..4e35596b 100644
--- a/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
+++ b/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
@@ -8,24 +8,28 @@ export const RADIO_CONTAINER_SIZE = {
     height: 8,
     gap: 12,
     padding: 12,
+    borderRadius: 6,
   },
   md: {
     width: 13,
     height: 8,
     gap: 10,
     padding: 10,
+    borderRadius: 6,
   },
   sm: {
     width: 11,
     height: 6,
     gap: 8,
     padding: 8,
+    borderRadius: 4,
   },
   xs: {
     width: 9,
     height: 6,
     gap: 8,
     padding: 6,
+    borderRadius: 4,
   },
 };
 
@@ -33,5 +37,5 @@ export const SUB_LABEL_SIZE: Record<RadioSize, LabelSize> = {
   lg: 'md',
   md: 'sm',
   sm: 'xs',
-  xs: 'sm',
+  xs: 'xs',
 };

From 70917201359b5e7e4c8fdca05666e9e766831905 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Fri, 3 Oct 2025 23:22:02 +0900
Subject: [PATCH 15/25] =?UTF-8?q?docs:=20outline=20RadioContent=EB=A5=BC?=
 =?UTF-8?q?=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=A5=BC=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../radioContent/RadioContent.stories.tsx     | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
index 33f179da..ea5eb78b 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
@@ -34,9 +34,33 @@ export const Default: Story = {
 
 export const OutlineRadio: Story = {
   render: () => (
-    <RadioContent radioSize='md' radioStyle='outline' name='disabledGroup' value='1'>
-      레이블
-    </RadioContent>
+    <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
+      <RadioContent radioSize='md' radioStyle='outline' value='1'>
+        레이블
+      </RadioContent>
+      <RadioContent
+        radioSize='md'
+        radioStyle='outline'
+        subLabelVisible={true}
+        subLabel='레이블'
+        value='2'
+      >
+        레이블
+      </RadioContent>
+      <RadioContent radioSize='md' radioStyle='outline' align='right' value='3'>
+        레이블
+      </RadioContent>
+      <RadioContent
+        radioSize='md'
+        radioStyle='outline'
+        align='right'
+        subLabelVisible={true}
+        subLabel='레이블'
+        value='4'
+      >
+        레이블
+      </RadioContent>
+    </div>
   ),
 };
 

From 57fcc46d52783cfdd14ed9ebbdead8d7fa892a09 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Fri, 3 Oct 2025 23:25:00 +0900
Subject: [PATCH 16/25] =?UTF-8?q?feat:=20outline=20RadioContent=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20disabled=20=EC=9D=BC=20=EB=95=8C=20border=20Color?=
 =?UTF-8?q?=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Radio/radioContent/RadioContent.style.ts  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
index 4c41f976..65b993c9 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
@@ -16,6 +16,9 @@ export const RadioContainer = styled.label<RadioContainerProps>(
     const borderRadius = RADIO_CONTAINER_SIZE[radioSize].borderRadius;
     const interactionWidth = RADIO_CONTAINER_SIZE[radioSize].width;
     const interactionHeight = RADIO_CONTAINER_SIZE[radioSize].height;
+    const borderColor = isDisabled
+      ? theme.color.stroke.alpha.subtler
+      : theme.color.stroke.alpha.subtle;
     const checkedInteraction = interaction(
       theme,
       'accent',
@@ -60,7 +63,7 @@ export const RadioContainer = styled.label<RadioContainerProps>(
         gridColumn: isAlignRight ? '1 / span 2' : 2,
         gridRow: 2,
       },
-      border: isStyleOutline ? `1px solid ${theme.color.stroke.alpha.subtle}` : 'none',
+      border: isStyleOutline ? `1px solid ${borderColor}` : 'none',
       borderRadius,
       padding: isStyleOutline ? padding : 'none',
       cursor: isDisabled ? 'default' : 'pointer',

From 66805dadd20a4a0518405b25f34dc14816167496 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Fri, 3 Oct 2025 23:33:07 +0900
Subject: [PATCH 17/25] =?UTF-8?q?refactor:=20style=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=AA=85=EC=9D=84=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Radio/radioBasic/Radio.style.ts | 2 +-
 packages/jds/src/components/Radio/radioBasic/Radio.tsx      | 4 ++--
 .../src/components/Radio/radioContent/RadioContent.style.ts | 2 +-
 .../jds/src/components/Radio/radioContent/RadioContent.tsx  | 6 +++---
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioBasic/Radio.style.ts b/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
index 5428c5ea..3ea4b7eb 100644
--- a/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
+++ b/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
@@ -47,7 +47,7 @@ export const RadioInput = styled.input({
   whiteSpace: 'nowrap',
 });
 
-export const Visual = styled.span<RadioStyledProps>(({ theme, radioSize }) => {
+export const RadioSpan = styled.span<RadioStyledProps>(({ theme, radioSize }) => {
   const sizeValue = pxToRem(RADIO_SIZE[radioSize].radioSize);
 
   return {
diff --git a/packages/jds/src/components/Radio/radioBasic/Radio.tsx b/packages/jds/src/components/Radio/radioBasic/Radio.tsx
index 5511dd2b..e1be4e34 100644
--- a/packages/jds/src/components/Radio/radioBasic/Radio.tsx
+++ b/packages/jds/src/components/Radio/radioBasic/Radio.tsx
@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, forwardRef } from 'react';
-import { RadioInput, RadioLabel, Visual } from './Radio.style';
+import { RadioInput, RadioLabel, RadioSpan } from './Radio.style';
 
 export type RadioSize = 'lg' | 'md' | 'sm' | 'xs';
 
@@ -12,7 +12,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
     return (
       <RadioLabel radioSize={radioSize}>
         <RadioInput ref={ref} type='radio' {...props} />
-        <Visual className='visual' aria-hidden='true' radioSize={radioSize} />
+        <RadioSpan className='visual' aria-hidden='true' radioSize={radioSize} />
       </RadioLabel>
     );
   },
diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
index 65b993c9..a3f0d128 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
@@ -9,7 +9,7 @@ interface RadioContainerProps {
   isStyleOutline: boolean;
 }
 
-export const RadioContainer = styled.label<RadioContainerProps>(
+export const RadioContainerLabel = styled.label<RadioContainerProps>(
   ({ theme, radioSize, isDisabled, isAlignRight, isStyleOutline }) => {
     const rowGap = RADIO_CONTAINER_SIZE[radioSize].gap;
     const padding = RADIO_CONTAINER_SIZE[radioSize].padding;
diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
index e6d1553e..f6f2e45b 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.tsx
@@ -1,7 +1,7 @@
 import { forwardRef, ReactNode } from 'react';
 import { Radio, RadioProps } from '../radioBasic/Radio';
 import { Label } from '@/components/Label';
-import { RadioContainer } from './RadioContent.style';
+import { RadioContainerLabel } from './RadioContent.style';
 import { useTheme } from 'theme';
 import { SUB_LABEL_SIZE } from './radioContent.variants';
 
@@ -33,7 +33,7 @@ export const RadioContent = forwardRef<HTMLInputElement, RadioContentProps>(
     const subLabelColor = disabled ? theme.color.object.subtle : theme.color.object.assistive;
 
     return (
-      <RadioContainer
+      <RadioContainerLabel
         radioSize={radioSize}
         isDisabled={disabled}
         isAlignRight={align === 'right'}
@@ -60,7 +60,7 @@ export const RadioContent = forwardRef<HTMLInputElement, RadioContentProps>(
             {subLabel}
           </Label>
         )}
-      </RadioContainer>
+      </RadioContainerLabel>
     );
   },
 );

From bdfebffddeb3d0128cc78d4bcd3d370580a6862f Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Sat, 4 Oct 2025 00:00:28 +0900
Subject: [PATCH 18/25] =?UTF-8?q?fix:=20interaction=20=EC=8A=A4=ED=94=84?=
 =?UTF-8?q?=EB=A0=88=EB=93=9C=20=EC=8B=9C=20=EB=B0=9C=EC=83=9D=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=ED=83=80=EC=9E=85=EC=97=90=EB=9F=AC=EB=A5=BC=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

타입에러: "::after"' 형식의 식을 '{}' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. '{}' 형식에 '::after' 속성이 없습니다.  -> interaction() 반환타입명시
---
 .../Radio/radioContent/RadioContent.stories.tsx      |  2 +-
 .../Radio/radioContent/RadioContent.style.ts         |  7 +++----
 packages/jds/src/utils/interaction.ts                | 12 ++++++------
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
index ea5eb78b..772366b4 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { RadioContent, RadioGroup } from './RadioContent';
+import { RadioContent } from './RadioContent';
 
 const meta: Meta<typeof RadioContent> = {
   title: 'Components/RadioContent',
diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
index a3f0d128..a3fd72f7 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { interaction, pxToRem } from 'utils';
+import { interaction } from 'utils';
 import { RADIO_CONTAINER_SIZE, RadioSize } from './radioContent.variants';
 
 interface RadioContainerProps {
@@ -65,7 +65,7 @@ export const RadioContainerLabel = styled.label<RadioContainerProps>(
       },
       border: isStyleOutline ? `1px solid ${borderColor}` : 'none',
       borderRadius,
-      padding: isStyleOutline ? padding : 'none',
+      padding: isStyleOutline ? padding : '0',
       cursor: isDisabled ? 'default' : 'pointer',
       '& *': { cursor: 'inherit' },
       ...nonCheckedInteraction,
@@ -73,11 +73,10 @@ export const RadioContainerLabel = styled.label<RadioContainerProps>(
       '::after': {
         ...nonCheckedInteraction['::after'],
         ...addonInteraction,
-        transition: `all ${theme.environment.duration[100]}ms ${theme.environment.motion.fluent}`,
+        transition: `all ${theme.environment.duration[500]}ms ${theme.environment.motion.fluent}`,
       },
 
       '&:active::after': {
-        ...nonCheckedInteraction['&:active::after'],
         transition: 'none',
       },
 
diff --git a/packages/jds/src/utils/interaction.ts b/packages/jds/src/utils/interaction.ts
index 106154ce..beceaa00 100644
--- a/packages/jds/src/utils/interaction.ts
+++ b/packages/jds/src/utils/interaction.ts
@@ -1,4 +1,4 @@
-import { Theme } from '@emotion/react';
+import { CSSObject, Theme } from '@emotion/react';
 import { Density, FillColor, InteractionState, Variant } from 'types';
 
 export function interaction(
@@ -7,22 +7,22 @@ export function interaction(
   density: Density,
   fillColor: FillColor,
   state: InteractionState = 'default',
-) {
+): CSSObject {
   const createAfter = (backgroundColor: string) => {
     const baseStyle = {
-      position: 'relative',
-      outline: 'none',
+      position: 'relative' as const,
+      outline: 'none' as const,
     };
 
     const afterBaseStyle = {
       content: '""',
-      position: 'absolute',
+      position: 'absolute' as const,
       top: 0,
       left: 0,
       width: '100%',
       height: '100%',
       backgroundColor: backgroundColor,
-      borderRadius: 'inherit',
+      borderRadius: 'inherit' as const,
     };
 
     if (state === 'locked') {

From a517759453034a60fdea4f0114e7dc91d44f35fc Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Sat, 4 Oct 2025 02:34:08 +0900
Subject: [PATCH 19/25] =?UTF-8?q?feat:=20scheme=20=ED=86=A0=ED=81=B0?=
 =?UTF-8?q?=ED=99=94=20=EB=B0=8F=20=EB=B0=98=EC=9D=91=ED=98=95=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EA=B5=AC=ED=98=84=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Radio/radioContent/RadioContent.style.ts  | 41 +++++++++++++++----
 .../radioContent/radioContent.variants.ts     | 35 ++++++++++------
 2 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
index a3fd72f7..3f3280e9 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { interaction } from 'utils';
+import { interaction, pxToRem } from 'utils';
 import { RADIO_CONTAINER_SIZE, RadioSize } from './radioContent.variants';
 
 interface RadioContainerProps {
@@ -11,9 +11,11 @@ interface RadioContainerProps {
 
 export const RadioContainerLabel = styled.label<RadioContainerProps>(
   ({ theme, radioSize, isDisabled, isAlignRight, isStyleOutline }) => {
-    const rowGap = RADIO_CONTAINER_SIZE[radioSize].gap;
-    const padding = RADIO_CONTAINER_SIZE[radioSize].padding;
-    const borderRadius = RADIO_CONTAINER_SIZE[radioSize].borderRadius;
+    const rowGap = RADIO_CONTAINER_SIZE[radioSize].gap as keyof typeof theme.scheme.desktop.spacing;
+    const padding = RADIO_CONTAINER_SIZE[radioSize]
+      .padding as keyof typeof theme.scheme.desktop.spacing;
+    const borderRadius = RADIO_CONTAINER_SIZE[radioSize]
+      .borderRadius as keyof typeof theme.scheme.desktop.radius;
     const interactionWidth = RADIO_CONTAINER_SIZE[radioSize].width;
     const interactionHeight = RADIO_CONTAINER_SIZE[radioSize].height;
     const borderColor = isDisabled
@@ -46,7 +48,6 @@ export const RadioContainerLabel = styled.label<RadioContainerProps>(
     return {
       display: 'grid',
       gridTemplateColumns: 'auto 1fr',
-      gap: `6px ${rowGap}px `,
       '& > :nth-child(1)': {
         gridColumn: 1,
         gridRow: 1,
@@ -63,17 +64,31 @@ export const RadioContainerLabel = styled.label<RadioContainerProps>(
         gridColumn: isAlignRight ? '1 / span 2' : 2,
         gridRow: 2,
       },
+
+      gap: `${pxToRem(theme.scheme.desktop.spacing[6])} ${pxToRem(theme.scheme.desktop.spacing[rowGap])} `,
       border: isStyleOutline ? `1px solid ${borderColor}` : 'none',
-      borderRadius,
-      padding: isStyleOutline ? padding : '0',
+      borderRadius: pxToRem(theme.scheme.desktop.radius[borderRadius]),
+      padding: isStyleOutline ? pxToRem(theme.scheme.desktop.spacing[padding]) : '0',
       cursor: isDisabled ? 'default' : 'pointer',
       '& *': { cursor: 'inherit' },
       ...nonCheckedInteraction,
 
+      [theme.breakPoint.tablet]: {
+        gap: `${pxToRem(theme.scheme.tablet.spacing[6])} ${pxToRem(theme.scheme.tablet.spacing[rowGap])} `,
+        borderRadius: pxToRem(theme.scheme.tablet.radius[borderRadius]),
+        padding: isStyleOutline ? pxToRem(theme.scheme.tablet.spacing[padding]) : '0',
+      },
+
+      [theme.breakPoint.mobile]: {
+        gap: `${pxToRem(theme.scheme.mobile.spacing[6])} ${pxToRem(theme.scheme.mobile.spacing[rowGap])} `,
+        borderRadius: pxToRem(theme.scheme.mobile.radius[borderRadius]),
+        padding: isStyleOutline ? pxToRem(theme.scheme.mobile.spacing[padding]) : '0',
+      },
+
       '::after': {
         ...nonCheckedInteraction['::after'],
         ...addonInteraction,
-        transition: `all ${theme.environment.duration[500]}ms ${theme.environment.motion.fluent}`,
+        transition: `all ${theme.environment.duration[100]}ms ${theme.environment.motion.fluent}`,
       },
 
       '&:active::after': {
@@ -94,7 +109,15 @@ export const RadioContainerLabel = styled.label<RadioContainerProps>(
         content: '""',
         position: 'absolute',
         inset: 0,
-        borderRadius,
+        borderRadius: pxToRem(theme.scheme.desktop.radius[borderRadius]),
+
+        [theme.breakPoint.tablet]: {
+          borderRadius: pxToRem(theme.scheme.tablet.radius[borderRadius]),
+        },
+
+        [theme.breakPoint.mobile]: {
+          borderRadius: pxToRem(theme.scheme.mobile.radius[borderRadius]),
+        },
       },
 
       'input[type="radio"]:focus-visible + .visual': {
diff --git a/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts b/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
index 4e35596b..325b5cbf 100644
--- a/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
+++ b/packages/jds/src/components/Radio/radioContent/radioContent.variants.ts
@@ -2,34 +2,43 @@ import { LabelSize } from '@/components/Label/Label.style';
 
 export type RadioSize = 'lg' | 'md' | 'sm' | 'xs';
 
-export const RADIO_CONTAINER_SIZE = {
+export const RADIO_CONTAINER_SIZE: Record<
+  RadioSize,
+  {
+    width: number;
+    height: number;
+    gap: string;
+    padding: string;
+    borderRadius: string;
+  }
+> = {
   lg: {
     width: 13,
     height: 8,
-    gap: 12,
-    padding: 12,
-    borderRadius: 6,
+    gap: '12',
+    padding: '12',
+    borderRadius: '6',
   },
   md: {
     width: 13,
     height: 8,
-    gap: 10,
-    padding: 10,
-    borderRadius: 6,
+    gap: '10',
+    padding: '10',
+    borderRadius: '6',
   },
   sm: {
     width: 11,
     height: 6,
-    gap: 8,
-    padding: 8,
-    borderRadius: 4,
+    gap: '8',
+    padding: '8',
+    borderRadius: '4',
   },
   xs: {
     width: 9,
     height: 6,
-    gap: 8,
-    padding: 6,
-    borderRadius: 4,
+    gap: '8',
+    padding: '6',
+    borderRadius: '4',
   },
 };
 

From 725653869cde6cbf81d7c6c3b690a8b75c422533 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Sat, 4 Oct 2025 02:47:28 +0900
Subject: [PATCH 20/25] =?UTF-8?q?feat:=20Radio=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20cursor=20pointer=20=ED=9A=A8?=
 =?UTF-8?q?=EA=B3=BC=EB=A5=BC=20=EC=B6=94=EA=B0=80=ED=95=A9=EB=8B=88?=
 =?UTF-8?q?=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/components/Radio/radioBasic/Radio.style.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/jds/src/components/Radio/radioBasic/Radio.style.ts b/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
index 3ea4b7eb..22f22080 100644
--- a/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
+++ b/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
@@ -20,12 +20,14 @@ export const RadioLabel = styled.label<RadioStyledProps>(({ theme, radioSize })
     [`input[type="radio"]:not(:checked):disabled + .visual`]: {
       backgroundColor: theme.color.surface.standard,
       borderColor: theme.color.stroke.alpha.subtler,
+      cursor: 'default',
       ...interaction(theme, 'normal', 'normal', 'default', 'disabled'),
     },
 
     [`input[type="radio"]:checked:disabled + .visual`]: {
       backgroundColor: theme.color.fill.subtle,
       border: `${RADIO_SIZE[radioSize].border}px solid ${theme.color.stroke.subtler}`,
+      cursor: 'default',
       ...interaction(theme, 'normal', 'normal', 'default', 'disabled'),
     },
 
@@ -56,6 +58,7 @@ export const RadioSpan = styled.span<RadioStyledProps>(({ theme, radioSize }) =>
     height: sizeValue,
     border: `1px solid ${theme.color.stroke.alpha.assistive}`,
     backgroundColor: theme.color.surface.shallow,
+    cursor: 'pointer',
     ...interaction(theme, 'normal', 'normal', 'default'),
   };
 });

From 5ca8b1f22a48f8a50953de6b2d01ad5f30f7969f Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Sat, 4 Oct 2025 02:47:57 +0900
Subject: [PATCH 21/25] =?UTF-8?q?feat:=20interaction=EC=97=90=20pointerEve?=
 =?UTF-8?q?nts=20none=20=EC=86=8D=EC=84=B1=EC=9D=84=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jds/src/utils/interaction.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/jds/src/utils/interaction.ts b/packages/jds/src/utils/interaction.ts
index beceaa00..64f6c040 100644
--- a/packages/jds/src/utils/interaction.ts
+++ b/packages/jds/src/utils/interaction.ts
@@ -23,6 +23,7 @@ export function interaction(
       height: '100%',
       backgroundColor: backgroundColor,
       borderRadius: 'inherit' as const,
+      pointerEvents: 'none' as const,
     };
 
     if (state === 'locked') {

From ce959164196ee433600db95e73df03497f947660 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Sat, 4 Oct 2025 02:48:38 +0900
Subject: [PATCH 22/25] =?UTF-8?q?fix:=20subLabel=EC=97=90=20=ED=95=98?=
 =?UTF-8?q?=EC=9D=B4=ED=8D=BC=EB=A7=81=ED=81=AC=EA=B0=80=20=EB=93=A4?=
 =?UTF-8?q?=EC=96=B4=EC=98=AC=20=EA=B2=BD=EC=9A=B0,=20=EC=BB=A4=EC=84=9C?=
 =?UTF-8?q?=20=EB=AA=A8=EC=96=91=EC=9C=BC=EB=A1=9C=20=EB=A7=81=ED=81=AC?=
 =?UTF-8?q?=EB=A5=BC=20=EB=B6=84=EB=B3=84=ED=95=98=EA=B8=B0=20=EC=9C=84?=
 =?UTF-8?q?=ED=95=B4=20cursor=20=EC=8A=A4=ED=83=80=EC=9D=BC=EC=9D=84=20def?=
 =?UTF-8?q?ault=EB=A1=9C=20=EB=B3=80=EA=B2=BD=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jds/src/components/Radio/radioContent/RadioContent.style.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
index 3f3280e9..e7e470f0 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.style.ts
@@ -69,8 +69,6 @@ export const RadioContainerLabel = styled.label<RadioContainerProps>(
       border: isStyleOutline ? `1px solid ${borderColor}` : 'none',
       borderRadius: pxToRem(theme.scheme.desktop.radius[borderRadius]),
       padding: isStyleOutline ? pxToRem(theme.scheme.desktop.spacing[padding]) : '0',
-      cursor: isDisabled ? 'default' : 'pointer',
-      '& *': { cursor: 'inherit' },
       ...nonCheckedInteraction,
 
       [theme.breakPoint.tablet]: {

From 3842fa98b09d32472e6a8cd13c9de3c38e092c18 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Sat, 4 Oct 2025 02:49:09 +0900
Subject: [PATCH 23/25] =?UTF-8?q?docs:=20RadioContent=EC=9D=98=20=ED=95=98?=
 =?UTF-8?q?=EC=9D=B4=ED=8D=BC=EB=A7=81=ED=81=AC=EA=B0=80=20=EB=8B=AC?=
 =?UTF-8?q?=EB=A6=B0=20=EB=A0=88=EC=9D=B4=EB=B8=94=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=A5=BC=20=EC=9E=91=EC=84=B1=ED=95=A9=EB=8B=88?=
 =?UTF-8?q?=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../radioContent/RadioContent.stories.tsx     | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx b/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
index 772366b4..a6b33a9f 100644
--- a/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
+++ b/packages/jds/src/components/Radio/radioContent/RadioContent.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { ChangeEvent, FormEvent, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { RadioContent } from './RadioContent';
 
@@ -64,11 +64,32 @@ export const OutlineRadio: Story = {
   ),
 };
 
+export const SubLabelWithHyperlink: Story = {
+  render: () => (
+    <RadioContent
+      radioSize='md'
+      radioStyle='outline'
+      subLabelVisible={true}
+      subLabel={
+        <>
+          하이퍼링크&nbsp;
+          <a href='https://www.naver.com/' style={{ textDecoration: 'underline' }}>
+            (네이버 바로가기)
+          </a>
+        </>
+      }
+      value='1'
+    >
+      레이블
+    </RadioContent>
+  ),
+};
+
 export const controlledRadio: Story = {
   render: () => {
     const [checked, setChecked] = useState('korea');
 
-    const handleGenderChange = e => {
+    const handleGenderChange = (e: ChangeEvent<HTMLInputElement>) => {
       setChecked(e.target.value);
     };
 
@@ -99,9 +120,10 @@ export const uncontrolledRadio: Story = {
     <div>
       <form
         style={{ display: 'flex', gap: 20 }}
-        onSubmit={e => {
+        onSubmit={(e: FormEvent<HTMLFormElement>) => {
           e.preventDefault();
-          alert(`${e.target.groupName.value} 확인!`);
+          const form = e.target as HTMLFormElement;
+          alert(`${form.namedItem('groupName').value} 확인!`);
         }}
       >
         <RadioContent radioSize='md' name='groupName' value='apple' defaultChecked>

From 6e808404424a8d8158549fc87e31093f0c2665b5 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Sat, 4 Oct 2025 18:00:55 +0900
Subject: [PATCH 24/25] =?UTF-8?q?refactor:=20Radio=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=ED=86=A0=ED=81=B0=EC=9D=84=20=EC=82=AC=EC=9A=A9=ED=95=A9?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Radio/radioBasic/Radio.style.ts | 12 ++++++++++--
 .../Radio/radioBasic/radio.variants.ts         | 18 +++++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioBasic/Radio.style.ts b/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
index 22f22080..b8ef39b0 100644
--- a/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
+++ b/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
@@ -8,13 +8,18 @@ interface RadioStyledProps {
 }
 
 export const RadioLabel = styled.label<RadioStyledProps>(({ theme, radioSize }) => {
+  const borderSize = RADIO_SIZE[radioSize]
+    .border as keyof typeof theme.scheme.desktop.stroke.weight;
+
   return {
     display: 'inline-flex',
     position: 'relative',
 
     [`input[type="radio"]:not(:disabled):checked + .visual`]: {
       backgroundColor: theme.color.surface.static.standard,
-      border: `${RADIO_SIZE[radioSize].border}px solid ${theme.color.accent.neutral}`,
+      border: `${pxToRem(theme.scheme.desktop.stroke.weight[borderSize])} solid ${theme.color.accent.neutral}`,
+      [theme.breakPoint.tablet]: { border: pxToRem(theme.scheme.tablet.stroke.weight[borderSize]) },
+      [theme.breakPoint.mobile]: { border: pxToRem(theme.scheme.mobile.stroke.weight[borderSize]) },
     },
 
     [`input[type="radio"]:not(:checked):disabled + .visual`]: {
@@ -26,9 +31,12 @@ export const RadioLabel = styled.label<RadioStyledProps>(({ theme, radioSize })
 
     [`input[type="radio"]:checked:disabled + .visual`]: {
       backgroundColor: theme.color.fill.subtle,
-      border: `${RADIO_SIZE[radioSize].border}px solid ${theme.color.stroke.subtler}`,
+      border: `${pxToRem(theme.scheme.desktop.stroke.weight[borderSize])}px solid ${theme.color.stroke.subtler}`,
       cursor: 'default',
       ...interaction(theme, 'normal', 'normal', 'default', 'disabled'),
+
+      [theme.breakPoint.tablet]: { border: pxToRem(theme.scheme.tablet.stroke.weight[borderSize]) },
+      [theme.breakPoint.mobile]: { border: pxToRem(theme.scheme.mobile.stroke.weight[borderSize]) },
     },
 
     [`input[type="radio"]:focus-visible + .visual`]: {
diff --git a/packages/jds/src/components/Radio/radioBasic/radio.variants.ts b/packages/jds/src/components/Radio/radioBasic/radio.variants.ts
index 8c594fbf..975d659a 100644
--- a/packages/jds/src/components/Radio/radioBasic/radio.variants.ts
+++ b/packages/jds/src/components/Radio/radioBasic/radio.variants.ts
@@ -1,18 +1,26 @@
-export const RADIO_SIZE = {
+import { RadioSize } from './Radio';
+
+export const RADIO_SIZE: Record<
+  RadioSize,
+  {
+    radioSize: number;
+    border: string;
+  }
+> = {
   lg: {
     radioSize: 20,
-    border: 6,
+    border: '6',
   },
   md: {
     radioSize: 18,
-    border: 5,
+    border: '5',
   },
   sm: {
     radioSize: 16,
-    border: 5,
+    border: '5',
   },
   xs: {
     radioSize: 14,
-    border: 4,
+    border: '4',
   },
 };

From 399dcf13ad50cd283ccb247ef508a735ac05be12 Mon Sep 17 00:00:00 2001
From: rkdcodus <rcd7275@naver.com>
Date: Sat, 4 Oct 2025 18:25:13 +0900
Subject: [PATCH 25/25] =?UTF-8?q?fix:=20Radio=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B2=B4=ED=81=AC=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EB=B2=84=EA=B7=B8=EB=A5=BC=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Radio/radioBasic/Radio.style.ts   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/jds/src/components/Radio/radioBasic/Radio.style.ts b/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
index b8ef39b0..82046c66 100644
--- a/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
+++ b/packages/jds/src/components/Radio/radioBasic/Radio.style.ts
@@ -18,8 +18,12 @@ export const RadioLabel = styled.label<RadioStyledProps>(({ theme, radioSize })
     [`input[type="radio"]:not(:disabled):checked + .visual`]: {
       backgroundColor: theme.color.surface.static.standard,
       border: `${pxToRem(theme.scheme.desktop.stroke.weight[borderSize])} solid ${theme.color.accent.neutral}`,
-      [theme.breakPoint.tablet]: { border: pxToRem(theme.scheme.tablet.stroke.weight[borderSize]) },
-      [theme.breakPoint.mobile]: { border: pxToRem(theme.scheme.mobile.stroke.weight[borderSize]) },
+      [theme.breakPoint.tablet]: {
+        border: `${pxToRem(theme.scheme.tablet.stroke.weight[borderSize])} solid ${theme.color.accent.neutral}`,
+      },
+      [theme.breakPoint.mobile]: {
+        border: `${pxToRem(theme.scheme.mobile.stroke.weight[borderSize])} solid ${theme.color.accent.neutral}`,
+      },
     },
 
     [`input[type="radio"]:not(:checked):disabled + .visual`]: {
@@ -35,8 +39,12 @@ export const RadioLabel = styled.label<RadioStyledProps>(({ theme, radioSize })
       cursor: 'default',
       ...interaction(theme, 'normal', 'normal', 'default', 'disabled'),
 
-      [theme.breakPoint.tablet]: { border: pxToRem(theme.scheme.tablet.stroke.weight[borderSize]) },
-      [theme.breakPoint.mobile]: { border: pxToRem(theme.scheme.mobile.stroke.weight[borderSize]) },
+      [theme.breakPoint.tablet]: {
+        border: `${pxToRem(theme.scheme.tablet.stroke.weight[borderSize])} solid ${theme.color.accent.neutral}`,
+      },
+      [theme.breakPoint.mobile]: {
+        border: `${pxToRem(theme.scheme.mobile.stroke.weight[borderSize])} solid ${theme.color.accent.neutral}`,
+      },
     },
 
     [`input[type="radio"]:focus-visible + .visual`]: {