[김종화] sprint4 #116

KJongHwa · 2024-06-14T07:17:03Z

요구사항

체크리스트 [기본]

이메일 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” 로 이동합니다

체크리스트 [심화]

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

주요 변경사항

반응형 웹페이지 구축
로그인과 회원가입 유효성 검사

스크린샷

멘토에게

모든 내용이 입력 완료되고 유효성검사를 통과한다면 onblur 하지 않아도 로그인 / 회원가입 버튼이 활성화 되게 구현하고 싶었으나 해보지 못했습니다. 힌트 조금만 주시면 구현해보고 싶습니다.
항상 감사합니다 :)

wlgns2223 · 2024-06-17T01:01:49Z

signup.html

+  <form action="" accept-charset="UTF-8" name="panda-signup" method="get">
+    <main class="signup-main">


main에는 페이지의 컨텐츠들이 들어가는 태그이고 form은 회원가입 페이지에서 중요한 컨텐츠라고 볼 수 있어서 둘의 위치가 바뀌어야합니다.

Suggested change

<form action="" accept-charset="UTF-8" name="panda-signup" method="get">

<main class="signup-main">

<main class="signup-main">

<form action="" accept-charset="UTF-8" name="panda-signup" method="get">

wlgns2223 · 2024-06-17T01:03:00Z

signup.html

+      <div class="easy-login-section">
+        <p class="easy-login-font">
+          간편 로그인하기
+        </p>
+        <div class="easy-login-layout">
+          <a href="https://www.google.com/">
+            <img src="image/Component 2.png" alt="구글 로그인" width="42px" height="42px">
+          </a>
+          <a href="https://www.kakaocorp.com/page/">
+            <img src="image/Component 3.png" alt="카카오톡 로그인" width="42px" height="42px">
+          </a>
+        </div>
+      </div>
+      <div class="login-link-font">
+        이미 회원이신가요? <a class="login-link" href="login.html">로그인</a>
+      </div>


form은 서버로 보내지는 유저들의 입력값들을 모아놓은 태그이므로 간편로그인이나 로그인 페이지로의 이동은 form 밖에 있어야합니다.

wlgns2223 · 2024-06-17T01:06:24Z

signup.html

+        <div class="fail-login-blank hide">
+          이메일을 입력해주세요.
+        </div>
+        <div class="fail-login-email hide">
+          잘못된 이메일 형식입니다.
+        </div>


텍스트는 p태그로 작성을 해주셔야합니다 ㅎㅎ

wlgns2223 · 2024-06-17T01:11:21Z

signup.html

+        <label class="signup-label-font" for="passwordCheck">비밀번호 확인</label>
+        <div class="password-hidden-layout">
+          <input class="signup-layout" id="passwordCheck" type="password" placeholder="비밀번호를 다시 한 번 입력해주세요">
+          <img class="password-hidden cursor-pointer" src="image/btn_visibility_on_24px.png" alt="비밀번호 표시 변경">


padding을 없애고 패딩과 같은 값인 16px, 24px을 각각 top, right 속성에 주면 같은 효과가 납니다.
absolute 포지션이면 주로 top,left로 위치 조정을 합니다. 위치조정을 위해서는 패딩으로는 잘 안하는 것 같습니다 ㅎㅎ

wlgns2223 · 2024-06-17T01:18:27Z

js/verifySignup.js

onClick과 같은 이벤트 핸들러보다 addEventListener를 쓰는것이 좀 더 최신의 이벤트 핸들러 정의 방법이라고 합니다.
그 둘의 차이를 한번 비교해보시겠어요 ?
https://nangman14.tistory.com/27

정보 공유 감사합니다 ! 해당 내용 참고하여 수정해보겠습니다.

wlgns2223 · 2024-06-17T01:23:30Z

js/verifySignup.js

+email.onfocus = function() {
+  failLoginBlank.classList.add("hide");
+  failLoginEmail.classList.add("hide");
+  email.classList.remove("fail-layout");
+};
+
+email.onblur = function() {
+  if(checkBlankType(email.value)) {
+    failLoginBlank.classList.remove("hide");
+    failLoginEmail.classList.add("hide");
+    email.classList.add("fail-layout");
+  } else if(!checkEmailType(email.value)) {
+    failLoginEmail.classList.remove("hide");
+    failLoginBlank.classList.add("hide");
+    email.classList.add("fail-layout");
+  }
+  checkAll()
+};


하나의 이벤트에서 모든것을 처리하지 않고 , onfocus, onblur 이벤트에 각각 로직을 작성해주신 점은 좋습니다 !

wlgns2223 · 2024-06-17T01:25:03Z

js/verifySignup.js

+email.onfocus = function() {
+  failLoginBlank.classList.add("hide");
+  failLoginEmail.classList.add("hide");
+  email.classList.remove("fail-layout");
+};
+
+email.onblur = function() {
+  if(checkBlankType(email.value)) {
+    failLoginBlank.classList.remove("hide");
+    failLoginEmail.classList.add("hide");
+    email.classList.add("fail-layout");
+  } else if(!checkEmailType(email.value)) {
+    failLoginEmail.classList.remove("hide");
+    failLoginBlank.classList.add("hide");
+    email.classList.add("fail-layout");
+  }
+  checkAll()
+};


const email = document.querySelector("#email"); email 변수를 사용되는 곳에 가까이 위치시키면 가독성이 더 좋아집니다.

Suggested change

email.onfocus = function() {

failLoginBlank.classList.add("hide");

failLoginEmail.classList.add("hide");

email.classList.remove("fail-layout");

};

email.onblur = function() {

if(checkBlankType(email.value)) {

failLoginBlank.classList.remove("hide");

failLoginEmail.classList.add("hide");

email.classList.add("fail-layout");

} else if(!checkEmailType(email.value)) {

failLoginEmail.classList.remove("hide");

failLoginBlank.classList.add("hide");

email.classList.add("fail-layout");

}

checkAll()

};

const email = document.querySelector("#email");

email.onfocus = function() {

failLoginBlank.classList.add("hide");

failLoginEmail.classList.add("hide");

email.classList.remove("fail-layout");

};

email.onblur = function() {

if(checkBlankType(email.value)) {

failLoginBlank.classList.remove("hide");

failLoginEmail.classList.add("hide");

email.classList.add("fail-layout");

} else if(!checkEmailType(email.value)) {

failLoginEmail.classList.remove("hide");

failLoginBlank.classList.add("hide");

email.classList.add("fail-layout");

}

checkAll()

};

wlgns2223 · 2024-06-17T01:33:04Z

js/verifySignup.js

+    failLoginBlank.classList.add("hide");
+    email.classList.add("fail-layout");
+  }
+  checkAll()


모든 이벤트 핸들러에 checkAll 함수를 사용해서 인풋태그를 확인하고 버튼의 활성화를 체크를 하는 것 같아요. form 태그에 이벤트 핸들러를 달아서 다른 요소에서 발생한 이벤트의 캡쳐링 단계에 form 요소가 그것을받아서 한번만 checkAll 함수를 작성 할 수 있지 않을까요? ㅎㅎ

wlgns2223 · 2024-06-17T01:37:00Z

모든 내용이 입력 완료되고 유효성검사를 통과한다면 onblur 하지 않아도 로그인 / 회원가입 버튼이 활성화 되게 구현하고 싶었으나 해보지 못했습니다. 힌트 조금만 주시면 구현해보고 싶습니다.

input 이벤트는 input요소에 어떤 입력이 될때마다 발생하는 이벤트입니다. 사용자가 입력할때마다 input 요소 전체를 체크해서 조건에 맞으면 버튼을 활성화 할 수 있습니다.
주의할 점은 모든 이벤트핸들러에 input 이벤트 핸들러를 달기보다 캡쳐링을 이용해서 form 요소에 한번만 input 이벤트 리스너를 달아서 폼 안에 모든 input 요소를 검사하고 버튼을 활성화 시킬 수 있습니다.

wlgns2223 · 2024-06-17T01:37:13Z

스프린트미션 수고하셨습니다 !

스프린터 미션 3&4 반응형 웹과 로그인 회원가입 유효성 검사 추가

6a99229

KJongHwa requested a review from wlgns2223 June 14, 2024 07:17

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

KJongHwa changed the title ~~Basic 김종화 sprint2~~ [김종화] sprint4 Jun 14, 2024

KJongHwa changed the base branch from React-김종화 to Basic-김종화 June 17, 2024 00:52

wlgns2223 reviewed Jun 17, 2024

View reviewed changes

wlgns2223 merged commit 13ae301 into codeit-bootcamp-frontend:Basic-김종화 Jun 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김종화] sprint4 #116

[김종화] sprint4 #116

KJongHwa commented Jun 14, 2024 •

edited

Loading

wlgns2223 Jun 17, 2024

wlgns2223 Jun 17, 2024

wlgns2223 Jun 17, 2024

wlgns2223 Jun 17, 2024

wlgns2223 Jun 17, 2024

KJongHwa Jun 17, 2024

wlgns2223 Jun 17, 2024

wlgns2223 Jun 17, 2024

wlgns2223 Jun 17, 2024

wlgns2223 commented Jun 17, 2024

wlgns2223 commented Jun 17, 2024

		<form action="" accept-charset="UTF-8" name="panda-signup" method="get">
		<main class="signup-main">

[김종화] sprint4 #116

[김종화] sprint4 #116

Conversation

KJongHwa commented Jun 14, 2024 • edited 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

wlgns2223 commented Jun 17, 2024

wlgns2223 commented Jun 17, 2024

KJongHwa commented Jun 14, 2024 •

edited

Loading