25-03-11

📌 Daily Report

https://github.com/ssginc-be/DOKI/issues/70

📌 프로젝트 상황

컨디션이 안좋아지고 있다. 마감이 2주도 안남았는데 좋은 신호는 아니다.

git 명령어를 이따구로 칠 정도로 약간 멍하다. ㅋㅋㅋㅌㅋㅋㅋㅋㅋㅋ

그래도 각종 스팀팩 꽂으니까 로직 작성은 되고 있음! 😊

📌 회원가입 유효성 검사

가입 유효성 검사 진짜 보통이 아니더라.

DOM 컨트롤까지 해서 그런가? 정말 시간 잡아먹는게

대단하지 않은 자잘한 로직의 뭉탱이(?)인데, JS로 view에서 검사한다고 끝이 아니라

진짜 신경을 썼다면 백 단까지 검사해야 하는거라

진심 현재 상황에서 보통 귀찮은 작업이 아닐 수가 없다;

---

...하단은 오늘까지 짠 코드인데 이거 60퍼밖에 구현 안된 상태이다.

const API_GATEWAY_HOST = "http://localhost:9093";

/* 가입 request 가능한 상태인지 check */
let CHECK_EMAIL = false;
let CHECK_PW = false;
let CHECK_PHONE = false;
let CHECK_NAME = false;
let CHECK_GENDER = false;
let CHECK_BIRTH = false;


/* 뒤로 가기, 작성 취소 버튼 클릭시 작동하는 함수 */
function goBack() {
    const ok = confirm("가입을 취소하고 뒤로 가시겠습니까?");
    if (ok) history.back();
}

/* 가입하기 버튼 클릭시 작동하는 함수 */
function SignUp() {
    let requestBody = {
        member_id: memberId,
        member_pw: memberPw
    };

}


/*****************************************************************
    [버튼 이벤트 함수]
    이메일 인증 버튼 클릭 시 작동
*/
async function handleEmailCodeButtonClicked() {
    const email = document.getElementById('email-input').value;
    console.log('email input:', email);

    // 이메일 포맷 검사
    if (checkEmailInput(email) === false) {
        alert("이메일 형식이 올바르지 않습니다.");
        return;
    }

    // 인증코드 발송 (여기선 await 하지 않...는게 좋은데 바쁘니 일단 해놓자)
    await sendEmailCode();

    // 이메일 input readonly 처리 + 이메일 인증 버튼 비활성화
    let emailInput = document.getElementById('email-input');
    let emailCheckButton = document.getElementById('email-check-button');
    emailInput.readOnly = true;
    emailCheckButton.innerText = "인증 초기화";
    emailCheckButton.classList.add('active');
    emailCheckButton.onclick = resetEmailVerification; // onclick 함수를 인증 초기화 함수로 변경

    // global check 변수
    CHECK_EMAIL = true;

    // 이메일 input 하단에 인증코드 입력 input과 [인증 확인] 버튼 표시
    if (!document.getElementById('email-verification-box')) { // 현재 DOM에 없으면
        let newChildDiv = document.createElement('div');
        newChildDiv.classList.add("group-content-box");
        newChildDiv.id = 'email-verification-box';
        let childInnerHtml = `
            <div class="group-content-label"></div>
            <input id="email-code-input" type="text" placeholder="5분 내에 발송된 코드를 입력해주세요." />
            <button class="signup-check-button" id="email-code-check-button" onclick="validateEmailCode()">인증 확인</button>
        `;
        newChildDiv.innerHTML = childInnerHtml;

        let signupGroup = document.getElementById('signup-group-top');
        signupGroup.insertBefore(newChildDiv, signupGroup.children[2]);
    }
}

// API 호출해서 인증 코드 보내보고, 실패하면 view 되돌리는 함수
async function sendEmailCode() {
    try {
        await getRequest(API_GATEWAY_HOST + "/v2/auth/email/code?to=" + email);
    } catch (error) {
        // error는 getRequest 안에서 logging 되었음.
        // 인증 코드 발송 실패했으므로 view 돌려놓기
        resetEmailVerification();
    }
}

// 이메일 포맷 검사 함수
function checkEmailInput(email) {
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailPattern.test(email);
}

// 이메일 input readonly 풀고 + check button 돌려놓는 함수
function resetEmailVerification() {
    let emailInput = document.getElementById('email-input');
    let emailCheckButton = document.getElementById('email-check-button');
    let boxDiv = document.getElementById('email-verification-box');

    // global check 변수
    CHECK_EMAIL = false;

    emailInput.readOnly = false;
    emailCheckButton.innerText = "이메일 인증";
    emailCheckButton.classList.remove('active');
    emailCheckButton.onclick = handleEmailCodeButtonClicked;
    boxDiv.remove(); // 인증 코드 영역 제거
}


/*****************************************************************
    [버튼 이벤트 함수]
    이메일 인증 확인 버튼 클릭 시 작동
*/
async function validateEmailCode() {
    // 입력된 코드 값 가져오기
    const input = document.getElementById('email-code-input');
    const code = input.value;

    // 인증 확인
    try {
        await getRequest(API_GATEWAY_HOST + "/v2/auth/email/code?to=" + code);
        let button = document.getElementById('email-code-check-button');
        button.innerText = "인증 완료";
        button.classList.add("disable");
        button.onclick = null;
    } catch (error) {
        console.error(error);
        alert(error.message);
        // readonly 풀고 인증버튼 돌려놓기
        resetEmailVerification();
    }
}



/*****************************************************************
    [버튼 이벤트 함수]
    휴대폰 인증 버튼 클릭 시 작동
*/
async function handlePhoneCodeButtonClicked() {
    const phonePrefix = document.getElementById('phone-prefix')
    const phoneInput = document.getElementById('phone-input')
    const phone = phonePrefix.value + phoneInput.value;
    console.log('phone prefix + input:', phone);

    // 인증코드 발송 (여기도 await 하지 않는게 좋은데 바쁘니 일단 해놓자)
    await sendPhoneCode();

    // prefix disable & input readonly 처리 + 휴대폰 인증 버튼 비활성화
    let phoneCheckButton = document.getElementById('phone-check-button');
    phonePrefix.disabled = true;
    phoneInput.readOnly = true;
    phoneCheckButton.innerText = "인증 초기화";
    phoneCheckButton.classList.add('active');
    phoneCheckButton.onclick = resetPhoneVerification; // onclick 함수를 인증 초기화 함수로 변경

    // global check 변수
    CHECK_PHONE = true;

    // 휴대폰 번호 input 하단에 인증코드 입력 input과 [인증 확인] 버튼 표시
    if (!document.getElementById('phone-verification-box')) { // 현재 DOM에 없으면
        let newChildDiv = document.createElement('div');
        newChildDiv.classList.add("group-content-box");
        newChildDiv.id = 'phone-verification-box';
        let childInnerHtml = `
            <div class="group-content-label"></div>
            <input id="phone-code-input" type="text" placeholder="30분 내에 발송된 코드를 입력해주세요." />
            <button class="signup-check-button" id="phone-code-check-button" onclick="validatePhoneCode()">인증 확인</button>
        `;
        newChildDiv.innerHTML = childInnerHtml;

        let signupGroup = document.getElementById('signup-group-bottom');
        signupGroup.insertBefore(newChildDiv, signupGroup.children[2]);
    }
}

// API 호출해서 인증 코드 보내보고, 실패하면 view 되돌리는 함수
async function sendPhoneCode(phone) {
    try {
        await getRequest(API_GATEWAY_HOST + "/v2/auth/phone/code?to=" + phone);
    } catch (error) {
        // error는 getRequest 안에서 logging 되었음.
        // 인증 코드 발송 실패했으므로 view 돌려놓기
        resetPhoneVerification();
    }
}


/*****************************************************************
    [버튼 이벤트 함수]
    휴대폰 인증 확인 버튼 클릭 시 작동
*/
async function validatePhoneCode() {
    // 입력된 코드 값 가져오기
    const code = document.getElementById('phone-code-input').value;

    // 인증 확인
    await getRequest(API_GATEWAY_HOST + "/v2/auth/phone/code?to=" + code);
}



function resetPhoneVerification() {
    let phonePrefix = document.getElementById('phone-prefix');
    let phoneInput = document.getElementById('phone-input');
    let phonelCheckButton = document.getElementById('phone-check-button');
    let boxDiv = document.getElementById('phone-verification-box');

    // global check 변수
    CHECK_PHONE = false;

    phonePrefix.disabled = false;
    phoneInput.readOnly = false;
    phonelCheckButton.innerText = "휴대폰 인증";
    phonelCheckButton.classList.remove('active');
    phonelCheckButton.onclick = handlePhoneCodeButtonClicked;
    boxDiv.remove(); // 인증 코드 영역 제거
}



/*****************************************************************
    [입력 이벤트 함수]
    input 타이핑 시 작동
*/
function checkEmailInputEmpty(event) {
    // 이메일 input 공란 여부 검사
    let button = document.getElementById('email-check-button');

    if (event.value.length < 1) {
        button.classList.add('disable');
        button.onclick = null;
    }
    else {
        button.classList.remove('disable');
        button.onclick = sendEmailCode;
    }
}

function checkPasswordValid(event) {
    // 8자 이상 숫자/대소문자/특수문자 모두 포함 조건에 부합하는지 검사
    let pwInput = event.value;
    const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+={}\[\]:;"'<>,.?/-]).{8,}$/;

    let pwReInput = document.getElementById('pw-re-input');
    let pwCheckDiv = document.getElementById('pw-check');
    if (passwordPattern.test(pwInput)) {
        pwReInput.placeholder = '비밀번호를 재입력해주세요.';
        pwReInput.readOnly = false;
        pwReInput.oninput = checkPasswordMatch;
        pwCheckDiv.style.visibility = 'unset';
    }
    else {
        pwReInput.placeholder = '8자 이상 숫자/대소문자/특수문자를 모두 포함해야 합니다.';
        pwReInput.readOnly = true;
        pwReInput.oninput = null;
        pwCheckDiv.style.visibility = 'hidden';
    }
}

function checkPasswordMatch(event) {
    // 비밀번호 재입력 값이 기존과 동일한지 검사
    let pwInput = document.getElementById('pw-input').value;
    let pwReInput = event.target.value;
    let pwCheckDiv = document.getElementById('pw-check');
    console.log(pwInput, pwReInput)

    if (pwInput === pwReInput) {
        pwCheckDiv.classList.add('ok');
        pwCheckDiv.innerText = '비밀번호 일치';
        // global check 변수
        CHECK_PW = true;
    }
    else {
        pwCheckDiv.classList.remove('ok');
        pwCheckDiv.innerText = '비밀번호 불일치';
        // global check 변수
        CHECK_PW = false;
    }
}

function checkPhoneValid(event) {
    // 8자리 숫자 여부 검사
    const digitPattern = /^\d{8}$/;
    const button = document.getElementById('phone-check-button');
    
    if (digitPattern.test(event.value)) {
        button.classList.remove('disable');
        button.onclick = handlePhoneCodeButtonClicked;
    }
    else {
        button.classList.add('disable');
        button.onclick = null;
    }
}



/* axios request */
async function getRequest(endpoint) {
    try {
        const response = await axios.get(endpoint);
        console.log(response);
        return response;
    } catch (error) {
        console.error(error);
        alert("서버와의 통신에 실패했습니다.");
        throw error;
    }
}

async function postRequest(endpoint, requestBody) {
    try {
        const response = await axios.post(endpoint, requestBody);
        console.log(response);
        return response;
    } catch (error) {
        console.error(error);
        alert("서버와의 통신에 실패했습니다.");
    }
}