[이재준]sprint4 #73

kevin123753 · 2025-06-13T17:22:21Z

요구사항

기본

브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
PC: 1200px 이상
Tablet: 768px 이상 ~ 1199px 이하
Mobile: 375px 이상 ~ 767px 이하
375px 미만 사이즈의 디자인은 고려하지 않습니다
랜딩 페이지

[x]Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
[x]Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
[x]화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
로그인, 회원가입 페이지 공통

Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
[x]Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
[x]Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
로그인

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

회원가입

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

심화

[]페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
[]미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
[]주소와 이미지는 자유롭게 설정하세요.
[]눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
[]비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 []보이도록 합니다.

주요 변경사항

스프린트1,2미션 문제점 수정 및 기본 요구사항 준수

스크린샷

멘토에게

개선할 부분이있으면 말씀해주시면 감사하겠습니다!

baeggmin

첫 Js 미션 수행하시느라 고생하셨습니다! 👍👍 또한 지난 리뷰도 꼼꼼히 반영해주신 덕분에 코드가 전반적으로 많이 깔끔해졌네요.

다만, 여러 스프린트 미션을 하나의 PR에 묶어 올리게 되면 변경사항이 많아져서 리뷰 범위가 넓어지고, 그만큼 세세한 피드백을 드리기 어려워질 수 있습니다.
조금 번거로우시겠지만 PR은 가급적 미션 단위로 나누어 올려주시면 더 정밀한 리뷰를 드릴 수 있을 것 같습니다. 😊

baeggmin · 2025-06-17T22:39:51Z

login/login.html

+      </a>
+    </h1>
+
+    <form class="login-form">


Form 구현을 위한 시맨틱 태그 (form, input, label 등)을 아주 잘 활용해주셨습니다.👍 특히 label 의 for 속성까지 꼼꼼히 추가해주신 점 좋습니다!

baeggmin · 2025-06-17T22:41:15Z

login/login.html

+      <p id="password-error"></p>
+    </form>
+
+    <button class="login-button" type="button" disabled>로그인</button>


form 태그 내부에서 input 과 button 을 연결하기 위해서는 type=submit 을 지정해주셔야 합니다.

baeggmin · 2025-06-17T22:47:26Z

signup/signup.html

+      <p id="pwconfirmerror"></p>
+    </form>
+
+   <button class="signup-button" type="button" disabled>회원가입</button>


여기도 type=submit으로 변경되어야할거같아요.

baeggmin · 2025-06-17T22:48:40Z

login/login.html

-    <div class="eight"><div class="nine"><h1 class="ten">간편 로그인하기</h1><div class="eleven"><a href="https://www.google.com/"><img src="../images/google.png"></a><a href="https://www.kakaocorp.com/page/"><img src="../images/kakao.png"></a></div></div></div>
-    <h1 class="last">판다마켓이 처음이신가요?<a href="../signup/signup.html">회원가입</a></h1>
- </div>
+  <main class="login-container">


classname 이 직관적이고 일관성 있게 수정되었네요👍👍

baeggmin · 2025-06-17T23:00:11Z

login/login.js

+  });
+
+button.addEventListener('click', function () {
+ if (!button.disabled) {


버튼이 disabled 상태면 애초에 클릭 이벤트가 발생하지 않기 때문에, 이 조건은 사실상 불필요합니다.

또한, 단순히 클릭 이벤트핸들러만 등록하게 되면 엔터키 입력 이벤트에 대한 유효성 검사를 놓칠 수 있습니다.

따라서 form 요소의 유효성 검사를 위한 이벤트핸들러를 등록할 때에는 'submit' 이벤트를 활용해주시는게 좋습니다. 단 submit 을 활요하기 위해서는 제출 버튼에 <button type="submit"> 을 설정해주셔야 합니다.

추가로, checkValid() 함수에서 버튼의 활성화 여부를 이미 판단하고 있음에도 불구하고, click 이벤트 안에서 다시 button.disabled 상태를 조건으로 사용하는 것은 중복된 검증이며, 코드 흐름을 명확하게 하지 못하는 방식입니다.

disabled와 같은 UI 상태는 “결과값”으로서 존재해야지, 다른 동작의 “의사결정 기준”으로 사용되면 의존성이 잘못된 방향으로 흘러갈 수 있습니다.

즉, 로직의 핵심 판단이 DOM 상태에 의존하게 되면, 상태 관리와 사이드이펙트의 경계가 흐려져 유지보수성이 떨어질 수 있으니 이런 방식은 지양해주시는게 좋습니다.

결론적으로 아래와 같은 방식으로 수정되면 좋을 것 같네요!

const form = document.querySelector('#login-form'); form.addEventListener('submit', (e) => { e.preventDefault(); const isValid = checkValid() if(isValid) { location.href = '../items/items.html'; } });

baeggmin · 2025-06-17T23:09:42Z

signup/signup.js

+
+  button.disabled = true;
+
+  email.addEventListener('focusout', function (e) {


현재 signup.js와 login.js에서 이메일과 비밀번호 유효성 검사 로직이 거의 동일한데요, 공통 유효성 검사 함수로 분리하면 좋겠습니다.

function isValidEmail(value) { return value.includes('@') && value.includes('.'); } function isValidPassword(value) { return value.length >= 8; }

baeggmin · 2025-06-17T23:12:31Z

signup/signup.js

+  const email = document.querySelector('#email');
+  const error = document.querySelector('#email-error');
+  const nickname = document.querySelector('#nickname');
+  const nkerror = document.querySelector('#nkerror');


변수명은 조금 길어져도 괜찮으니 명시적으로 작성해주세요! nkerror -> nicknameError

baeggmin · 2025-06-17T23:13:54Z

signup/signup.js

@@ -0,0 +1,74 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const email = document.querySelector('#email');
+  const error = document.querySelector('#email-error');


error 는 너무 제너럴한 변수명이니 emailError 로 수정되면 좋을 것 같습니다.

baeggmin · 2025-06-17T23:14:29Z

signup/signup.js

+  const nickname = document.querySelector('#nickname');
+  const nkerror = document.querySelector('#nkerror');
+  const password = document.querySelector('#password');
+  const pwerror = document.querySelector('#password-error');


여기도 passwordError가 더 직관적일 것 같습니다.

baeggmin · 2025-06-17T23:16:16Z

signup/signup.js

+  const password = document.querySelector('#password');
+  const pwerror = document.querySelector('#password-error');
+  const passwordConfirm = document.querySelector('#passwordConfirm');
+  const pwconfirmerror = document.querySelector('#pwconfirmerror');


변수명은 카멜케이스 (passwordConfirmError) 로 작성해주세요!

kevin123753 added 3 commits June 13, 2025 01:36

스프린트미션1,2 수정

e989ac1

스프린트미션3완료

b98b7d8

프로젝트4완료

441bd85

kevin123753 requested a review from baeggmin June 13, 2025 17:22

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

baeggmin approved these changes Jun 17, 2025

View reviewed changes

baeggmin merged commit 94e7526 into codeit-bootcamp-frontend:Basic-이재준 Jun 17, 2025


		button.disabled = true;

		email.addEventListener('focusout', function (e) {

[이재준]sprint4 #73

[이재준]sprint4 #73

Uh oh!

Conversation

kevin123753 commented Jun 13, 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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants