[#44] ✨ RadioInput 컴포넌트 구현 (#94)

* [#44] 💄 Add custom radio input class styling

* [#44] ✨ Implement RadioInput component

* [#44] ♻️ Add JSX.Element type

* [#44] ✨ Create utility func for handling keydown events

* [#44] ♻️ Refactor RadioInput for improved accessibility

* [#44] ✅ Add Storybook for RadioInput component

Author: yongb2n

src/components/common/input/RadioInput.tsx

@@ -0,0 +1,48 @@
+import clsx from 'clsx'
+
+import { handleKeyDown } from '@/utils/handleKeyDown'
+
+interface RadioInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string
+}
+
+export const RadioInput = ({
+  label,
+  className = '',
+  checked,
+  disabled,
+  onChange,
+  ...props
+}: RadioInputProps): JSX.Element => {
+  const labelClass = clsx(
+    'flex cursor-pointer items-center',
+    disabled && 'cursor-not-allowed opacity-50',
+    className
+  )
+
+  return (
+    <label className={labelClass}>
+      <input type='radio' checked={checked} disabled={disabled} {...props} />
+      <span
+        role='radio'
+        tabIndex={0}
+        aria-checked={checked}
+        aria-label={'radio button'}
+        onKeyDown={e =>
+          handleKeyDown(
+            e,
+            () =>
+              onChange?.({
+                target: { checked: true, value: props.value },
+              } as any),
+            disabled
+          )
+        }
+        className='custom-radio'
+      />
+      <span className='text-body-2 ml-4 h-22 font-normal text-gray-800'>
+        {label}
+      </span>
+    </label>
+  )
+}

src/stories/common/input/RadioInput.stories.ts

@@ -0,0 +1,21 @@
+import { fn } from '@storybook/test'
+
+import { RadioInput } from '@/components/common/input/RadioInput'
+
+export default {
+  title: 'Common/Input/RadioInput',
+  component: RadioInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['common', 'radio'],
+  args: {
+    onChange: fn(),
+  },
+}
+
+export const Default = {
+  args: {
+    label: '회사 ‧ 학교',
+  },
+}

src/styles/globals.css

@@ -14,3 +14,25 @@ select {
   outline: 0;
   cursor: pointer;
 }
+
+input[type='radio'] {
+  display: none;
+}
+.custom-radio {
+  @apply relative inline-block h-20 w-20 cursor-pointer rounded-full border-[1.4px] border-solid border-gray-300;
+}
+.custom-radio::before {
+  content: '';
+  @apply absolute left-1/2 top-1/2 block h-12 w-12 -translate-x-1/2 -translate-y-1/2 rounded-full;
+}
+input[type='radio']:checked + .custom-radio {
+  @apply border-primary-normal;
+}
+
+input[type='radio']:checked + .custom-radio::before {
+  @apply bg-primary-normal;
+}
+
+label:focus-within .custom-radio {
+  @apply ring-1 ring-primary-normal;
+}

src/utils/handleKeyDown.ts

@@ -0,0 +1,9 @@
+export const handleKeyDown = (
+  e: React.KeyboardEvent,
+  callback: () => void,
+  disabled?: boolean
+): void => {
+  if (e.key === 'Enter' && !disabled) {
+    callback()
+  }
+}