로그인 / 회원가입
사실 하루안에 끝내려 했지만, 계속 비교하면서 하다보니 완성 하지 못했다.
전 까지는 템플릿 엔진을 jsp 를 사용했다면 이번엔 mustache 를 사용해서 진행하기로했다.
JSP: Java 기반의 템플릿 엔진으로, JSP 파일 내에서 Java 코드를 직접 사용할 수 있습니다. JSP는 주로 Spring MVC나 서블릿과 함께 사용됩니다.
Mustache: JavaScript나 다른 언어에서도 사용할 수 있는 매우 간단한 템플릿 엔진입니다. Mustache는 논리적 구문 없이 단순히 데이터를 템플릿에 바인딩하는 역할만 수행하며, HTML을 표현하는 데 매우 직관적입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>amigo:회원가입</title>
<link rel="stylesheet" href="/css/login/join.css">
<link rel="stylesheet" href="/css/font/font.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="register-container">
<div class="register-box">
<form action="/user/requestAuth" method="post">
<div class="input-id-password">
<div class="input-with-icon">
<span class="icon"><i class="fas fa-user"></i></span>
<input type="text" id="userId" name="userId" placeholder="아이디" required class="id-box">
</div>
<div class="input-with-icon">
<span class="icon"><i class="fas fa-lock"></i></span>
<input type="password" id="password" name="password" placeholder="비밀번호" required class="password-box">
<span class="icon-eye" id="togglePassword"><i class="fas fa-eye-slash"></i></span>
</div>
<div class="message-box">
<span id="userIdMessage" class="message"></span>
<span id="passwordMessage" class="message"></span>
</div>
</div>
<div class="input-other">
<div class="input-with-icon">
<span class="icon"><i class="fas fa-user"></i></span>
<input type="text" id="name" name="name" placeholder="이름" required class="name-box" >
</div>
<div class="input-with-icon">
<span class="icon"><i class="fas fa-phone"></i></span>
<input type="tel" id="phoneNumber" name="phoneNumber" placeholder="휴대폰 번호" required class="phone-box">
</div>
<div class="input-with-icon">
<span class="icon"><i class="fas fa-calendar-alt"></i></span>
<input type="text" id="birth" name="birth" placeholder="생년월일8 자리" required class="age-box">
</div>
</div>
<div class="gender-options">
<input type="radio" id="male" name="gender" value="male" required>
<label for="male" class="gender-label">남자</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female" class="gender-label">여자</label>
</div>
<div class="terms-box">
<label><input type="checkbox" name="terms" required> 약관 동의</label>
</div>
<button type="submit" class="register-btn">인증요청</button>
</form>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/js/login/checkRepetition.js"></script>
<script type="text/javascript" src="/js/login/authenticationNumber.js"></script>
<script>
$("#togglePassword").on("click", function() {
const passwordInput = $("#password");
const icon = $(this).find("i");
if (passwordInput.attr("type") === "password") {
passwordInput.attr("type", "text");
icon.removeClass("fa-eye-slash").addClass("fa-eye");
} else {
passwordInput.attr("type", "password");
icon.removeClass("fa-eye").addClass("fa-eye-slash");
}
});
</script>
콜sms 이용한 휴대폰 인증과 소셜 로그인등 할게 아직 남았기에 화면 ui 디자인은 이제 더이상 건드리지 않고 내일 까지는 로그인 나머지 작업을 끝낼 생각이다. 스케줄 관리가 중요하다는 것을 저번 프로젝트에서 뼈저리게 느꼈으면서....
또 쓸데없는 디테일에 시간을 보낸것 같다.