[김태일] Sprint3

[Taeil08]

요구사항

기본

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다
• Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고.
  와 “로그인" 버튼의 간격이 가까워집니다.
• Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고.
  와 “로그인" 버튼의 간격이 가까워집니다.
• 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
• ablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
• Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
• Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

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

주요 변경사항

스크린샷

멘토에게

[GANGYIKIM]

태일님 3번째 미션 작업 고생하셨습니다.
배포도 요구사항에 있었던 걸로 압니다~
배포 연습을 하시는 것도 중요하니 다음에 PR 올려주실 때는 배포해서 주소도 같이 올려주시면 좋을 것 같습니다!

[GANGYIKIM]

💊 제안
테스트하시다가 남겨두신 코드라면 주석으로 두시는 것보다 지우시는 것이 가독성과 유지보수에 더 좋습니다~

[GANGYIKIM]

❗️ 수정요청
rem이라는 상대 단위를 사용하신 점은 좋습니다!
다만, rem은 루트 요소(html)의 font-size를 기준으로 동작하기 때문에, 보다 일관된 계산을 위해 html 태그에 font-size: 10px을 설정하는 것을 추천드립니다.

현재 코드를 예로 들면, width: 6.47rem은 기본적으로 브라우저의 기본 폰트 크기(16px)를 기준으로 계산되어 16 × 6.47 = 103.52px이 됩니다.

하지만 html에 font-size: 10px을 설정하면, 1rem = 10px이 되어 계산이 더욱 직관적이고 유지보수하기 쉬워집니다.
지금 코드에서처럼 img의 width를 70px로 설정하고 싶다면, width: 10.3rem을 입력하면 됩니다.

[GANGYIKIM]

💊 제안
이렇게 모든 태그에 font-family 값을 Pretendard로 주시는 것보다 최상위 태그에 해당 속성을 명시하고 자식 태그들은 상속받게 하는 것이 중복을 줄일 수 있고 가독성 측면에서도 더 좋을 것 같습니다~

[GANGYIKIM]

💊 제안
border라는 css 속성은 단축 속성으로 실제로는 border-width, border-style, border-color 속성을 하나의 속성으로 적는 것입니다. 지금의 경우 border-width만 작성되어 있으니 이런경우 border-width로 적어주시는 것이 더 명확하고 가독성 측면에서도 좋습니다. 만약 다른 속성을 적지 않으신 거라면 적어주시는 것을 추천드려요!

Suggested change

	border: 2px;
	border-width: 2px; // border-width만 필요할 경우 이렇게
	border: 2px solid var(--blue); // border를 적을경우 모든 속성을 기입

mdn border

[GANGYIKIM]

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

[GANGYIKIM]

💊 제안
한 레포안에서는 동일한 룰을 따르는 것이 좋습니다.
따라서 signin, signup 처럼 쓰시거나 sign-in, sign-up처럼 같은 네이밍 룰을 따르시는 것을 추천드려요~

[GANGYIKIM]

❗️ 수정요청
이렇게 height, width 속성을 동시에 주게 되시면 이미지의 원본 비율을 고려해 작성해주신 것이 아니라면 지금처럼 비율이 달라지게 됩니다!
구현할때 이미지의 비율을 유지하는 것이 중요하므로 비율을 유지할 수 있는 방향으로 수정해보세요!

Suggested change

	.contents0 img {
	width: 46.625rem;
	height: 21.25rem;
	.contents0 img {
	width: 46.625rem;
	height: auto;