[오수빈] Sprint2

[almighty55555]

요구사항

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

기본

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

• “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
• 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
• input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.
• input 요소에 focus out 일 때, 테두리는 없습니다.
• SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.

로그인 페이지

• “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.

회원가입 페이지

• “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.

심화

• palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
• 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.

주요 변경사항

• 메인화면에서 nav 상단고정
• 로그인 페이지 구현
• 회원가입 페이지 구현
• 깃 레포 netlify로 배포
  • https://marketofpanda.netlify.app/

스크린샷

멘토에게

• 효율적으로 코드를 짜는 방법, 화면 구성 등에 있어서 개선할 점들을 많이 알려주시면 감사하겠습니다!
• 저번 리뷰 때 html의 폰트 설정 코드에서 as는 preload를 지정했을 때만 사용된다고 짚어주셨는데 아직 그 부분을 수정하지 못해 다음 미션 때 함께 수정해 올리겠습니다ㅜㅜ!!

[dongqui]

수빈님 이번 미션도 고생 많으셨습니다~!

기본에 충실하게 잘 해주셨습니다~ 💯 클래스명을 지으실 때 조금만 더 신경써주시면 좋을 거 같아요! 개발에서 이름을 잘 짓는 것은 언제나 중요합니다! :)

효율적으로 코드를 짜는 방법, 화면 구성 등에 있어서 개선할 점들을 많이 알려주시면 감사하겠습니다!
-> 대체로 잘 하셨습니다! 페이지 수가 적기도 하고 단순한 형태라 구현에 초점을 맞추는 게 나을 수 있어요. HTML / CSS를 충분히 익히신 후 조금 더 해보고 싶으시다면, 유틸리티 클래스를 정의해보거나 컴포넌트 단위로 공통 스타일을 정의해보셔도 좋습니다 :)

[dongqui]

변수를 정의하셨군요! 👍

[dongqui]

이렇게 공통으로 사용되는 스타일은 파일을 따로 만들어 관리 하셔도 좋습니다 :)

[dongqui]

class명을 목적과 기능에 맞게 조금 더 신경 써주시면 좋을 거 같아요!

[dongqui]

class 이름 짓는 기준이 애매하다면, BEM을 고려해보시는 것도 좋아요!

[dongqui]

alt를 잘 챙겨주시는군요! 👍