Skip to content

[심예진] sprint3#72

Merged
baeggmin merged 8 commits intocodeit-bootcamp-frontend:Basic-심예진from
druidshim:Basic-심예진-sprint3
Jun 16, 2025

Hidden character warning

The head ref may contain hidden characters: "Basic-\uc2ec\uc608\uc9c4-sprint3"
Merged

[심예진] sprint3#72
baeggmin merged 8 commits intocodeit-bootcamp-frontend:Basic-심예진from
druidshim:Basic-심예진-sprint3

Conversation

@druidshim
Copy link
Collaborator

@druidshim druidshim commented Jun 13, 2025

요구사항

공통

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

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

랜딩 페이지

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

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

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

심화

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

주요 변경사항

스크린샷

멘토에게

  • 전에 말씀하신 대로 이미지 파일 명을 전체적으로 수정해보았고, 이미지 폴더를 만들어서 넣어두었습니다. 확인 부탁드립니다!
  • global.css 파일과 홈페이지에 다른 항목들의 너비가 줄어들도록 하는 부분은 추가적으로 살펴보겠습니다! (뒤늦게 감을 잡아서요ㅠㅠ)
  • 그 외 개선이 필요한 부분이 있으면 알려주시면 감사하겠습니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@druidshim druidshim added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 13, 2025
@druidshim druidshim requested a review from baeggmin June 13, 2025 12:16
Copy link
Collaborator

@baeggmin baeggmin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

지난 리뷰를 꼼꼼히 반영해주셨군요!
디렉토리 구조, 시맨틱한 네이밍, 반응형 대응까지 코드가 정말 많이 깔끔해진 것 같아요. 👍👍👍

고생 많으셨습니다! 😊

}

form {
/* form {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

학습 단계에서는 큰 상관 없지만, 나중에 협업이나 실무할 때 dead code 는 제거해주시는게 원칙입니다!

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<title>판다마켓</title>
<!-- Open Graph (페북, 카카오, 디스코드)-->
<meta property="og:title" content="판다 마켓">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

메타 태그 꼼꼼히 잘 적용해주셨습니다! 👏

<a href="/items" class="looking-button">구경하러 가기</a>
</div>
<img class="hi" src="image/Img_home_top.png" alt="상단배경">
<div class="ppanda">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ppanda -> 오타인거같아요!
그리고 사소하지만 .hi .bye .twoppanda 등의 클래스 명은 의미가 조금 모호한 것 같아요. 조금 더 역할 기반 네이밍을 해주시면 좋을 듯 합니다. (ex: panda-top-image, panda-bottom-image 등)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

앗 귀엽네요!🥹

display: flex;
flex-direction: column;
width: 640px;
width: 100%;;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

세미콜론이 이중으로 들어간 것 같네용

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고정값(640px)을 줄이고 width: 100% 사용해서 유연한 레이아웃으로 리팩토링한 점 훌륭합니다! 👏

input {
width: 640px;
width: 100%;
/* width: 640px; */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 dead code 가 보이네요!
PR 후에 File changed 목록을 쭉 훑어보면서 dead code가 있는지 확인해보는 습관을 들이면 실수 방지에 도움이 됩니다!

font-size: 24px;
}

@media (min-width: 768px) and (max-width: 1199px) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

모바일/태블릿/PC 반응형 대응이 잘 되어 있고, 브레이크포인트 구분도 명확히 설정해주셨습니다! 👏

@baeggmin baeggmin merged commit ded7e61 into codeit-bootcamp-frontend:Basic-심예진 Jun 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants