Code - nbnloper/edupay-admin

"use client"; import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode, type Ref, } from "react"; import { cx } from "../../utils"; import type { FoxSelectItem } from "../fox-select"; import { FoxSelectOption } from "../fox-select-option"; import { FoxSelectOptionItem } from "../fox-select-option-item"; export type FoxSelectTextSize = "lg" | "md" | "sm"; export interface FoxSelectTextProps { size: FoxSelectTextSize; /** `FoxSelect`와 같은 데이터 모양이다 — 열리는 목록이 같은 조각이므로 타입도 같이 쓴다. */ options: FoxSelectItem[]; /** 주면 제어 컴포넌트가 된다 — 호출부가 소유하고, 이 요소가 스스로 바꾸지 않는다. */ value?: string; /** 비제어로 쓸 때의 초기 값. `value`를 주면 무시된다. */ defaultValue?: string; /** 값이 바뀔 때 호출된다(`FoxSelect.onValueChange`와 같은 이름·같은 근거). */ onValueChange?: (value: string) => void; /** 아무 옵션도 선택되지 않았을 때 보여줄 문구. */ placeholder?: ReactNode; disabled?: boolean; /** * 글자를 대신할 읽어 줄 이름. * * 폼 라벨이 없는 컴포넌트라 보이는 글자가 곧 이름이다. 그런데 그 글자가 고른 값 * ("2026년 8월")이라 무엇을 고르는 자리인지는 소리로 전달되지 않는다 — `"조회 기간"`처럼 * 적어 준다. */ /** * 오른쪽 표시를 바꾼다. 기본은 펼침을 뜻하는 캐럿이고, 시안이 다른 뜻을 담을 때만 준다 * (예: 정렬 셀렉트의 위아래 화살표). 장식이라 `aria-hidden`인 자리다. */ icon?: ReactNode; ariaLabel?: string; /** 이름 역할을 하는 요소의 id. `ariaLabel`보다 우선한다. */ labelledBy?: string; id?: string; /** 배치 조정용. 모양이 달라야 하면 여기 말고 모디파이어를 추가한다. */ className?: string; /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */ hidden?: boolean; /** 트리거를 가리킨다 — 호출부가 포커스를 옮길 때 쓴다. */ ref?: Ref<HTMLButtonElement>; } const SIZE_CLASS: Record<FoxSelectTextSize, string> = { lg: "fox-select-text--lg", md: "fox-select-text--md", sm: "fox-select-text--sm", }; /** * @fox 글자만 있는 셀렉트. 테두리도 고정 높이도 없고, 고른 값이 그대로 글자로 보인다. * * `FoxSelect`와 같은 콤보박스지만 **폼 한 칸이 아니다** — 라벨·힌트·에러·필수 표시가 없고, * lg는 글자가 heading/md(제목용 20px bold)다. 화면의 제목이나 목록 위 정렬 기준처럼 "지금 * 무엇을 보고 있는지"를 글자로 보여 주면서 그 자리에서 바꾸게 하는 자리에 쓴다 * (예: `2026년 8월 ∨`, `최신순 ∨`). 값을 입력받아 서버로 보내는 자리라면 `FoxSelect`다. * * 열리는 목록은 `FoxSelect`와 같은 `FoxSelectOption`·`FoxSelectOptionItem`을 쓴다 — 트리거 * 모양만 다르고 목록은 같아야 한다. * * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"` * (또는 개별 파티셜)로 한 번 불러와야 한다. */ export function FoxSelectText({ size, options, value, defaultValue, onValueChange, placeholder = "선택해주세요", disabled = false, icon, ariaLabel, labelledBy, id, className, hidden = false, ref, }: FoxSelectTextProps) { const [open, setOpen] = useState(false); const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? ""); const [activeIndex, setActiveIndex] = useState(-1); const rootRef = useRef<HTMLDivElement>(null); const currentValue = value ?? uncontrolledValue; const selectedIndex = options.findIndex((option) => option.value === currentValue); const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined; const generatedId = useId(); const triggerId = id ?? generatedId; const listboxId = `${triggerId}-listbox`; // 값이 아니라 순번으로 만든다 — 옵션 값에 공백·특수문자가 들어와도 id가 깨지지 않는다. const optionId = (index: number) => `${triggerId}-opt-${index}`; useEffect(() => { if (!open) return; function handlePointerDown(event: PointerEvent) { if (!rootRef.current?.contains(event.target as Node)) { setOpen(false); } } // 포인터만 보면 Tab으로 빠져나갈 때 목록이 열린 채 남는다. 포커스가 아무 데도 가지 // 않은 경우(relatedTarget이 null)는 위 pointerdown이 이미 처리한다 — 여기서 닫으면 // 옵션을 누르는 순간에도 닫혀 클릭이 성사되지 않는다(`FoxSelect`와 같은 근거). function handleFocusOut(event: FocusEvent) { const next = event.relatedTarget as Node | null; if (next && !rootRef.current?.contains(next)) { setOpen(false); } } document.addEventListener("pointerdown", handlePointerDown); const root = rootRef.current; root?.addEventListener("focusout", handleFocusOut); return () => { document.removeEventListener("pointerdown", handlePointerDown); root?.removeEventListener("focusout", handleFocusOut); }; }, [open]); function openList() { setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0); setOpen(true); } function commit(next: string) { // 제어 컴포넌트일 때는 내부 값을 건드리지 않는다 — 건드리면 호출부가 값을 거부해도 // 내부에만 반영되어 둘이 조용히 갈라진다. if (value === undefined) setUncontrolledValue(next); onValueChange?.(next); setOpen(false); } function moveActive(delta: number) { setActiveIndex((current) => { const count = options.length; if (count === 0) return current; return (current + delta + count) % count; }); } function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) { if (disabled) return; if (!open) { if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); openList(); } // Enter·Space는 막지 않는다 — 네이티브 버튼의 클릭이 그대로 열어 준다. return; } switch (event.key) { case "ArrowDown": event.preventDefault(); moveActive(1); break; case "ArrowUp": event.preventDefault(); moveActive(-1); break; case "Home": event.preventDefault(); setActiveIndex(0); break; case "End": event.preventDefault(); setActiveIndex(options.length - 1); break; case "Enter": case " ": event.preventDefault(); if (activeIndex >= 0) { commit(options[activeIndex].value); } break; case "Escape": event.preventDefault(); setOpen(false); break; default: break; } } // 훅을 전부 부른 뒤에 빠져나간다 — 위쪽에서 반환하면 훅 호출 순서가 깨진다. if (hidden) { return null; } return ( // `FoxSelectOption`은 `position: absolute`라 위치 기준이 되는 조상이 필요하다 // (`fox-select__control`과 같은 역할). <div ref={rootRef} className={cx("fox-select-text", SIZE_CLASS[size], className)}> <button ref={ref} type="button" id={triggerId} role="combobox" disabled={disabled} aria-haspopup="listbox" aria-expanded={open} // 목록은 열렸을 때만 렌더되므로, 닫힌 동안 없는 id를 가리키지 않게 한다. aria-controls={open ? listboxId : undefined} // 화살표로 옮겨 다니는 옵션을 보조기술에 알린다. 이게 없으면 `--active` 강조가 // 시각 전용이라 스크린리더 사용자는 이동을 알 수 없다. aria-activedescendant={open && activeIndex >= 0 ? optionId(activeIndex) : undefined} aria-label={labelledBy ? undefined : ariaLabel} aria-labelledby={labelledBy} className="fox-select-text__trigger" onClick={() => (open ? setOpen(false) : openList())} onKeyDown={handleKeyDown} > <span className="fox-select-text__value">{selectedOption?.label ?? placeholder}</span> <span className="fox-select-text__icon" aria-hidden="true"> {icon ?? <ChevronMark />} </span> </button> {open ? ( <FoxSelectOption id={listboxId} labelledBy={labelledBy} className="fox-select-text__list" > {options.map((option, index) => ( <FoxSelectOptionItem key={option.value} id={optionId(index)} label={option.label} icon={option.icon} danger={option.danger} selected={option.value === currentValue} active={index === activeIndex} onHover={() => setActiveIndex(index)} onSelect={() => commit(option.value)} /> ))} </FoxSelectOption> ) : null} </div> ); } // 시안 아이콘. `FoxChip`의 것과 같은 글리프다 — 이 패키지는 컴포넌트마다 자기 글리프를 // 안에 두고(`FoxTag`·`FoxSelect`도 그렇다), 아이콘 모듈을 따로 만들지 않는다. // `fill`은 시안의 리터럴 대신 `currentColor`로 두어 색을 크기 규칙이 정하게 한다. // `width`·`height`를 쓰지 않는다 — 크기는 슬롯이 정하고 SVG는 100%로 따라온다. function ChevronMark() { return <i className="fox-ico fox-ico--bold fox-ico-CaretDown" aria-hidden="true" />; }