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 #17

Conversation

kim-1997
Copy link
Collaborator

요구사항

기본

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

심화

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

주요 변경사항

  • 비밀번호 확인 이벤트를 구현했습니다.
  • input 값이 다 채워지면 버튼의 색상이 변합니다.

스크린샷

판다마켓3
판다마켓4

멘토에게

  • 부족한 점은 과감하게 말씀해 주시면 바로 고치겠습니다 감사합니다.

@kim-1997 kim-1997 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jan 10, 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.

성빈님 이번에도 잘 완성해주셨군요! 👍

BEM을 적용해주신 점이나, js를 벌써 적용하신 점 등 빠르게 잘 학습하고 계신거 같습니다 :)
함수명, 클래스명, 파일명 등 이름 짓는 거에 조금만 더 신경 써주시면 좋을 거 같아요!

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>login</title>
<title>판다마켓 | 로그인</title>
<link rel="stylesheet" href="src/assets/css/main.css" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

login page에서 사용되지 않는 스타일이 많이 포함되어있습니다!

페이지별로 스타일을 나누거나 공통 부분을 따로 빼보시면 좋을 거 같아요 :)

</div>
</div>
</div>
<div class="container">
<section class="main-section">
<div class="main-section__inner">
<div class="main-section__left main-section__left--image">
<div class="main-section__left main-section__imagewrap">
Copy link
Collaborator

Choose a reason for hiding this comment

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

bem을 잘 적용해주셨네요! 👍

</h1>
<form class="form">
<div class="form__group">
<label for="email">이메일</label>
Copy link
Collaborator

Choose a reason for hiding this comment

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

label을 잘 적용해주셨네요! 👍

class="form__input"
placeholder="비밀번호를 입력해주세요"
/>
<div class="visible-icon"></div>
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 등을 통해서 접근성을 높여주시면 좋습니다 :)

Copy link
Collaborator

Choose a reason for hiding this comment

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

벌써 js를 작성해주셨군요~!

파일명을 좀 더 의미있게 작성해주시면 좋을 거 같습니다 :)

});
});

function Check() {
Copy link
Collaborator

Choose a reason for hiding this comment

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

일반적으로 js는 카멜 케이스를 많이 사용합니다!

function check {

});
});

function Check() {
Copy link
Collaborator

Choose a reason for hiding this comment

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

함수명은 명확하게 지어주시는 것이 좋아요! 이 함수는 어떤 것을 check하는 건가요!?

@@ -0,0 +1,30 @@
let visible_icon = document.querySelectorAll(".visible-icon");
Copy link
Collaborator

Choose a reason for hiding this comment

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

재할당하지 않는 값들은 const를 씁니다 :)

@@ -0,0 +1,30 @@
let visible_icon = document.querySelectorAll(".visible-icon");
Copy link
Collaborator

Choose a reason for hiding this comment

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

일반적으로 js는 카멜 케이스를 많이 사용합니다! const visibleIcons =

@dongqui dongqui merged commit 25b8220 into codeit-bootcamp-frontend:Basic-김성빈 Jan 13, 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