[김지윤]sprint4

[21ow]

요구사항

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

심화

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

멘토에게

• 코드 수정 중 focus out 조건 부분 구현 누락했습니다.
• 버튼 비활성화/활성화 색상 구현 누락했습니다.
• 768px 분기에서 input 하단 margin 값 수정하겠습니다.
• 완성을 못했습니다. 죄송합니다.

배포

스프린트 미션 4

[GANGYIKIM]

지윤님 이번 주차 코드리뷰 수고하셨습니다.
스프린트 미션은 주차별 요구사항이 있지만 구현 가능하신만큼만해서 제출하면 됩니다~
이렇게 제출하신 것만으로도 충분하니 편하게 제출해주세요~
아래는 전반적인 변경사항에 대한 피드백입니다.

---

• 동일한 사항에 대해서는 한번만 코멘트를 답니다. 비슷한 경우를 찾아서 변경해보세요~
• if 조건문에서 조건을 변수로 빼서 변수명을 보고 어떤 경우 로직이 실행되는지 알 수 있게 작업해주신것이 좋았습니다.
• 네이밍이 아쉬운 부분들이 있습니다. 이름을 보고 어떤 동작을 하는 함수인지, 어떤 변수인지, 요소인지, 불린값인지, text인지 등 명확하게 작성해주시면 가독성에 많은 도움이 될 것 같습니다.

[GANGYIKIM]

P2:
상호작용 요소이므로 button 태그를 추천드립니다.

Suggested change

	<img
	class="login-form__icon js-pw-icon"
	src="/images/icon/pw-hidden.png"
	alt="비밀번호 숨기기 버튼"
	/>
	<button type='button' class='js-pw-icon'>
	<img
	class="login-form__icon"
	src="/images/icon/pw-hidden.png"
	alt="비밀번호 숨기기 버튼"
	/>
	</button>

[GANGYIKIM]

P2:
HTML 문서 다운로드 후 JS가 다운로드 되게 하단에 배치하신 것 같은데

하단에 배치된 스크립트는 구문분석 순서상 추후에 다운로드 되게 만들어주지만 일반적으로 스크립트 태그가 위치되는 head 요소가 아니므로 가독성 측면에서 단점이 있고 이러한 동작은 스크립트 자체 속성을 통해 이끌어 낼 수 있으므로 script async, defer 속성 사용을 추천드립니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/script#defer
https://ko.javascript.info/script-async-defer

[GANGYIKIM]

P2:
안쓰는 인자의 경우 지워주시는 것이 가독성에 더 좋을 것 같습니다.

Suggested change

	function toggleIcon(e) {
	function toggleIcon() {

[GANGYIKIM]

P2:
해당 변수들은 하단의 toggleIcon함수에서만 사용되므로 내부에서 선언해주시면 더 좋을 것 같습니다.

[GANGYIKIM]

P3:
아래처럼 작성하셔도 동일동작합니다~

const pwIcon = document.querySelector(".js-pw-icon");

function toggleIcon() {
  const pwInput = document.querySelector(".js-pw");
  const hiddenIcon = "/images/icon/pw-hidden.png";
  const viewIcon = "/images/icon/pw-view.png";

  const isPasswordType = pwInput.type === "password";

  pwInput.type = isPasswordType ? "text" : "password";
  pwIcon.src = isPasswordType ? viewIcon : hiddenIcon;
  pwIcon.alt = isPasswordType ? "비밀번호 보기 버튼" : "비밀번호 숨기기 버튼";
  pwInput.focus();
}

pwIcon.addEventListener("click", toggleIcon);

const pwIcon = document.querySelector(".js-pw-icon");

function toggleIcon() {
  const pwInput = document.querySelector(".js-pw");

  if(pwInput.type === "password") {
    pw.type = "text";
    pwIcon.src = "/images/icon/pw-view.png";
    pwIcon.alt = "비밀번호 보기 버튼";
  } else {
    pw.type = "password";
    pwIcon.src =  "/images/icon/pw-hidden.png";
    pwIcon.alt = "비밀번호 숨기기 버튼";
  }

  pwInput.focus();
}

pwIcon.addEventListener("click", toggleIcon);

[GANGYIKIM]

P2:
해당 변수도 errorMessage가 들어갈 요소이니 아래와 같은 이름이 더 유의미할 것 같습니다.

Suggested change

	const nicknameError = document.querySelector(".js-nickname-error");
	const nicknameErrorContainer = document.querySelector(".js-nickname-error");

[GANGYIKIM]

P2:

Suggested change

	const pwCheck = document.querySelector(".js-pw-check");
	const pwCheckInput = document.querySelector(".js-pw-check");

[GANGYIKIM]

P2:
valueStatus 를 배열로 관리해야하는 이유를 잘 모르겠습니다.
해당 변수 사용처를 보면 에러가 났을 때, 0 혹은 1을 추가해 buttonActivation 함수에서 해당 변수의 1, FAILED가 있는지 확인하는 로직인데, error가 얼마나 많이 났는지 여부가 중요하지 않기 때문에 boolean 값으로 관리하셔도 될 것 같습니다.

[GANGYIKIM]

P2:
함수의 경우 동사가 먼저 오는 것이 일반적이라 아래와 같은 이름을 추천드립니다.

Suggested change

	function valueCheck(e) {
	!e.target.value ? setInvalid(e.target) : setValid(e.target);
	}
	function checkValue(e) {
	!e.target.value ? setInvalid(e.target) : setValid(e.target);
	}

[GANGYIKIM]

P2:
if문 중첩은 가독성에 좋지 않습니다.
early return 문을 이용하거나, 조건문을 변수에 할당해 코드의 가독성을 높힐 수 있습니다.

Suggested change

	function pwValidation(el) {
	if (!el.value) {
	if (el.name === "password") {
	setInvalid(el, pwError, "비밀번호를 입력해주세요");
	} else {
	setInvalid(el, pwCheckError, "비밀번호를 입력해주세요");
	}
	valueStatus.push(FAILED);
	} else if (el.value.length < 8) {
	if (el.name === "password") {
	setInvalid(el, pwError, "비밀번호를 8자 이상 입력해주세요");
	} else {
	setInvalid(el, pwCheckError, "비밀번호를 8자 이상 입력해주세요");
	}
	valueStatus.push(FAILED);
	} else {
	setValid(el, el.name === "password" ? pwError : pwCheckError);
	valueStatus.push(PASSED);
	}
	}
	function validatePassword(el) {
	const isValid = el.value && el.value.length >= 8;
	const errorTarget = !el.value ? pwError : pwCheckError;
	const errorMessage = !el.value
	? "비밀번호를 입력해주세요"
	: "비밀번호를 8자 이상 입력해주세요";
	if (isValid) {
	setValid(el, el.name === "password" ? pwError : pwCheckError);
	valueStatus.push(PASSED);
	return;
	}
	setInvalid(el, errorTarget, errorMessage);
	valueStatus.push(FAILED);
	}