Skip to content
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.

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

[민지이] sprint2 #14

Conversation

crazyupinc-design
Copy link
Collaborator

요구사항

  • Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
  • Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결합니다.
  • 피그마 디자인에 맞게 페이지를 만들어 주세요.
  • React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

기본

  • “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
  • 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
  • input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.
  • input 요소에 focus out 일 때, 테두리는 없습니다.
  • SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.
  • “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.
  • “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.

심화

  • palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
  • 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.

주요 변경사항

스크린샷

image image

멘토에게

  • 항목 입력시 로그인/회원가입 버튼 활성화 작업과 UI 반응형 작업하지 못했습니다. 추후 수업을 듣고 수정하겠습니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@crazyupinc-design crazyupinc-design added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Sep 7, 2024
@lang92 lang92 self-requested a review September 7, 2024 07:30
Copy link
Collaborator

@lang92 lang92 left a comment

Choose a reason for hiding this comment

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

구현을 잘 해주셨네요!
리뷰 확인해 주세요!

Comment on lines +1 to +8
* {
box-sizing: border-box;
}

html {
word-break: keep-all;
font-family: 'Pretendard', sans-serif;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

+body 태그를 포함하여, 전반적인 페이지에 적용해야 하는 스타일을 관리하는 common.css와 같은 파일을 따로 만들어서 각 페이지에 적용하는 방법도 좋을 것 같네요.

Comment on lines +10 to +23
h1 {
color: #374151;
font-weight: 700;
font-size: 40px;
line-height: 140%;
margin: 0;
}

p {
color: #374151;
font-weight: 500;
font-size: 24px;
line-height: 32px;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

전에 멘토링 때 말씀드린 것처럼, 태그 선택자는 공용으로 적용해야 하는 경우를 제외하고는 사용을 지양하고 대신 클래스 선택자를 활용하는 연습을 하시는 게 좋습니다.
추후 유지보수에서의 어려움이 있기 때문에요!

Comment on lines +58 to +77
.login-button {
width: 128px;
height: 48px;
background-color: #3692FF;
border-radius: 8px;
border: none;
color: #fff;
font-weight: 600;
font-size: 16px;
line-height: 26px;
display: flex;
justify-content: center;
align-items: center;
}
.login-button:hover {
background-color: #1967D6;
}
a {
text-decoration: none;
}
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.

.html 파일과 매칭되는 파일이기 때문에 동일한 이름으로 작성해 주셔야 혼란이 없을 것 같아요!

Comment on lines +110 to +117
.img-home-top img {
width: 746px;
height: 340px;
}
.img-home-bottom img {
width: 746px;
height: 340px;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

동일한 스타일을 가진다면, class를 분리할 필요 없이 범용적인 이름의 한 class만으로 사용하시면 됩니다.

Comment on lines +19 to +34
<h1>일상의 모든 물건을<br>
거래해 보세요
</h1>
<a href="trade-item.html" class="trade-link-button">구경하러 가기</a>
</div>
<div class="img-home-top"><img src="img/Img-home-top.png" alt="구경하러가기 이미지">
</div>
</section>
<section class="product-section">
<div class="section-img"><img src="img/Img-hot-item.png" alt="핫 아이템">
</div>
<div class="hot-item-section-contents">
<span class="point-font">Hot item</span>
<h1>인기 상품을<br>
확인해 보세요
</h1>
Copy link
Collaborator

Choose a reason for hiding this comment

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

h1 태그는 한 페이지에 하나만 사용해 주세요!
참고
image

Comment on lines +81 to +84
<a href="https://www.facebook.com/" class="face-book"><img src="img/ic_facebook.png" alt="페이스북"></a>
<a href="https://twitter.com/" class="twitter"><img src="img/ic_twitter.png" alt="트위터"></a>
<a href="https://www.youtube.com/" class="youtube"><img src="img/ic_youtube.png" alt="유튜브"></a>
<a href="https://www.instagram.com/" class="instagram"><img src="img/ic_instagram.png" alt="인스타그램"> </a>
Copy link
Collaborator

Choose a reason for hiding this comment

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

스타일이 주어지지 않는다면 class 부여하지 않으셔도 됩니다.

Comment on lines +68 to +82
.password-toggle-1 {
position: absolute;
top: 16px;
right: 14px;
cursor: pointer;
}
.password-confirm-field {
position: relative;
}
.password-toggle-2 {
position: absolute;
top: 16px;
right: 14px;
cursor: pointer;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

마찬가지로 동일한 스타일을 가진다면 하나의 class로 재사용하시면 됩니다.

@lang92 lang92 merged commit 82d444e into codeit-bootcamp-frontend:Basic-민지이 Sep 9, 2024
1 check failed
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