From 5e25a9250070441588a4ac3a9db02b5253fd713e Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Tue, 7 Mar 2023 20:57:06 +0900
Subject: [PATCH] refactor: pass down value and name directly

---
 .../RadioButton/RadioButton.stories.tsx       |  1 +
 .../components/RadioButton/RadioButton.tsx    | 11 ++++--
 .../RadioButtonGroup.context.ts               |  3 +-
 .../RadioButtonGroup.stories.tsx              | 34 +++++--------------
 .../RadioButtonGroup/RadioButtonGroup.tsx     |  6 ++--
 5 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx
index c27a36c..2a9d446 100644
--- a/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx
+++ b/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx
@@ -24,4 +24,5 @@ Root.args = {
   disabled: false,
   checked: undefined,
   onChange: undefined,
+  value: '1',
 }
diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx
index a547e68..ed49ac2 100644
--- a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx
+++ b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx
@@ -17,7 +17,7 @@ export type RadioButtonProps = Omit<
     disabled?: boolean
     size?: 'small' | 'medium' | 'large'
     name?: string
-    value?: string
+    value: string
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>
   }
 
@@ -29,15 +29,18 @@ export const RadioButton: React.FC<RadioButtonProps> & {
   checked: _checked,
   defaultChecked,
   disabled = false,
+  value,
   inputProps = {},
   children,
   ...props
 }) => {
   const ref = useRef<HTMLInputElement>(null)
+
   const radioButtonGroup = useRadioButtonGroupContext()
   const size = radioButtonGroup?.size ?? _size
+  const name = radioButtonGroup?.name ?? ''
   const selected = radioButtonGroup
-    ? radioButtonGroup.value === inputProps?.value
+    ? radioButtonGroup.value === value
     : _checked
 
   const input = useInput({
@@ -49,7 +52,7 @@ export const RadioButton: React.FC<RadioButtonProps> & {
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     radioButtonGroup
-      ? radioButtonGroup.setActiveValue(event.target.value)
+      ? radioButtonGroup.setActiveRadioButton(event.target.value)
       : input.onChange(event)
   }
 
@@ -69,6 +72,8 @@ export const RadioButton: React.FC<RadioButtonProps> & {
     >
       <input
         ref={ref}
+        name={name}
+        value={value}
         type="radio"
         checked={input.value}
         onChange={handleChange}
diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts
index 311c7e5..381b5d0 100644
--- a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts
+++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts
@@ -6,7 +6,8 @@ import {
 
 export type RadioButtonGroupContextType = {
   value?: ActiveRadioButtonType | null
-  setActiveValue: (value: ActiveRadioButtonType) => void
+  name?: string | null
+  setActiveRadioButton: (value: ActiveRadioButtonType) => void
 
   size?: RadioButtonGroupProps['size']
 }
diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx
index 2225f95..4bde163 100644
--- a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx
+++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx
@@ -17,31 +17,15 @@ export default {
 } as Meta
 
 export const Root: Story<RadioButtonGroupProps> = (args) => (
-  <RadioButtonGroup {...args}>
-    <RadioButton checked inputProps={{ name: 'name', value: '1' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '2' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '3' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '4' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '5' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '6' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '7' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '8' }}>
-      RadioButton label
-    </RadioButton>
+  <RadioButtonGroup name="name" {...args}>
+    <RadioButton value="1">RadioButton label</RadioButton>
+    <RadioButton value="2">RadioButton label</RadioButton>
+    <RadioButton value="3">RadioButton label</RadioButton>
+    <RadioButton value="4">RadioButton label</RadioButton>
+    <RadioButton value="5">RadioButton label</RadioButton>
+    <RadioButton value="6">RadioButton label</RadioButton>
+    <RadioButton value="7">RadioButton label</RadioButton>
+    <RadioButton value="8">RadioButton label</RadioButton>
   </RadioButtonGroup>
 )
 
diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
index 505f2e2..57913e3 100644
--- a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -7,8 +7,8 @@ import { Typography } from '../Typography'
 export type ActiveRadioButtonType = string | readonly string[]
 
 export type RadioButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
-  value?: ActiveRadioButtonType | null
-  name?: ActiveRadioButtonType | null
+  value: ActiveRadioButtonType | null
+  name?: string | null
   onChange?: (value: ActiveRadioButtonType) => void
   size?: 'small' | 'medium' | 'large'
   label?: string
@@ -29,7 +29,7 @@ export const RadioButtonGroup: React.FC<RadioButtonGroupProps> & {
 
   return (
     <RadioButtonGroupContext.Provider
-      value={{ value: activeValue, setActiveValue, size }}
+      value={{ value: activeValue, setActiveRadioButton, name, size }}
     >
       <div
         ref={ref}