[최은비] sprint3

[silverraining]

배포링크

https://panda-eunbi.netlify.app/

기본

• 로그인 및 회원가입 페이지의 이메일, 비밀번호, 비밀번호 확인 input에 필요한 유효성 검증 함수를 만들고 적용해 주세요.
• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
• Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
• 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다.
• 이메일과 비밀번호를 입력하고 로그인 버튼을 누른 후, 다음 조건을 참조하여 로그인 성공 여부를 alert 메시지로 출력합니다.
• 만약 입력한 이메일이 데이터베이스(USER_DATA)에 없거나, 이메일은 일치하지만 비밀번호가 틀린 경우, '비밀번호가 일치하지 않습니다.'라는 메시지를 alert로 표시합니다.
• 만약 입력한 이메일이 데이터베이스에 존재하고, 비밀번호도 일치할 경우, “/items”로 이동합니다.
• 회원가입을 위해 이메일, 닉네임, 비밀번호, 비밀번호 확인을 입력한 뒤, 회원가입 버튼을 클릭하세요. 그 후에는 다음 조건에 따라 회원가입 가능 여부를 alert로 알려주세요.
• 입력한 이메일이 이미 데이터베이스(USER_DATA)에 존재하는 경우, '사용 중인 이메일입니다'라는 메시지를 alert로 표시합니다.
• 입력한 이메일이 데이터베이스(USER_DATA)에 없는 경우, 회원가입이 성공적으로 처리되었으므로 로그인 페이지(”/login”)로 이동합니다.

심화

• 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 판다마켓 랜딩 페이지(“/”) 공유 시 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정합니다. 주소와 이미지는 자유롭게 설정하세요.
• 미리보기에서 제목은 “판다마켓”, 설명은 “일상에서 모든 물건을 거래해보세요”로 설정합니다.
• [x]로그인, 회원가입 페이지에 공통으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용해 주세요.

주요 변경사항

##랜딩 페이지

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
• PC, Tablet 사이즈의 이미지 크기는 고정값을 사용합니다.
• Mobile 사이즈의 이미지는 좌우 여백 32px을 제외하고 이미지 영역이 꽉 차게 구현합니다. (이때 가로가 커지는 비율에 맞춰 세로도 커져야 합니다.)
• Mobile 사이즈 너비가 커지면, “Privacy Policy”, “FAQ”, “codeit-2023”이 있는 영역과 SNS 아이콘들이 있는 영역의 사이 간격이 커집니다.

##로그인, 회원가입 페이지

• Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
• 오류 메시지 모달을 구현합니다. 모달 내 내용은 alert 메시지와 동일합니다.
• 비밀번호 및 비밀번호 확인 입력란에 눈 모양 아이콘 클릭 시 비밀번호 표시/숨기기 토글이 가능합니다. 기본 상태는 비밀번호 숨김으로 설정합니다.

추가사항

• 비밀번호 8자 이상 외에 영어 대소문자, 숫자, 특수문자를 조합하여 8자이상 15자이하로 설정하도록 유효성검증 함수를 구현하였습니다.
• 로그인 및 회원가입 성공시 '로그인 성공!', '회원가입 성공!' 모달 메시지를 추가하였습니다.

스크린샷

멘토에게

• 폴더로 파일들을 정리하는게 좋을까요?
• 겹치는 기능들을 모듈화 시키는 것에 대해서 팁이 있으시다면 알려주세요!!
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[junguksim]

깔끔하게 잘 짜주셨습니다!

지금은 이 정도로만 해주셔도 좋을 거 같아요. React 로 들어가면서부터 어차피 구조적으로 정리하게끔 되어 있습니다 ㅎㅎ

모듈화는, 저는 보통
코드를 각각 다 짜놓고 -> 재사용이 되는 코드를 모듈화하는 편입니다.

지금 코드에선
eventListener.js 에서 리스너를 달고 있고,
login.js 와 signup.js 에서 그를 import 하고 있고,
또한 둘이 거의 비슷하게 element 들을 달고 있어서 자연스럽게 재사용이 된 상황인데요.

사실 좀 더 안전하게 분리된 느낌을 주려면,
login 과 signup 이 각각 파일 내에서 이벤트 리스너를 달고,

eventListener.js 대신 authUtil.js 등을 만들어서, 그 안에서 공통되는 코드 ( focusout 시 검증 함수를 실행하는 함수라던가 ) 를 재사용하게끔 해주면 되겠습니다.

[junguksim]

boolean 변수의 경우 isEmailValid 처럼 앞에 is, has, 등 동사를 붙여주면 좋아요!

[junguksim]

JS 에서 이렇게 스타일을 다 줘도 되고, css 파일에 #customModal 의 스타일을 미리 지정해놓고,
JS에서는 추가만 해주면 더 좋을 것 같아요!