[#45] ✨ 공통 컴포넌트 CheckboxInput 구현 (#105)

* [#45] ✨ Implementing CheckboxInput component (WIP)

* [#45] ✨ Add required images files for CheckboxInput component

* [#45] 🔧 Add new images to iconList

* [#45] ✨ Add toggleCheckbox utility func

* [#45] ✨ Implement CheckboxInput component

* [#45] ✅ Add Storybook test code for CheckboxInput component

* [#45] 🐛 Fix build error by replacing 'any' with precise type definition

* [#45] ✨ Add index file to export all Input components

* [#45] ✨ Add e.preventDefault() and explicit Enter key handling

* [#44] ♻️ Change span to button for better accessbility in clickable elements

* [#45] ♻️ Refactor functions and improve accessibility

Author: yongb2n

src/assets/IconList.ts

@@ -4,7 +4,11 @@ import IcBin from './icons/ic-bin.svg'
 import IcCalendar from './icons/ic-calendar.svg'
 import IcCaretDown from './icons/ic-caret-down.svg'
 import IcCaretUp from './icons/ic-caret-up.svg'
+import IcCheckOff from './icons/ic-check-off.svg'
+import IcCheckOn from './icons/ic-check-on.svg'
 import IcCheck from './icons/ic-check.svg'
+import IcCheckboxOff from './icons/ic-checkbox-off.svg'
+import IcCheckboxOn from './icons/ic-checkbox-on.svg'
 import IcChevronLeft from './icons/ic-chevron-left.svg'
 import IcChevronRight from './icons/ic-chevron-right.svg'
 import IcClose from './icons/ic-close.svg'
@@ -70,4 +74,8 @@ export {
   IcSearch,
   IcShare,
   IcStart,
+  IcCheckboxOn,
+  IcCheckboxOff,
+  IcCheckOn,
+  IcCheckOff,
 }

src/assets/icons/ic-check-off.svg

@@ -0,0 +1,87 @@
+import {
+  IcCheckOff,
+  IcCheckOn,
+  IcCheckboxOff,
+  IcCheckboxOn,
+} from '@/assets/IconList'
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+import { handleKeyDown } from '@/utils/handleKeyDown'
+import { toggleCheckbox } from '@/utils/toggleCheckbox'
+
+export interface CheckboxInputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string
+  variant: 'checkbox' | 'check'
+}
+
+export const CheckboxInput = ({
+  label,
+  variant = 'checkbox',
+  className = '',
+  checked = false,
+  disabled,
+  onChange,
+  ...props
+}: CheckboxInputProps): JSX.Element => {
+  const getCheckboxIcon = (checked: boolean) => {
+    return checked ? (
+      <IcCheckboxOn width={24} height={24} alt='체크된 체크박스' />
+    ) : (
+      <IcCheckboxOff width={24} height={24} alt='체크 안 된 체크박스' />
+    )
+  }
+
+  const getCheckIcon = (checked: boolean) => {
+    return checked ? (
+      <IcCheckOn width={24} height={24} alt='체크된 체크' />
+    ) : (
+      <IcCheckOff width={24} height={24} alt='체크 안 된 체크' />
+    )
+  }
+
+  const getIconForState = (variant: string, checked: boolean) => {
+    if (variant === 'checkbox') {
+      return getCheckboxIcon(checked)
+    }
+    return getCheckIcon(checked)
+  }
+
+  const handleToggle = () => {
+    if (!disabled) {
+      toggleCheckbox(checked, onChange, props.value)
+    }
+  }
+
+  const labelClass = clsx('flex items-center', disabled && 'opacity-50')
+  const buttonClass = twMerge(
+    'focus:outline-none focus:ring-1 focus:ring-primary-normal',
+    disabled && 'cursor-not-allowed opacity-50'
+  )
+  const labelTextClass = twMerge('ml-10 h-22', className)
+
+  return (
+    <label className={labelClass}>
+      <input
+        type='checkbox'
+        checked={checked}
+        disabled={disabled}
+        {...props}
+        className='hidden'
+      />
+      <button
+        role='checkbox'
+        tabIndex={0}
+        aria-checked={checked}
+        aria-label={'checkbox button'}
+        onKeyDown={e => handleKeyDown(e, handleToggle, disabled)}
+        onClick={handleToggle}
+        className={buttonClass}
+      >
+        {getIconForState(variant, checked)}
+      </button>
+      <span className={labelTextClass}>{label}</span>
+    </label>
+  )
+}

src/assets/icons/ic-check-on.svg

@@ -23,7 +23,7 @@ export const RadioInput = ({
   return (
     <label className={labelClass}>
       <input type='radio' checked={checked} disabled={disabled} {...props} />
-      <span
+      <button
         role='radio'
         tabIndex={0}
         aria-checked={checked}
@@ -34,7 +34,7 @@ export const RadioInput = ({
             () =>
               onChange?.({
                 target: { checked: true, value: props.value },
-              } as any),
+              } as React.ChangeEvent<HTMLInputElement>),
             disabled
           )
         }

src/assets/icons/ic-checkbox-off.svg

@@ -0,0 +1,7 @@
+import { CheckboxInput } from './CheckboxInput'
+import { PasswordInput } from './PasswordInput'
+import { RadioInput } from './RadioInput'
+import { TagInput } from './TagInput'
+import { TextInput } from './TextInput'
+
+export { CheckboxInput, PasswordInput, RadioInput, TagInput, TextInput }

src/assets/icons/ic-checkbox-on.svg

@@ -0,0 +1,79 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+
+import { CheckboxInput } from '@/components/common/input/CheckboxInput'
+import type { CheckboxInputProps } from '@/components/common/input/CheckboxInput'
+
+const meta: Meta<typeof CheckboxInput> = {
+  component: CheckboxInput,
+  title: 'Common/Input/CheckboxInput',
+  args: {
+    label: '전체 동의',
+    variant: 'checkbox',
+    disabled: false,
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof CheckboxInput>
+
+export const Default: Story = {
+  args: {
+    label: '전체 동의',
+    variant: 'checkbox',
+    checked: false,
+    disabled: false,
+  },
+  render: function Render(args: CheckboxInputProps) {
+    const [checked, setChecked] = useState(false)
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(e.target.checked)
+    }
+
+    return <CheckboxInput {...args} checked={checked} onChange={handleChange} />
+  },
+}
+
+export const Check: Story = {
+  args: {
+    label: '이메일 수신 동의',
+    variant: 'check',
+    checked: false,
+    disabled: false,
+  },
+  render: function Render(args: CheckboxInputProps) {
+    const [checked, setChecked] = useState(false)
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(e.target.checked)
+    }
+
+    return <CheckboxInput {...args} checked={checked} onChange={handleChange} />
+  },
+}
+
+export const DisabledCheckbox: Story = {
+  args: {
+    label: '비활성화된 체크박스',
+    variant: 'checkbox',
+    checked: false,
+    disabled: true,
+  },
+  render: function Render(args: CheckboxInputProps) {
+    return <CheckboxInput {...args} />
+  },
+}
+
+export const DisabledCheck: Story = {
+  args: {
+    label: '비활성화된 체크',
+    variant: 'check',
+    checked: false,
+    disabled: true,
+  },
+  render: function Render(args: CheckboxInputProps) {
+    return <CheckboxInput {...args} />
+  },
+}

src/components/common/input/CheckboxInput.tsx

@@ -3,7 +3,8 @@ export const handleKeyDown = (
   callback: () => void,
   disabled?: boolean
 ): void => {
-  if (e.key === 'Enter' && !disabled) {
+  if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+    e.preventDefault()
     callback()
   }
 }