[React Native] 인증번호 입력 레이아웃 만들기

const Permissions = () => {
  useSafeAreaColor({
    position: SafeAreaPosition.BOTTOM,
    color: COLOR.BG_Yellow,
  });
  const timeRemaining = useTimeout(180);
  const { code, inputRefs, handleInputChange } = useInputCodeNumber(4);
  return (
    <View style={styles.root}>
      <Text style={styles.text}>Enter the 4 digit code</Text>
      <View style={styles.inputContainer}>
        {Array.from({ length: 4 }, (_, index) => (
          <TextInput
            key={index}
            ref={(ref) => (inputRefs.current[index] = ref)}
            style={[
              styles.input,
              {
                backgroundColor: code[index] ? COLOR.BG_Yellow : "transparent",
              },
            ]}
            maxLength={1}
            keyboardType="numeric"
            onChangeText={(value) => handleInputChange(index, value)}
          />
        ))}
      </View>
      <View>
        <Text style={styles.verifyText}>
          Enter verification code sent to 리코일에 번호저장
        </Text>
      </View>
      <View style={styles.timeContainer}>
        <Text style={styles.remainTimeText}>Can retry in </Text>
        <Text style={styles.remainTime}>{timeRemaining}S</Text>
      </View>
      <View style={styles.nextButton}>
        <CustomButton
          text="Submit"
          onPress={() => {
            console.log("하하");
          }}
          active={true}
        />
      </View>
    </View>
  );
};

# useTimeout hook

const useTimeout = (initialTime: number) => {
  const [timeRemaining, setTimeRemaining] = useState<number>(initialTime);
  useEffect(() => {
    let timer: number;

    if (timeRemaining > 0) {
      timer = setTimeout(() => {
        setTimeRemaining(timeRemaining - 1);
      }, 1000);
    } else {
      setTimeRemaining(initialTime);
    }

    return () => {
      clearTimeout(timer);
    };
  }, [timeRemaining, initialTime]);
  return timeRemaining;
};
export default useTimeout;

# useTimeout hook

import { useRef, useState } from "react";
import { TextInput } from "react-native";

const useInputCodeNumber = (length: number) => {
  const [code, setCode] = useState<Array<string>>(Array(length).fill(""));
  const inputRefs = useRef<Array<TextInput | null>>(Array(length).fill(null));

  const handleInputChange = (index: number, value: string) => {
    const newCode = [...code];
    newCode[index] = value;

    setCode(newCode);

    if (value && inputRefs.current[index + 1]) {
      inputRefs.current[index + 1]?.focus();
    } else if (!value && index > 0) {
      inputRefs.current[index - 1]?.focus();
    }
  };

  return { code, inputRefs, handleInputChange };
};

export default useInputCodeNumber;