HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="containerAlign">
<div class="phoneNum">
<input
class="inputBox"
type="text"
id="phoneNumInput"
placeholder="휴대폰 번호를 입력하세요"
/>
<button id="callCodeNum" value="on">인증번호 받기</button>
</div>
<div class="wrapper">
<input
class="inputBox"
type="text"
id="codeNumInput"
disabled="disabled"
/>
<span id="spanBox"></span>
<button id="codeNumConfirm">인증번호 확인</button>
</div>
</div>
</div>
</body>
</html>
CSS
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
height: 100vh;
}
.container {
width: 620px;
height: 135px;
margin: 0 auto;
background-color: #ffffff;
border: 1px solid;
box-shadow: 10px 10px 20px 16px rgba(0, 0, 0, 0.2);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container .inputBox {
width: 332px;
height: 44px;
border-radius: 10px;
padding: 0 14px;
margin: 5px 5px;
text-align: right;
}
.container button {
width: 120px;
height: 44px;
border-radius: 10px;
}
.wrapper {
position: relative;
}
.wrapper span {
position: absolute;
margin: 0;
top: 18px;
left: -25px;
}
#spanBox {
visibility: hidden;
}
</style>Javascript
<script>
document
.querySelector("#callCodeNum")
.addEventListener("click", buttonOn);
function buttonOn() {
const $callCodeNum = document.querySelector("#callCodeNum");
const $codeNumInput = document.querySelector("#codeNumInput");
const $phoneNumInput = document.querySelector("#phoneNumInput");
const $spanBox = document.querySelector("#spanBox");
const phoneReg = /01[016789]-[^0][0-9]{2,3}-[0-9]{3,4}/; // 핸드폰번호 정규표현식
if (!phoneReg.test($phoneNumInput.value)) {
alert("올바른 핸드폰번호를 입력하세요"); // 올바른 핸드폰번호를 입력하지 않으면 경고창 출력
$phoneNumInput.value = ""; // 입력했던 핸드폰번호 초기화
return;
} else {
let count = 61; // 60초 카운트
let counter = setInterval(timer, 1000); // 1초마다 타이머 함수 실행
function timer() {
count--; // 카운트다운 시작
if (count <= 0) {
clearInterval(counter); // 카운트가 0이 되면 카운터 인터벌을 종료
document.querySelector("#spanBox").innerHTML = ""; // 시간초를 초기화
alert("시간이 만료되었습니다"); // 시간만료 알림창 출력
$phoneNumInput.disabled = false; // 핸드폰번호 입력창 다시 활성화
$callCodeNum.disabled = false; // 인증번호 받기 버튼 활성화
return;
}
document.querySelector("#spanBox").innerHTML = count; // 카운트다운 한 숫자 출력
}
$phoneNumInput.disabled = true; // 핸드폰번호 입력창 비활성화
$callCodeNum.disabled = true; // 인증번호 받기 버튼 비활성화
$codeNumInput.disabled = false; // 인증번호 입력창 활성화
$spanBox.style.visibility = "visible"; // 카운트다운 창 활성화, 처음엔 숨겨져있음
}
}
</script>결과
기본상태
이상한 번호를 입력하면
무시무시한 경고창 출력
올바른 번호를 입력하면 ?
핸드폰 번호 입력창과 인증번호 받기 버튼 비활성화 후 카운트다운
시간이 다 되면 무시무시한 경고창 2
경고창 출력 이후엔 다시 핸드폰 번호 입력창과 인증번호 받기 버튼이 활성화 된다
평가
강의 영상을 보고 즉흥적으로 만들어보고 싶어서 부랴부랴 만들기 시작했다
카운트다운은 전에도 한번 만들어보긴 했는데 잘 기억이 나지 않아서
전에 만들었던 코드를 참고했다
처음에는 인증번호를 확인하는 창에 placeholder 태그를 써서
그 쪽에 setInterval을 적용해보고 싶었는데 방법이 잘 떠오르지 않았다
찾아봐도 많이 어려워서 span 태그를 이용해서 position 으로 위치를 지정해줬다
추가할 요소라고 한다면
인증번호에도 정규식을 사용해서 체크를 한다던가,
인증창 위에 로고를 삽입하거나,
인증창 밑에 다른 방식의 인증방법을 넣는 것 정도가 있겠다
css 사이즈 같은건 실제 마켓컬리 회원가입창을 조금 참고했는데
만들고보니 너무 어설퍼서 디자인 쪽 공부도 좀 해야겠다고 느꼈다
조금 찾아보니 요즘은figma 라는 툴을 많이 사용한다고 한다
아직은 개발공부에 좀 더 힘을 써야할 때니까 깊게 보진 않았지만
아직도 공부할게 이렇게 많이 남았다는건 행복할지도 모르겠다 🥳
Always, we are friend 🧡