[이태식] sprint3

[leeetaesik]

요구사항

기본

공통

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

랜딩 페이지

• Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.

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

• Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
• Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
• Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

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

주요 변경사항

스크린샷

https://leetaesik-sprint.netlify.app/

멘토에게

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

[GANGYIKIM]

태식님 3번째 미션 제출 고생하셨습니다~
반응형도 하시고 심화 요구사항까지 다 구현하시다니 대단합니다.
큰 틀에서는 디자인과 유사하지만 폰트크기가 디자인과 상이한 것 같으니
추후 확인하시고 디자인대로 수정하시면 더 좋을 것 같습니다!
다음 미션도 화이팅입니다.

[GANGYIKIM]

💊 제안
css 변수들을 분리하신 점 좋습니다. 다만 figma에 정의된 색상 변수보다 수가 더 적은 것 같아요~

큰 이유가 없다면 figma와 동일하게 색상 변수를 선언하시는 것이 좋습니다.
그래야 figma에서 해당 색상 변수가 사용될때 확인하기 쉽고 색상값은 디자이너와 의사 소통할 일이 많은 값이라 소통 측면에서도 같은 이름을 쓰는 것이 좋기 때문입니다~

[GANGYIKIM]

💊 제안
min-width가 조건에 걸려있어 375px 미만으로 화면이 작아지게 되면 PC 스타일이 적용되네요~
body에 min-width: 375px를 추가하셔서 해당 사이즈 미만으로 작아지게 되면 가로 스크롤이 생기게 해주시거나
아니라면 min-width를 조건문에서 빼주시는 것을 추천드려요~

Suggested change

	@media (min-width:375px) and (max-width:767px) {
	@media (max-width:767px) {

[GANGYIKIM]

💬 여담
이러한 메타태그가 제대로 되어 있는지 확인할 수 있는 방법이 여러가지 있습니다~
참고로 각 SNS 에서 제공하는 개발자 페이지에서도 확인이 가능합니다~

[GANGYIKIM]

❗️ 수정요청
자주 사용하는 폰트를 utility class로 선언하고 사용하신 것 좋습니다. 다만 해당 클래스가 화면 사이즈가 변경되어도 변화가 없어서 디자인을 구현하지 못하고 있어요! 디자인을 확인해보시고 수정하시면 좋겠습니다~

[GANGYIKIM]

❗️ 수정요청
해당 태그가 고정값을 가지게 되면서 화면 크기가 작아질 때 overflow가 생겨 가로 스크롤이 생깁니다~
해당 속성을 지우시거나 화면이 작아지면 width가 같이 작아지게 수정해주세요!