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

[김미소]Week2 #26

Merged
merged 1 commit into from
Feb 28, 2024
Merged

[김미소]Week2 #26

merged 1 commit into from
Feb 28, 2024

Conversation

nightowlzz
Copy link
Collaborator

요구사항

기본

  • [기본] PC사이즈만 고려해 주어진 디자인을 구현했나요?
  • [기본] HTML, CSS 파일을 Netlify로 배포했나요? (Netlify 배포 주소: https://part1-kms-week.netlify.app/)
  • [기본] 랜딩 페이지의 url path는 루트(‘/’)로 설정했나요?
  • [기본] title은 Linkbrary로 설정했나요?
  • [기본] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 했나요?
  • [기본] 화면의 너비가 1920px 보다 작아질 때, “Linkbrary” 로고의 왼쪽 여백 200px “로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 했나요?
  • [기본] Linkbrary 아이콘은 클릭 시 루트 페이지(‘/’)로 이동하나요?
  • [기본] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정했나요?
  • [기본] “로그인”은 클릭 시 로그인 페이지(‘/signin’)로 이동하나요?
  • [기본] “링크 추가하기”는 클릭 시 회원가입(‘/signup’)로 이동하나요?
  • [기본] 화면의 너비가 1920px 이상이면 내부에 있는 요소간 동일한 간격을 유지하며 가운데 정렬해야 합니다.
  • [기본] 화면의 너비가 1920px 보다 작아질 때, 최하단에 있는 “codeit-2023”의 왼쪽 여백 104px과 SNS 아이콘들의 오른쪽 여백 104px을 유지하면서 가운데 있는 “Privacy Policy”, “FAQ” 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다.
  • [기본] “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동하나요?
  • [기본] 페이스북, 트위터, 유튜브, 인스타그램 아이콘은 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동 하나요?
  • [랜딩] 아래로 스크롤 해도 “Linkbrary” 로고와 “로그인” 버튼이 있는 상단 네비게이션 바(Global Navigation Bar)영역이 최상단에 고정되게 했나요?
  • [로그인 페이지, 회원가입 페이지 공통] Linkbrary 로고 클릭시 루트 페이지(“/”)로 이동하나요?
  • [로그인 페이지, 회원가입 페이지 공통] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일한가요?
  • [로그인 페이지, 회원가입 페이지 공통] input 요소에 focus in 일 때, 테두리 색상이 파랑색인가요?
  • [로그인 페이지, 회원가입 페이지 공통] input 요소에 focus out 일 때, 테두리 색상이 회색인가요?
  • [로그인 페이지, 회원가입 페이지 공통] SNS 아이콘들은 클릭시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동하나요?
  • [로그인 페이지] “회원 가입하기”는 클릭시 “/signup” 페이지로 이동하나요?
  • [회원가입 페이지] “로그인 하기”는 클릭시 “/signin” 페이지로 이동하나요?

심화

  • [심화] 사용자의 브라우저 font-size가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정했나요?
  • [심화] palette에 있는 color값들을 css 변수로 등록하고 사용했나요?
  • [심화] 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가했나요?
  • [추가] 눈버튼 클릭시 비밀번호 text 보이고 안보이고 설정
  • [추가] 회원가입 비밀번호, 비밀번호 확인 비교 시, 틀리면 '비밀번호 확인 input 하단에 에러 메세지' 추가

주요 변경사항

main 페이지 반응형 작업
로그인 페이지 작업
회원가입 페이지 작업

스크린샷

멘토에게

@nightowlzz nightowlzz changed the title feat:위클리 미션 - 2주차 작업 [김미소]Week2 Feb 24, 2024
@nightowlzz nightowlzz requested review from bootcampCodeit and removed request for bootcampCodeit February 25, 2024 06:33
@nightowlzz nightowlzz added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Feb 25, 2024
@nightowlzz nightowlzz requested a review from Siihyun February 26, 2024 01:35
Copy link
Collaborator

@Siihyun Siihyun left a comment

Choose a reason for hiding this comment

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

수고하셨습니다! 잘하셨어요!💯

커밋을 조금 더 작은 단위로 나눠서 진행했으면 더 좋았을 것 같아요.
한 커밋은 가능한 하나의 수정사항만 담는것이 좋습니다.

한번 읽어보세요! 링크


/* 기타 */
html { font-size: 16px; }
.hide{ position: absolute;clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
Copy link
Collaborator

Choose a reason for hiding this comment

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

css를 한줄에 작성하는건 가독성이 떨어집니다.
혹시 번들 사이즈를 고려하신 코딩이라면, 실제 빌드 환경에서는 번들러(webpack, vite등)의 minify option을 통해 최소한의 크기로 만들 수 있으니 작업하실때는 속성별로 한 줄에 나누어 작업해주세요.

ex)

.hide { 
  position: absolute;
  clip: rect(0 0 0 0); 
  width: 1px; 
  height: 1px; 
  margin: -1px; 
  overflow: hidden;
}



// 비밀번호가 일치하는지 확인하는 기능
function validatePasswordsMatch(passWrod1, passWrod2) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

password, confirmPassword로 수정되어도 좋겠네요.

Comment on lines +18 to +27
/* 타이틀 사이즈 pc 기준 - 48,64*/
--title-size-l: 4rem;
--title-size-m: 3rem;

/* 폰트 사이트- 13,14,16,18,20 */
--font-size-l: 1.25rem;
--font-size-lm: 1.125rem;
--font-size-m: 1rem;
--font-size-sm: 0.875rem;
--font-size-s: 0.815rem;
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍

<link rel="stylesheet" href="css/common/header.css">
<link rel="stylesheet" href="css/common/footer.css">
<link rel="stylesheet" href="css/page/join.css">
<script defer src="js/style.js"></script>
Copy link
Collaborator

Choose a reason for hiding this comment

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

style 수정뿐만 아니라 비밀번호 유효성 검사와 같은 비즈니스 로직을 담고있는 파일이라, style.js 보다는 조금 더 파일 의미를 담는 파일명으로 수정되면 좋겠습니다.

@Siihyun Siihyun merged commit aa91614 into codeit-bootcamp-frontend:part1-김미소 Feb 28, 2024
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.

3 participants