[서지훈]sprint4 #130

SealBros · 2024-06-14T14:15:30Z

요구사항

Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

기본

이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 "이메일을 입력해주세요." 빨강색 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다.

회원가입

이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
닉네임 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않습니다..” 에러 메세지를 보입니다.
input 에 빈 값이 있거나 에러 메세지가 있으면 ‘회원가입’ 버튼은 비활성화 됩니다.
input 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다.
활성화된 ‘회원가입’ 버튼을 누르면 “/signup” 로 이동합니다.

심화

눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.

주요 변경사항

Sprint mission 4 요구사항을 반영
메인 홈페이지에서 모바일 화면에서 footer 부분 grid로 변경

스크린샷

멘토에게

최대한 사용자 편의성을 관점으로 만들어봤는데, 특히 회원가입에서 비밀번호 확인부분을 위에 비밀번호를 입력받지 않으면 비밀번호확인 부분을 비활성화 처리를 했는데, 뭔가 한번씩 동작이 안될때가 있어 어떻게 하면될까요?
최대한 중복되는 코드를 줄여보면서 작성했는데 그게 제대로 되었는지도 궁금합니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

wlgns2223 · 2024-06-15T07:18:26Z

signup.html

@@ -36,23 +36,30 @@
        <div class="input-item">
          <label for="password">비밀번호</label>
          <div class="input-wrapper">


input-wrapper 태그의 CSS 스타일을 모두 없애도 아무런 변화가 일어나지 않는데 그렇다면 이 div를 없애도 되지 않을까요? 어떻게 생각하세요 ?

flex-direction : column으로 배치 시키면 좋겠다 싶어서 넣었는데, 다시 확인해보니깐 없어도 동작이 그대로 되네요...ㅎ 특별하게 크게 동작하는거 같지 않아서 빼도 괜찮을거같습니다!!

wlgns2223 · 2024-06-15T07:19:26Z

scripts/signup.js

@@ -0,0 +1,37 @@
+document.addEventListener("DOMContentLoaded",function(){


스크립트 태그가 제일 아래에 있어서 DOM이 모두 로드된 후에 자바스크립트가 실행되긴 하지만 그래도 이렇게 작성해주시면 센스있는 코드가 되는것 같습니다 !

wlgns2223 · 2024-06-15T07:50:33Z

scripts/signup.js

input 이벤트일때 에러메세지를 지워주면 좀 더 나은 UX가 될 것 같습니다 !

wlgns2223 · 2024-06-15T07:52:55Z

scripts/signup.js

+
+    emailInput.addEventListener("focusout", function(){
+        loginValidationResults.email = checkEmailValidation();
+        toggleSubmitButton();


toggleSubmitButton이 중복되어 등장을 하네요. form 태그에 input 이벤트 핸들러를 초기화시켜놓으면 어떨까요? 그러면 자식 태그에서 발생하는 input 이벤트를 버블링 페이즈에서 잡아서 button을 활성화 시킬지 검사 할 수 있을 것 같아요.

테스트해봤는데 자식 태그에서 input 이벤트 발생시 로그 확인 할 수 있어요.

signupForm.addEventListener("input", (event) => { console.log("captured"); });

최대한 함수 여러개 쓰는 중복을 배재 시킬려고 했는데, 초기화를 생각 못했네요ㅠㅠ 한번 수정해보도록 하겠습니다!

wlgns2223 · 2024-06-15T08:00:36Z

scripts/signup.js

+        toggleSubmitButton();
+    });
+    nicknameInput.addEventListener("focusout", function(){
+        loginValidationResults.nickname = checkNicknameValidation();


const signupValidationResults = { email: false, nickname: false, password: false, passwordCheck: false, };

해당 객체를 sign up 페이지에서 사용하시려고 정의하신것 같은데 loginValidation 객체를 사용하셨네요.
혹시 어떤 이유에서일까요?

제 생각에는 이렇게 전역변수를 사용하는것은 좋지 않은 것 같습니다.

기본 flag를 초기화 해서 저장 해놓은 다음, 에러 메시지가 발생하지 않을때, true 변경해 그 값을 signupValidationResults에 하나하나 저장해서, 최종적으로 모든 값이 true일때, 버튼이 활성화 되는 형태로 구성했습니다!

wlgns2223 · 2024-06-15T08:03:30Z

scripts/loginValidation.js

+function checkPasswordValidation(checkPasswordInput){
+
+    const passwordInput = document.getElementById("password");
+    const isPassword = passwordInput.value.trim();


유저의 입력값을 trim 하는것은 좋은 방법입니다 ! 센스있네요 !

wlgns2223 · 2024-06-15T08:05:13Z

scripts/loginValidation.js

+function errorDisplay(input, message) {
+    input.style.border = "1px solid #F74747";
+    let errorElement = document.getElementById(input.id + '-error');
+    if (!errorElement) {
+        errorElement = createErrorMessageElement(input.id + '-error', message);
+        input.insertAdjacentElement('afterend', errorElement);
+    } else {
+        errorElement.textContent = message;
+    }
+    errorElement.style.display = "block";
+}
+
+// 상태 초기화 함수
+function errorReset(input) {
+    input.style.border = "none";
+    const errorElement = document.getElementById(input.id + '-error');
+    if (errorElement) {
+        errorElement.style.display = "none";
+    }
+}


공통된 로직을 잘 뽑아서 중복 코드를 없애주셨네요 ~ ! 잘 하셨습니다 !

wlgns2223 · 2024-06-15T08:10:11Z

scripts/loginValidation.js

+function toggleSubmitButton() {
+    const submitButton = document.getElementById("submit-button");
+    const loginAllValid = Object.values(loginValidationResults).every(value => value === true);
+    const signUpAllValid = Object.values(signupValidationResults).every(value => value === true);
+
+    if (loginAllValid) {
+        submitButton.removeAttribute("disabled");
+    }
+    else if(signUpAllValid){
+        submitButton.removeAttribute("disabled");
+    }
+    else {
+        submitButton.setAttribute("disabled", "disabled");
+    }
+}


toggleSubmitButton이 로그인 버튼과 회원가입 버튼에 각각 사용되네요. 그것을 if문으로 구분짓고 있습니다. 제 생각에는 로그인 페이지를 위한 버튼, 회원가입 페이지를 위한 버튼 각각 함수를 따로 만드는게 낫다고 생각합니다.

함수는 하나의 책임만을 가지는게 낫습니다.

그럼 따로 분리해서 동작하도록 설계해보겠습니다!

wlgns2223 · 2024-06-15T08:12:26Z

최대한 사용자 편의성을 관점으로 만들어봤는데, 특히 회원가입에서 비밀번호 확인부분을 위에 비밀번호를 입력받지 않으면 비밀번호확인 부분을 비활성화 처리를 했는데, 뭔가 한번씩 동작이 안될때가 있어 어떻게 하면될까요?

이런것은 사용자 편의성과는 그다지 관계가 없어보입니다 🥲 그리고 제가 테스트를 해봤을때는 지훈님이 의도하신대로는 잘 동작하는데 어쩔때 이슈가 생기는지 잘 모르겠네요 .

wlgns2223 · 2024-06-15T08:13:13Z

최대한 중복되는 코드를 줄여보면서 작성했는데 그게 제대로 되었는지도 궁금합니다.

어느 부분을 부분의 중복코드를 줄이기로 하셨었나요? 원래의 코드가 궁금합니다 ~ ㅎㅎ

wlgns2223 · 2024-06-15T08:13:38Z

스프린트 미션 수고하셨습니다 ! 잘 이해가 안가거나 추가적인 질문이 있다면 멘토링때 해주시거나 아니면 디스코드 상으로 질문을 해주세요 ~

SealBros · 2024-06-17T05:34:30Z

위에 있는 토글버튼 관련 이벤트랑 유사하게 로그인에서 사용되는 비밀번호 유효성 검사 함수를 비밀번호 유효성 검사 함수 + 비밀번호 확인 검사 함수 이렇게 합치고 싶었다가 분리 했습니다!

SealBros added 7 commits June 11, 2024 13:53

fix : login.css 모바일 화면 오류 수정

73ab91c

design : login.css 판다마켓 로고 이미지 크기 수정

1f08b1f

feat : 홈화면 모바일 크기 footer grid 수정

bce0fa9

feat : loginValidation.js 추가 ( 이벤트 함수 미구현 )

4ee8d7b

feat : loginValidation.js 유효성 검사 함수 추가 작업 및 login.js 이벤트 지정 함수 추가

79aed6b

feat : login.js 활성화/비활성화 버튼 추가

2894aac

feat : 로그인/회원가입 이벤트 등록

6e6c8a1

SealBros added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 14, 2024

SealBros requested a review from wlgns2223 June 14, 2024 14:16

wlgns2223 reviewed Jun 15, 2024

View reviewed changes

wlgns2223 merged commit 23f879f into codeit-bootcamp-frontend:Basic-서지훈 Jun 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[서지훈]sprint4 #130

[서지훈]sprint4 #130

SealBros commented Jun 14, 2024 •

edited by wlgns2223

Loading

wlgns2223 Jun 15, 2024

SealBros Jun 17, 2024

wlgns2223 Jun 15, 2024

wlgns2223 Jun 15, 2024

wlgns2223 Jun 15, 2024

SealBros Jun 17, 2024

wlgns2223 Jun 15, 2024

SealBros Jun 17, 2024

wlgns2223 Jun 15, 2024

wlgns2223 Jun 15, 2024

wlgns2223 Jun 15, 2024

SealBros Jun 17, 2024

wlgns2223 commented Jun 15, 2024

wlgns2223 commented Jun 15, 2024

wlgns2223 commented Jun 15, 2024 •

edited

Loading

SealBros commented Jun 17, 2024

		@@ -0,0 +1,37 @@
		document.addEventListener("DOMContentLoaded",function(){

[서지훈]sprint4 #130

[서지훈]sprint4 #130

Conversation

SealBros commented Jun 14, 2024 • edited by wlgns2223 Loading

요구사항

기본

로그인

회원가입

심화

주요 변경사항

스크린샷

멘토에게

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wlgns2223 commented Jun 15, 2024

wlgns2223 commented Jun 15, 2024

wlgns2223 commented Jun 15, 2024 • edited Loading

SealBros commented Jun 17, 2024

SealBros commented Jun 14, 2024 •

edited by wlgns2223

Loading

wlgns2223 commented Jun 15, 2024 •

edited

Loading