Code - nbnloper/edupay-admin

"use client"; import { useState, type Ref } from "react"; import { cx } from "../../utils"; export interface FoxToggleQuantityProps { /** 주면 제어 컴포넌트가 된다 — 호출부가 소유하고, 이 요소가 스스로 바꾸지 않는다. */ value?: number; /** 비제어로 쓸 때의 초기 값. `value`를 주면 무시된다. */ defaultValue?: number; /** * 값이 바뀔 때 호출된다. 이미 `min`·`max`로 자른 뒤의 값이 넘어온다. * * ⚠️ 이름이 `onChange`가 아니다 — 네이티브 입력을 감싸는 게 아니라 버튼 둘로 만든 커스텀 * 위젯이라 `FoxSelect.onValueChange`와 같은 쪽이다. */ onValueChange?: (value: number) => void; /** 내려갈 수 있는 하한. 값이 여기 닿으면 빼기 버튼이 비활성된다. */ min?: number; /** 올라갈 수 있는 상한. 넘기지 않으면 상한이 없어 더하기 버튼이 비활성되지 않는다. */ max?: number; /** 한 번에 오르내리는 폭. */ step?: number; /** * 폼으로 값을 보낼 이름. 주면 같은 값을 담은 `<input type="hidden">`을 함께 렌더한다. * * `FoxChip`은 이걸 열지 않는다 — 칩은 여러 개가 한 묶음으로 하나의 값을 이뤄서 이름 하나를 * 칩 하나에 묶을 수 없기 때문이다. 이쪽은 값이 정확히 하나라 그 문제가 없다. */ name?: string; /** 두 버튼을 모두 비활성한다. `min`·`max`에 의한 개별 비활성과는 별개다. */ disabled?: boolean; /** 묶음을 읽어 줄 이름. 화면에 보이는 제목이 이미 있으면 `labelledBy`를 쓴다. */ label?: string; /** 묶음 이름 역할을 하는 요소의 id. `label`보다 우선한다. */ labelledBy?: string; /** 빼기 버튼을 읽어 줄 이름. */ decreaseLabel?: string; /** 더하기 버튼을 읽어 줄 이름. */ increaseLabel?: string; /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */ hidden?: boolean; /** 배치 조정용. 시안의 폭(140px)을 바꿔야 할 때도 여기로 준다. */ className?: string; ref?: Ref<HTMLDivElement>; } /** * @fox 수량 조절기. 빼기 버튼 · 숫자 · 더하기 버튼이 회색 판 위에 놓인다. * * 값은 제어·비제어 둘 다 된다(`FoxSelect`와 같은 방식). `min`·`max`에 닿으면 해당 버튼이 * 네이티브 `disabled`가 되므로, 누를 수 없다는 것이 커서와 보조기술에 함께 전달된다. * * 숫자는 입력칸이 아니라 읽기 전용 글자다 — 시안에 입력칸의 테두리도 배경도 없다. 그래서 * `role="spinbutton"`을 붙이지 않고 `role="group"` 안의 버튼 둘로 두고, 바뀐 값은 * `aria-live`로 알린다. 키보드로 값을 직접 치는 자리가 필요해지면 시안에 먼저 추가한다. * * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"` * (또는 개별 파티셜)로 한 번 불러와야 한다. */ export function FoxToggleQuantity({ value, defaultValue = 0, onValueChange, min = 0, max, step = 1, name, disabled = false, label, labelledBy, decreaseLabel = "수량 줄이기", increaseLabel = "수량 늘리기", hidden = false, className, ref, }: FoxToggleQuantityProps) { const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue); const currentValue = value ?? uncontrolledValue; // 훅을 전부 부른 뒤에 빠져나간다 — 위쪽에서 반환하면 훅 호출 순서가 깨진다. if (hidden) { return null; } // 호출부가 범위 밖의 값을 줄 수도 있으므로 표시 직전에 한 번 자른다 — 자르지 않으면 // 버튼 비활성 여부와 보이는 숫자가 어긋난다. const clamp = (next: number) => Math.min(max ?? Infinity, Math.max(min, next)); const atMin = currentValue <= min; const atMax = max !== undefined && currentValue >= max; function commit(next: number) { const clamped = clamp(next); if (clamped === currentValue) { return; } // 제어 컴포넌트일 때는 내부 값을 건드리지 않는다 — 건드리면 호출부가 값을 거부해도 // 내부에만 반영되어 둘이 조용히 갈라진다. if (value === undefined) setUncontrolledValue(clamped); onValueChange?.(clamped); } return ( <div ref={ref} role="group" aria-label={labelledBy ? undefined : label} aria-labelledby={labelledBy} className={cx("fox-toggle-quantity", className)} > <button type="button" className="fox-toggle-quantity__button" disabled={disabled || atMin} aria-label={decreaseLabel} onClick={() => commit(currentValue - step)} > <span className="fox-toggle-quantity__icon" aria-hidden="true"> <MinusMark /> </span> </button> {/* 값이 바뀐 것을 소리로도 알린다 — 버튼 이름은 "수량 줄이기"라 결과를 담지 않는다. */} <span className="fox-toggle-quantity__value" aria-live="polite"> {clamp(currentValue)} </span> <button type="button" className="fox-toggle-quantity__button" disabled={disabled || atMax} aria-label={increaseLabel} onClick={() => commit(currentValue + step)} > <span className="fox-toggle-quantity__icon" aria-hidden="true"> <PlusMark /> </span> </button> {name ? <input type="hidden" name={name} value={clamp(currentValue)} /> : null} </div> ); } // 시안 아이콘 둘. `fill`을 시안의 리터럴(#58616A) 대신 `currentColor`로 두면 색을 버튼 // 규칙이 정한다(그쪽에서 같은 값을 `primitive(neutral-60)`으로 가리킨다). // `width`·`height`를 쓰지 않는다 — 크기는 슬롯이 정하고 SVG는 100%로 따라온다. function MinusMark() { return <i className="fox-ico fox-ico-Minus" aria-hidden="true" />; } function PlusMark() { return <i className="fox-ico fox-ico-Plus" aria-hidden="true" />; }