Basic 엄성민 sprint3 #28

eomsung · 2024-11-10T11:02:39Z

요구사항

기본

공통

Github에 스프린트 미션 PR을 만들어 주세요.

로그인, 회원가입 페이지 공통

로그인 및 회원가입 페이지의 이메일, 비밀번호, 비밀번호 확인 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에서 판다마켓 랜딩 페이지(“/”) 공유 시 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정합니다.
미리보기에서 제목은 “판다마켓”, 설명은 “일상에서 모든 물건을 거래해보세요”로 설정합니다.
주소와 이미지는 자유롭게 설정하세요.
로그인, 회원가입 페이지에 공통으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용해 주세요.

랜딩 페이지

브라우저에 현재 보이는 화면의 영역(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 메시지와 동일합니다.
비밀번호 및 비밀번호 확인 입력란에 눈 모양 아이콘 클릭 시 비밀번호 표시/숨기기 토글이 가능합니다. 기본 상태는 비밀번호 숨김으로 설정합니다.

주요 변경사항

-https://fascinating-alpaca-7788c5.netlify.app/
-틈틈히 수정 할 예정입니다.

스크린샷

멘토에게

-아직 구현중입니다.

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

seobew

성민님 고생하셨어요!

사실 js 들어가면서부터 �익숙하지 않아 어려울수도 있는데, 노력의 흔적이 많이 보입니다!

전체적으로 잘 작성해주신 것 같고, 다만 중복된 코드들은 한번만 쓸수 있게 재사용할수 있게 해주는게 좋습니다. �그리고 최상단에 project라는 디렉토리안에 넣을 필요없이 그냥 파일들을 놔둬도 될것 같아요 최상단에는 project만 있으니까 불필요한것 같습니다!

다음에는 배포까지 해주시면 더 자세히 리뷰해드릴 수 있을것 같아요~
정말 수고 많으셨고, 발전하시는게 눈에 보입니다!

궁금하신것 채널이나 PR에서 언제든 물어봐주세요~

seobew · 2024-11-13T13:24:43Z

project/signup.js

@@ -0,0 +1,175 @@
+const USER_DATA = [


이렇게 공통된 애들은 따로 constant.js 같이 빼놓는게 더 좋을듯 해요!

seobew · 2024-11-13T13:26:00Z

project/style_login.css

+.error_msg p{
+    margin: 0;
+    padding-bottom: 40px;
+


요렇게 빈칸같은 것들 지난번에 말씀드린 prettier 같은걸 적용하면 한번에 다 없어져요~

seobew · 2024-11-13T13:27:17Z

project/signup.js

+
+inputbox.forEach(input=>{
+    input.addEventListener('input',()=>{
+        console.log(input.value);


PR 생성시에는 console.log 있는지 확인후 지운다음에 올려주시면 좋을것 같아요~

seobew · 2024-11-13T13:28:06Z

project/signup.js

+    input.addEventListener('input',()=>{
+        console.log(input.value);
+        if(input.id === "section1_emailbox"){
+            if(email_pattern.test(input.value)){


요 if 문을 아래와같이 더 간결하게 바꿀수 있을것 같아요!
email_check = email_pattern.test(input.value);

seobew · 2024-11-13T13:28:41Z

project/signup.js

+        }
+
+        else if(input.id === "section1_pwbox"){
+            if(pw_pattern.test(input.value)){


여기도 같습니다! pw_check = pw_pattern.test(input.value);

seobew · 2024-11-13T13:34:32Z

project/signup.js

+
+
+//입력 값이 올바른지 체크
+inputbox.forEach(input=>{


중복되는 로직들은 따로 파일을 빼서 각 페이지마다 넣어줘도 좋을것 같아요!
예를 들면, input.js 를 만들고, login.html, singup.html에 스크립트를 넣어주기만 하는거죠

eomsung added 12 commits October 29, 2024 14:46

first commit for project1,2

85380a3

prevent text wrapping

f0d2a5e

refactor - replace the color code with css variable

917ee64

edit login button

68c4a1f

add analytics code

e1acfd8

add link to root page on panda logo

bed8c4d

edit font

49f6086

refactoring

534d9de

final

b8eea56

edit names

09831f4

relocate color variables

8b289c6

project3 first commit

4abfb32

eomsung added the 진행 중 🏃 스프린트 미션 진행중입니다. label Nov 10, 2024

eomsung marked this pull request as draft November 10, 2024 11:03

eomsung requested a review from seobew November 10, 2024 11:03

eomsung self-assigned this Nov 11, 2024

eomsung added 5 commits November 11, 2024 09:56

add make_alret_msg function

b6a5e7d

edit check_input fuction

ebfd6a0

add button activate function

b066856

add signup function

8455fd4

refactoring

64fe2c0

eomsung marked this pull request as ready for review November 12, 2024 05:18

eomsung added 2 commits November 12, 2024 16:11

add error msg modal in login

030f9bd

add error msg modal in singup

db47e36

seobew reviewed Nov 13, 2024

View reviewed changes

seobew approved these changes Nov 17, 2024

View reviewed changes

seobew merged commit 6d750ec into codeit-sprint-fullstack:basic-엄성민 Nov 17, 2024

eomsung added 최종 제출 스프린트미션 최종 제출본입니다. and removed 진행 중 🏃 스프린트 미션 진행중입니다. labels Dec 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Basic 엄성민 sprint3 #28

Basic 엄성민 sprint3 #28

eomsung commented Nov 10, 2024 •

edited

Loading

seobew left a comment

seobew Nov 13, 2024

seobew Nov 13, 2024

seobew Nov 13, 2024

seobew Nov 13, 2024

seobew Nov 13, 2024

seobew Nov 13, 2024



		//입력 값이 올바른지 체크
		inputbox.forEach(input=>{

Basic 엄성민 sprint3 #28

Basic 엄성민 sprint3 #28

Conversation

eomsung commented Nov 10, 2024 • edited Loading

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

-아직 구현중입니다.

seobew left a comment

Choose a reason for hiding this comment

seobew Nov 13, 2024

Choose a reason for hiding this comment

seobew Nov 13, 2024

Choose a reason for hiding this comment

seobew Nov 13, 2024

Choose a reason for hiding this comment

seobew Nov 13, 2024

Choose a reason for hiding this comment

seobew Nov 13, 2024

Choose a reason for hiding this comment

seobew Nov 13, 2024

Choose a reason for hiding this comment

eomsung commented Nov 10, 2024 •

edited

Loading