1. UI / UX

‣ 반응형 웹

CSS의 Flex와 min-width를 사용하여 화면 비율에 따라 반응형으로 구현했다. 또한 mediaquery를 통해 모바일 화면 크기에서는 WEB 상에서 디자인과 조금 다르게 적응형으로 CSS를 구현하였다.

(추가적으로 IOS에서 input과 button의 디자인이 기존 스타일에 의해 적용되지 않아 appearance: none,-moz-appearance: none;,-webkit-appearance: none;를 통해 ios에서도 적용되도록 했다.)

‣ box-shadow

box-shadow를 사용하여 기본적인 프로젝트의 컨셉 디자인 구성했다.
Form ContentBox에 해당하는 box-shadow는 뒤로갈수록 희미하게 구현하여 지저분해보지 않게 구성했다.
input과 button에도 box-shadow를 사용하여 블럭 형태를 유지함으로서 디자인의 통일감을 주었다. button에는 hover를 사용하여 강조해주었으며, active와 transform을 통해 버튼 클릭 시 입체적인 느낌을 주었다.

#content_box{
    /*box design*/
    box-shadow: #000000 0px 0px 0px 2px inset, 
    #ffffff 10px -10px 0px -3px, 
    #333333 10px -10px, 
    #ffffff 20px -20px 0px -3px, 
    #666666 20px -20px, 
    #ffffff 30px -30px 0px -3px, 
    #999999 30px -30px, 
    #ffffff 40px -40px 0px -3px,
    #cccccc 40px -40px;
}
  
#content_form{
   		/*form design*/
        #submit_btn:hover{
        	background-color: #e74c3c;
        	box-shadow:  0 0 0 1px #c63702 inset, 
        	0 0 0 2px rgba(255,255,255,0.15) inset, 
        	3px -2px 0 0 #C24032, 
        	3px -2px 0 1px rgba(0,0,0,0.4), 
        	3px -2px 8px 1px rgba(0,0,0,0.5);
        }
        #submit_btn:active{
            transform: translateY(0px);
            box-shadow: 0 0 0 1px #c63702 inset,
            0 0 0 2px rgba(255,255,255,0.15) inset,
            0 0 0 1px rgba(0,0,0,0.4);
        }
}

2. JS 주요 기능

‣ 유효성 검사

HTML의 input 요소의 속성 min/max length를 사용하여 기본적으로 입력에 제한을 두었으며, JS로 input.value.length와 value의 값 유무를 통해 유효성 검사를 구현했다. 추가적으로 RegExp를 통해 패턴 확인과 불필요한 input값을 replace()를 사용해 유효한 값으로 변경해주었다.

유효성 검사 실행 후 통과 여부에 따른 메시지를 실시간으로 띄어 에러 정보성을 높였다. 또한 submit button 클릭 시 입력되지 않았거나 잘못된 입력을 한 input box에 적색으로 표시해주어 최종적으로 한꺼번에 오입력을 확인할 수 있게 하였다.
색상은 녹색 계열과 적색 계열 중 색각이상자도 구별가능한 색상으로 선택하여 접근성을 높였다.

//아이디 조건 확인
function idCondition(){

    inputId.value = inputId.value.replace(/[^ㄱ-힣a-zA-Z0-9]/ig,'');

    if(inputId.value.length < 4 || inputId.value.length > 12){
        idConditionMs.classList.add('message_fail');
        idSuccessMs.classList.remove('message_success');
        if(inputId.value.length === 0){
            idConditionMs.classList.remove('message_fail');
            idSuccessMs.classList.remove('message_success');
        }
    }else{
        idConditionMs.classList.remove('message_fail');
        idSuccessMs.classList.add('message_success');
        inputId.id = 'name';
    }
}

//폰 번호 조건 확인
function phoneCondition(){
    inputPhone.value = inputPhone.value
    .replace(/[^0-9]/g, '')
    .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
}

// 모든 조건을 체크하는 함수
function checkAllConditions() {
    return (
        idSuccessMs.classList.contains('message_success') &&
        emailSuccessMs.classList.contains('message_success') &&
        pwSuccessMs.classList.contains('message_success') &&
        pw2SuccessMs.classList.contains('message_success')
    );
}

//제출 버튼 조건 확인(생략)

‣ Form DATA 로컬스토리지 저장:

localStorage 객체를 사용하여 데이터를 key-value 쌍으로 저장한 후, setItem()메서드와 JSON.stringify를 통해 JSON 문자열로 변환하여 로컬 스토리지에 저장했다.
추가적인 공부 필요

// 폼 제출 함수
function submitForm(event) {
    if (checkAllConditions()) {
        window.location.href = "a.html";

        let userInfo = { id: inputId.value, pwd: inputPw.value ,email: inputEmail.value}
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
    } else {
        event.preventDefault();
        
        if (!idSuccessMs.classList.contains('message_success')) {
            idConditionMs.classList.add('message_fail');
            inputId.id = 'red_input';
        }
      //생략
    }
}

3. 느낀점

데이터 GET, POST하여 서버에 저장하는 부분을 더 학습하여 보완해야할 것같다. 여전히 JS코드를 더욱 간결하게 효율적으로 줄여야 될거 같은 아쉬움이 남는다.