[백승렬] Week 3 #111
Merged
[백승렬] Week 3 #111
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- global.css 작성 - 모든 페이지에서 쓰이는 설정 모음 - global.css에 작성된 설정은 나머지 각각의 css에서 제거
<html> -> <html lang="ko"> - index.html, login.html, signup.html 에 추가
- button 태그에서 a 태그로 변경 - button태그, a태그에 대해 cursor: pointer; 일괄 적용 (global.css에 작성) & 각 파일의 관련 내용 삭제
-공유 시 관련 이미지 보이게 됨
이미지 경로에 오류가 있어 수정함
메타태그 이미지 변경 및 경로 수정
- css클래스 이름 변경 (BEM 적용) - login-signup.css -> auth.css로 파일이름 변경
- mobile 사이즈에서만 랜딩 페이지의 제품 소개 영역의 배치 순서가 제목, 이미지, 설명으로 바뀌게 됨
-reset.css 추가 및 일괄 적용
메타태그 이미지 경로 수정(절대 경로로 함)
- 잘못된 입력에 대해 에러메시지와 함께 입력 필드 테두리 빨갛게 변함 - 이메일: test@codeit.com, 비밀번호: codeit101 으로 로그인 시도할 경우, “/folder” 페이지로 이동
- 5주차 위클리 미션 요구 사항 적용 완료 - 로그인 페이지와 동일하게 올바르지 않은 입력에 대해 에러메시지 나옴 다음의 경우 에러메시지 출력 - 이메일 입력에 대해 올바르지 않는 이메일 - 비밀 번호에는 영문/숫자 섞어서 8자이상 작성 하는 경우 제외하고 전부 - 비밀번호 확인에 적은 정보가 비밀번호에 적은 정보와 일치하지 않을 경우 - 요구에 맞는 입력일 경우 올바른 제출로 인정되어 folder 페이지로 이동
- 200px -> 32px
코드를 weekly_mission디렉토리에 몰아넣지 않고 내용물을 꺼냄.(push의 편의성 및 main directory 설정의 편의성 고려)
|
위클리미션 진행하시느라 수고 많으셨습니다. 승렬님 ! |
kiJu2
approved these changes
Mar 6, 2024
| font-weight: 600; | ||
| color: #f5f5f5; | ||
| font-family: 'Pretendard'; | ||
| } | ||
| /* End of: 제출 버튼 */ | ||
|
|
||
| /* 소셜로그인 */ | ||
| .frame2 > .small-text{ | ||
| .auth__social-auth > .auth__label{ |
| @@ -0,0 +1,12 @@ | |||
| /* 전역 설정 */ | |||
There was a problem hiding this comment.
global.css를 목적에 맞게 잘 설정하셨습니다 ! 👍
There was a problem hiding this comment.
해당 이미지는 svg로 출력하는게 유리할 것 같아요 ! 😊
벡터로 표현될 수 있으므로 svg로 변경하시는 것이 좋을 것 같습니다.
| @@ -0,0 +1,204 @@ | |||
|
|
|||
There was a problem hiding this comment.
자바스크립트 코드는 아직 요구사항에 없으므로 다음 코드리뷰 때 진행하도록 하겠습니다 =)
Comment on lines
+6
to
+10
| <title>Linkbrary - Login</title> | ||
|
|
||
| <head> | ||
| <link href="css/reset.css" rel="stylesheet"> | ||
| <link rel='stylesheet' |
There was a problem hiding this comment.
<title> 태그는 <head> 안에 있어야 합니다 !
다음과 같이 수정해보시면 어떨까요? 😊
Suggested change
| <title>Linkbrary - Login</title> | |
| <head> | |
| <link href="css/reset.css" rel="stylesheet"> | |
| <link rel='stylesheet' | |
| <head> | |
| <title>Linkbrary - Login</title> | |
| <link href="css/reset.css" rel="stylesheet"> | |
| <link rel='stylesheet' |
| <form class="auth__login-form" id="loginForm"> | ||
| <div class="auth-route"> | ||
| <a class="auth-route__home" href="index.html"> | ||
| <img src="images/Linkbrary.svg" alt="Link-brary 로고"> |
| <body class="auth-background"> | ||
|
|
||
| <div class="login-content"> | ||
| <form class="auth__login-form" id="loginForm"> |
There was a problem hiding this comment.
html의 id 및 class의 네이밍은 하이픈으로 작성하는게 어떨까요?
Suggested change
| <form class="auth__login-form" id="loginForm"> | |
| <form class="auth__login-form" id="login-form"> |
id/class는 일반적으로 대소문자를 구분하는 것이 순작용입니다. 원래 사용하는 id/class 값을 대조하는 것이 더 명확합니다 !
추가로, 엘리먼트의 class, id 값은 카멜케이스 보다는 -를 사용하여 sign-form처럼 작성하는 것이 조금 더 일반적입니다 =)
왜 하이픈이 더 나을까?
hello_world, helloWorld보다는 hello-world가 중간에 선이 작성되어 사람이 보기에 더욱 명확하게 보입니다. 또한 자바스크립트 syntax와 의도적으로 불일치시켜 오류를 방지하는 효과는 덤이예요.
하단은 구글 네이밍 컨벤션에 나와있는 내용입니다:
tl;dr
클래스 이름의 단어는 하이픈으로 구분합니다.
이해력과 스캔성을 향상시키기 위해 하이픈이 아닌 다른 문자(전혀 없음)로 선택기의 단어와 약어를 연결하지 마십시오.
불필요한 id 속성을 방지합니다.
스타일링에는 클래스 속성을, 스크립팅에는 데이터 속성을 선호합니다.
id 특성이 엄격하게 요구되는 경우, 값에 하이픈을 항상 포함하여 자바스크립트 식별자 구문과 일치하지 않도록 합니다. 예를 들어 프로파일이나 userProfile을 사용합니다.
요소가 id 속성을 가지면 브라우저에서 글로벌 윈도우 프로토타입에서 이름이 지정된 속성으로 사용할 수 있게 되어 예기치 않은 동작이 발생할 수 있습니다. 하이픈을 포함하는 id 속성 값은 여전히 속성 이름으로 사용할 수 있지만 이를 글로벌 자바스크립트 변수로 참조할 수는 없습니다.
Comment on lines
+52
to
+74
| <div class="login-contents__input-form"> | ||
| <div class="auth__input-entry"> | ||
| <div class="auth__label"> | ||
| 이메일 | ||
| </div> | ||
| <div class="auth__input-wrapper"> | ||
| <input class="auth__input-field auth__input-border--default" type="email" id="emailInput" /> | ||
| <div class="error-message" id="emailError"></div> | ||
| </div> | ||
| </div> | ||
| <div class="auth__input-entry"> | ||
| <div class="auth__label"> | ||
| 비밀번호 | ||
| </div> | ||
| <div class="auth__input-wrapper"> | ||
| <div class="input-binder"> | ||
| <input class="auth__input-field auth__input-border--default" type="password" id="passwordInput" /> | ||
| <i class="fa fa-eye fa-lg password-visible"></i> | ||
| </div> | ||
| <div class="error-message" id="passwordError"></div> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
<label> 태그로 더욱 시맨틱하게, 그리고 스크린 리더 사용자 경험을 향상시켜보는게 어떨까요 ?
이메일, 비밀번호와 같이 input과 연관있는 텍스트는 label태그로 지정하시는 것이 좋습니다.
Suggested change
| <div class="login-contents__input-form"> | |
| <div class="auth__input-entry"> | |
| <div class="auth__label"> | |
| 이메일 | |
| </div> | |
| <div class="auth__input-wrapper"> | |
| <input class="auth__input-field auth__input-border--default" type="email" id="emailInput" /> | |
| <div class="error-message" id="emailError"></div> | |
| </div> | |
| </div> | |
| <div class="auth__input-entry"> | |
| <div class="auth__label"> | |
| 비밀번호 | |
| </div> | |
| <div class="auth__input-wrapper"> | |
| <div class="input-binder"> | |
| <input class="auth__input-field auth__input-border--default" type="password" id="passwordInput" /> | |
| <i class="fa fa-eye fa-lg password-visible"></i> | |
| </div> | |
| <div class="error-message" id="passwordError"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="login-contents__input-form"> | |
| <div class="auth__input-entry"> | |
| <label for="emailInput" class="auth__label">이메일</label> | |
| <div class="auth__input-wrapper"> | |
| <input class="auth__input-field auth__input-border--default" type="email" id="emailInput" aria-describedby="emailError" /> | |
| <div class="error-message" id="emailError"></div> | |
| </div> | |
| </div> | |
| <div class="auth__input-entry"> | |
| <label for="passwordInput" class="auth__label">비밀번호</label> | |
| <div class="auth__input-wrapper"> | |
| <div class="input-binder"> | |
| <input class="auth__input-field auth__input-border--default" type="password" id="passwordInput" aria-describedby="passwordError" /> | |
| <button type="button" class="password-visible-toggle" aria-label="Show password"> | |
| <i class="fa fa-eye fa-lg"></i> | |
| </button> | |
| </div> | |
| <div class="error-message" id="passwordError"></div> | |
| </div> | |
| </div> | |
| </div> |
|
수고하셨습니다 승렬님 ! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
미션 요구사항
Week3
기본 요구사항
3주차 부터는 Github에 PR(Pull Request)을 만들어 주세요. (참고: Github 가이드 문서 링크 필요)
Netlify에 파일 배포가 아닌 포크한 Github 레포지토리와 연결해 주세요.
피그마 디자인에 맞게 랜딩, 로그인, 회원가입 페이지 반응형 디자인을 만들어 주세요.
Github에 위클리 미션 PR을 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
심화 요구사항
랜딩 페이지, 제품 소개 영역의 mobile 사이즈에서만 제목, 이미지, 설명 순서대로 배치해 주세요.
사이트 링크: https://sprint-weekly-mission-srb.netlify.app/
지난번과는 달리 이번에는 github 레포지토리와 연결해서 사이트 배포함.
Week 4
기본
이메일 input에서 focus out 할 때, 값이 없을 경우 아래에 “이메일을 입력해 주세요.” 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 아래에 “올바른 이메일 주소가 아닙니다.” 에러 메세지를 보입니다.
이메일: test@codeit.com, 비밀번호: codeit101 으로 로그인 시도할 경우, “/folder” 페이지로 이동합니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해 주세요.” 에러 메세지를 보입니다.
이외의 로그인 시도의 경우, 이메일 input 아래에 “이메일을 확인해 주세요.”, 비밀번호 input 아래에 “비밀번호를 확인해 주세요.” 에러 메세지를 보입니다.
input에 에러와 관련된 디자인은 좌측 상단의 Components 영역에 있는 디자인을 참고해 주세요.
로그인 버튼 클릭 또는 Enter키 입력으로 로그인 실행돼야 합니다
심화
눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.
주요 변경사항
-로그인 페이지 입력 유효성 검사
-로그인 페이지 에러메시지 구현
스크린샷
Week 5
기본
이메일 input에서 focus out 할 때, 값이 없을 경우 “이메일을 입력해주세요.” 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 “올바른 이메일 주소가 아닙니다.” 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, input 값이 test@codeit.com 일 경우, “이미 사용 중인 이메일입니다.” 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 에러 메세지를 보입니다.
비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않아요.” 에러 메세지를 보입니다.
회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 에러 메세지로 알립니다.
이외의 유효한 회원가입 시도의 경우, “/folder”로 이동합니다.
회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 실행돼야 합니다.
심화
눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.
로그인, 회원가입 페이지에 공통적으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용해 주세요.
주요 변경사항
회원가입 페이지 입력 유효성 검사
회원가입 페이지 에러메시지 구현
https://sprint-weekly-mission-srb.netlify.app/
멘토에게