From 899db40001d7edb5a9ba61a687b758d26c656b31 Mon Sep 17 00:00:00 2001
From: belltalion <xogus4026@gmail.com>
Date: Wed, 10 Sep 2025 17:11:28 +0900
Subject: [PATCH 1/8] feat toggle

---
 .../src/components/Toggle/Toggle.stories.tsx  |  18 +++
 .../src/components/Toggle/index.tsx           | 132 ++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 packages/components/src/components/Toggle/Toggle.stories.tsx
 create mode 100644 packages/components/src/components/Toggle/index.tsx

diff --git a/packages/components/src/components/Toggle/Toggle.stories.tsx b/packages/components/src/components/Toggle/Toggle.stories.tsx
new file mode 100644
index 00000000..902f3c0f
--- /dev/null
+++ b/packages/components/src/components/Toggle/Toggle.stories.tsx
@@ -0,0 +1,18 @@
+import { Toggle } from './index'
+
+export default {
+  title: 'Devfive/Toggle',
+  component: Toggle,
+  tags: ['autodocs'],
+}
+
+export const Default = {
+  args: {
+    disabled: false,
+    variant: 'default',
+    defaultValue: false,
+    offText: 'OFF',
+    onText: 'ON',
+    color: 'var(--primary)',
+  },
+}
diff --git a/packages/components/src/components/Toggle/index.tsx b/packages/components/src/components/Toggle/index.tsx
new file mode 100644
index 00000000..e4489b2b
--- /dev/null
+++ b/packages/components/src/components/Toggle/index.tsx
@@ -0,0 +1,132 @@
+'use client'
+import { Box, Input } from '@devup-ui/react'
+import { useState } from 'react'
+
+interface ToggleProps {
+  defaultValue?: boolean | null
+  value?: boolean | null
+  onChange?: (value: boolean) => void
+  disabled?: boolean
+  variant?: 'default' | 'switch'
+  className?: string
+  style?: React.CSSProperties
+  classNames?: {
+    toggle?: string
+  }
+  styles?: {
+    toggle?: React.CSSProperties
+  }
+  colors?: {
+    primary?: string
+    bg?: string
+    hoverBg?: string
+    primaryHoverBg?: string
+    disabledBg?: string
+    switchHoverOutline?: string
+    switchShadow?: string
+  }
+}
+
+export function Toggle({
+  defaultValue = null,
+  value = null,
+  onChange,
+  disabled,
+  className,
+  style,
+  variant = 'default',
+  colors,
+  classNames,
+  styles,
+}: ToggleProps) {
+  const [innerValue, setInnerValue] = useState<boolean>(
+    value ?? defaultValue ?? false,
+  )
+
+  const resultValue = value ?? innerValue
+
+  function handleToggle(value: boolean) {
+    onChange?.(!value)
+    setInnerValue((prev) => !prev)
+  }
+
+  const isDefault = variant === 'default'
+
+  return (
+    <>
+      <Box
+        aria-disabled={disabled}
+        bg={
+          resultValue
+            ? 'var(--primary)'
+            : 'var(--bg, light-dark(#E4E4E4, #383838))'
+        }
+        borderRadius="500px"
+        boxSizing="border-box"
+        className="toggleSwitch"
+        cursor="pointer"
+        h={isDefault ? '28px' : '8px'}
+        justifyContent={resultValue ? 'flex-end' : undefined}
+        onClick={() => !disabled && handleToggle(resultValue)}
+        p={isDefault ? 1 : undefined}
+        position="relative"
+        selectors={{
+          '&[aria-disabled=true]': {
+            cursor: 'not-allowed',
+            bg: 'var(--disabledBg, light-dark(#D6D7DE, #373737))',
+          },
+          '&:hover:not([aria-disabled=true]):not(:disabled)': {
+            bg: resultValue
+              ? `var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))`
+              : 'var(--hoverBg, light-dark(#C3C2C8, #696A6F))',
+          },
+        }}
+        style={style}
+        styleVars={{
+          primary: colors?.primary,
+          bg: colors?.bg,
+          primaryHoverBg: colors?.primaryHoverBg,
+          hoverBg: colors?.hoverBg,
+          disabledBg: colors?.disabledBg,
+        }}
+        transition=".25s"
+        w={isDefault ? '50px' : '40px'}
+      >
+        <Box
+          backgroundColor="#fff"
+          borderRadius="100%"
+          boxSize="20px"
+          className={classNames?.toggle}
+          filter={
+            isDefault
+              ? undefined
+              : `drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));`
+          }
+          outline="4px"
+          pos="absolute"
+          selectors={{
+            '.toggleSwitch:hover[aria-disabled=false] > &': {
+              outline: '4px solid',
+              outlineColor: `var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))`,
+            },
+          }}
+          style={styles?.toggle}
+          styleVars={{
+            primary: colors?.primary,
+            primaryHoverBg: colors?.primaryHoverBg,
+            switchShadow: colors?.switchShadow,
+            switchHoverOutline: colors?.switchHoverOutline,
+          }}
+          top={isDefault ? undefined : '-6px'}
+          transform={resultValue ? 'translateX(calc(100% + 2px))' : undefined}
+          transition={isDefault ? '.25s' : 'transform .25s'}
+        />
+      </Box>
+      <Input
+        defaultValue={String(defaultValue)}
+        type="hidden"
+        value={String(resultValue)}
+      />
+    </>
+  )
+}

From 24bf7068fc6f9d6bb752624431e1637d2686eb8e Mon Sep 17 00:00:00 2001
From: belltalion <xogus4026@gmail.com>
Date: Thu, 11 Sep 2025 10:20:53 +0900
Subject: [PATCH 2/8] feat toggle

---
 .../src/components/Toggle/Toggle.stories.tsx  | 25 ++++---
 .../Toggle/__tests__/index.browser.test.tsx   | 72 +++++++++++++++++++
 .../src/components/Toggle/index.tsx           | 12 ++--
 3 files changed, 96 insertions(+), 13 deletions(-)
 create mode 100644 packages/components/src/components/Toggle/__tests__/index.browser.test.tsx

diff --git a/packages/components/src/components/Toggle/Toggle.stories.tsx b/packages/components/src/components/Toggle/Toggle.stories.tsx
index 902f3c0f..47f51fcc 100644
--- a/packages/components/src/components/Toggle/Toggle.stories.tsx
+++ b/packages/components/src/components/Toggle/Toggle.stories.tsx
@@ -1,18 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+
 import { Toggle } from './index'
 
-export default {
+type Story = StoryObj<typeof meta>
+
+const meta: Meta<typeof Toggle> = {
   title: 'Devfive/Toggle',
   component: Toggle,
-  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '10px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 }
 
-export const Default = {
+export const Default: Story = {
   args: {
-    disabled: false,
-    variant: 'default',
     defaultValue: false,
-    offText: 'OFF',
-    onText: 'ON',
-    color: 'var(--primary)',
+    variant: 'default',
+    disabled: false,
   },
 }
+
+export default meta
diff --git a/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
new file mode 100644
index 00000000..91f0c97e
--- /dev/null
+++ b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
@@ -0,0 +1,72 @@
+import { act, render } from '@testing-library/react'
+
+import { Toggle } from '../index'
+
+vi.mock('react', async (originImport: any) => {
+  const origin = await originImport()
+  return {
+    ...origin,
+    cache: vi.fn((arg) => arg),
+  }
+})
+describe('Toggle', () => {
+  it('should Toggle snapshot', () => {
+    expect(render(<Toggle />).container).toMatchSnapshot()
+    expect(render(<Toggle disabled />).container).toMatchSnapshot()
+    expect(render(<Toggle defaultValue={true} />).container).toMatchSnapshot()
+    expect(render(<Toggle value={true} />).container).toMatchSnapshot()
+    expect(render(<Toggle variant="switch" />).container).toMatchSnapshot()
+    expect(
+      render(<Toggle disabled variant="switch" />).container,
+    ).toMatchSnapshot()
+    expect(
+      render(<Toggle defaultValue={true} variant="switch" />).container,
+    ).toMatchSnapshot()
+    expect(
+      render(<Toggle value={true} variant="switch" />).container,
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <Toggle
+          colors={{
+            primary: 'blue',
+            bg: 'blue',
+            hoverBg: 'blue',
+            primaryHoverBg: 'blue',
+            disabledBg: 'blue',
+            switchHoverOutline: 'blue',
+            switchShadow: 'blue',
+          }}
+        />,
+      ).container,
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <Toggle
+          colors={{
+            primary: 'blue',
+            bg: 'blue',
+            hoverBg: 'blue',
+            primaryHoverBg: 'blue',
+            disabledBg: 'blue',
+            switchHoverOutline: 'blue',
+            switchShadow: 'blue',
+          }}
+          variant="switch"
+        />,
+      ).container,
+    ).toMatchSnapshot()
+  })
+
+  it('should change value when use onChange prop', async () => {
+    const onChange = vi.fn()
+    const { container } = render(<Toggle onChange={onChange} />)
+    const toggleButton = container.querySelector(`.toggleSwitch`)
+    const input = container.querySelector('input')
+    toggleButton &&
+      (await act(async () => {
+        await userEvent.click(toggleButton)
+      }))
+    expect(input).toHaveAttribute('value', 'true')
+  })
+})
diff --git a/packages/components/src/components/Toggle/index.tsx b/packages/components/src/components/Toggle/index.tsx
index e4489b2b..777307be 100644
--- a/packages/components/src/components/Toggle/index.tsx
+++ b/packages/components/src/components/Toggle/index.tsx
@@ -63,7 +63,7 @@ export function Toggle({
         }
         borderRadius="500px"
         boxSizing="border-box"
-        className="toggleSwitch"
+        className={'toggle-switch ' + className}
         cursor="pointer"
         h={isDefault ? '28px' : '8px'}
         justifyContent={resultValue ? 'flex-end' : undefined}
@@ -105,10 +105,12 @@ export function Toggle({
           outline="4px"
           pos="absolute"
           selectors={{
-            '.toggleSwitch:hover[aria-disabled=false] > &': {
-              outline: '4px solid',
-              outlineColor: `var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))`,
-            },
+            '.toggle-switch:not([aria-disabled=true]):hover > &': isDefault
+              ? {}
+              : {
+                  outline: '4px solid',
+                  outlineColor: `var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))`,
+                },
           }}
           style={styles?.toggle}
           styleVars={{

From bbe7fb2274b51cd330209d9935fe241320000eb7 Mon Sep 17 00:00:00 2001
From: belltalion <xogus4026@gmail.com>
Date: Thu, 11 Sep 2025 10:22:50 +0900
Subject: [PATCH 3/8] feat toggle

---
 .../__snapshots__/index.browser.test.tsx.snap | 167 ++++++++++++++++++
 .../Toggle/__tests__/index.browser.test.tsx   |   3 +-
 2 files changed, 169 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap

diff --git a/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
new file mode 100644
index 00000000..fb16ed7a
--- /dev/null
+++ b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -0,0 +1,167 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Toggle > should Toggle snapshot 1`] = `
+<div>
+  <div
+    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+  >
+    <div
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255     transition-0-.25s--255"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="false"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 2`] = `
+<div>
+  <div
+    aria-disabled="true"
+    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+  >
+    <div
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255     transition-0-.25s--255"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="false"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 3`] = `
+<div>
+  <div
+    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
+  >
+    <div
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255    transform-0-translateX(calc(100% + 2px))--255 transition-0-.25s--255"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="true"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 4`] = `
+<div>
+  <div
+    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
+  >
+    <div
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255    transform-0-translateX(calc(100% + 2px))--255 transition-0-.25s--255"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="true"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 5`] = `
+<div>
+  <div
+    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+  >
+    <div
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255  transition-0-transform .25s--255"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="false"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 6`] = `
+<div>
+  <div
+    aria-disabled="true"
+    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+  >
+    <div
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255  transition-0-transform .25s--255"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="false"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 7`] = `
+<div>
+  <div
+    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+  >
+    <div
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="true"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 8`] = `
+<div>
+  <div
+    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+  >
+    <div
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="true"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 9`] = `
+<div>
+  <div
+    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    style="--primary: blue; --bg: blue; --primaryHoverBg: blue; --hoverBg: blue; --disabledBg: blue;"
+  >
+    <div
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255     transition-0-.25s--255"
+      style="--primary: blue; --primaryHoverBg: blue; --switchShadow: blue; --switchHoverOutline: blue;"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="false"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 10`] = `
+<div>
+  <div
+    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    style="--primary: blue; --bg: blue; --primaryHoverBg: blue; --hoverBg: blue; --disabledBg: blue;"
+  >
+    <div
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255  transition-0-transform .25s--255"
+      style="--primary: blue; --primaryHoverBg: blue; --switchShadow: blue; --switchHoverOutline: blue;"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="false"
+  />
+</div>
+`;
diff --git a/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
index 91f0c97e..715f927d 100644
--- a/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
@@ -1,4 +1,5 @@
 import { act, render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 import { Toggle } from '../index'
 
@@ -61,7 +62,7 @@ describe('Toggle', () => {
   it('should change value when use onChange prop', async () => {
     const onChange = vi.fn()
     const { container } = render(<Toggle onChange={onChange} />)
-    const toggleButton = container.querySelector(`.toggleSwitch`)
+    const toggleButton = container.querySelector(`.toggle-switch`)
     const input = container.querySelector('input')
     toggleButton &&
       (await act(async () => {

From 460f37ef8f89a42ba9d4f561538644b96cfb4c87 Mon Sep 17 00:00:00 2001
From: belltalion <xogus4026@gmail.com>
Date: Thu, 11 Sep 2025 10:23:06 +0900
Subject: [PATCH 4/8] feat toggle

---
 .changeset/true-stars-listen.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/true-stars-listen.md

diff --git a/.changeset/true-stars-listen.md b/.changeset/true-stars-listen.md
new file mode 100644
index 00000000..0533af66
--- /dev/null
+++ b/.changeset/true-stars-listen.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Feat toggle

From 28ac291dad15d042748320f0d534546312d3a803 Mon Sep 17 00:00:00 2001
From: belltalion <xogus4026@gmail.com>
Date: Thu, 11 Sep 2025 10:31:33 +0900
Subject: [PATCH 5/8] feat toggle

---
 .../__snapshots__/index.browser.test.tsx.snap | 36 ++++++++++++++++++-
 .../Toggle/__tests__/index.browser.test.tsx   | 26 ++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
index fb16ed7a..e998abf8 100644
--- a/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -131,6 +131,40 @@ exports[`Toggle > should Toggle snapshot 8`] = `
 `;
 
 exports[`Toggle > should Toggle snapshot 9`] = `
+<div>
+  <div
+    class="toggle-switch test border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+  >
+    <div
+      class="testToggle background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="true"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 10`] = `
+<div>
+  <div
+    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    style="background-color: blue;"
+  >
+    <div
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
+      style="background-color: blue;"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="true"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 11`] = `
 <div>
   <div
     class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
@@ -148,7 +182,7 @@ exports[`Toggle > should Toggle snapshot 9`] = `
 </div>
 `;
 
-exports[`Toggle > should Toggle snapshot 10`] = `
+exports[`Toggle > should Toggle snapshot 12`] = `
 <div>
   <div
     class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
diff --git a/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
index 715f927d..c23b3603 100644
--- a/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
@@ -26,6 +26,32 @@ describe('Toggle', () => {
     expect(
       render(<Toggle value={true} variant="switch" />).container,
     ).toMatchSnapshot()
+    expect(
+      render(
+        <Toggle
+          className="test"
+          classNames={{ toggle: 'testToggle' }}
+          value={true}
+          variant="switch"
+        />,
+      ).container,
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <Toggle
+          style={{
+            backgroundColor: 'blue',
+          }}
+          styles={{
+            toggle: {
+              backgroundColor: 'blue',
+            },
+          }}
+          value={true}
+          variant="switch"
+        />,
+      ).container,
+    ).toMatchSnapshot()
     expect(
       render(
         <Toggle

From 330d4664e65e39d5f698473ccc010bfa42f60040 Mon Sep 17 00:00:00 2001
From: belltalion <xogus4026@gmail.com>
Date: Thu, 11 Sep 2025 10:38:21 +0900
Subject: [PATCH 6/8] feat toggle

---
 .../__tests__/__snapshots__/index.browser.test.tsx.snap       | 4 ++--
 .../src/components/Toggle/__tests__/index.browser.test.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
index e998abf8..e49f552d 100644
--- a/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -133,10 +133,10 @@ exports[`Toggle > should Toggle snapshot 8`] = `
 exports[`Toggle > should Toggle snapshot 9`] = `
 <div>
   <div
-    class="toggle-switch test border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class="toggle-switch test-toggle-wrapper border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
   >
     <div
-      class="testToggle background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
+      class="test-toggle background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
     />
   </div>
   <input
diff --git a/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
index c23b3603..a5be96d6 100644
--- a/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
@@ -29,8 +29,8 @@ describe('Toggle', () => {
     expect(
       render(
         <Toggle
-          className="test"
-          classNames={{ toggle: 'testToggle' }}
+          className="test-toggle-wrapper"
+          classNames={{ toggle: 'test-toggle' }}
           value={true}
           variant="switch"
         />,

From e227ebd8f93bc0752aee1e94eb12e7590d1026f7 Mon Sep 17 00:00:00 2001
From: belltalion <xogus4026@gmail.com>
Date: Thu, 11 Sep 2025 11:16:35 +0900
Subject: [PATCH 7/8] feat toggle

---
 .../src/components/Radio/Radio.stories.tsx    | 14 ------
 .../RadioGroup/RadioGroup.stories.tsx         | 14 ------
 .../__snapshots__/index.browser.test.tsx.snap | 50 ++++++++++++-------
 .../Toggle/__tests__/index.browser.test.tsx   |  8 +--
 .../src/components/Toggle/index.tsx           | 37 ++++++--------
 5 files changed, 52 insertions(+), 71 deletions(-)

diff --git a/packages/components/src/components/Radio/Radio.stories.tsx b/packages/components/src/components/Radio/Radio.stories.tsx
index 794101aa..d97642ba 100644
--- a/packages/components/src/components/Radio/Radio.stories.tsx
+++ b/packages/components/src/components/Radio/Radio.stories.tsx
@@ -8,20 +8,6 @@ export default {
 export const Default = {
   args: {
     checked: undefined,
-    colors: {
-      primary: 'var(--primary)',
-      border: 'var(--border)',
-      text: 'var(--text)',
-      bg: 'var(--bg)',
-      hoverBg: 'var(--hoverBg)',
-      hoverBorder: 'var(--hoverBorder)',
-      hoverColor: 'var(--hoverColor)',
-      checkedBg: 'var(--checkedBg)',
-      checkedBorder: 'var(--checkedBorder)',
-      checkedColor: 'var(--checkedColor)',
-      disabledBg: 'var(--disabledBg)',
-      disabledColor: 'var(--disabledColor)',
-    },
     name: 'radio',
     children: '옵션1',
     variant: 'default',
diff --git a/packages/components/src/components/RadioGroup/RadioGroup.stories.tsx b/packages/components/src/components/RadioGroup/RadioGroup.stories.tsx
index f6ad479e..43faab38 100644
--- a/packages/components/src/components/RadioGroup/RadioGroup.stories.tsx
+++ b/packages/components/src/components/RadioGroup/RadioGroup.stories.tsx
@@ -9,20 +9,6 @@ export const Default = {
   args: {
     disabled: false,
     name: 'radio',
-    colors: {
-      primary: 'var(--primary)',
-      border: 'var(--border)',
-      text: 'var(--text)',
-      bg: 'var(--bg)',
-      hoverBg: 'var(--hoverBg)',
-      hoverBorder: 'var(--hoverBorder)',
-      hoverColor: 'var(--hoverColor)',
-      checkedBg: 'var(--checkedBg)',
-      checkedBorder: 'var(--checkedBorder)',
-      checkedColor: 'var(--checkedColor)',
-      disabledBg: 'var(--disabledBg)',
-      disabledColor: 'var(--disabledColor)',
-    },
     options: [
       {
         value: '1',
diff --git a/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
index e49f552d..2013a32a 100644
--- a/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -3,7 +3,8 @@
 exports[`Toggle > should Toggle snapshot 1`] = `
 <div>
   <div
-    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    role="group"
   >
     <div
       class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255     transition-0-.25s--255"
@@ -20,7 +21,8 @@ exports[`Toggle > should Toggle snapshot 2`] = `
 <div>
   <div
     aria-disabled="true"
-    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    role="group"
   >
     <div
       class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255     transition-0-.25s--255"
@@ -36,7 +38,8 @@ exports[`Toggle > should Toggle snapshot 2`] = `
 exports[`Toggle > should Toggle snapshot 3`] = `
 <div>
   <div
-    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
+    role="group"
   >
     <div
       class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255    transform-0-translateX(calc(100% + 2px))--255 transition-0-.25s--255"
@@ -52,7 +55,8 @@ exports[`Toggle > should Toggle snapshot 3`] = `
 exports[`Toggle > should Toggle snapshot 4`] = `
 <div>
   <div
-    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
+    role="group"
   >
     <div
       class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255    transform-0-translateX(calc(100% + 2px))--255 transition-0-.25s--255"
@@ -68,10 +72,11 @@ exports[`Toggle > should Toggle snapshot 4`] = `
 exports[`Toggle > should Toggle snapshot 5`] = `
 <div>
   <div
-    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    role="group"
   >
     <div
-      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255  transition-0-transform .25s--255"
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 outline-0-4px solid-3782712413200905402-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-3782712413200905402-255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 top-0--6px--255  transition-0-transform .25s--255"
     />
   </div>
   <input
@@ -85,10 +90,11 @@ exports[`Toggle > should Toggle snapshot 6`] = `
 <div>
   <div
     aria-disabled="true"
-    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    role="group"
   >
     <div
-      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255  transition-0-transform .25s--255"
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 outline-0-4px solid-3782712413200905402-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-3782712413200905402-255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 top-0--6px--255  transition-0-transform .25s--255"
     />
   </div>
   <input
@@ -101,10 +107,11 @@ exports[`Toggle > should Toggle snapshot 6`] = `
 exports[`Toggle > should Toggle snapshot 7`] = `
 <div>
   <div
-    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    role="group"
   >
     <div
-      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 outline-0-4px solid-3782712413200905402-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-3782712413200905402-255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
     />
   </div>
   <input
@@ -117,10 +124,11 @@ exports[`Toggle > should Toggle snapshot 7`] = `
 exports[`Toggle > should Toggle snapshot 8`] = `
 <div>
   <div
-    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    role="group"
   >
     <div
-      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 outline-0-4px solid-3782712413200905402-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-3782712413200905402-255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
     />
   </div>
   <input
@@ -133,10 +141,11 @@ exports[`Toggle > should Toggle snapshot 8`] = `
 exports[`Toggle > should Toggle snapshot 9`] = `
 <div>
   <div
-    class="toggle-switch test-toggle-wrapper border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class="test-toggle-wrapper   border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    role="group"
   >
     <div
-      class="test-toggle background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
+      class="test-toggle background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 outline-0-4px solid-3782712413200905402-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-3782712413200905402-255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
     />
   </div>
   <input
@@ -149,11 +158,12 @@ exports[`Toggle > should Toggle snapshot 9`] = `
 exports[`Toggle > should Toggle snapshot 10`] = `
 <div>
   <div
-    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    role="group"
     style="background-color: blue;"
   >
     <div
-      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 outline-0-4px solid-3782712413200905402-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-3782712413200905402-255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
       style="background-color: blue;"
     />
   </div>
@@ -167,7 +177,8 @@ exports[`Toggle > should Toggle snapshot 10`] = `
 exports[`Toggle > should Toggle snapshot 11`] = `
 <div>
   <div
-    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    role="group"
     style="--primary: blue; --bg: blue; --primaryHoverBg: blue; --hoverBg: blue; --disabledBg: blue;"
   >
     <div
@@ -185,11 +196,12 @@ exports[`Toggle > should Toggle snapshot 11`] = `
 exports[`Toggle > should Toggle snapshot 12`] = `
 <div>
   <div
-    class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    role="group"
     style="--primary: blue; --bg: blue; --primaryHoverBg: blue; --hoverBg: blue; --disabledBg: blue;"
   >
     <div
-      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255  transition-0-transform .25s--255"
+      class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 outline-0-4px solid-3782712413200905402-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-3782712413200905402-255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 top-0--6px--255  transition-0-transform .25s--255"
       style="--primary: blue; --primaryHoverBg: blue; --switchShadow: blue; --switchHoverOutline: blue;"
     />
   </div>
diff --git a/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
index a5be96d6..b35828f8 100644
--- a/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
@@ -29,7 +29,7 @@ describe('Toggle', () => {
     expect(
       render(
         <Toggle
-          className="test-toggle-wrapper"
+          className="test-toggle-wrapper  "
           classNames={{ toggle: 'test-toggle' }}
           value={true}
           variant="switch"
@@ -87,8 +87,10 @@ describe('Toggle', () => {
 
   it('should change value when use onChange prop', async () => {
     const onChange = vi.fn()
-    const { container } = render(<Toggle onChange={onChange} />)
-    const toggleButton = container.querySelector(`.toggle-switch`)
+    const { container } = render(
+      <Toggle className="test" onChange={onChange} />,
+    )
+    const toggleButton = container.querySelector('.test')
     const input = container.querySelector('input')
     toggleButton &&
       (await act(async () => {
diff --git a/packages/components/src/components/Toggle/index.tsx b/packages/components/src/components/Toggle/index.tsx
index 777307be..873c3fa6 100644
--- a/packages/components/src/components/Toggle/index.tsx
+++ b/packages/components/src/components/Toggle/index.tsx
@@ -63,13 +63,14 @@ export function Toggle({
         }
         borderRadius="500px"
         boxSizing="border-box"
-        className={'toggle-switch ' + className}
+        className={className}
         cursor="pointer"
         h={isDefault ? '28px' : '8px'}
-        justifyContent={resultValue ? 'flex-end' : undefined}
+        justifyContent={resultValue && 'flex-end'}
         onClick={() => !disabled && handleToggle(resultValue)}
-        p={isDefault ? 1 : undefined}
+        p={!isDefault && 1}
         position="relative"
+        role="group"
         selectors={{
           '&[aria-disabled=true]': {
             cursor: 'not-allowed',
@@ -89,29 +90,27 @@ export function Toggle({
           hoverBg: colors?.hoverBg,
           disabledBg: colors?.disabledBg,
         }}
+        test-id="toggle-wrapper"
         transition=".25s"
         w={isDefault ? '50px' : '40px'}
       >
         <Box
+          _groupHover={
+            !isDefault && {
+              outline: '4px solid',
+              outlineColor: `var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))`,
+            }
+          }
           backgroundColor="#fff"
           borderRadius="100%"
           boxSize="20px"
           className={classNames?.toggle}
           filter={
-            isDefault
-              ? undefined
-              : `drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));`
+            !isDefault &&
+            `drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));`
           }
           outline="4px"
           pos="absolute"
-          selectors={{
-            '.toggle-switch:not([aria-disabled=true]):hover > &': isDefault
-              ? {}
-              : {
-                  outline: '4px solid',
-                  outlineColor: `var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))`,
-                },
-          }}
           style={styles?.toggle}
           styleVars={{
             primary: colors?.primary,
@@ -119,16 +118,12 @@ export function Toggle({
             switchShadow: colors?.switchShadow,
             switchHoverOutline: colors?.switchHoverOutline,
           }}
-          top={isDefault ? undefined : '-6px'}
-          transform={resultValue ? 'translateX(calc(100% + 2px))' : undefined}
+          top={!isDefault && '-6px'}
+          transform={resultValue && 'translateX(calc(100% + 2px))'}
           transition={isDefault ? '.25s' : 'transform .25s'}
         />
       </Box>
-      <Input
-        defaultValue={String(defaultValue)}
-        type="hidden"
-        value={String(resultValue)}
-      />
+      <Input type="hidden" value={String(resultValue)} />
     </>
   )
 }

From 8e8fa950cd12647d4ab66934b7d7ccee5d3b99b2 Mon Sep 17 00:00:00 2001
From: belltalion <xogus4026@gmail.com>
Date: Thu, 11 Sep 2025 11:19:34 +0900
Subject: [PATCH 8/8] feat toggle

---
 .../__snapshots__/index.browser.test.tsx.snap        | 12 ++++++------
 packages/components/src/components/Radio/index.tsx   |  4 ++--
 .../__snapshots__/index.browser.test.tsx.snap        | 12 ++++++------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/Radio/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Radio/__tests__/__snapshots__/index.browser.test.tsx.snap
index 9e29e522..b12130b5 100644
--- a/packages/components/src/components/Radio/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Radio/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`Radio > should Radio snapshot 2`] = `
       type="radio"
     />
     <div
-      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
+      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
       data-radio-button="true"
     />
   </label>
@@ -69,7 +69,7 @@ exports[`Radio > should Radio snapshot 4`] = `
     />
     <div
       aria-disabled="true"
-      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
+      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
       data-radio-button="true"
     />
   </label>
@@ -111,7 +111,7 @@ exports[`Radio > should Radio snapshot 6`] = `
     />
     <div
       aria-disabled="true"
-      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
+      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
       data-radio-button="true"
       style="width: 500px;"
     />
@@ -154,7 +154,7 @@ exports[`Radio > should Radio snapshot 8`] = `
     />
     <div
       aria-disabled="true"
-      class="className cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
+      class="className cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
       data-radio-button="true"
     />
   </label>
@@ -192,7 +192,7 @@ exports[`Radio > should Radio snapshot 10`] = `
       type="radio"
     />
     <div
-      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-6px 0 0 6px--1"
+      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-8px 0 0 8px--1"
       data-radio-button="true"
     />
   </label>
@@ -210,7 +210,7 @@ exports[`Radio > should Radio snapshot 11`] = `
       type="radio"
     />
     <div
-      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-0 6px 6px 0--1"
+      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-0 8px 8px 0--1"
       data-radio-button="true"
     />
   </label>
diff --git a/packages/components/src/components/Radio/index.tsx b/packages/components/src/components/Radio/index.tsx
index 677c860d..b6b5e921 100644
--- a/packages/components/src/components/Radio/index.tsx
+++ b/packages/components/src/components/Radio/index.tsx
@@ -144,7 +144,7 @@ export function Radio({
           border="1px solid"
           borderColor="$border"
           borderRadius={
-            firstButton ? '6px 0 0 6px' : lastButton ? '0 6px 6px 0' : undefined
+            firstButton ? '8px 0 0 8px' : lastButton ? '0 8px 8px 0' : undefined
           }
           className={className}
           color="var(--text, light-dark(#000, #fff))"
@@ -152,7 +152,7 @@ export function Radio({
           data-radio-button
           display="flex"
           px={8}
-          py={4}
+          py={3}
           selectors={{
             // checked
             '[data-radio-input]:checked + &:not([aria-disabled=true])': {
diff --git a/packages/components/src/components/RadioGroup/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/RadioGroup/__tests__/__snapshots__/index.browser.test.tsx.snap
index 76e41e1d..c15f6b19 100644
--- a/packages/components/src/components/RadioGroup/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/RadioGroup/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -179,7 +179,7 @@ exports[`RadioGroup > should RadioGroup snapshot 5`] = `
         type="radio"
       />
       <div
-        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-6px 0 0 6px--1"
+        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-8px 0 0 8px--1"
         data-radio-button="true"
       >
         옵션 1
@@ -194,7 +194,7 @@ exports[`RadioGroup > should RadioGroup snapshot 5`] = `
         type="radio"
       />
       <div
-        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-0 6px 6px 0--1"
+        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-0 8px 8px 0--1"
         data-radio-button="true"
       >
         옵션 2
@@ -222,7 +222,7 @@ exports[`RadioGroup > should RadioGroup snapshot 6`] = `
       />
       <div
         aria-disabled="true"
-        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-6px 0 0 6px--1"
+        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-8px 0 0 8px--1"
         data-radio-button="true"
       >
         옵션 1
@@ -240,7 +240,7 @@ exports[`RadioGroup > should RadioGroup snapshot 6`] = `
       />
       <div
         aria-disabled="true"
-        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-0 6px 6px 0--1"
+        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-0 8px 8px 0--1"
         data-radio-button="true"
       >
         옵션 2
@@ -383,7 +383,7 @@ exports[`RadioGroup > should RadioGroup snapshot 10`] = `
         type="radio"
       />
       <div
-        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-6px 0 0 6px--1"
+        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-8px 0 0 8px--1"
         data-radio-button="true"
         style="--primary: red; --border: red; --text: red; --bg: red; --hoverBg: red; --hoverBorder: red; --hoverColor: red; --checkedBg: red; --checkedBorder: red; --checkedColor: red; --disabledBg: red; --disabledColor: red;"
       >
@@ -399,7 +399,7 @@ exports[`RadioGroup > should RadioGroup snapshot 10`] = `
         type="radio"
       />
       <div
-        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-0 6px 6px 0--1"
+        class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-0 8px 8px 0--1"
         data-radio-button="true"
         style="--primary: red; --border: red; --text: red; --bg: red; --hoverBg: red; --hoverBorder: red; --hoverColor: red; --checkedBg: red; --checkedBorder: red; --checkedColor: red; --disabledBg: red; --disabledColor: red;"
       >