[노준서] sprint4 by Still-Mare · Pull Request #82 · codeit-bootcamp-frontend/17-Sprint-Mission

Still-Mare · 2025-06-25T16:21:14Z

요구사항

기본

로그인

이메일 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 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다.
활성화된 ‘회원가입’ 버튼을 누르면 로그인 페이지로 이동합니다

심화

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

주요 변경사항

파일 이름과 경로 재설정

스크린샷

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다 :)

Still-Mare · 2025-06-25T16:33:44Z

css/form.css

+.password-input input,
+.confirm-input input {
+  flex: 1;
+  border: none;


border: 1.5px solid transparent; 로 수정했습니다

Still-Mare · 2025-06-25T16:47:09Z

css/form.css

+  border: none;
+  border-radius: 12px;
+  background-color: var(--background-color);
+  padding: 16px 24px;


padding: 16px 24px; 값을
.password-input input,
.confirm-input input { } 으로 옮겼습니다.

padding: 0;
position: relative; 를 추가했습니다.

Still-Mare · 2025-06-25T16:49:23Z

css/form.css

+  font-family: Pretendard, sans-serif;
+}
+
+.toggle-password {


position: absolute;
right: 16px;
추가했습니다

Still-Mare · 2025-06-25T16:53:50Z

파일은 수정 완료했는데 PR을 다시 올려야하나요? 지우고 다시 올리려했는데 지우는 법을 모르겠어서 코멘트로 수정했다고만 올렸습니다...

baeggmin

첫 js 미션 수행하느라 고생 많으셨습니다!👍👍

baeggmin · 2025-06-25T22:49:25Z

js/error_message.js

@@ -0,0 +1,202 @@
+document.addEventListener("DOMContentLoaded", function () {
+  // 공통 함수
+  function validateEmail(value) {


이메일, 비밀번호, 닉네임 등 검증 로직을 validateXXX 함수로 분리한 점 좋습니다 👍
역할 별로 명확하게 구분되었네요!

baeggmin · 2025-06-25T22:51:27Z

js/error_message.js

+      if (!value) return "닉네임을 입력해주세요.";
+      return "";
+    }
+    function validatePasswordCheck(password, passwordCheck) {


지금 함수명보다는 validatePasswordConfirmation 가 더 명확할 것 같습니다.

baeggmin · 2025-06-25T22:54:48Z

js/error_message.js

+document.addEventListener("DOMContentLoaded", function () {
+  // 공통 함수
+  function validateEmail(value) {
+    if (!value) return "이메일을 입력해주세요.";


공백만 입력한 경우를 대비해서 value.trim() 메소드를 이용해봐도 좋을 것 같아요.

baeggmin · 2025-06-25T22:55:43Z

js/error_message.js

+    function updateLoginButtonState() {
+      const emailErr = validateEmail(emailInput.value);
+      const pwErr = validatePassword(passwordInput.value);
+      if (!emailInput.value || !passwordInput.value || emailErr || pwErr) {


!emailInput.value || !passwordInput.value 이 조건은 validateEmail 과 validatePassword에서 이미 걸러지지 않나요? 🤔

아 그러네요 ㅎ
수정완료했습니다:)

baeggmin · 2025-06-25T23:02:41Z

js/error_message.js

+      const err = validateEmail(emailInput.value);
+      emailError.textContent = err;
+      emailInput.classList.toggle("error", !!err);
+      updateLoginButtonState();


'input' 이벤트핸들러에서 updateLoginButtonState가 호출되고 있어서 'blur'에서는 호출되지 않아도 될 것 같다는 생각이 듭니다. blur 이벤트에서는 검증과 에러메세지 출력만 해도 될 것 같아요.

updateLoginButtonState(); 삭제 완료했습니다!

baeggmin · 2025-06-25T23:04:49Z

js/error_message.js

+    loginButton.disabled = true;
+  }
+
+  // ===== 회원가입 =====


위 로그인 로직에 남긴 리뷰들이 회원가입 로직에도 동일하게 적용됩니다.

baeggmin · 2025-06-26T10:59:58Z

js/error_message.js

+
+    signupForm.addEventListener("submit", function (e) {
+      e.preventDefault();
+      if (!signupButton.disabled) {


UI 상태에 의존한 조건은 지양해주시는게 좋습니다. 지금은 간단한 기능이라 문제없지만, 조건이 조금만 복잡해져도 상태가 변경된 이유를 알기 어려워 버그 가능성이 커질 수 있습니다. ValidateEmail과 validatePassword 의 반환값으로 조건을 거는게 더 좋아보려요.

const emailErr = validateEmail(emailInput.value); const nicknameErr = validateNickname(nicknameInput.value); const passwordErr = validatePassword(passwordInput.value); const passwordCheckErr = validatePasswordCheck( passwordInput.value, passwordCheckInput.value ); if (!emailErr && !nicknameErr && !passwordErr && !passwordCheckErr) { window.location.href = "/login.html"; }

이런식으로 수정하면 될까요?

넵 좋습니다!👍

baeggmin · 2025-06-26T11:01:11Z

제가 리뷰 남기기 전이라면 자유롭게 PR 수정하셔도 괜찮습니다~! (코멘트 남기지 않아도 괜찮아요😊)

Still-Mare added 4 commits June 25, 2025 23:55

remove useless code & apply comment 3,4

80f5c02

override difference in style.css

2ded153

rename files & reconstruct dir

7a4f454

sprint4

9b2362b

Still-Mare requested a review from baeggmin June 25, 2025 16:21

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

Still-Mare commented Jun 25, 2025

View reviewed changes

modify form.css

0dc2427

baeggmin reviewed Jun 26, 2025

View reviewed changes

baeggmin merged commit 3038f99 into codeit-bootcamp-frontend:Basic-노준서 Jun 26, 2025

Conversation

Still-Mare commented Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Still-Mare Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Still-Mare commented Jun 25, 2025

Uh oh!

baeggmin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Still-Mare Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

baeggmin commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Still-Mare commented Jun 25, 2025 •

edited

Loading

Still-Mare Jun 25, 2025 •

edited

Loading

Still-Mare Jun 26, 2025 •

edited

Loading

baeggmin commented Jun 26, 2025 •

edited

Loading