React Meritz 컴포넌트 스터디 가이드

컴포넌트 코드

components/Badge/Badge.jsx

import { cn } from '@/utils/cn'
import styles from './Badge.module.css'

const BADGE_TYPES = {
  text: styles.text,
  number: styles.number,
  iconText: styles.iconText,
}

const BADGE_TONES = {
  red: styles.red,
  gray: styles.gray,
  orange: styles.orange,
  green: styles.green,
  blue: styles.blue,
  dark: styles.dark,
  light: styles.light,
}

function renderIcon(icon) {
  if (!icon) return null

  return (
    <span className={styles.icon} aria-hidden="true">
      {icon}
    </span>
  )
}

export default function Badge({
  icon,
  text,
  children,
  type = icon ? 'iconText' : 'text',
  tone = 'red',
  hasBorder = false,
  className,
  ...props
}) {
  const label = text ?? children
  const badgeType = BADGE_TYPES[type] ?? BADGE_TYPES.text
  const badgeTone = BADGE_TONES[tone] ?? BADGE_TONES.red

  return (
    <span className={cn(styles.badge, badgeType, badgeTone, hasBorder && styles.border, className)} {...props}>
      {type === 'iconText' && renderIcon(icon)}
      <span className={styles.label}>{label}</span>
    </span>
  )
}

컴포넌트 코드

components/Badge/BadgeGroup.jsx

import { Children } from 'react'
import { cn } from '@/utils/cn'
import styles from './BadgeGroup.module.css'

export default function BadgeGroup({ children, className, ...props }) {
  const badges = Children.toArray(children).filter(Boolean)

  if (badges.length <= 1) {
    return badges[0] ?? null
  }

  return (
    <div className={cn(styles.group, className)} {...props}>
      {badges}
    </div>
  )
}

컴포넌트 코드

components/Button/Button.jsx

import Badge from '@/components/Badge/Badge'
import { cn } from '@/utils/cn'
import styles from './Button.module.css'

const BUTTON_VARIANTS = {
  primary: styles.primary,
  secondary: styles.secondary,
  tertiary: styles.tertiary,
  outline: styles.outline,
  outlineLight: styles.outlineLight,
  gradation: styles.gradation,
}

const BUTTON_SIZES = {
  xxl: styles.xxl,
  xl: styles.xl,
  lg: styles.lg,
  md: styles.md,
  sm: styles.sm,
}

const BUTTON_ICON_SIZES = {
  xxl: 24,
  xl: 24,
  lg: 24,
  md: 16,
  sm: 16,
}

function renderIcon(Icon, size, stroke, fill) {
  if (!Icon) return null

  return (
    <span className={styles.icon} aria-hidden="true">
      <Icon size={size} stroke={stroke} fill={fill} />
    </span>
  )
}

export default function Button({
  children,
  label,
  leftIcon: LeftIcon,
  rightIcon: RightIcon,
  iconSize,
  iconStroke = 'currentColor',
  iconFill,
  badge,
  badgeTone,
  variant = 'primary',
  size = 'lg',
  fullWidth = false,
  className,
  type = 'button',
  ...props
}) {
  const buttonVariant = BUTTON_VARIANTS[variant] ?? BUTTON_VARIANTS.primary
  const buttonSize = BUTTON_SIZES[size] ?? BUTTON_SIZES.lg
  const buttonLabel = label ?? children
  const buttonBadgeTone = badgeTone ?? (variant === 'secondary' ? 'light' : 'dark')
  const buttonIconSize = iconSize ?? BUTTON_ICON_SIZES[size] ?? BUTTON_ICON_SIZES.lg

  return (
    <button
      type={type}
      className={cn(styles.button, buttonVariant, buttonSize, fullWidth && styles.fullWidth, className)}
      {...props}
    >
      {renderIcon(LeftIcon, buttonIconSize, iconStroke, iconFill)}
      {buttonLabel && <span className={styles.label}>{buttonLabel}</span>}
      {renderIcon(RightIcon, buttonIconSize, iconStroke, iconFill)}
      {badge && <Badge type="number" tone={buttonBadgeTone} text={badge} className={styles.badge} />}
    </button>
  )
}

컴포넌트 코드

components/Button/ButtonGroup.jsx

import { Children, cloneElement, isValidElement } from 'react'
import { cn } from '@/utils/cn'
import styles from './ButtonGroup.module.css'

const BUTTON_GROUP_RATIOS = {
  equal: styles.equal,
  '50-50': styles.equal,
  '35-65': styles.leftSmall,
  '65-35': styles.leftLarge,
}

export default function ButtonGroup({ children, ratio = 'equal', floating = false, className, ...props }) {
  const items = Children.toArray(children).filter(Boolean)
  const groupRatio = items.length > 1 ? BUTTON_GROUP_RATIOS[ratio] ?? BUTTON_GROUP_RATIOS.equal : styles.single

  return (
    <div className={cn(styles.group, groupRatio, floating && styles.floating, className)} {...props}>
      {items.map((child) => {
        if (!isValidElement(child)) return child

        return cloneElement(child, {
          fullWidth: true,
          ...child.props,
        })
      })}
    </div>
  )
}

컴포넌트 코드

components/Button/ButtonIcon.jsx

import { useState } from 'react'
import { cn } from '@/utils/cn'
import styles from './ButtonIcon.module.css'

export default function ButtonIcon({
  icon: Icon,
  size = 24,
  stroke,
  fill,
  hoverStroke,
  hoverFill,
  activeStroke,
  activeFill,
  disabledStroke,
  disabledFill,
  label,
  className,
  hoverBackground = true,
  disabled = false,
  type = 'button',
  onMouseEnter,
  onMouseLeave,
  onMouseDown,
  onMouseUp,
  onTouchStart,
  onTouchEnd,
  onTouchCancel,
  ...props
}) {
  const [isHovered, setIsHovered] = useState(false)
  const [isPressed, setIsPressed] = useState(false)
  const ariaLabel = props['aria-label'] ?? label
  const iconStroke = disabled
    ? disabledStroke ?? stroke
    : isPressed
      ? activeStroke ?? hoverStroke ?? stroke
      : isHovered
        ? hoverStroke ?? stroke
        : stroke
  const iconFill = disabled
    ? disabledFill ?? fill
    : isPressed
      ? activeFill ?? hoverFill ?? fill
      : isHovered
        ? hoverFill ?? fill
        : fill

  return (
    <button
      type={type}
      className={cn(styles.button, hoverBackground && styles.hoverBackground, className)}
      aria-label={ariaLabel}
      disabled={disabled}
      onMouseEnter={(event) => {
        setIsHovered(true)
        onMouseEnter?.(event)
      }}
      onMouseLeave={(event) => {
        setIsHovered(false)
        setIsPressed(false)
        onMouseLeave?.(event)
      }}
      onMouseDown={(event) => {
        setIsPressed(true)
        onMouseDown?.(event)
      }}
      onMouseUp={(event) => {
        setIsPressed(false)
        onMouseUp?.(event)
      }}
      onTouchStart={(event) => {
        setIsPressed(true)
        onTouchStart?.(event)
      }}
      onTouchEnd={(event) => {
        setIsPressed(false)
        onTouchEnd?.(event)
      }}
      onTouchCancel={(event) => {
        setIsPressed(false)
        onTouchCancel?.(event)
      }}
      {...props}
    >
      {Icon && <Icon size={size} stroke={iconStroke} fill={iconFill} />}
    </button>
  )
}

컴포넌트 코드

components/Calendar/DateInline.jsx

import { useState } from 'react'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
import { cn } from '@/utils/cn'
import styles from './DateInline.module.css'

function formatMonthTitle(date) {
  return `${date.getFullYear()}년  ${String(date.getMonth() + 1).padStart(2, '0')}월`
}

function toDateKey(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')

  return `${year}-${month}-${day}`
}

function getNextMonth(date, amount) {
  return new Date(date.getFullYear(), date.getMonth() + amount, 1)
}

export default function DateInline({
  selected,
  defaultSelected = new Date(),
  onChange,
  markers = [],
  buttonLabel = '버튼명',
  onButtonClick,
  className,
  calendarClassName,
  ...props
}) {
  const [internalSelected, setInternalSelected] = useState(defaultSelected)
  const [viewDate, setViewDate] = useState(selected ?? defaultSelected)
  const selectedDate = selected ?? internalSelected
  const markerSet = new Set(markers.map((date) => toDateKey(date)))

  function handleChange(date) {
    setInternalSelected(date)
    onChange?.(date)
  }

  return (
    <div className={cn(styles.wrap, className)}>
      <DatePicker
        {...props}
        inline
        selected={selectedDate}
        calendarClassName={cn(styles.calendar, calendarClassName)}
        onChange={handleChange}
        onMonthChange={setViewDate}
        renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
          <div className={styles.header}>
            <strong className={styles.title}>{formatMonthTitle(date)}</strong>
            <div className={styles.nav}>
              <button
                className={styles.navButton}
                type="button"
                aria-label="이전 달"
                onClick={() => {
                  setViewDate(getNextMonth(date, -1))
                  decreaseMonth()
                }}
              >
                ‹
              </button>
              <button
                className={styles.navButton}
                type="button"
                aria-label="다음 달"
                onClick={() => {
                  setViewDate(getNextMonth(date, 1))
                  increaseMonth()
                }}
              >
                ›
              </button>
            </div>
          </div>
        )}
        renderDayContents={(day, date) => {
          const isOutsideMonth = date.getMonth() !== viewDate.getMonth()
          const hasMarker = markerSet.has(toDateKey(date))

          return (
            <span className={cn(styles.dayContent, isOutsideMonth && styles.outsideDay)}>
              <span>{day}</span>
              {hasMarker && !isOutsideMonth && <span className={styles.dot} />}
            </span>
          )
        }}
      />
      {buttonLabel && (
        <button className={styles.cta} type="button" onClick={() => onButtonClick?.(selectedDate)}>
          {buttonLabel}
        </button>
      )}
    </div>
  )
}

컴포넌트 코드

components/Calendar/Datepicker.jsx

import { useState } from 'react'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
import { cn } from '@/utils/cn'
import styles from './Datepicker.module.css'

function toDateKey(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')

  return `${year}-${month}-${day}`
}

function getNextMonth(date, amount) {
  return new Date(date.getFullYear(), date.getMonth() + amount, 1)
}

function formatTitle(date) {
  const month = String(date.getMonth() + 1).padStart(2, '0')

  return `${month}월 - ${month}월 근무계획표`
}

function getPlanContent(plan) {
  if (!plan) return null
  if (typeof plan === 'string') return plan

  return plan.label ?? plan.text ?? plan.hours
}

export default function Datepicker({
  selected,
  defaultSelected = new Date(),
  onChange,
  title,
  buttonLabel = '버튼명',
  onButtonClick,
  plans = {},
  bottomText = '문구',
  className,
  calendarClassName,
  ...props
}) {
  const [internalSelected, setInternalSelected] = useState(defaultSelected)
  const [viewDate, setViewDate] = useState(selected ?? defaultSelected)
  const selectedDate = selected ?? internalSelected

  function handleChange(date) {
    setInternalSelected(date)
    onChange?.(date)
  }

  return (
    <div className={cn(styles.wrap, className)}>
      <div className={styles.top}>
        <strong className={styles.title}>{title ?? formatTitle(viewDate)}</strong>
        {buttonLabel && (
          <button className={styles.topButton} type="button" onClick={() => onButtonClick?.(selectedDate)}>
            {buttonLabel}
          </button>
        )}
      </div>

      <DatePicker
        {...props}
        inline
        selected={selectedDate}
        calendarClassName={cn(styles.calendar, calendarClassName)}
        onChange={handleChange}
        onMonthChange={setViewDate}
        renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
          <div className={styles.header}>
            <button
              className={styles.navButton}
              type="button"
              aria-label="이전 달"
              onClick={() => {
                setViewDate(getNextMonth(date, -1))
                decreaseMonth()
              }}
            >
              ‹
            </button>
            <button
              className={styles.navButton}
              type="button"
              aria-label="다음 달"
              onClick={() => {
                setViewDate(getNextMonth(date, 1))
                increaseMonth()
              }}
            >
              ›
            </button>
          </div>
        )}
        renderDayContents={(day, date) => {
          const isOutsideMonth = date.getMonth() !== viewDate.getMonth()
          const plan = plans[toDateKey(date)]
          const planContent = getPlanContent(plan)
          const isMuted = typeof plan === 'object' && plan.muted

          return (
            <span className={cn(styles.dayContent, isOutsideMonth && styles.outsideDay)}>
              <span>{day}</span>
              {planContent && (
                <span className={cn(styles.badge, isMuted && styles.mutedBadge)}>
                  {planContent}
                </span>
              )}
            </span>
          )
        }}
      />

      {bottomText && <div className={styles.bottom}>{bottomText}</div>}
    </div>
  )
}

컴포넌트 코드

components/Checkbox/Checkbox.jsx

import { cn } from '@/utils/cn'
import styles from './Checkbox.module.css'

export default function Checkbox({
  children,
  label,
  rightText,
  rightContent,
  rightTone = 'primary',
  className,
  controlClassName,
  textClassName,
  rightClassName,
  ...props
}) {
  const checkboxLabel = label ?? children
  const checkboxRightContent = rightContent ?? rightText

  return (
    <label className={cn(styles.checkbox, className)}>
      <input {...props} className={styles.input} type="checkbox" />
      <span className={cn(styles.control, controlClassName)} aria-hidden="true" />
      {checkboxLabel && <span className={cn(styles.text, textClassName)}>{checkboxLabel}</span>}
      {checkboxRightContent && (
        <span className={cn(styles.right, styles[rightTone], rightClassName)}>{checkboxRightContent}</span>
      )}
    </label>
  )
}

컴포넌트 코드

components/Checkbox/CheckboxGroup.jsx

import { Children } from 'react'
import { cn } from '@/utils/cn'
import styles from './CheckboxGroup.module.css'

const CHECKBOX_GROUP_DIRECTIONS = {
  horizontal: styles.horizontal,
  vertical: styles.vertical,
}

export default function CheckboxGroup({
  children,
  direction = 'vertical',
  className,
  ...props
}) {
  const items = Children.toArray(children).filter(Boolean)
  const groupDirection = CHECKBOX_GROUP_DIRECTIONS[direction] ?? CHECKBOX_GROUP_DIRECTIONS.vertical

  if (items.length <= 1) {
    return items[0] ?? null
  }

  return (
    <div className={cn(styles.group, groupDirection, className)} role="group" {...props}>
      {items}
    </div>
  )
}

컴포넌트 코드

components/Header/Header.jsx

import { cn } from '@/utils/cn'
import styles from './Header.module.css'

export default function Header({
  logo,
  title = 'ONE',
  brand = 'meritz',
  right,
  className,
  brandClassName,
  titleClassName,
  ...props
}) {
  return (
    <header className={cn(styles.header, className)} {...props}>
      <div className={styles.logoArea}>
        {logo ?? (
          <>
            <span className={cn(styles.brand, brandClassName)}>{brand}</span>
            <span className={cn(styles.title, titleClassName)}>{title}</span>
          </>
        )}
      </div>
      <div className={styles.right}>{right ?? <span className={styles.iconPlaceholder} aria-hidden="true" />}</div>
    </header>
  )
}

컴포넌트 코드

components/Header/HeaderSub.jsx

import { cn } from '@/utils/cn'
import styles from './HeaderSub.module.css'

export default function HeaderSub({
  title,
  left,
  action,
  right,
  className,
  titleClassName,
  ...props
}) {
  return (
    <header className={cn(styles.header, className)} {...props}>
      <div className={styles.left}>
        {left ?? <span className={styles.iconPlaceholder} aria-hidden="true" />}
        {title && <strong className={cn(styles.title, titleClassName)}>{title}</strong>}
      </div>

      <div className={styles.right}>
        {action}
        {right ?? (
          <>
            <span className={styles.iconPlaceholder} aria-hidden="true" />
            <span className={styles.iconPlaceholder} aria-hidden="true" />
          </>
        )}
      </div>
    </header>
  )
}

컴포넌트 코드

components/icons/FilterIcon.jsx

export default function FilterIcon({ size = 32, stroke, fill}){
    return(
        <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.33337 8H26.6667" stroke={stroke ?? '#222'} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M5.33337 16H26.6667" stroke={stroke ?? '#222'} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M5.33337 24H26.6667" stroke={stroke ?? '#222'} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="10.6667" cy="8.00008" r="2.33333" fill={fill ?? '#fff'} stroke={stroke ?? '#222'} stroke-width="2"/>
            <circle cx="21.3333" cy="16.0001" r="2.33333" fill={fill ?? '#fff'} stroke={stroke ?? '#EF3B24'} stroke-width="2"/>
            <circle cx="10.6667" cy="24.0001" r="2.33333" fill={fill ?? '#fff'} stroke={stroke ?? '#222'} stroke-width="2"/>
        </svg>
    )
}

컴포넌트 코드

components/icons/TextEditIcon.jsx

export default function TextEditIcon({ size = 24, stroke }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M2.83325 14.75C2.83325 18.2975 5.70242 21.1667 9.24992 21.1667L8.28743 19.5625" stroke={stroke ?? '#222222'} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M21.1665 9.24992C21.1665 5.70242 18.2974 2.83325 14.7499 2.83325L15.7124 4.43742" stroke={stroke ?? '#222222'} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M7.72339 10.083V9.2488C7.72339 8.72172 8.14964 8.30005 8.67214 8.30005H15.3271C15.8542 8.30005 16.2759 8.7263 16.2759 9.2488V10.083" stroke={stroke ?? '#EF3B24'} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M12 16.2941V8.68115" stroke={stroke ?? '#EF3B24'} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M10.1941 16.2942H13.8058" stroke={stroke ?? '#EF3B24'} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  )
}

컴포넌트 코드

components/icons/UserAddIcon.jsx

export default function UserAddIcon({ size = 24, stroke }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z"
        stroke={stroke ?? '#222222'}
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M4 21C4 17.13 7.6598 14 12.1656 14C12.4473 14 12.7256 14.0122 13 14.0361"
        stroke={stroke ?? '#222222'}
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M22 18C22 18.32 21.96 18.63 21.88 18.93C21.79 19.33 21.63 19.72 21.42 20.06C20.73 21.22 19.46 22 18 22C16.97 22 16.04 21.61 15.34 20.97C15.04 20.71 14.78 20.4 14.58 20.06C14.21 19.46 14 18.75 14 18C14 16.92 14.43 15.93 15.13 15.21C15.86 14.46 16.88 14 18 14C19.18 14 20.25 14.51 20.97 15.33C21.61 16.04 22 16.98 22 18Z"
        stroke={stroke ?? '#222222'}
        strokeWidth="1.6"
        strokeMiterlimit="10"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M19.49 17.98H16.51"
        stroke={stroke ?? '#EF3B24'}
        strokeWidth="1.6"
        strokeMiterlimit="10"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M18 16.52V19.51"
        stroke={stroke ?? '#EF3B24'}
        strokeWidth="1.6"
        strokeMiterlimit="10"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

컴포넌트 코드

components/Message/Message.jsx

현재 파일 내용이 없습니다.

컴포넌트 코드

components/Modal/BottomModal.jsx

현재 파일 내용이 없습니다.

컴포넌트 코드

components/Modal/BottomSheet.jsx

import Button from '@/components/Button/Button'
import { cn } from '@/utils/cn'
import styles from './BottomSheet.module.css'

function CheckIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="m6 12 4 4 8-8" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  )
}

function CloseIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="m6 6 12 12M18 6 6 18" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
    </svg>
  )
}

export default function BottomSheet({
  title = '\uc8fc\uc694\ubb38\uad6c',
  subText = '\ubd80\uac00\uc124\uba85',
  items = [],
  buttonLabel = '\ubc84\ud2bc\uba85',
  onButtonClick,
  onClose,
  className,
  contentClassName,
  buttonClassName,
  ...props
}) {
  return (
    <section className={cn(styles.sheet, className)} role="dialog" aria-modal="true" {...props}>
      <button className={styles.closeButton} type="button" aria-label="Close" onClick={onClose}>
        <CloseIcon />
      </button>

      <div className={cn(styles.content, contentClassName)}>
        <div className={styles.header}>
          <strong className={styles.title}>{title}</strong>
          {subText && <p className={styles.subText}>{subText}</p>}
        </div>

        {items.length > 0 && (
          <ul className={styles.list}>
            {items.map((item, index) => (
              <li className={styles.item} key={`${item.label}-${index}`}>
                <span className={styles.check}>
                  {item.icon ?? <CheckIcon />}
                </span>
                <span className={styles.itemLabel}>{item.label}</span>
                {item.rightText && <span className={styles.itemRight}>{item.rightText}</span>}
              </li>
            ))}
          </ul>
        )}

        {buttonLabel && (
          <Button className={cn(styles.button, buttonClassName)} variant="gradation" size="xxl" fullWidth onClick={onButtonClick}>
            {buttonLabel}
          </Button>
        )}
      </div>
    </section>
  )
}

컴포넌트 코드

components/Modal/FullModal.jsx

현재 파일 내용이 없습니다.

컴포넌트 코드

components/Modal/Modal.jsx

import Button from '@/components/Button/Button'
import ButtonGroup from '@/components/Button/ButtonGroup'
import { cn } from '@/utils/cn'
import styles from './Modal.module.css'

const MODAL_TYPES = {
  alert: styles.alert,
  info: styles.info,
  confirm: styles.confirm,
  error: styles.error,
}

const MODAL_TITLES = {
  alert: '\uc54c\ub9bc',
  info: '\uc548\ub0b4',
  confirm: '\ud655\uc778',
  error: '\uc624\ub958',
}

function ModalIcon({ type }) {
  if (type === 'confirm') {
    return (
      <svg viewBox="0 0 48 48" aria-hidden="true">
        <path d="M14 24.5 21 31l13-14" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    )
  }

  if (type === 'error') {
    return (
      <svg viewBox="0 0 48 48" aria-hidden="true">
        <path d="m17 17 14 14M31 17 17 31" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
      </svg>
    )
  }

  if (type === 'info') {
    return (
      <svg viewBox="0 0 48 48" aria-hidden="true">
        <path d="M24 21v13M24 14.5v.5" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
      </svg>
    )
  }

  return (
    <svg viewBox="0 0 48 48" aria-hidden="true">
      <path d="M24 13v14M24 34v.5" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
    </svg>
  )
}

function getButtonVariant(button, index, total) {
  if (button.variant) return button.variant
  if (total === 1) return 'secondary'

  return index === 0 ? 'outlineLight' : 'secondary'
}

export default function Modal({
  type = 'alert',
  title,
  mainText,
  subText,
  children,
  buttons = [{ label: '\ubc84\ud2bc\uba85' }],
  buttonRatio = '50-50',
  icon,
  className,
  iconClassName,
  contentClassName,
  buttonGroupClassName,
  role = 'dialog',
  ...props
}) {
  const modalType = MODAL_TYPES[type] ?? MODAL_TYPES.alert
  const modalTitle = title ?? MODAL_TITLES[type] ?? MODAL_TITLES.alert
  const buttonItems = buttons.filter(Boolean).slice(0, 2)

  return (
    <section
      className={cn(styles.modal, modalType, className)}
      role={role}
      aria-modal={role === 'dialog' ? 'true' : undefined}
      {...props}
    >
      <div className={cn(styles.icon, iconClassName)}>
        {icon ?? <ModalIcon type={type} />}
      </div>

      <div className={cn(styles.content, contentClassName)}>
        {modalTitle && <strong className={styles.title}>{modalTitle}</strong>}
        {mainText && <p className={styles.mainText}>{mainText}</p>}
        {subText && <p className={styles.subText}>{subText}</p>}
        {children}
      </div>

      {buttonItems.length > 0 && (
        <ButtonGroup ratio={buttonItems.length === 1 ? 'equal' : buttonRatio} className={cn(styles.buttons, buttonGroupClassName)}>
          {buttonItems.map((button, index) => (
            <Button
              key={`${button.label}-${index}`}
              size="xl"
              variant={getButtonVariant(button, index, buttonItems.length)}
              onClick={button.onClick}
              disabled={button.disabled}
              type={button.type ?? 'button'}
            >
              {button.label}
            </Button>
          ))}
        </ButtonGroup>
      )}
    </section>
  )
}

컴포넌트 코드

components/Radio/Radio.jsx

import { cn } from '@/utils/cn'
import styles from './Radio.module.css'

export default function Radio({
  children,
  label,
  rightText,
  rightContent,
  rightTone = 'primary',
  className,
  controlClassName,
  textClassName,
  rightClassName,
  ...props
}) {
  const radioLabel = label ?? children
  const radioRightContent = rightContent ?? rightText

  return (
    <label className={cn(styles.radio, className)}>
      <input {...props} className={styles.input} type="radio" />
      <span className={cn(styles.control, controlClassName)} aria-hidden="true" />
      {radioLabel && <span className={cn(styles.text, textClassName)}>{radioLabel}</span>}
      {radioRightContent && (
        <span className={cn(styles.right, styles[rightTone], rightClassName)}>{radioRightContent}</span>
      )}
    </label>
  )
}

컴포넌트 코드

components/Radio/RadioGroup.jsx

import { Children } from 'react'
import { cn } from '@/utils/cn'
import styles from './RadioGroup.module.css'

const RADIO_GROUP_DIRECTIONS = {
  horizontal: styles.horizontal,
  vertical: styles.vertical,
}

export default function RadioGroup({
  children,
  direction = 'vertical',
  className,
  ...props
}) {
  const items = Children.toArray(children).filter(Boolean)
  const groupDirection = RADIO_GROUP_DIRECTIONS[direction] ?? RADIO_GROUP_DIRECTIONS.vertical

  if (items.length <= 1) {
    return items[0] ?? null
  }

  return (
    <div className={cn(styles.group, groupDirection, className)} role="radiogroup" {...props}>
      {items}
    </div>
  )
}

컴포넌트 코드

components/Switch/Switch.jsx

import { cn } from '@/utils/cn'
import styles from './Switch.module.css'

export default function Switch({
  children,
  label,
  className,
  trackClassName,
  textClassName,
  ...props
}) {
  const switchLabel = label ?? children

  return (
    <label className={cn(styles.switch, className)}>
      <input {...props} className={styles.input} type="checkbox" role="switch" />
      <span className={cn(styles.track, trackClassName)} aria-hidden="true">
        <span className={styles.thumb} />
      </span>
      {switchLabel && <span className={cn(styles.text, textClassName)}>{switchLabel}</span>}
    </label>
  )
}

컴포넌트 코드

components/Tab/Tab.jsx

import { useState } from 'react'
import { cn } from '@/utils/cn'
import styles from './Tab.module.css'

function getItemValue(item, index) {
  return item.value ?? item.href ?? String(index)
}

export default function Tab({
  items = [],
  type = 'button',
  value,
  defaultValue,
  onChange,
  className,
  itemClassName,
  activeItemClassName,
  ...props
}) {
  const firstValue = items[0] ? getItemValue(items[0], 0) : undefined
  const [internalValue, setInternalValue] = useState(defaultValue ?? firstValue)
  const selectedValue = value ?? internalValue
  const isLinkType = type === 'link'

  function handleChange(nextValue, item, event) {
    if (!isLinkType) {
      setInternalValue(nextValue)
    }

    onChange?.(nextValue, item, event)
  }

  if (!items.length) return null

  return (
    <div className={cn(styles.tab, className)} role={isLinkType ? 'navigation' : 'tablist'} {...props}>
      {items.map((item, index) => {
        const itemValue = getItemValue(item, index)
        const isActive = itemValue === selectedValue || item.active
        const classNameValue = cn(styles.item, isActive && styles.active, itemClassName, isActive && activeItemClassName)

        if (isLinkType) {
          return (
            <a
              key={itemValue}
              className={classNameValue}
              href={item.href}
              aria-current={isActive ? 'page' : undefined}
              target={item.target}
              rel={item.rel}
              onClick={(event) => handleChange(itemValue, item, event)}
            >
              {item.label}
            </a>
          )
        }

        return (
          <button
            key={itemValue}
            className={classNameValue}
            type="button"
            role="tab"
            aria-selected={isActive}
            disabled={item.disabled}
            onClick={(event) => handleChange(itemValue, item, event)}
          >
            {item.label}
          </button>
        )
      })}
    </div>
  )
}

컴포넌트 코드

components/Textfield/Input.jsx

import { cn } from '@/utils/cn'
import styles from './Input.module.css'

export default function Input({
  label,
  buttonLabel,
  onButtonClick,
  helperText,
  errorText,
  invalid = Boolean(errorText),
  disabled = false,
  className,
  fieldClassName,
  inputClassName,
  labelClassName,
  buttonClassName,
  helperClassName,
  type = 'text',
  ...props
}) {
  const message = errorText ?? helperText
  const hasButton = Boolean(buttonLabel)

  return (
    <div className={cn(styles.field, disabled && styles.disabled, invalid && styles.invalid, className)}>
      {(label || hasButton) && (
        <div className={styles.header}>
          {label && <span className={cn(styles.label, labelClassName)}>{label}</span>}
          {hasButton && (
            <button
              className={cn(styles.button, buttonClassName)}
              type="button"
              disabled={disabled}
              onClick={onButtonClick}
            >
              {buttonLabel}
            </button>
          )}
        </div>
      )}

      <div className={cn(styles.box, fieldClassName)}>
        <input {...props} className={cn(styles.input, inputClassName)} type={type} disabled={disabled} />
      </div>

      {message && (
        <span className={cn(styles.message, helperClassName)}>
          {message}
        </span>
      )}
    </div>
  )
}

컴포넌트 코드

components/Textfield/InputArea.jsx

import { cn } from '@/utils/cn'
import styles from './InputArea.module.css'

export default function InputArea({
  label,
  buttonLabel,
  onButtonClick,
  helperText,
  errorText,
  invalid = Boolean(errorText),
  disabled = false,
  className,
  fieldClassName,
  textareaClassName,
  labelClassName,
  buttonClassName,
  helperClassName,
  rows = 5,
  ...props
}) {
  const message = errorText ?? helperText
  const hasButton = Boolean(buttonLabel)

  return (
    <div className={cn(styles.field, disabled && styles.disabled, invalid && styles.invalid, className)}>
      {(label || hasButton) && (
        <div className={styles.header}>
          {label && <span className={cn(styles.label, labelClassName)}>{label}</span>}
          {hasButton && (
            <button
              className={cn(styles.button, buttonClassName)}
              type="button"
              disabled={disabled}
              onClick={onButtonClick}
            >
              {buttonLabel}
            </button>
          )}
        </div>
      )}

      <div className={cn(styles.box, fieldClassName)}>
        <textarea {...props} className={cn(styles.textarea, textareaClassName)} rows={rows} disabled={disabled} />
      </div>

      {message && (
        <span className={cn(styles.message, helperClassName)}>
          {message}
        </span>
      )}
    </div>
  )
}

컴포넌트 코드

components/Textfield/InputCard.jsx

import { cn } from '@/utils/cn'
import styles from './InputCard.module.css'

const CARD_PART_COUNT = 4

function toParts(value, fallback) {
  if (Array.isArray(value)) {
    return Array.from({ length: CARD_PART_COUNT }, (_, index) => value[index] ?? '')
  }

  return Array.from({ length: CARD_PART_COUNT }, () => fallback)
}

export default function InputCard({
  label,
  buttonLabel,
  onButtonClick,
  helperText,
  errorText,
  invalid = Boolean(errorText),
  disabled = false,
  values,
  defaultValues,
  placeholders,
  names,
  maxLength = 4,
  className,
  fieldClassName,
  inputClassName,
  labelClassName,
  buttonClassName,
  helperClassName,
  onChange,
}) {
  const message = errorText ?? helperText
  const hasButton = Boolean(buttonLabel)
  const inputValues = Array.isArray(values) ? toParts(values, '') : null
  const inputDefaultValues = toParts(defaultValues, '')
  const inputPlaceholders = toParts(placeholders, '문구')
  const inputNames = toParts(names, undefined)

  return (
    <div className={cn(styles.field, disabled && styles.disabled, invalid && styles.invalid, className)}>
      {(label || hasButton) && (
        <div className={styles.header}>
          {label && <span className={cn(styles.label, labelClassName)}>{label}</span>}
          {hasButton && (
            <button
              className={cn(styles.button, buttonClassName)}
              type="button"
              disabled={disabled}
              onClick={onButtonClick}
            >
              {buttonLabel}
            </button>
          )}
        </div>
      )}

      <div className={cn(styles.box, fieldClassName)}>
        {Array.from({ length: CARD_PART_COUNT }, (_, index) => (
          <div className={styles.part} key={index}>
            <input
              className={cn(styles.input, inputClassName)}
              defaultValue={inputValues ? undefined : inputDefaultValues[index]}
              disabled={disabled}
              inputMode="numeric"
              maxLength={maxLength}
              name={inputNames[index]}
              placeholder={inputPlaceholders[index]}
              type="text"
              value={inputValues?.[index]}
              onChange={(event) => onChange?.(event, index)}
            />
            {index < CARD_PART_COUNT - 1 && <span className={styles.separator}>-</span>}
          </div>
        ))}
      </div>

      {message && (
        <span className={cn(styles.message, helperClassName)}>
          {message}
        </span>
      )}
    </div>
  )
}

컴포넌트 코드

components/Textfield/InputPrice.jsx

import { cn } from '@/utils/cn'
import styles from './InputPrice.module.css'

export default function InputPrice({
  label,
  buttonLabel,
  onButtonClick,
  helperText,
  errorText,
  invalid = Boolean(errorText),
  disabled = false,
  unit = '원',
  className,
  fieldClassName,
  inputClassName,
  unitClassName,
  labelClassName,
  buttonClassName,
  helperClassName,
  type = 'text',
  ...props
}) {
  const message = errorText ?? helperText
  const hasButton = Boolean(buttonLabel)

  return (
    <div className={cn(styles.field, disabled && styles.disabled, invalid && styles.invalid, className)}>
      {(label || hasButton) && (
        <div className={styles.header}>
          {label && <span className={cn(styles.label, labelClassName)}>{label}</span>}
          {hasButton && (
            <button
              className={cn(styles.button, buttonClassName)}
              type="button"
              disabled={disabled}
              onClick={onButtonClick}
            >
              {buttonLabel}
            </button>
          )}
        </div>
      )}

      <div className={cn(styles.box, fieldClassName)}>
        <input
          {...props}
          className={cn(styles.input, inputClassName)}
          type={type}
          inputMode={type === 'text' ? 'numeric' : undefined}
          disabled={disabled}
        />
        {unit && <span className={cn(styles.unit, unitClassName)}>{unit}</span>}
      </div>

      {message && (
        <span className={cn(styles.message, helperClassName)}>
          {message}
        </span>
      )}
    </div>
  )
}

컴포넌트 코드

components/Textfield/InputResident.jsx

import { cn } from '@/utils/cn'
import styles from './InputResident.module.css'

const RESIDENT_PART_COUNT = 2

function toParts(value, fallback) {
  if (Array.isArray(value)) {
    return Array.from({ length: RESIDENT_PART_COUNT }, (_, index) => value[index] ?? '')
  }

  return Array.from({ length: RESIDENT_PART_COUNT }, () => fallback)
}

export default function InputResident({
  label,
  buttonLabel,
  onButtonClick,
  helperText,
  errorText,
  invalid = Boolean(errorText),
  disabled = false,
  values,
  defaultValues,
  placeholders,
  names,
  maxLengths = [6, 7],
  className,
  fieldClassName,
  inputClassName,
  labelClassName,
  buttonClassName,
  helperClassName,
  onChange,
}) {
  const message = errorText ?? helperText
  const hasButton = Boolean(buttonLabel)
  const inputValues = Array.isArray(values) ? toParts(values, '') : null
  const inputDefaultValues = toParts(defaultValues, '')
  const inputPlaceholders = toParts(placeholders, '문구')
  const inputNames = toParts(names, undefined)
  const inputMaxLengths = toParts(maxLengths, undefined)

  return (
    <div className={cn(styles.field, disabled && styles.disabled, invalid && styles.invalid, className)}>
      {(label || hasButton) && (
        <div className={styles.header}>
          {label && <span className={cn(styles.label, labelClassName)}>{label}</span>}
          {hasButton && (
            <button
              className={cn(styles.button, buttonClassName)}
              type="button"
              disabled={disabled}
              onClick={onButtonClick}
            >
              {buttonLabel}
            </button>
          )}
        </div>
      )}

      <div className={cn(styles.box, fieldClassName)}>
        {Array.from({ length: RESIDENT_PART_COUNT }, (_, index) => (
          <div className={styles.part} key={index}>
            <input
              className={cn(styles.input, inputClassName)}
              defaultValue={inputValues ? undefined : inputDefaultValues[index]}
              disabled={disabled}
              inputMode="numeric"
              maxLength={inputMaxLengths[index]}
              name={inputNames[index]}
              placeholder={inputPlaceholders[index]}
              type="text"
              value={inputValues?.[index]}
              onChange={(event) => onChange?.(event, index)}
            />
            {index < RESIDENT_PART_COUNT - 1 && <span className={styles.separator}>-</span>}
          </div>
        ))}
      </div>

      {message && (
        <span className={cn(styles.message, helperClassName)}>
          {message}
        </span>
      )}
    </div>
  )
}

컴포넌트 코드

components/TimePicker/TimePicker.jsx

import { useState } from 'react'
import Picker from 'react-mobile-picker'
import { cn } from '@/utils/cn'
import styles from './TimePicker.module.css'

function range(length) {
  return Array.from({ length }, (_, index) => String(index).padStart(2, '0'))
}

function getNextValue(options, currentValue, amount) {
  const currentIndex = Math.max(0, options.indexOf(currentValue))
  const nextIndex = (currentIndex + amount + options.length) % options.length

  return options[nextIndex]
}

const DEFAULT_HOURS = range(24)
const DEFAULT_MINUTES = range(60)

export default function TimePicker({
  value,
  defaultValue = { hour: '00', minute: '00' },
  onChange,
  hours = DEFAULT_HOURS,
  minutes = DEFAULT_MINUTES,
  buttonLabel = '\ubc84\ud2bc\uba85',
  onButtonClick,
  className,
  pickerClassName,
  columnClassName,
  itemClassName,
  selectedItemClassName,
  height = 168,
  itemHeight = 56,
  wheelMode = 'natural',
}) {
  const [internalValue, setInternalValue] = useState(defaultValue)
  const pickerValue = value ?? internalValue

  function handleChange(nextValue, key) {
    setInternalValue(nextValue)
    onChange?.(nextValue, key)
  }

  function handleStep(key, amount) {
    const options = key === 'hour' ? hours : minutes
    const nextValue = {
      ...pickerValue,
      [key]: getNextValue(options, pickerValue[key], amount),
    }

    handleChange(nextValue, key)
  }

  return (
    <div className={cn(styles.wrap, className)}>
      <div className={styles.pickerArea}>
        <div className={styles.controls}>
          <button className={styles.controlButton} type="button" aria-label="Increase hour" onClick={() => handleStep('hour', 1)}>
            <span className={styles.upIcon} />
          </button>
          <span />
          <button className={styles.controlButton} type="button" aria-label="Increase minute" onClick={() => handleStep('minute', 1)}>
            <span className={styles.upIcon} />
          </button>
        </div>

        <Picker
          value={pickerValue}
          height={height}
          itemHeight={itemHeight}
          wheelMode={wheelMode}
          className={cn(styles.picker, pickerClassName)}
          onChange={handleChange}
        >
          <Picker.Column name="hour" className={cn(styles.column, columnClassName)}>
            {hours.map((hour) => (
              <Picker.Item key={hour} value={hour}>
                {({ selected }) => (
                  <span className={cn(styles.item, selected && styles.selectedItem, itemClassName, selected && selectedItemClassName)}>
                    {hour}
                  </span>
                )}
              </Picker.Item>
            ))}
          </Picker.Column>

          <div className={styles.separator} aria-hidden="true">
            :
          </div>

          <Picker.Column name="minute" className={cn(styles.column, columnClassName)}>
            {minutes.map((minute) => (
              <Picker.Item key={minute} value={minute}>
                {({ selected }) => (
                  <span className={cn(styles.item, selected && styles.selectedItem, itemClassName, selected && selectedItemClassName)}>
                    {minute}
                  </span>
                )}
              </Picker.Item>
            ))}
          </Picker.Column>
        </Picker>

        <div className={styles.controls}>
          <button className={styles.controlButton} type="button" aria-label="Decrease hour" onClick={() => handleStep('hour', -1)}>
            <span className={styles.downIcon} />
          </button>
          <span />
          <button className={styles.controlButton} type="button" aria-label="Decrease minute" onClick={() => handleStep('minute', -1)}>
            <span className={styles.downIcon} />
          </button>
        </div>
      </div>

      {buttonLabel && (
        <button className={styles.button} type="button" onClick={() => onButtonClick?.(pickerValue)}>
          {buttonLabel}
        </button>
      )}
    </div>
  )
}

컴포넌트 코드

components/Typography/Typography.jsx

import { cn } from "@/utils/cn"
import styles from "./Typography.module.css"

/*
  사용 예제

  <Typography tagName="h1" className="text-display">
    메인 타이틀
  </Typography>

  <Typography tagName="p" className="text-title-xl">
    본문 텍스트
  </Typography>

  <Typography tagName="span" className="text-title-xl" id="user-name" aria-label="사용자 이름">
    홍길동
  </Typography>
*/

export default function Typography({
  tagName: Tag = "p",
  className = "",
  children,
  ...rest
}) {
  const moduleClassName = className
    .split(/\s+/)
    .filter(Boolean)
    .map((className) => styles[className])

  return (
    <Tag className={cn(moduleClassName, className)} {...rest}>
      {children}
    </Tag>
  )
}