File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-14
08-18
08-18
08-18
File name
Commit message
Commit date
"use client";
import {
useEffect,
useId,
useRef,
useState,
type ChangeEvent,
type ClipboardEvent,
type ComponentPropsWithRef,
type FocusEvent,
type FormEvent,
type ReactNode,
} from "react";
import { cx, onlyDigits } from "../../utils";
import { FoxFormLabel, type FoxFormLabelRequirement } from "../fox-form-label";
import {
foxValidationMessage,
foxValidators,
type FoxValidationErrors,
type FoxValidationMessages,
type FoxValidator,
} from "../../validation";
export type FoxInputSize = "lg" | "md" | "sm";
export type FoxInputState = "default" | "focused" | "completed" | "error" | "disabled" | "view";
/**
* 네이티브 `<input>`이 받는 것을 그대로 넘겨받는다 — type·name·autoComplete·maxLength·
* min·max·step·pattern·inputMode·required·readOnly·disabled 등. 이름이 겹치거나 의미가
* 다른 것만 걷어내고 아래에서 다시 정의한다.
*/
type NativeInputProps = Omit<
ComponentPropsWithRef<"input">,
"size" | "onChange" | "onInput" | "className" | "children" | "hidden"
>;
export interface FoxInputProps extends NativeInputProps {
size?: FoxInputSize;
/** 값이 첫 인자다. 지우기 버튼은 이벤트 없이 빈 문자열로 호출한다. */
onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
onInput?: (value: string, event: FormEvent<HTMLInputElement>) => void;
label?: string;
requirement?: FoxFormLabelRequirement;
/** 헬퍼 메시지. 색은 상태를 따라간다. */
message?: string;
/** 헬퍼 메시지 앞 아이콘. `currentColor`로 그려야 상태 색을 따라간다. */
messageIcon?: ReactNode;
/** 입력 오른쪽 아이콘. 아이콘 폰트를 넘긴다 — `<i class="fox-ico fox-ico-House" aria-hidden="true" />`. */
icon?: ReactNode;
/** 입력 오른쪽에 붙는 글자. 아이콘 슬롯과 달리 크기가 글자에 맞춰진다. */
suffix?: ReactNode;
/** 포커스 중이고 값이 있으면 지우기 버튼을 보여준다. */
clearable?: boolean;
clearLabel?: string;
/** 오류 표시. `aria-invalid`가 되고 테두리·헬퍼 색이 바뀐다. */
invalid?: boolean;
/** 주면 모양이 그 상태로 고정된다. 없으면 포커스·값·비활성으로 브라우저가 판단한다. */
state?: FoxInputState;
/**
* 숫자만 받는다. 타이핑·붙여넣기·끌어놓기·IME 어느 경로로 들어와도 숫자가 아닌 글자는
* 그 자리에서 버리고 커서를 지킨다. `value`·`defaultValue`에 하이픈이 섞여 와도 숫자만
* 보인다. `inputMode`를 따로 주지 않으면 `numeric`이 된다.
*/
digitsOnly?: boolean;
validators?: FoxValidator[];
validationMessages?: FoxValidationMessages;
validateOn?: "blur" | "change";
onValidationChange?: (errors: FoxValidationErrors | null) => void;
/** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
hidden?: boolean;
/** 배치 조정용. */
className?: string;
}
const SIZE_CLASS: Record<FoxInputSize, string> = {
lg: "fox-input--lg",
md: "fox-input--md",
sm: "fox-input--sm",
};
/**
* @fox 입력 필드. 네이티브 `<input>`을 감싸므로 date·password·email 등 모든 타입을 받는다.
*
* date 타입은 브라우저가 그리는 달력 아이콘과 피커를 그대로 쓴다 — 시안의 달력 아이콘으로
* 바꾸지 않는다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
function errorKey(errors: FoxValidationErrors | null): string {
return errors ? Object.keys(errors).sort().join("|") : "";
}
export function FoxInput({
size = "md",
onChange,
onInput,
label,
requirement,
message,
messageIcon,
icon,
suffix,
clearable = false,
clearLabel = "입력 지우기",
invalid = false,
state,
digitsOnly = false,
validators,
validationMessages,
validateOn = "blur",
onValidationChange,
hidden = false,
className,
id,
value,
defaultValue,
ref,
...rest
}: FoxInputProps) {
const autoId = useId();
const fieldValue = digitsOnly && value !== undefined ? onlyDigits(String(value)) : value;
const fieldDefaultValue =
digitsOnly && defaultValue !== undefined ? onlyDigits(String(defaultValue)) : defaultValue;
// 지우기 버튼은 값이 있을 때만 뜬다. 비제어 입력은 DOM만 알고 있으므로 직접 따라간다.
const [typedIn, setTypedIn] = useState(() => String(fieldDefaultValue ?? "").length > 0);
const fieldRef = useRef<HTMLInputElement>(null);
const [draft, setDraft] = useState(() => String(fieldDefaultValue ?? ""));
const [touched, setTouched] = useState(false);
const validationErrors =
validators && validators.length > 0
? foxValidators.compose(validators)(
value !== undefined ? String(value) : draft
)
: null;
const errorsKey = errorKey(validationErrors);
const latestRef = useRef({ errors: validationErrors, notify: onValidationChange });
useEffect(() => {
latestRef.current = { errors: validationErrors, notify: onValidationChange };
});
useEffect(() => {
latestRef.current.notify?.(latestRef.current.errors);
}, [errorsKey]);
if (hidden) {
return null;
}
const fieldId = id ?? `${autoId}-field`;
const messageId = `${autoId}-message`;
const hasValue = value !== undefined ? String(value).length > 0 : typedIn;
const showValidation = validateOn === "change" || touched;
const validationText = showValidation
? foxValidationMessage(validationErrors, validationMessages)
: undefined;
const callerErrored = invalid || state === "error";
const shownMessage = callerErrored ? message : (validationText ?? message);
const errored = callerErrored || validationText !== undefined;
// 호출부 ref와 내부 ref를 함께 채운다 — 지우기가 비제어 입력의 DOM 값을 비워야 한다.
const attachField = (node: HTMLInputElement | null) => {
fieldRef.current = node;
if (typeof ref === "function") {
ref(node);
} else if (ref) {
(ref as { current: HTMLInputElement | null }).current = node;
}
};
// 숫자 전용이면 DOM 값을 그 자리에서 고쳐 쓴다. 커서 앞에서 지운 글자 수만큼 커서를 당겨
// 제자리를 지킨다 — 값을 통째로 바꾸면 브라우저가 커서를 끝으로 보내기 때문이다.
const readFieldValue = (field: HTMLInputElement): string => {
const raw = field.value;
if (!digitsOnly) {
return raw;
}
const clean = onlyDigits(raw);
if (clean === raw) {
return raw;
}
const caret = field.selectionStart;
field.value = clean;
if (caret !== null) {
const position = onlyDigits(raw.slice(0, caret)).length;
field.setSelectionRange(position, position);
}
return clean;
};
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
const next = readFieldValue(event.target);
if (value === undefined) {
setTypedIn(next.length > 0);
}
setDraft(next);
onChange?.(next, event);
};
const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
setTouched(true);
rest.onBlur?.(event);
};
// 숫자 전용 붙여넣기는 숫자만 추려 직접 넣는다. 브라우저는 maxLength를 붙여넣은 원문에 먼저
// 적용해 `123-45-67890`의 뒷자리를 잘라 버리므로 기본 동작에 맡길 수 없다.
const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
rest.onPaste?.(event);
if (!digitsOnly || event.defaultPrevented) {
return;
}
event.preventDefault();
const digits = onlyDigits(event.clipboardData.getData("text"));
if (digits === "") {
return;
}
const field = event.currentTarget;
if (document.execCommand("insertText", false, digits)) {
return;
}
// execCommand가 없는 환경 — 값을 직접 넣고 input 이벤트를 흘린다. React가 노드에 심어 둔
// 값 추적기를 피하려면 프로토타입의 setter를 써야 onChange가 돈다.
const start = field.selectionStart ?? field.value.length;
const end = field.selectionEnd ?? start;
let next = field.value.slice(0, start) + digits + field.value.slice(end);
if (field.maxLength > 0) {
next = next.slice(0, field.maxLength);
}
const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
setValue?.call(field, next);
const caret = Math.min(start + digits.length, next.length);
field.setSelectionRange(caret, caret);
field.dispatchEvent(new Event("input", { bubbles: true }));
};
const handleInput = (event: FormEvent<HTMLInputElement>) => {
onInput?.(readFieldValue(event.target as HTMLInputElement), event);
};
const handleClear = () => {
const field = fieldRef.current;
if (field) {
// 비제어 입력은 DOM을 직접 비운다. 제어 입력이면 onChange를 받은 호출부가 비운다.
field.value = "";
field.focus();
}
setTypedIn(false);
setDraft("");
onChange?.("");
};
return (
<div
className={cx("fox-input", SIZE_CLASS[size], className)}
data-state={state}
>
{label && (
<FoxFormLabel htmlFor={fieldId} requirement={requirement}>
{label}
</FoxFormLabel>
)}
<div className="fox-input__box">
<input
{...rest}
inputMode={rest.inputMode ?? (digitsOnly ? "numeric" : undefined)}
ref={attachField}
id={fieldId}
className="fox-input__field"
value={fieldValue}
defaultValue={fieldDefaultValue}
aria-invalid={errored || undefined}
aria-describedby={shownMessage ? messageId : undefined}
onChange={handleChange}
onInput={handleInput}
onBlur={handleBlur}
onPaste={handlePaste}
/>
{clearable && hasValue && (
<button
type="button"
className="fox-input__clear"
aria-label={clearLabel}
onClick={handleClear}
>
<i className="fox-ico fox-ico-XCircle" aria-hidden="true" />
</button>
)}
{suffix && <span className="fox-input__suffix">{suffix}</span>}
{icon && (
<span className="fox-input__icon" aria-hidden="true">
{icon}
</span>
)}
</div>
{shownMessage && (
<p className="fox-input__message" id={messageId}>
{messageIcon && (
<span className="fox-input__message-icon" aria-hidden="true">
{messageIcon}
</span>
)}
{shownMessage}
</p>
)}
</div>
);
}