Skip to content

[김진형]Sprint3 #109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
GANGYIKIM merged 1 commit into from
Mar 21, 2025
Merged

[김진형]Sprint3 #109

GANGYIKIM merged 1 commit into from
Mar 21, 2025

Conversation

@gogomose
Copy link

@gogomose gogomose commented Mar 18, 2025 •
edited
Loading

배포사이트

https://sprintmission3-jinkim.netlify.app/

기본

  • 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 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
  • 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
  • 주소와 이미지는 자유롭게 설정하세요.

스크린샷

Screenshot 2025-03-18 at 10 47 59 PM Screenshot 2025-03-18 at 10 48 25 PM Screenshot 2025-03-18 at 10 48 20 PM

멘토에게

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

@gogomose gogomose added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Mar 18, 2025
@gogomose gogomose requested a review from GANGYIKIM March 18, 2025 14:31
GANGYIKIM
GANGYIKIM approved these changes Mar 21, 2025
View reviewed changes
Copy link
Collaborator

@GANGYIKIM GANGYIKIM left a comment

Choose a reason for hiding this comment

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

진형님 3번째 스프린트 미션 제출 고생하셨습니다~
홈 화면을 잘 진행하셨는데 로그인과 회원가입 페이지의 경우는 더 작업이 필요해보여요~
만약 작업하시는 중이시거나 제가 코드리뷰 할 때 참고할만한 정보가 있다면
PR에 적어주시면 참고해서 코드리뷰 할테니 어떻게 진행중이신지 적어주시면 좋을 것 같아요.
다음번 스프린트 미션 제출도 화이팅이에요!

  • PR 올리실때 요구사항들이 잘 구현되었는지 확인하면서 PR 올려주세요~
  • index.html에서 화면 사이즈가 모바일이되면 로고가 변경되어야 하는데 반영이 안된 것 같아요. 확인하고 수정해보세요.

index.html
<a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer"><img src="images/social/instagram-logo.svg" alt="인스타그램" width="20"></a>
</div>
</footer>
<script>
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 21, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
코드 및 콘솔의 "Live reload enabled"라는 내용을 보면 저장시 hot refresh 를 하기 위한 코드인가봐요.
다만 이는 개발중 필요한 코드로 실제 파일에는 포함될 필요가 없는 내용으로 판단됩니다~
필요하다고 생각된다면 어떤 코드인지 주석을 다시는 것을 추천드리고 그보다는 지우시는 것을 추천드릴께요!

styles/global.css
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 21, 2025

Choose a reason for hiding this comment

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

👍 칭찬
전체적으로 공유하는 스타일들만 따로 빼주신 것 좋아요 👍

styles/home.css
text-align: center;
background-repeat: no-repeat;
background-position: bottom;
background-size: 130%;
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 21, 2025

Choose a reason for hiding this comment

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

💊 제안
background 이미지의 사이즈를 반응형단위로 가지고 가니 디자인과 다르게 나오는 것 같아요!
모바일에서는 contain 값으로 해당 부모만큼 늘어나도록 하고 PC 에서는 디자인에서의 이미지 사이즈를 주어
너무 크게 이미지가 늘어나지 않도록 해주시는 것을 추천드려요!

Suggested change
background-size: 130%;
background-size: contain;

signin.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panda_login</title>
<link rel="icon" href="images/logo/favicon.ico">
<link rel="stylesheet" href="style.css">
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 21, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
존재하지 않는 스타일파일이 연결되어 있네요~
아래처럼 수정해주시고 해당 파일 리뷰는 2주차 PR 참고해주세요!

Suggested change
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="auth.css">

styles/auth.css
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 21, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
확인해보니 디자인과 다르게 구현되어 있네요~
디자인대로 수정하시는 것을 추천드려요!

스크린샷 2025-03-21 오후 1 42 13

@GANGYIKIM GANGYIKIM merged commit 5a104bc into codeit-bootcamp-frontend:Basic-김진형 Mar 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@GANGYIKIM GANGYIKIM GANGYIKIM approved these changes

Assignees

No one assigned

Labels

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

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@gogomose @GANGYIKIM