React로 인증 코드 입력 필드 만들기

모든 것이 다 그렇다고 생각하지만 이번에도 우연하게 만들게 되어서 작성한다.

import { useState } from "react";

// 인증 코드 입력 필드 개수 설정
const SIZE = 6;

export default function App() {
  // 사용자 입력 값을 저장하는 상태 (6개의 빈 문자열로 초기화)
  const [verificationCode, setVerificationCode] = useState(
    Array(SIZE).fill("")
  );

  // 붙여넣기 이벤트 핸들러
  const handlePaste = (event) => {
    event.preventDefault(); // 기본 붙여넣기 동작 방지
    const pasteData = event.clipboardData.getData("Text").slice(0, SIZE); // 붙여넣기 데이터에서 최대 SIZE(6)개의 문자만 가져오기
    const newCode = pasteData.split(""); // 붙여넣은 데이터를 배열로 변환

    // 현재 입력 값과 합쳐서 상태 업데이트
    setVerificationCode((prevCode) =>
      newCode.concat(prevCode.slice(newCode.length)) // 기존 코드 중 남은 부분 유지
    );
  };

  // 개별 입력 필드의 변경 핸들러
  const handleChange = (index, value) => {
    // 숫자만 입력 가능하도록 필터링
    if (/^\d?$/.test(value)) {
      const updatedCode = [...verificationCode]; // 기존 상태 복사
      updatedCode[index] = value; // 변경된 값 업데이트
      setVerificationCode(updatedCode); // 상태 업데이트

      // 다음 입력 필드로 자동 포커스 이동 (마지막 필드는 제외)
      if (value && index < SIZE - 1) {
        document
          .querySelector(`input[name="verification-${index + 1}"]`)
          ?.focus();
      }
    }
  };

  return (
    <div className="flex gap-[4px] p-[16px]">
      {/* 입력 필드 생성 (SIZE만큼 반복) */}
      {Array.from({ length: SIZE }).map((_, index) => (
        <div key={index}>
          <input
            name={`verification-${index}`} // 개별 필드 이름 지정
            type="text"
            maxLength={1} // 한 글자만 입력 가능
            value={verificationCode[index]} // 상태에서 값 가져오기
            onChange={(e) => handleChange(index, e.target.value)} // 입력값 변경 핸들러
            onPaste={handlePaste} // 붙여넣기 핸들러 (첫 번째 필드에서만 적용)
            className="w-full h-10 text-center text-sm font-bold rounded-lg shadow-sm 
            transition-all duration-200 outline-none
            bg-gray-50 border-2 border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 focus:bg-white"
            tabIndex={index + 1} // 키보드 탭 이동 순서 지정
            required
          />
        </div>
      ))}
    </div>
  );
}