[최영선] Sprint4

[choi-youngsun]

배포 사이트

https://panda-market-choiys.netlify.app/

요구사항

기본

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

심화

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

주요 변경사항

스크린샷

멘토에게

• 빨간색 테두리, 버튼 활성화/비활성화 아직 구현하지 못했습니다...! required를 썼더니 알아서 활성화가 안되네요..

[arthurkimdev]

과제 제출하시느라 수고하셨습니다 🙏

[arthurkimdev]

이런 경우 가독성을 위해 한칸 띄어쓰기를 꼭 잊지말아주세요~ 🙏

header {

[arthurkimdev]

상위 home.css 파일에 있는 header와 차이점은 padding 값 뿐인 것 같아요.

home.css 파일에 공통으로 base값이 존재하고, 나머지는 오버라이딩 하는 방법으로 설계하면 중복코드가 제거 되서 이전보다 효율적일 것 같아요. 아래는 예시 코드입니다.

/* 공통 스타일 */
header {
  position: fixed;
  background-color: #ffffff;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfdfdf;
}

/* 모바일 스타일 */
@media (max-width: 767px) {
  header {
    padding: 0 10px;
  }
  ...
 }

[arthurkimdev]

html lang="ko" 값으로 변경 되어야합니다~

- 언어 하위태그(필수)
두 세 글자로 구성된 코드로 기본 언어를 정의하며, 보통 모두 소문자로 표기합니다. 예를 들어 영어의 언어 태그는 en이고, 한국어의 언어 태그는 ko입니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/lang

[arthurkimdev]

이처럼 css를 모듈별로 import 좋아요. 👍

[arthurkimdev]

아래처럼 nav, ul, li 등을 사용해서 조금 더 시멘틱한 html 구조로 footer를 만들 수 있습니다.
nav는 보통 내비게이션 링크를 그룹화 하는데 사용해요.

<footer>
  <div class="footer-container">
    <p class="codeit">
      &copy; codeit - 2024
    </p>
    <nav class="help">
      <ul>
        <li><a href="/privacy">Privacy Policy</a></li>
        <li><a href="/faq">FAQ</a></li>
      </ul>
    </nav>
    <div class="icon_sns">
      <ul>
        <li><a href="https://www.facebook.com/" target="_blank"><img rel="icon" src="images/ic_facebook.png" alt="Facebook"></a></li>
        <li><a href="https://www.twitter.com/" target="_blank"><img rel="icon" src="images/ic_twitter.png" alt="Twitter"></a></li>
        <li><a href="https://www.youtube.com/" target="_blank"><img rel="icon" src="images/ic_youtube.png" alt="YouTube"></a></li>
        <li><a href="https://www.instagram.com/" target="_blank"><img rel="icon" src="images/ic_instagram.png" alt="Instagram"></a></li>
      </ul>
    </div>
  </div>
</footer>

[arthurkimdev]

이처럼 inline-style은 지양해주시는게 좋아요! 아래 적은 내용들 말고도 더 있을 수 있어요. 한번 더 찾아보시면 도움이 될거에요~

1. 스타일을 일괄적으로 수정하기 어렵고, 중복 코드가 증가
2. 스타일을 여러 요소에 쉽게 재사용할 수 없음
3. css 우선순위 이슈

[arthurkimdev]

이처럼 태그에 직접 스타일을 적용하면 간편하고 명확하지만, 유지보수성이 저하되고 재사용성이 어려우며, 우선순위 문제가 발생할 수 있기 때문에 아래처럼 클래스 기반의 스타일을 권장드립니다.
이렇게 되면 태그 대신 클래스를 사용하여 스타일을 적용함으로써 유지보수성과 재사용성을 높일 수 있어요.

@media (max-width: 1199px) {
    .responsive-body {
        font-size: 16px;
        padding: 0 50px;
    }

    .responsive-logo {
        width: auto;
    }

    .responsive-form {
        margin: 16px auto;
        width: 100%;
    }

    .responsive-label {
        color: #1F2937;
        display: block;
        margin: 16px 0 8px;
        font-size: 14px;
    }

    .responsive-input {
        font-size: 16px;
        width: 100%;
    }

    .responsive-button {
        width: 100%;
        height: 56px;
        font-size: 16px;
    }

    .responsive-easy-login {
        font-size: 14px;
    }
}

[arthurkimdev]

중복되는 코드를 공통된 toggleError 함수를 추가해서 제거할 수 있어요.

이를 해결하기 위해, classList.toggle 사용해서 가독성 있게 해결 해볼 수 있어요.

https://developer.mozilla.org/ko/docs/Web/API/Element/classList

const toggleError = (input, messageElement, show) => {
  input.classList.toggle('error', show);
  messageElement.classList.toggle('hide', !show);
};

const emailCheck = () => {
  if (inputEmail.value.length === 0) {
    toggleError(inputEmail, blankMessageEmail, true);
  } else if (!isEmail(inputEmail.value)) {
    toggleError(inputEmail, invalidMessageEmail, true);
    toggleError(inputEmail, blankMessageEmail, false);
  } else {
    toggleError(inputEmail, invalidMessageEmail, false);
    toggleError(inputEmail, blankMessageEmail, false);
  }
  activeButton();
};

[arthurkimdev]

추가적으로 함수를 작성했을 때, 타입스크립트를 아직 사용하지 않다보니 아래처럼 JSDoc을 통해 주석을 추가해주시면 좋아요.

관련 링크는 남겨놓을게요!
https://jsdoc.app/about-getting-started

/**
 * 오류 메시지를 표시하거나 숨기는 함수
 * @param {HTMLElement} input - 입력 필드 요소
 * @param {HTMLElement} messageElement - 메시지 요소
 * @param {boolean} show - 오류 메시지를 표시하려면 true, 숨기려면 false
 */
const toggleError = (input, messageElement, show) => {
  input.classList.toggle('error', show);
  messageElement.classList.toggle('hide', !show);
};