[강성구] Sprint2

[L1m3Kun]

요구사항

기본

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

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

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

로그인 페이지

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

회원가입 페이지

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

심화

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

스크린샷

사이트 주소

• https://storepanda.netlify.app

멘토에게

• 리뷰해주신 부분들 추가해봤는데 피드백 부탁드립니다!!

[lisarnjs]

역시 성구님! 따로 코멘트 필요한 부분이 많이 없습니당👍

위에서 -> 를 말씀드린 부분이 우리 지금 한창 같이 알아보던
"접근성"과도 관련있는 부분이에요!

button태그는 스페이스, 엔터 키로 이벤트가 발생되지만
a태그는 스페이스키로 이벤트가 발생되지 않아요!
내가 의도하지 않은 방식으로 사용자 이벤트가 발생할 수 있다는 것이겠죠?
(물론 이런 일이 잘 일어나지는 않지만 그럴 수 있다는 걸 인식하고 있다는 것이 중요한 뽀인트)

항상 열심히 하시는 성구님 덕분에 저도 매번 열심히 하게되서 너무 좋아요!
마지막까지 저랑 열심히 같이 공부하고 성장합시당
이번주도 화이팅!!

[lisarnjs]

여기서 내가 사용하기로 한 단위로 (rem 과 vw이라면 이 둘 중 하나로) 통일할 수는 없을 지 한번 더 고민해보세요!
padding 값이 직관적이지 않기 때문인데요!
만약 아무리 생각해도 저렇게 쓰는게 더 최선인 것 같다 라는 판단이 든다면 그땐 그냥 냅두세요😄
코드는 누가 뭐라든 본인만의 이유가 있다면 그게 정답입니다(아 물론 듣지 말란 소리는 아닙니다ㅎㅎ)

[L1m3Kun]

사실 css에 대한 내용을 깊게 다뤄본적 없는데,
멘토님 덕분에 조금 더 가독성 있는 코드와 요소 특성을 깊게 공부하는 것 같아 항상 감사드립니다 :)

[lisarnjs]

goood ~~! 더욱 시멘틱 태그스러워졌습니당 👍

[lisarnjs]

요건 react스럽군용 ㅋㅋㅋ
내 파일 내에서 페이지 이동이라면 a 태그를 사용하는 것이 더 좋은 선택일 수 있습니다!