[React] Verification code & SMS code Input - 보안코드 인풋 만들기

 

 

 

1. 코드 길이를 정하여 직사각형을 만들어주고, 보안코드를 정중앙에 배치하기 위해 display flex를 사용하였습니다.

 

import styled from "styled-components";

const CODE_LENGTH = 5;

const App = () => {
  return (
    <Container>
      <Box>
        {Array(CODE_LENGTH)
          .fill(0)
          .map((v, i) => {
            return <Display key={i}>{codes[i]}</Display>;
          })}
      </Box>
    </Container>
  );
};

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 200px 0;
`;

const Box = styled.div`
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 30px 0 10px;
`;

const Display = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 76px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 32px;
  color: #2e2e2e;
`;

export default App;

 

 

2. Input을 만들어주고 position: absolute를 통해 display와 같은 위치에 오도록 설정해 줍니다.

 

 <Box>
	{Array(CODE_LENGTH).fill(0).map((v, i) => {
		return <Display key={i}>{codes[i]}</Display>;
	})}
	<Input maxLength={CODE_LENGTH} />
</Box>

const Input = styled.input`
  position: absolute;
  max-width: 320px;
  padding: 0 20px 3px;
  height: 76px;
  font-size: 28px;
`;

 

 

3. Input의 글자, 배경색, outline, border를 모두 지워줍니다. 글자를 숨기면 입력 커서도 숨겨지는데, caret-color 속성을 통하여 입력커서에만 속성을 줄 수 있습니다.

 

const Input = styled.input`
  position: absolute;
  max-width: 320px;
  padding: 0 20px 3px;
  height: 76px;
  background: none;
  font-size: 28px;
  color: rgba(0, 0, 0, 0);
  caret-color: black;
  border: none;
  outline: none;
`;

 

 

4. Input의 letter-spacing 속성을 통해 자간을 Display box와 맞춰줍니다.

 

letter-spacing: 50px;

 

 

5. useState를 통해 입력값을 받고, 입력값에 따라 유효성 검사 값을 보여줍니다.
여기서는 입력한 코드가 5글자인지 아닌지만 확인합니다.

 

const [codes, setCodes] = useState("");

<Box>
	{Array(CODE_LENGTH).fill(0).map((v, i) => {
		return <Display key={i}>{codes[i]}</Display>;
	})}
	<Input
		value={codes}
		onChange={(e) => setCodes(e.target.value)}
		maxLength={CODE_LENGTH}
   	/>
</Box>  
{codes.length >= CODE_LENGTH ? (
  	<Validation>Code correct</Validation>
  ) : (
    <Validation color="#ff5a60">Code uncorrect</Validation>
 )}

const Validation = styled.p<{ color?: string }>`
  font-weight: 500;
  color: ${({ color }) => (color ? color : "#1eba66")};
`;

 

 

완성한 코드는 다음과 같습니다.

 

import { useState } from "react";
import styled from "styled-components";

const CODE_LENGTH = 5;

const App = () => {
  const [codes, setCodes] = useState("");

  return (
    <Container>
      <h1>Verification Code</h1>
      <Box>
        {Array(CODE_LENGTH)
          .fill(0)
          .map((v, i) => {
            return <Display key={i}>{codes[i]}</Display>;
          })}
        <Input
          value={codes}
          onChange={(e) => setCodes(e.target.value)}
          maxLength={CODE_LENGTH}
        />
      </Box>
      {codes.length >= CODE_LENGTH ? (
        <Validation>Code correct</Validation>
      ) : (
        <Validation color="#ff5a60">Code uncorrect</Validation>
      )}
    </Container>
  );
};

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 200px 0;
`;

const Box = styled.div`
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 30px 0 10px;
`;

const Display = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 76px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 32px;
  color: #2e2e2e;
`;

const Input = styled.input`
  position: absolute;
  max-width: 320px;
  padding: 0 20px 3px;
  height: 76px;
  background: none;
  letter-spacing: 50px;
  font-size: 28px;
  color: rgba(0, 0, 0, 0);
  caret-color: black;
  border: none;
  outline: none;
`;

const Validation = styled.p<{ color?: string }>`
  font-weight: 500;
  color: ${({ color }) => (color ? color : "#1eba66")};
`;

export default App;

 

 

 

https://www.codedaily.io/tutorials/Create-a-Segmented-Auto-Moving-SMS-Code-Verification-Input-in-React

https://github.com/codeCYJ/react-verification-code-input