[노준서] sprint3

[Still-Mare]

요구사항

기본

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
- PC: 1200px 이상
- Tablet: 768px 이상 ~ 1199px 이하
- Mobile: 375px 이상 ~ 767px 이하

* 375px 미만 사이즈의 디자인은 고려하지 않습니다

랜딩 페이지

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

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

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

심화

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

주요 변경사항

스크린샷

멘토에게

• Netlify를 깃과 연동시켜서 프로젝트를 자동으로 업데이트해주는 기능이 있다해서 해보려했는데 잘모르겠네요
• 글자나 이미지의 단위를 rem이나 %를 사용하면 좀 더 간편할 것 같은데 어떻게 구성해야할지 감이 안와요
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[baeggmin]

지난 리뷰가 꼼꼼히 반영되었네요! 덕분에 코드가 많이 정리된 것 같습니다. 👍
다만 아직 폴더 구조가 정리되지 않아서 이 부분은 꼭 수정해주시면 좋을 것 같네요. 자세한 리뷰는 인라인 코멘트 참고해주세요.

[baeggmin]

사용하지 않는 코드는 제거해주세요!
지금은 학습단계이기때문에 크게 문제되지 않지만, 추후 팀 프로젝트에서는 다른 팀원들에게 혼란을 줄 수 있습니다.

[baeggmin]

height: auto, width: auto는 기본값이기 때문에 불필요한 경우가 많습니다. 한 번 auto 속성 없이도 디자인에 문제 없는지 확인해주시고, 가능하면 제거해주세요!

[baeggmin]

padding 속성에 auto는 유효하지 않은 값입니다.
브라우저가 무시하는 값이니 padding: 0 16px; 로 수정 부탁드립니다.

[baeggmin]

width, height, text-align을 동시에 지정하는 방식은 비효율적인거같아요.
텍스트 정렬이 목적이라면 text-align만으로 충분합니다!

[baeggmin]

브레이크 포인트 범위를 명확히 지정해서 디바이스 타입에 따라 레이아웃을 구분해주신 점 훌륭합니다. 👍
다만, Tablet과 Mobile 미디어 쿼리 내 코드가 거의 동일해서 중복 코드가 많이 생긴 것 같아요.
중복되는 부분은 공통 클래스로 추출한 뒤, 차이점만 미디어 쿼리에서 오버라이드하시면 코드가 훨씬 깔끔해질 것 같습니다.
(예시)

.section_card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

@media (max-width: 1199px) {
  .section_card.middle {
    flex-direction: column-reverse;
    text-align: right;
  }
}

[baeggmin]

제가 지난 PR 에서 놓친 것 같은데요, 현재 프로젝트 구조가 다소 부적절한 것 같습니다.
.github 디렉토리는 GitHub 전용 설정용 폴더입니다 (e.g., workflows/, ISSUE_TEMPLATE/ 등).
html, css 같은 소스 파일은 일반 웹 프로젝트 폴더로 변경해주셔야 합니다. 아래 구조를 참고해주세요!

├── index.html
├── login.html
├── signup.html
├── css/
│   ├── reset.css
│   ├── base.css
│   ├── home.css
│   ├── form.css
├── images/
│   ├── logo.png
│   ├── icon_visibility_on.svg
│   ├── icon_visibility_off.svg
├── js/
│   └── (login.js 등 추가되면 여기에)

[baeggmin]

또한, 현재 CSS 파일이 많지만 이름이 구체적이지 않고 역할이 겹쳐 보입니다.
basictag.css 는 어떤 역할인지 불명확하므로, reset.css, base.css 등 명확한 이름으로 수정해주세요!
style.css 도 메인인지 전체인지 애매하므로 home.css 또는 main.css로 바뀌면 좋겠습니다.
login_signup.css와 같이 파일에 여러 페이지명을 나열하는 방식은 보편적인 방식은 아닌 것 같습니다. form.css 로 수정되면 좋을 것 같습니다.

[baeggmin]

각 섹션을 flex-direction: column, flex-direction: row로 디바이스별로 다르게 지정해주신 점 좋습니다! 👏

[baeggmin]

Netlify를 깃과 연동시켜서 프로젝트를 자동으로 업데이트해주는 기능이 있다해서 해보려했는데 잘모르겠네요
-> 어떤 부분에서 막히시는지 알아야 정확한 답변을 드릴 수 있을 것 같아요! DM 으로 질문주셔도 좋으니 언제든 문의해주세요.😊

글자나 이미지의 단위를 rem이나 %를 사용하면 좀 더 간편할 것 같은데 어떻게 구성해야할지 감이 안와요
rem, % 를 사용해보려는 시도를 하신 것부터 훌륭합니다.👍 처음엔 어렵겠지만 익숙해지면 금방 감을 잡을 수 있으실거에요.

👉 rem 단위: 글자 크기, 버튼 패딩, 여백 등 "정해진 비례가 필요한 요소"에 주로 사용
👉 % 단위: width, height, padding 등 레이아웃 구조를 잡을 때 자주 사용

저의 경우에는 보통 아래와 같이 반응형 레이아웃을 구현하는 것 같아요. 참고해보시고 작은 부분부터 적용해보시면 좋을 것 같습니다.

• 글자 크기: font-size: 1.25rem 처럼 rem으로 지정
• 버튼 여백: padding: 0.75rem 1rem 처럼 rem으로
• 이미지 크기: max-width: 100% 로 부모 너비 안 넘도록