Merge pull request #34 from hang-log-design-system/feature/#27

RadioButton 첫번째 옵션 선택된채로 랜더링 되게 수정
hang-log-design-system · Jul 13, 2023 · 226004c · 226004c
2 parents 0824db8 + d268656
commit 226004c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 18 deletions.
diff --git a/src/components/MenuItem/MenuItem.tsx b/src/components/MenuItem/MenuItem.tsx
@@ -1,21 +1,17 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
 import { menuItemStyling } from '@components/MenuItem/MenuItem.style';
 
-interface MenuItemProps {
-  /** 메뉴 이름   */
+interface MenuItemProps extends ComponentPropsWithoutRef<'li'> {
+  /** 메뉴 아이템 이름   */
   name: string;
-  /** 메뉴를 클릭했을 때 실행시킬 함수  */
+  /** 메뉴 아이템을 클릭했을 때 실행시킬 함수  */
   onClick: () => void;
-  /** 메뉴창을 닫는 함수 */
-  closeMenu: () => void;
 }
 
-const MenuItem = ({ name, onClick, closeMenu }: MenuItemProps) => {
-  const handleMenuItemClick = () => {
-    onClick();
-    closeMenu();
-  };
+const MenuItem = ({ name, ...attributes }: MenuItemProps) => {
   return (
-    <li onClick={handleMenuItemClick} css={menuItemStyling}>
+    <li css={menuItemStyling} {...attributes}>
       {name}
     </li>
   );

diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
@@ -1,4 +1,5 @@
-import { InputHTMLAttributes } from 'react';
+import { useState } from 'react';
+import type { ChangeEvent, ComponentPropsWithoutRef } from 'react';
 
 import Label from '@components/Label/Label';
 import {
@@ -9,16 +10,33 @@ import {
 } from '@components/RadioButton/RadioButton.style';
 import SupportingText from '@components/SupportingText/SupportingText';
 
-export interface RadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface RadioButtonProps extends ComponentPropsWithoutRef<'input'> {
   /** Radio에서 선택할 수 있는 문자열 option*/
   options: string[];
   /** RadioButton의 라벨 텍스트 */
   label?: string;
   /** RadioButton의 부가 정보 텍스트 */
   supportingText?: string;
+  /** 라디오 버튼들을 하나로 묶어주는 이름 */
+  name?: string;
 }
 
-const RadioButton = ({ options, label, supportingText, ...attributes }: RadioButtonProps) => {
+const RadioButton = ({
+  options,
+  label,
+  supportingText,
+  name = 'sample',
+  onChange,
+  ...attributes
+}: RadioButtonProps) => {
+  const [checkedOption, setCheckedOption] = useState<string>(options[0]);
+
+  const handleOptionClick = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e);
+
+    setCheckedOption(e.target.id);
+  };
+
   return (
     <div css={radioContainerStyling}>
       {label && (
@@ -29,8 +47,16 @@ const RadioButton = ({ options, label, supportingText, ...attributes }: RadioBut
       <div css={radioWrapperStyling}>
         {options.map((option) => (
           <>
-            <label htmlFor={option} css={labelStyling}>
-              <input type="radio" hidden id={option} name={attributes.name} {...attributes} />
+            <label htmlFor={option} key={option} css={labelStyling}>
+              <input
+                type="radio"
+                hidden
+                id={option}
+                name={name}
+                checked={checkedOption === option}
+                onChange={handleOptionClick}
+                {...attributes}
+              />
               <div css={buttonStyling} />
               {option}
             </label>

diff --git a/src/stories/Menu.stories.tsx b/src/stories/Menu.stories.tsx
@@ -24,8 +24,8 @@ export const Default: Story = {
         <Button onClick={() => setShowMenu(!showMenu)}>Menu</Button>
         {showMenu && (
           <MenuList>
-            <MenuItem name="menu1" onClick={() => {}} closeMenu={() => setShowMenu(false)} />
-            <MenuItem name="menu2" onClick={() => {}} closeMenu={() => setShowMenu(false)} />
+            <MenuItem name="menu1" onClick={() => setShowMenu(false)} />
+            <MenuItem name="menu2" onClick={() => setShowMenu(false)} />
           </MenuList>
         )}
       </Menu>