[김보경] sprint2

[BokyungCodes]

요구사항

기본

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

심화

• palette에 있는 color값들을 css 변수로 등록하고 사용합니다..
• 비밀번호 input 요소 오른쪽에 눈모양 아이콘을 추가합니다.
  (추후 클릭으로 비밀번호를 보거나 가릴 수 있도록 기능을 만들어 갈 예정입니다.)

주요 변경사항

• 스프린트 미션1 수정사항을 반영하였습니다.

스크린샷

멘토에게

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

[GANGYIKIM]

보경님 2번째 미션 제출 고생하셨습니다!
심화 요구사항까지 구현하시다니 멋지네요.
3주차도 화이팅입니다!

[GANGYIKIM]

❗️ 수정요청
ic_eye_blind와 ic_eye_open 의 이미지 크기가 달라서 비밀번호 토글을 누를때마다 덜컹거리는 느낌이 들어요~
이를 css로 해결하실 수도 있지만 추천드리는 방법은, 두 이미지를 같은 사이즈로 추출하시는 겁니다.
ic_eye_blind가 더 클 수 밖에 없으니 ic_eye_open 이미지를 여백을 주어 동일한 크기로 추출하시는 것을 추천드려요!

[GANGYIKIM]

💊 제안
css 변수들을 분리하신 점 좋습니다. 다만 figma에 정의된 색상 변수보다 수가 더 적은 것 같아요~

큰 이유가 없다면 figma와 동일하게 색상 변수를 선언하시는 것이 좋습니다.
그래야 figma에서 해당 색상 변수가 사용될때 확인하기 쉽고 색상값은 디자이너와 의사 소통할 일이 많은 값이라 소통 측면에서도 같은 이름을 쓰는 것이 좋기 때문입니다~

또한 클래스로 빼셔도 되지만 css variable로 선언하셔도 됩니다~

:root {
  --gray900:  #111827;
}

title {
  color: var(--gray900);
}

[GANGYIKIM]

❗️ 수정요청
아마 여기서 이미지명을 바꿔주신 것을 보면 파일명도 수정하신 것 같아요! 다만 git은 대소문자 구분을 하지 못해, 지금 file changed에서 해당 이미지가 보이지 않는 것을 통해 파일명이 바뀌지 않은 것을 알 수 있습니다!
검색해보시고 수정해보세요.
참고하실만한 글도 첨부합니다~

blog1 blog2

[GANGYIKIM]

💬 여담
button 태그의 type 속성들을 잘 명시해주셨어요~

참고로 type이 submit인 button의 경우 form에서 제출 이벤트가 발생하면, 해당 요소의 onclick 이벤트가 실행되게 됩니다.
이를 더 풀어서 말하자면 form 태그안의 input, button 과 같은 상호작용 요소에서 submit 이벤트, enter key 입력이 발생하면 해당 form 에서의 submit 이벤트가 실행된다는 것입니다.
유저 입장에서는 로그인이나 회원가입시 input, button에서 enter를 누르면 제출되는 것에 익숙하기 때문에 이를 신경써주시는 것이 좋습니다~

// case1: form에 onsubmit 이벤트 명시
<form onsubmit="login">
  <input /> // input에서 enter 키 입력시 onsubmit 이벤트 실행
  <button type="submit">login</button> // 해당 버튼 클릭 시 onsubmit 이벤트 실행
</form>

// case2: submit 버튼에 onclick 이벤트 명시
<form>
  <input /> // input에서 enter 키 입력시 button의 onclick 이벤트 실행
  <button type="submit" onclick="login">login</button>
</form>

mdn button

[GANGYIKIM]

👍 칭찬
label과 Input을 연결해주신 점 좋습니다~

[GANGYIKIM]

❗️ 수정요청
디자인상에서는 해당 요소 하단에 여백이 없으니, 해당 속성은 없는게 좋을 것 같아요.

Suggested change

margin-bottom: 60px;

[GANGYIKIM]

❗️ 수정요청
브라우저의 화면 높이가 작아졌을 때 content가 짤리는 현상이 있습니다~

(아래의 이미지의 경우 최상단 스크롤에 위치해있음에도 로그인 버튼이 보임)

이는 height 100vh 속성으로인해 높이가 제한되서 그런것입니다~ 제 생각에는 min-height로 바꿔주시거나 큰 의도가 없다면 그냥 height: 100vh 속성을 지우시는 것을 추천드려요!

[GANGYIKIM]

💊 제안
로그인 페이지와 회원 가입 페이지가 디자인이 비슷한만큼 공통적으로 사용하는 css가 많아 보입니다.
이러한 중복을 줄이기 위해 공통 CSS 파일을 작성하시면 유지보수 및 가독성 측면에서 더 좋을 것 같습니다.

auth.css // login, signup 페이지에서 공통으로 쓰는 것들의 모음
login.css 
signup.css 

만약 login.css, signup.css 파일에서 작성되는 css가 너무 적다면, 즉 분리할 필요를 못 느끼신다면
auth.css에서 전부 작성하셔도 좋을 것 같아요~