Skip to content

Conversation

@Jiw0nJ
Copy link
Collaborator

@Jiw0nJ Jiw0nJ commented Apr 16, 2025

요구사항

  • Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
  • 피그마 디자인에 맞게 페이지를 만들어 주세요.
  • React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

기본

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

랜딩 페이지

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

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

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

심화

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

주요 변경사항

  • 반응형 디자인 적용(mobile first)을 위해 전반적인 코드 수정
    • Mobile -> Tablet -> Desktop
  • index.html, login.html, signup.html에 반응형 디자인 적용
  • 미리보기를 위한 메타태그 설정

스크린샷

📱index.html_Mobile 보기

home-Mobile

📟index.html_Tablet 보기

home-Tablet

🖥️index.html_Desktop 보기

home-Desktop

📱login.html_Mobile 보기

login-Mobile

📟login.html_Tablet 보기

login-Tablet

📱signup.html_Mobile 보기

signup-Mobile

📟signup.html_Tablet 보기

signup-Tablet

멘토에게

  • mobile 화면을 기준으로 반응형 디자인을 적용하고 싶어서 기존의 Desktop 기준의 코드를 전반적으로 수정했습니다. 또한 flex 등 여러가지 부분을 수정하였는데 이것들을 중점적으로 봐주시면 감사하겠습니다!
  • 반응형 적용을 하면서 세세한 부분까지 적용하느라 코드가 길어지고 시간도 오래 걸렸습니다. 그래서 좀 더 깔끔하고 빠르게 반응형 적용하는 꿀팁 같은 것이 있는지 궁금합니다!
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@Jiw0nJ Jiw0nJ added the 순한맛🐑 마음이 많이 여립니다.. label Apr 16, 2025
Copy link
Collaborator

@dongqui dongqui left a comment

Choose a reason for hiding this comment

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

지원님!
요구사항도 꼼꼼하게 잘 챙겨주셨고 군더더기 없이 깔끔하게 잘 해주셨습니다 👍 👍

반응형 적용을 하면서 세세한 부분까지 적용하느라 코드가 길어지고 시간도 오래 걸렸습니다. 그래서 좀 더 깔끔하고 빠르게 반응형 적용하는 꿀팁 같은 것이 있는지 궁금합니다!
-> 나중에 디자인 시스템, 유틸리티 클래스 혹은 tailwlind 같은 라이브러리를 사용하시면 좀 더 간결해질 수 있는 여지는 있을 거 같아요! 다만, 지금 단계에서는 위 언급한 방법들이 오히려 작업량을 늘릴 수도 있죠 🤣 지금 충분히 잘 하고 계십니다!

반응형 작업은 원래 공수가 좀 들어가는 편이라, 시간이 드는 건 자연스러운 부분이에요.
중요한 건 전체적인 구조를 잘 잡고, 점진적으로 확장하는 방향인데 지금 딱 그 흐름대로 잘 하고 계신 거 같아요 👍

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:image" content="/images/logo/og-img.png" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

og 태그를 잘 넣어주셨네요! 👍

src="/images/logo/pandaMarket-Logo.png"
alt="판다마켓 logo"
width="396"
width="198"
Copy link
Collaborator

Choose a reason for hiding this comment

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

반응형에 따른 초기 이미지 크기를 정하기 위해 picture를 사용하실 수 있어요!

pointer-events: none;
}

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

Choose a reason for hiding this comment

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

레이아웃과 관련된 부분들은 이제 슬슬 global에서 분리해도 좋을 거 같네요~!
image
불필요하게 리소스가 받아지고 있습니다 :)


/* footer */
.copyright {
order: 3;
Copy link
Collaborator

Choose a reason for hiding this comment

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

order로 해결하셨군요!? 👍

@dongqui dongqui merged commit 5dc152d into codeit-bootcamp-frontend:Basic-정지원 Apr 17, 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