[신혜윤] 풀스택-FE-mission3

[hyeyoonS]

요구사항

기본 요구사항

랜딩 페이지

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
  • PC: 1200px 이상
  • Tablet: 768px 이상 ~ 1199px 이하
  • Mobile: 375px 이상 ~ 767px 이하
  • 375px 미만 사이즈의 디자인은 고려하지 않습니다
• Tablet 사이즈로 작아질 때 최소 좌우 여백이 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• Mobile 사이즈로 작아질 때 최소 좌우 여백이 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• PC, Tablet 사이즈의 이미지 크기는 고정값을 사용합니다.
• Mobile 사이즈의 이미지는 좌우 여백 32px을 제외하고 이미지 영역이 꽉 차게 구현합니다.
  (이때 가로가 커지는 비율에 맞춰 세로도 커져야 합니다.)
• Mobile 사이즈 너비가 커지면, “Privacy Policy”, “FAQ”, “codeit-2023”이 있는 영역과 SNS 아이콘들이 있는 영역의 사이 간격이 커집니다.

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

• Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
• Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
• Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
• 로그인 및 회원가입 페이지의 이메일, 비밀번호, 비밀번호 확인 input에 필요한 유효성 검증 함수를 만들고 적용해 주세요.
• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
• Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
• 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다

심화 요구사항

공통

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

USER_DATA = {
	{ email: 'codeit1@codeit.com', password: "codeit101!" },
	{ email: 'codeit2@codeit.com', password: "codeit202!" },
	{ email: 'codeit3@codeit.com', password: "codeit303!" },
	{ email: 'codeit4@codeit.com', password: "codeit404!" },
	{ email: 'codeit5@codeit.com', password: "codeit505!" },
	{ email: 'codeit6@codeit.com', password: "codeit606!" },
}

로그인 페이지

• 이메일과 비밀번호를 입력하고 로그인 버튼을 누른 후, 다음 조건을 참조하여 로그인 성공 여부를 alert 메시지로 출력합니다.
  • 만약 입력한 이메일이 데이터베이스(USER_DATA)에 없거나, 이메일은 일치하지만 비밀번호가 틀린 경우, '존재하지 않는 이메일, 혹은 비밀번호입니다'라는 메시지를 alert로 표시합니다
  • 만약 입력한 이메일이 데이터베이스에 존재하고, 비밀번호도 일치할 경우, “/items”로 이동합니다.

회원가입

• 회원가입을 위해 이메일과 비밀번호를 입력한 뒤, 회원가입 버튼을 클릭하세요. 그 후에는 다음 조건에 따라 회원가입 가능 여부를 alert로 알려주세요.

  1. 입력한 이메일이 이미 데이터베이스(USER_DATA)에 존재하는 경우, '이미 등록된 이메일입니다'라는 메시지를 alert로 표시합니다.
  2. 입력한 이메일이 데이터베이스(USER_DATA)에 없는 경우, 회원가입이 성공적으로 처리되었으므로 로그인 페이지(”/login”)로 이동합니다.

  구현 스크린샷

  작업 노션 에 추가해두었어요!

  요구사항별 체감난이도와 설명

  작업 노션 에 추가해두었어요!

  QA종합 의견

  난이도와 분량

  • 난이도는 적절하다고 생각합니다. 하지만 절대적인 시간이 많이 필요했어요. (반응형 70% 나머지 30%)
    실제로 프론트엔드 3주차 위클리미션 때에는 JS 기초를 프리코스에서 수강했었기 때문에 위클리미션에 더 많은 시간을 투자할 수가 있었는데요, 그렇지 않다면(JS학습과 병행한다면) 양이 많다고 느껴질 수 있을 것 같아요.
  • 모달을 띄우도록 하는 심화 요구사항이 구체적이고 자세해서 좋았지만 분량이 더 많게 느껴졌어요~!

  ---

  Mission2 구현 설명

  • [랜딩페이지] 반응형을 구현하는 데 시간을 70%이상 할애했던 것 같아요 ㅠ ㅠ 랜딩페이지 헤더와 푸터영역에 있는 판다이미지를 요소와 함께 배치하는 데 이미지가 제 의도대로 되지 않아서 이 부분에서 시간이 많이 소요됐어요.
  • [로그인, 회원가입] JS모듈 분리는 어렵지 않았지만 공통 로직으로 구현해야 하는 부분 / 다르게 해야 하는 부분을 고민하는 데 고민하는 시간이 좀 있었어요.
  • [로그인, 회원가입] 유효성 검사 함수를 작성하는 부분이나, 로그인, 회원가입 버튼 클릭 이후의 이벤트, 모달 띄우기의 요구사항이 구체적이고 자세해서 좋았어요.

  ---

  의견

• [로그인, 회원가입] border와 관련된 옵션을 제대로 설정하지 않으면 테두리가 0px → 1px로 변경되면서 약간 덜컹..!하는 느낌으로 빨강색 테두리가 나타납니다. 이 점에 유의해서(덜컹하지 않도록) 구현하도록 하는 가이드가 있으면 어떨까요?

  • [로그인, 회원가입] 피그마 디자인대로 모달 컴포넌트를 만들었는데욥, 컴포넌트가 아니라 alert메시지를 출력하는 정도로 한다면 유효성검사 함수를 실행하면서도 분량을 줄일 수 있지 않을까 합니다!
    →alert메시지 출력으로 구현한 참고화면입니다!

• 요구사항에 USER_DATA가 객체로 정의되어 있는데요, 배열 안의 객체로 수정하면 어떨까요? (아래 궁금궁금에 상세 내용 있습니다~!)

• 닉네임은 유효성 검사 항목이 없는데, 한글, 영어, 숫자나 특정 특수 기호만 사용 가능하도록 규칙이 추가되면 어떨까요?

• 모달 요구사항 관련해서, 요구사항의 메시지와 피그마 시안에 있는 문구가 달라서 통일되어야 할 것 같아요! 피그마 이미지에 있는 문구가 ‘존재하지 않는 이메일, 혹은 비밀번호입니다’ 라고 수정되어야 할 것 같아요~! (아래 궁금궁금에 사진 첨부해두었습니다!)

• 모달 뒤로 스크롤이 가능한데, 스크롤을 막도록 요청사항이 추가되면 어떨까요? (아래 궁금궁금에 사진 첨부해두었습니다!)

  ---

문의사항 (궁금궁금)

Q1. 랜딩페이지 header이미지 PC ↔ 태블릿 전환시 겹치는 문제

• 1920px을 기준으로 좌우마진을 주어서 구현했기 때문에 (좌우마진 방식으로 구현한 이유는 여기 관련 스레드링크 첨부합니다!) 1920px~1199px 사이에서 그림과 글자가 겹치는 현상이 발생하는데 괜찮은지 궁금합니다!

Q2. 요구사항에 USER_DATA가 객체로 정의되어있는 문제

    USER_DATA = {
    	           { email: 'codeit1@codeit.com', password: "codeit101!" },
    		         { email: 'codeit2@codeit.com', password: "codeit202!" },
    	           { email: 'codeit3@codeit.com', password: "codeit303!" },
    	           { email: 'codeit4@codeit.com', password: "codeit404!" },
    	           { email: 'codeit5@codeit.com', password: "codeit505!" },
    	           { email: 'codeit6@codeit.com', password: "codeit606!" },
    }

지금 이렇게 객체 안에 객체로 정의되어 있는데요, 객체로 정의한 이유가 있을까요?
배열은 여러 항목을 순서대로 저장할 수 있는 데이터 구조이므로 배열 안에 객체를 정의하는 것이 어떨까요?

    const USER_DATA = [
        { email: 'codeit1@codeit.com', password: "codeit101!" },
        { email: 'codeit2@codeit.com', password: "codeit202!" },
        { email: 'codeit3@codeit.com', password: "codeit303!" },
        { email: 'codeit4@codeit.com', password: "codeit404!" },
        { email: 'codeit5@codeit.com', password: "codeit505!" },
        { email: 'codeit6@codeit.com', password: "codeit606!" },
    ];

이게 더 자연스러울 것 같아 확인 요청드립니다.!

Q3. signup에서 닉네임의 규칙이 없는 문제

• signup에서 닉네임에 관한 규칙이 없어서 닉네임을 입력하지 않아도 가입이 가능합니다. 의도된 부분인지 확인 부탁드립니다!

Q4. 피그마 요구사항에 있는 메시지와 디자인 이미지 불일치 문제

• 요구사항에 있는 메시지와 이미지의 문구가 달라서, 이미지 문구가 ‘존재하지 않는 이메일, 혹은 비밀번호입니다’ 라고 수정되어야할 것 같아요~!

Q5. 모달 뒤에 있는 페이지 스크롤 가능한 문제

• 요구사항대로 구현하면 모달 뒤에 있는 페이지가 스크롤이 가능한데요 ~! 뒷 배경이 움직이지 않도록 하는 요구사항이 추가되면 어떨까요? 팀 프로젝트 구현하면서도 여러번 겪었던 문제라서 위클리미션에서 짚고 넘어가면 좋을 것 같습니다.