Code - nbnloper/edupay-admin

"use client"; import { type ChangeEvent, type ComponentPropsWithRef, type ReactNode } from "react"; import { cx } from "../../utils"; export type FoxSegmentedControlItemSize = "lg" | "md" | "sm" | "xsm"; /** * 네이티브 `<input type="radio">`가 받는 것을 그대로 넘겨받는다 — name·value·checked· * defaultChecked·disabled·required·form 등. 의미가 겹치는 것만 걷어내고 아래에서 다시 정의한다. */ type NativeRadioProps = Omit< ComponentPropsWithRef<"input">, "type" | "size" | "className" | "children" | "hidden" | "onChange" >; export interface FoxSegmentedControlItemProps extends NativeRadioProps { size?: FoxSegmentedControlItemSize; label: ReactNode; /** 글자 앞에 붙는 아이콘. 넘기지 않으면 자리를 만들지 않는다. */ icon?: ReactNode; /** * 이 칸이 선택될 때 부른다. 값이 첫 인자다 — 네이티브 `onChange`를 `Omit`으로 걷어내고 * 그 자리를 대신한다(`FoxRadio`와 같은 방식). */ onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void; /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */ hidden?: boolean; /** 배치 조정용. 모양이 달라야 하면 여기 말고 모디파이어를 추가한다. */ className?: string; } /** `Record`로 고정해 크기를 추가하면 항목 누락이 타입 에러가 되게 한다. */ const SIZE_CLASS: Record<FoxSegmentedControlItemSize, string> = { lg: "fox-segmented-control-item--lg", md: "fox-segmented-control-item--md", sm: "fox-segmented-control-item--sm", xsm: "fox-segmented-control-item--xsm", }; /** * @fox 세그먼티드 컨트롤의 칸 하나. 상태를 갖지 않는다 — 켜짐 여부는 네이티브 * `<input type="radio">`가 소유한다. * * `name`이 같은 칸끼리는 브라우저가 그룹으로 묶어 단일 선택·화살표 이동·폼 전송을 처리한다. * `FoxSegmentedControl`이 하는 일은 그 `name`을 통일하고 테두리로 감싸는 것뿐이다. * * 루트가 `<label>`이라 글자나 아이콘 어디를 눌러도 선택된다. 배경·글자색은 CSS가 input의 * `:checked`·`:disabled`를 보고 그리므로, 비제어로 써도 모양이 어긋나지 않는다. * * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"` * (또는 개별 파티셜)로 한 번 불러와야 한다. */ export function FoxSegmentedControlItem({ size = "lg", label, icon, onChange, hidden = false, className, ...rest }: FoxSegmentedControlItemProps) { if (hidden) { return null; } // 라디오는 켜질 때만 change가 뛴다(꺼질 때는 안 뛴다). 그래도 명시적으로 걸러 두면 // 브라우저가 달라져도 "선택될 때"라는 계약이 흔들리지 않는다(`FoxRadio`와 같은 근거). const handleChange = (event: ChangeEvent<HTMLInputElement>) => { if (event.target.checked) { onChange?.(event.target.value, event); } }; return ( <label className={cx("fox-segmented-control-item", SIZE_CLASS[size], className)}> {/* `:has()`가 찾을 대상이고 형제 선택자의 기준이기도 하므로 맨 앞에 둔다. */} <input {...rest} type="radio" className="fox-segmented-control-item__input" onChange={handleChange} /> {icon ? ( <span className="fox-segmented-control-item__icon" aria-hidden="true"> {icon} </span> ) : null} <span className="fox-segmented-control-item__label">{label}</span> </label> ); }