Skip to content

Conversation

@josubeen
Copy link
Collaborator

기본 요구사항

  • 네비게이션 바 고정
  • 로고 클릭 시 루트("/") 이동
  • 로그인/회원가입 로고 위 여백 동일
  • SNS 아이콘 실제 서비스 이동

로그인 페이지

  • "회원가입" 버튼 클릭 시 "/signup" 이동

회원가입 페이지

  • "로그인" 버튼 클릭 시 "/login" 이동

심화 요구사항

  • palette 색상값을 CSS 변수로 등록해 사용
  • 비밀번호 input에 눈 아이콘 추가

멘토에게

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

@josubeen josubeen self-assigned this Jun 20, 2025
@josubeen josubeen added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 20, 2025
@josubeen josubeen closed this Jun 20, 2025
@josubeen josubeen reopened this Jun 20, 2025
@josubeen
Copy link
Collaborator Author

실수로 close를 눌러서 실패 메세지가 뜨는 것 같습니다.

Copy link
Collaborator

@baeggmin baeggmin left a comment

Choose a reason for hiding this comment

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

코드는 전반적으로 깔끔하게 잘 작성해주셨습니다. 👍

다만 현재 ⛔ node_modules 가 같이 올라왔어요.
node_modules/ 디렉토리는 수천 개의 라이브러리 파일이 포함된 의존성 디렉토리입니다. 해당 디렉토리는 용량도 크고, 프로젝트마다 환경도 달라서 절대 Git에 올려선 안 됩니다.

반드시 아래와 같이 .gitignore 파일을 만들어 추가해주세요.

# .gitignore 파일 최상단에 아래 내용 추가
node_modules/

또한 이미 올라간 node_modules 는 아래와 같은 절차로 제거 부탁드립니다.

# Git 캐시에서 삭제
git rm -r --cached node_modules
git commit -m "Remove node_modules from repo"

참고: node_modules는 package.jsonpackage-lock.json만 있으면 npm install로 누구나 동일하게 재설치 가능합니다. 향후 커밋 시 주의 부탁드립니다!

background-color: #ffffff;
}

:root {
Copy link
Collaborator

Choose a reason for hiding this comment

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

css 변수 설정 잘 해주셨네요! 👍

</a>
</header>
<main>
<form class="auth-form">
Copy link
Collaborator

Choose a reason for hiding this comment

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

form 구현에 필요한 시맨틱 태그 (form, label, input 등) 를 잘 활용해주셨네요! 👏

<i class="fa-solid fa-eye eye-icon"></i>
</div>

<button type="submit" class="auth-submit">로그인</button>
Copy link
Collaborator

Choose a reason for hiding this comment

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

type="submit" 도 꼼꼼히 추가해주신 점 좋습니다! 👍

<div class="simple-login-container">
<p class="simple-login-desc">간편 로그인하기</p>
<a href="https://www.google.com/">
<img src="public/images/google_icon.png" class="simple_login_img" alt="간편 로그인 이미지">
Copy link
Collaborator

Choose a reason for hiding this comment

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

alt="간편 로그인 이미지" 가 반복되고 있는데요, 접근성 측면에서 더 구체적인 alt를 설정해주시는게 좋습니다.

예시

<img src=".../google_icon.png" alt="Google 계정으로 로그인">
<img src=".../kakao_icon.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.

reset.css 로 파일 분리를 해주신 것은 좋지만, 더 많은 초기화 규칙 포함되면 좋겠습니다. (예: ul, a, img, button)

Copy link
Collaborator

Choose a reason for hiding this comment

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

이미지는 꼭 직관적인 이름으로 수정해주세요! 그래야 추후 협업 시 헷갈리지 않고 사용할 수 있습니다.

@josubeen
Copy link
Collaborator Author

.gitignore 파일 추가 후 다시 push 했습니다.

@baeggmin baeggmin merged commit 7990a84 into codeit-bootcamp-frontend:Basic-조수빈 Jun 23, 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