Skip to content

[박준현] sprint2 #150

New issue

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

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

Already on GitHub? # to your account

Conversation

llmojoll
Copy link
Collaborator

@llmojoll llmojoll commented May 2, 2025

요구사항

기본

  • 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
  • "판다마켓" 클릭 시 루트 페이지("/")로 이동합니다.(새로고침)
  • 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
  • SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.
  • 로그인 페이지
  • "회원가입"버튼 클릭 시 "/#" 페이지로 이동합니다.
  • 회원가입 페이지
  • "로그인"버튼 클릭 시 "/#" 페이지로 이동합니다.

심화

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

주요 변경사항

-로그인, 회원가입 페이지 추가

스크린샷

436012012-e440066f-2866-48e2-ba40-c6199ebe8ea4
436011907-bf59df96-d02d-4277-81d6-0a63abdb525c
https://sprightly-frangollo-6428dc.netlify.app/

멘토에게

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

@llmojoll llmojoll added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label May 2, 2025
@llmojoll llmojoll changed the title 스프린트2 로그인-회원가입 페이지 박준현 sprint2 May 2, 2025
@llmojoll llmojoll changed the title 박준현 sprint2 [박준현] sprint2 May 2, 2025
@addiescode-sj addiescode-sj self-requested a review May 9, 2025 00:37
Copy link
Collaborator

@addiescode-sj addiescode-sj left a comment

Choose a reason for hiding this comment

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

수고하셨습니다!

주요 리뷰 포인트

  • 포맷팅
  • 접근성 향상

margin: 0;
padding: 0;
box-sizing: border-box;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

5,6 라인 사이에 공백 한칸 띄워줄까요?

지금은 좋은 포맷팅 습관을 들이기위해 수동으로 고쳐보시고,
나중에 포맷팅을 자동화하는 도구를 사용해보시면 좋을것같네요!

아래 아티클에서 규칙들 정도만 참고해보세요 :)

참고

padding: 0;
box-sizing: border-box;
}
a ,a > button {
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기서도 이렇게!

Suggested change
a ,a > button {
a, a > button {

<div class="login-container">
<div class="login-img-box">
<a href="/" aria-label="홈으로 이동">
Copy link
Collaborator

Choose a reason for hiding this comment

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

접근성을 위해 aria-label을 써주셨네요! 굳굳 👍

<div class="login-ezlogin-logos">
<a href="https://www.google.com" aria-label="구글로 이동" rel="noopener">
<img class="logo" src="./images/main-page/google-logo.png" alt="">
Copy link
Collaborator

Choose a reason for hiding this comment

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

귀찮더라도 접근성을 위해 img에 alt 태그는 꼭 사용해주시는게 좋아요.
아래 애플 공식 홈페이지 예시를 보면 굉장히 세세하게 잘 사용해준 모습을 볼 수 있습니다 :)

<img src="/v/macbook-pro/aq/images/overview/themes/battery/battery_hero__d5zgrstiu9si_xlarge.jpg" onload="__lp(event)" alt="깜깜한 밤, 야외에서 삼각대에 장착한 카메라를 별이 가득한 하늘을 향해 놓은 채 카메라에 연결한 MacBook Pro를 무릎에 올려놓고 작업 중인 사람의 모습">

Copy link
Collaborator

Choose a reason for hiding this comment

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

sprint2에서부터 다음 미션 코드가 있네요! 미션별 요구사항마다 리뷰를 다르게 드려볼게요

@addiescode-sj addiescode-sj merged commit f455ba1 into codeit-bootcamp-frontend:Basic-박준현 May 14, 2025
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants