[Front] 기능

이메일 직접입력/선택입력

<div class="col-sm">
							<label class="visually-hidden" for="autoSizingInputGroup">&nbsp;</label>
							<div class="input-group">
								<div class="input-group-text">@</div>
								<select class="form-control" name="memberEmailDomain"
									id="selectEmailAddress" onchange="onChangeEmailAddress(value)">
									<option value="setInputEmailAddress">직접입력</option>
									<option>google.com</option>
									<option>naver.com</option>
									<option>daum.net</option>
									<option>hanmail.net</option>
								</select>
							</div>
						</div>
						<div class="col-sm">
							<label for="inputState" class="form-label">&nbsp;</label> <input
								id="inputEmailAddress" type="text" class="form-control"
								placeholder="직접입력" aria-label="Zip"
								pattern="^[a-zA-Z0-9]+\.+[a-zA-Z]{3,}$" maxlength="15" required>
						</div>
					</div>

같은 클래스로 지정 시 이메일을 직접 입력하게 할 수도, 목록에서 선택하게 할 수도 있다.
name은 둘 다 동일하게 name="memberEmailDomain"으로 받고
id는 선택 입력 시 id="selectEmailAddress", 직접 입력 시 id="inputEmailAddress" 로 설정한다.
id가 다른 이유는 각각 다르게 실행해야하기 때문에!
선택 입력의 경우만 onchange="onChangeEmailAddress(value)" 함수를 실행시킨다.
아래 option에서 value를 선택하면 해당 값이 들어가면서 js가 실행됨.
 

// 이메일 옵션 감지하여 직접입력하는 이메일 도메인에 disabled 속성 주는 기능
const onChangeEmailAddress = (value) => {
	// id가 writeEmailSite인 정보 저장
	if (value != "setInputEmailAddress") { // 직접입력 옵션이 아니라면
		$("#inputEmailAddress").prop("disabled", true); // disabled 속성 설정
	}
	else {
		$("#inputEmailAddress").prop("disabled", false); // disabled 속성 제거
	}
}

해당 js.

• input 박스에 도메인을 자동으로 입력하고,
• disabled = true로 설정해서 직접 입력 못 하게 잠근다.

직접 입력의 경우에는 input을 잠그지 않고 직접 입력하도록 둔다.

---

휴대폰 인증

					<div class="row g-3 mb-3">
						<div class="col-sm-6">
							<label>핸드폰 번호 &nbsp
							;<input
								id="memberPhoneNumberConfirmBtn" type="button"
								class="btn btn-warning" value="인증"
								onclick="memberPhoneNumberConfirm()">
								// 버튼 클릭 시 함수 실행
							</label> <input type="tel" name="memberPhoneNumber" class="form-control"
								id="memberPhoneNumber" placeholder="핸드폰 번호를 입력해주세요(-제외)"
								pattern="^(?!(\d)\1{10})\d{11}$"
								title="올바른 11자리 휴대폰 번호를 입력해주세요. (같은 숫자 반복은 불가)" maxlength="11"
								required>
							<div class="invalid-feedback" id="memberPhoneNumberFeedback">인증
								필수</div>
						</div>
						<div class="col-sm" id="phoneNumberConfirmWrapper"></div>
					</div>

• label 안에 입력란과 버튼 모두 삽입
• <input type="button"> 으로 작성하면 버튼 역할을 하게 된다.
• <input type="tel">은 전화번호 작성용.
• title : 마우스를 올렸을 때 나타나는 툴팁(풍선 도움말). 폼에서는 입력 형식 오류 메시지로도 활용한다.

 

• "memberPhoneNumberConfirm()" 함수 (JS)

// 휴대폰번호 인증 영역 출력 기능
const memberPhoneNumberConfirm = () => {
	let phoneNumberConfirmBtn = $("#memberPhoneNumberConfirmBtn").val();
	let phoneNumberConfirmWrapper = $("#phoneNumberConfirmWrapper");
	const phoneNumberConfirmWrapperCode = `
			    <label>인증 번호 &nbsp;
			        <input id="phoneNumberConfirmBtn" type="button" class="btn btn-danger" value="확인">
					&nbsp;&nbsp; <span id="phoneNumberConfirmTimeOut" style="color:red;">5:00</span>
			    </label>
			    <input type="text" name="phoneNumberConfirmNumber" class="form-control"
			        id="phoneNumberConfirmNumber" placeholder="인증 번호를 입력하세요" required>
					<div class="invalid-feedback" id="phoneNumberConfirmNumberFeedback">발송된 인증번호를 입력하세요</div>
			`;

	if (phoneNumberConfirmBtn === "인증") { // 인증 버튼이라면
		console.log("핸드폰 인증 버튼 클릭");

		console.log("인증번호보내기");


		if (!checkMemberPhoneNumber()) { // 거짓이라면
			console.log("핸드폰 번호 유효성 비통과");
			// 스위트 알럿창 출력
			printSweetAlert("warning", "올바른 형식이 아닙니다.", "동일하지 않은 숫자로 11자리를 입력하세요.");
			return;
		}

		// 인증번호 전송 요청 AJAX
		$.ajax({
			type: "POST",
			url: sendSmsCodeUrl,
			data: { phoneNumber: $("#memberPhoneNumber").val().trim() },
			dataType: "json",
			success: function(response) {
				console.log("인증번호 전송 응답:", response);
				if (response.status === "success") {
					printSweetAlert("success", "인증번호가 발송되었습니다.");
				} else {
					printSweetAlert("error", "인증번호 전송 실패", "서버에서 오류가 발생했습니다.");
				}
			},
			error: function(status, error) {
				console.error("인증번호 전송 중 오류 발생", status, error);
				printSweetAlert("error", "서버에 문제가 발생했습니다.", "지속될 시 관리자에게 문의하세요.");
			}
		});

		// 인증 버튼 값을 인증 취소로 변경
		$("#memberPhoneNumberConfirmBtn").val("인증 취소");
		$("#memberPhoneNumber").prop("readonly", true); // readonly 속성 설정

		// 새로운 인증 번호 입력 폼 추가
		phoneNumberConfirmWrapper.html(phoneNumberConfirmWrapperCode);
		// 타이머 시작
		startPhoneNumberConfirmTimer();
	}
	else if (phoneNumberConfirmBtn === "인증 취소") { // 인증 취소 버튼이라면
		console.log("핸드폰 인증 취소 버튼 클릭");
		// 인증 취소 버튼 값을 인증으로 변경
		$("#memberPhoneNumberConfirmBtn").val("인증");
		$("#memberPhoneNumber").prop("readonly", false); // readonly 속성 제거

		phoneNumberConfirmWrapper.empty();
		clearInterval(timer);
	}
	else { // 변경 버튼이라면
		console.log("핸드폰 변경 버튼 클릭");
		$("#memberPhoneNumber").prop("readonly", false); // readonly 속성 제거
		// 변경 버튼 값을 인증으로 변경
		$("#memberPhoneNumberConfirmBtn").val("인증");
	}
}