Conversation
There was a problem hiding this comment.
이번 스프린트가 많이 힘드셨군요. 너무 걱정하지 마세요. 개발자는 모두 겪은 일 입니다. 유석님이 재능이 없는게 아니니 너무 자책하지 않으셨으면 좋겠습니다.
먼저 구현이 어려운 부분이 있다면 그 부분은 나중으로 넘기고 구현 가능한 부분부터 진행하시는 것도 방법이 될 수 있습니다. 이 문제를 해결하고 싶은 욕구가 많으시겠지만 한정된 시간 내에서 요구사항을 어떻게 배분해야 할 지 결정하는 것도 개발자가 가져야 할 덕목이라 생각합니다.
그리고 무언가 막히는 부분이 있다면 PR 이전에 팀 채널이나 DM 으로 연락 주시면 최대한 도움이 될 수 있도록 하겠습니다! 부담 갖지 마시고 언제든 연락 주세요!
| // 로그인 버튼 클릭 이벤트 핸들러 | ||
| const form = document.querySelector('#login-form'); | ||
|
|
||
| form.addEventListener('submit', function (e) { |
There was a problem hiding this comment.
form submit 은 기본적으로 화면을 새로고침 합니다. 따라서 로그인 성공 이후 window.location.href 값은 자신의 페이지로 고정됩니다. 이는 console.log 로 확인해 보실 수 있습니다. 이러한 기본 기능을 막기 위해서는 앞서 사용하신 e.preventDefault(); 을 선언한 뒤 페이지 이동을 시도하면 정상 동작하는 것을 알 수 있습니다.
| const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // 이메일 형식 패턴 | ||
|
|
||
| // 이메일을 입력해주세요 메시지가 있을 때 | ||
| if (emailAlert.textContent === "이메일을 입력해주세요.") { |
There was a problem hiding this comment.
input 스타일을 결정하는 함수로 보입니다. 다만 조건의 기준이 메시지 문구인 이유가 궁금합니다. 예를 들어 boolean 값을 선언해서 true/false 여부로 조건을 판단하는게 더 직관적이지 않을까요?
|
|
||
| // 이메일 유효성 검사 함수 | ||
| function isValidEmail(email) { | ||
| const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; |
There was a problem hiding this comment.
이메일 검사 패턴에 대한 중복이 많은 것 같습니다. 공통화 시킬 수 있지 않을까요?
기본 요구사항
공통
[x] Github에 스프린트 미션 PR을 만들어 주세요.
로그인, 회원가입 페이지 공통
[x] 로그인 및 회원가입 페이지의 이메일, 비밀번호, 비밀번호 확인 input에 필요한 유효성 검증 함수를 만들고 적용해 주세요.
[x] 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
[x] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
[x] 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
[x] 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
[x] input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
[x] Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
[ ] 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다
const USER_DATA = [
{ email: '[email protected]', password: "codeit101!" },
{ email: '[email protected]', password: "codeit202!" },
{ email: '[email protected]', password: "codeit303!" },
{ email: '[email protected]', password: "codeit404!" },
{ email: '[email protected]', password: "codeit505!" },
{ email: '[email protected]', password: "codeit606!" },
];
로그인 페이지
[ ] 이메일과 비밀번호를 입력하고 로그인 버튼을 누른 후, 다음 조건을 참조하여 로그인 성공 여부를 alert 메시지로 출력합니다.
만약 입력한 이메일이 데이터베이스(USER_DATA)에 없거나, 이메일은 일치하지만 비밀번호가 틀린 경우, '비밀번호가 일치하지 않습니다.'라는 메시지를 alert로 표시합니다
만약 입력한 이메일이 데이터베이스에 존재하고, 비밀번호도 일치할 경우, “/items”로 이동합니다.
회원가입
[ ] 회원가입을 위해 이메일, 닉네임, 비밀번호, 비밀번호 확인을 입력한 뒤, 회원가입 버튼을 클릭하세요. 그 후에는 다음 조건에 따라 회원가입 가능 여부를 alert로 알려주세요.
입력한 이메일이 이미 데이터베이스(USER_DATA)에 존재하는 경우, '사용 중인 이메일입니다'라는 메시지를 alert로 표시합니다.
입력한 이메일이 데이터베이스(USER_DATA)에 없는 경우, 회원가입이 성공적으로 처리되었으므로 로그인 페이지(”/login”)로 이동합니다.
심화 요구사항
공통
[ ] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 판다마켓 랜딩 페이지(“/”) 공유 시 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정합니다.
[ ] 미리보기에서 제목은 “판다마켓”, 설명은 “일상에서 모든 물건을 거래해보세요”로 설정합니다.
[ ] 주소와 이미지는 자유롭게 설정하세요.
[ ] 로그인, 회원가입 페이지에 공통으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용해 주세요.
랜딩 페이지
[ ] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
PC: 1200px 이상
Tablet: 744px 이상 ~ 1199px 이하
Mobile: 375px 이상 ~ 743px 이하
375px 미만 사이즈의 디자인은 고려하지 않습니다
[ ] Tablet 사이즈로 작아질 때 최소 좌우 여백이 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
[ ] Mobile 사이즈로 작아질 때 최소 좌우 여백이 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
[ ] PC, Tablet 사이즈의 이미지 크기는 고정값을 사용합니다.
[ ] Mobile 사이즈의 이미지는 좌우 여백 32px을 제외하고 이미지 영역이 꽉 차게 구현합니다. (이때 가로가 커지는 비율에 맞춰 세로도 커져야 합니다.)
[ ] Mobile 사이즈 너비가 커지면, “Privacy Policy”, “FAQ”, “codeit-2023”이 있는 영역과 SNS 아이콘들이 있는 영역의 사이 간격이 커집니다.
로그인, 회원가입 페이지 공통
[ ] Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
[ ] Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
[ ] Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
[ ] 오류 메시지 모달을 구현합니다. 모달 내 내용은 alert 메시지와 동일합니다.
[x] 비밀번호 및 비밀번호 확인 입력란에 눈 모양 아이콘 클릭 시 비밀번호 표시/숨기기 토글이 가능합니다. 기본 상태는 비밀번호 숨김으로 설정합니다.
멘토님에게
멘토님 저는 재능이 없는 것 같습니다.
활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다 <- 이 기능을 하루종일 매달려봤는데도 실패했습니다.
login.js 파일에서
202번줄 (저 스스로 확인하기 위해 심어 놓은 코드)
console.log('로그인 성공') //확인용 콘솔
는 정상적으로 작동합니다.
그런데 203번줄 (원하는 페이지로 이동하는 코드)
window.location.href = 'items.html'; // items 페이지로 이동
는 작동하지 않습니다.
window.location.href = 'items.html'
이 코드 하나만 복사해서 윈도우 콘솔창에 붙여넣으면 정상작동하는데
함수 안에 들어가면 왜 작동하지 않는걸까요?
확인용 콘솔도 정상출력되면 조건은 충족했다고 생각하는데요 ㅠㅠ
저 기능에 매달리다가 다른 미션은 시도하지 못했습니다
저는 재능이 없는 것 같습니다.
멘토님 저 기능구현 도와주시면 다른 미션도 용기내서 도전해 보겠습니다.
감사합니다