@uniai-fe/uds-primitives 0.0.16 → 0.0.17

package/src/components/input/markup/text/Identification.tsx

@@ -1,159 +0,0 @@
-import {
-  ClipboardEvent,
-  ChangeEvent,
-  forwardRef,
-  useImperativeHandle,
-  KeyboardEvent,
-  ReactNode,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import type { InputState } from "../../types";
-
-/**
- * IdentificationInput props. 고정 길이 숫자 코드 입력에 필요한 label/helper/state/onComplete를 제공한다.
- * @property {number} [length=6] 입력칸 개수(4~8 사이로 자동 보정).
- * @property {ReactNode} [label] 상단 라벨.
- * @property {ReactNode} [helper] helper 텍스트.
- * @property {InputState} [state="default"] 시각 상태.
- * @property {(code: string) => void} [onComplete] 모든 셀이 채워졌을 때 호출.
- */
-export interface IdentificationInputProps {
-  length?: number;
-  label?: ReactNode;
-  helper?: ReactNode;
-  state?: InputState;
-  onComplete?: (code: string) => void;
-}
-
-/**
- * IdentificationInput — 인증번호 입력 UI. 개별 입력칸을 제공하고 focus 이동/붙여넣기 등을 처리한다.
- * @component
- * @param {IdentificationInputProps} props
- * @param {number} [props.length=6] 입력 필드 길이. 4~8 범위로 자동 보정된다.
- * @param {ReactNode} [props.label] 상단 label 콘텐츠.
- * @param {ReactNode} [props.helper] helper 텍스트.
- * @param {InputState} [props.state] 시각 상태.
- * @param {(code: string) => void} [props.onComplete] 모든 셀이 채워졌을 때 호출되는 콜백.
- */
-const IdentificationInput = forwardRef<
-  HTMLInputElement[],
-  IdentificationInputProps
->(({ length = 6, label, helper, state, onComplete }, forwardedRef) => {
-  const safeLength = Math.max(4, Math.min(8, length));
-  const [values, setValues] = useState(() =>
-    Array.from({ length: safeLength }, () => ""),
-  );
-  const inputRefs = useRef<Array<HTMLInputElement | null>>(
-    Array(safeLength).fill(null),
-  );
-
-  const focusCell = useCallback((index: number) => {
-    const ref = inputRefs.current[index];
-    ref?.focus();
-    ref?.select();
-  }, []);
-
-  const updateValues = useCallback(
-    (index: number, digit: string) => {
-      setValues(prev => {
-        const next = [...prev];
-        next[index] = digit;
-        if (!next.includes("")) {
-          onComplete?.(next.join(""));
-        }
-        return next;
-      });
-    },
-    [onComplete],
-  );
-
-  const handleChange = useCallback(
-    (index: number) => (event: ChangeEvent<HTMLInputElement>) => {
-      const digit = event.target.value.replace(/\D/g, "").slice(-1);
-      updateValues(index, digit);
-      if (digit && index < safeLength - 1) {
-        focusCell(index + 1);
-      }
-    },
-    [focusCell, safeLength, updateValues],
-  );
-
-  const handleKeyDown = useCallback(
-    (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {
-      if (event.key === "Backspace" && !values[index] && index > 0) {
-        updateValues(index - 1, "");
-        focusCell(index - 1);
-        event.preventDefault();
-      }
-    },
-    [focusCell, updateValues, values],
-  );
-
-  const handlePaste = useCallback(
-    (event: ClipboardEvent<HTMLInputElement>) => {
-      const digits = event.clipboardData.getData("text").replace(/\D/g, "");
-      if (!digits) {
-        return;
-      }
-      event.preventDefault();
-      setValues(prev => {
-        const next = [...prev];
-        for (let i = 0; i < safeLength; i += 1) {
-          next[i] = digits[i] ?? next[i];
-        }
-        if (!next.includes("")) {
-          onComplete?.(next.join(""));
-        }
-        return next;
-      });
-    },
-    [onComplete, safeLength],
-  );
-
-  const helperNode = useMemo(() => helper, [helper]);
-
-  // forwardRef 사용자는 각 셀 DOM 배열을 직접 제어할 수 있도록 노출한다.
-  useImperativeHandle(
-    forwardedRef,
-    () =>
-      inputRefs.current.filter((element): element is HTMLInputElement =>
-        Boolean(element),
-      ),
-    [],
-  );
-
-  return (
-    <div className="one-time-code" data-state={state}>
-      {label ? <div className="one-time-code__label">{label}</div> : null}
-      <div className="one-time-code__fields">
-        {values.map((value, index) => (
-          <input
-            key={`identification-${index}`}
-            ref={element => {
-              inputRefs.current[index] = element;
-            }}
-            type="text"
-            inputMode="numeric"
-            className="one-time-code__input"
-            maxLength={1}
-            value={value}
-            onChange={handleChange(index)}
-            onKeyDown={handleKeyDown(index)}
-            onPaste={handlePaste}
-            aria-label={`${index + 1}번째 인증번호 숫자`}
-          />
-        ))}
-      </div>
-      {helperNode ? (
-        <div className="one-time-code__helper">{helperNode}</div>
-      ) : null}
-    </div>
-  );
-});
-
-IdentificationInput.displayName = "IdentificationInput";
-
-export { IdentificationInput };