[곽민조]Sprint3

[Minjo123]

요구사항

기본

브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.

• - PC: 1200px 이상
• - Tablet: 768px 이상 ~ 1199px 이하
• - Mobile: 300px 이상 ~ 767px 이하
  (Figma에 기록된 모바일 width 최소값은 375px이지만, 갤럭시 폴드 화면 지원하기위해 300px로 낮춤)

-메인페이지
Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px,
“로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.

심화

• 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
• 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
• 주소와 이미지는 자유롭게 설정하세요

주요 변경사항

https://voluble-chebakia-f1ef1a.netlify.app/

스크린샷

메인페이지

▲ 메인페이지 PC 화면

▲ 메인페이지 테블릿 화면

▲ 메인페이지 테블릿 화면

멘토에게

• 부족한 코드지만 가감없이 리뷰 부탁드립니다!
• 좋은 하루 되세요! 멘토님.

[Taero-Kim]

민조님 고생 많으셨습니다!
코드를 보면 특히나 html(마크업)과 css(스타일링)에 많이 신경을 쓰신 것 같아요!

컬러 변수를 정의하여, 재사용하시고
미디어 쿼리를 통해 적절하게 반응형 디자인을 구현하신 것 같아요!

프론트엔드 개발자는 자바스크립트도 중요하지만, 그전에 이런 마크업과 css 기본에 충실해야 해요!
그런 의미에서 이렇게 꼼꼼하게 반응형을 신경쓰시면, 나중에 좋은 사용자 경험을 제공하는 프론트엔드 개발자로 성장하실 수 있을거에요!

계속 지금처럼 요런 부분도 신경쓰시면서 동시에,
자바스크립트로도 이런 저런 함수 등을 많이 작성하시는 습관을 들이시면 더 좋을 것 같아요!

이외에 코드를 보며 몇가지 개선하면 좋을 점에 대해서 간단한 리뷰들 남겼습니다!
제가 남긴 리뷰에 대한 질문이나 기타 질문이 있으시면 언제든 편하게 말씀해주세요!

+) 리뷰를 남긴 코멘트 위의 p(1~5); 마크의 의미는 아래와 같습니다! 참고하면 좋을 것 같아요!

p1; 꼭 반영해주세요 (Request changes)
리뷰어는 PR의 내용이 서비스에 중대한 오류를 발생할 수 있는 가능성을 잠재하고 있는 등 중대한 코드 수정이 반드시 필요하다고 판단되는 경우, P1 태그를 통해 리뷰 요청자에게 수정을 요청합니다. 리뷰 요청자는 p1 태그에 대해 리뷰어의 요청을 반영하거나, 반영할 수 없는 합리적인 의견을 통해 리뷰어를 설득할 수 있어야 합니다.

p2; 적극적으로 고려해주세요 (Request changes)
작성자는 P2에 대해 수용하거나 만약 수용할 수 없는 상황이라면 적합한 의견을 들어 토론할 것을 권장합니다.

p3; 웬만하면 반영해 주세요 (Comment)
작성자는 P3에 대해 수용하거나 만약 수용할 수 없는 상황이라면 반영할 수 없는 이유를 들어 설명하거나 다음에 반영할 계획을 명시적으로(JIRA 티켓 등으로) 표현할 것을 권장합니다. Request changes 가 아닌 Comment 와 함께 사용됩니다.

p4; 반영해도 좋고 넘어가도 좋습니다 (Approve)
작성자는 P4에 대해서는 아무런 의견을 달지 않고 무시해도 괜찮습니다. 해당 의견을 반영하는 게 좋을지 고민해 보는 정도면 충분합니다.

p5; 그냥 사소한 의견입니다 (Approve)
작성자는 P5에 대해 아무런 의견을 달지 않고 무시해도 괜찮습니다.