feat: Radio 컴포넌트 additionalInfo type 추가

Kernel360 · Jan 7, 2024 · 1c2d5ef · 1c2d5ef
1 parent 152c493
commit 1c2d5ef
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/components/shared/radio/Radio.module.scss b/src/components/shared/radio/Radio.module.scss
@@ -30,12 +30,19 @@ label.ageGroup {
   border-radius: 30px;
 }
 
-input[type="radio"] + label.ageGroup {
+label.additionalInfo {
+  height: 60px;
+  border-radius: 10px;
+}
+
+input[type="radio"] + label.ageGroup,
+input[type="radio"] + label.additionalInfo {
   background-color: var(--white-100);
   color: var(--gray-300);
 }
 
-input[type="radio"]:checked + label.ageGroup {
+input[type="radio"]:checked + label.ageGroup,
+input[type="radio"]:checked + label.additionalInfo {
   background-color: var(--primary);
   color: var(--white-100);
 }
diff --git a/src/components/shared/radio/Radio.stories.tsx b/src/components/shared/radio/Radio.stories.tsx
@@ -30,3 +30,11 @@ export const ageGroup: Story = {
     value: '10',
   },
 };
+
+export const additionalInfo: Story = {
+  args: {
+    type: 'additionalInfo',
+    label: '소형',
+    value: 'mini',
+  },
+};
diff --git a/src/components/shared/radio/Radio.tsx b/src/components/shared/radio/Radio.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames/bind';
 import styles from './Radio.module.scss';
 
 interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
-  type: 'gender' | 'ageGroup'
+  type: 'gender' | 'ageGroup' | 'additionalInfo'
   label: string
   value: string | number
 }
@@ -18,7 +18,9 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(({
   return (
     <>
       <input id={label} type="radio" ref={ref} value={value} />
-      <label className={cx({ gender: type === 'gender', ageGroup: type === 'ageGroup' })} htmlFor={label}>{label}</label>
+      <label className={cx({ [type]: true })} htmlFor={label}>
+        {label}
+      </label>
     </>
   );
 });