[이은서] sprint4 #88
There are no files selected for viewing
This file contains hidden or 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
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,27 @@ | ||
| :root { | ||
| --gray900: #11827; | ||
| --gray800: #1f2937; | ||
| --gray700: #374151; | ||
| --gray600: #4b5563; | ||
| --gray500: #6b7280; | ||
| --gray400: #9ca3af; | ||
| --gray200: #e5e7eb; | ||
| --gray100: #f3f4f6; | ||
| --blue: #3692ff; | ||
| --red: #f74747; | ||
| --white: #ffffff; | ||
|
|
||
| --font-size-14: 0.875rem; | ||
| --font-size-16: 1rem; | ||
| --font-size-18: 1.125rem; | ||
| --font-size-20: 1.25rem; | ||
| --font-size-24: 1.5rem; | ||
| --font-size-32: 2rem; | ||
| --font-size-40: 2.5rem; | ||
|
|
||
| --clamp-24: clamp(1rem, 2.5vw, 1.5rem); | ||
| --clamp-40: clamp(1.8rem, 3.5vw, 2.5rem); | ||
|
|
||
| --nav-title: 25.63px; | ||
| --login-btn-padding: 11px 43px; | ||
| } |
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,76 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Login</title> | ||
| <link | ||
| rel="shortcut icon" | ||
| href="/images/pandaicon.png" | ||
| type="image/x-icon" | ||
| /> | ||
| <link rel="stylesheet" href="/common/reset.css" /> | ||
| <link rel="stylesheet" href="/common/variables.css" /> | ||
| <link rel="stylesheet" href="/common/common.css" /> | ||
| <link rel="stylesheet" href="/login/style.css" /> | ||
| </head> | ||
| <body> | ||
| <div class="content"> | ||
| <div class="title"> | ||
| <img class="logo" src="/images/pandaicon.png" alt="판다마켓로고" /> | ||
| <a href="/"><h1>판다마켓</h1></a> | ||
| </div> | ||
|
Comment on lines
+18
to
22
Collaborator
There was a problem hiding this comment. 
메인 페이지 헤더의 로고처럼, 로그인/회원가입 페이지의 판다마켓 아이콘도 함께 링크 영역으로 만들어서 동작의 일관성을 갖게하는 건 어떨까요? 
또한, 로고의 "판다마켓" 텍스트만 글꼴이 달라요. 로고만을 위해 글꼴을 다운받기 보다는, 로고(텍스트 + 아이콘) 자체를 다운받아서 사용하시는 것을 추천드려요! 또한, 이렇게 로고의 크기를 다양하게 사용해야 할 때는 이미지의 크기와 상관없이 이미지가 선명한 svg 포맷을 사용하시면 좋아요. 🙂 |
||
| <form id="LoginForm"> | ||
| <div class="email"> | ||
| <label for="email">이메일</label> | ||
| <input | ||
| id="email" | ||
| class="email-input" | ||
| name="email" | ||
| type="email" | ||
| placeholder="이메일을 입력해 주세요." | ||
| /> | ||
| <div id="email-error" class="error-message"></div> | ||
| </div> | ||
| <div class="pwd"> | ||
| <label for="password">비밀번호</label> | ||
| <div class="pwd-content"> | ||
| <input | ||
| id="password" | ||
| class="pwd-input" | ||
| name="password" | ||
| type="password" | ||
| placeholder="비밀번호를 입력해 주세요." | ||
| /> | ||
| <img | ||
| class="eye" | ||
| id="eyeIcon" | ||
| src="/images/btn_visibility_off.png" | ||
| /> | ||
| </div> | ||
| <div id="password-error" class="error-message"></div> | ||
| </div> | ||
| <button class="login-btn" type="submit" disabled>로그인</button> | ||
| </form> | ||
| <div class="section"> | ||
| <div class="simple-login"> | ||
| <h3>간편 로그인 하기</h3> | ||
| </div> | ||
| <div class="sns"> | ||
| <a href="https://www.google.com/" | ||
| ><img src="/images/google.png" alt="google" | ||
| /></a> | ||
| <a href="https://www.kakaocorp.com/page/" | ||
| ><img src="/images/kakao.png" alt="kakao" | ||
| /></a> | ||
| </div> | ||
| </div> | ||
| <div class="sign-up-message"> | ||
| <div class="message"> | ||
| 판다 마켓이 처음이신가요? <a href="/signup/">회원가입</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script type="module" src="/login/index.js"></script> | ||
| </body> | ||
| </html> | ||
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,71 @@ | ||||||||||||||||||||||
| import { | ||||||||||||||||||||||
| preventPasswordSpaces, | ||||||||||||||||||||||
| updateButtonState, | ||||||||||||||||||||||
| validateEmailInput, | ||||||||||||||||||||||
| validatePasswordInput, | ||||||||||||||||||||||
| togglePasswordVisiblity, | ||||||||||||||||||||||
| } from "../shared/form-utils.js"; | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| const emailInput = document.getElementById("email"); | ||||||||||||||||||||||
| const emailError = document.getElementById("email-error"); | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| const passwordInput = document.getElementById("password"); | ||||||||||||||||||||||
| const passwordError = document.getElementById("password-error"); | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| const loginBtn = document.querySelector(".login-btn"); | ||||||||||||||||||||||
| const loginForm = document.getElementById("LoginForm"); | ||||||||||||||||||||||
| const eyeIcon = document.getElementById("eyeIcon"); | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| function validateEmail() { | ||||||||||||||||||||||
| return validateEmailInput(emailInput, emailError); | ||||||||||||||||||||||
| } | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| function validatePassword() { | ||||||||||||||||||||||
| return validatePasswordInput(passwordInput, passwordError); | ||||||||||||||||||||||
| } | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| function eyeIconClickHandler() { | ||||||||||||||||||||||
| togglePasswordVisiblity(passwordInput, eyeIcon); | ||||||||||||||||||||||
| } | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| function updateLoginBtnState() { | ||||||||||||||||||||||
| return updateButtonState({ | ||||||||||||||||||||||
| inputs: [emailInput, passwordInput], | ||||||||||||||||||||||
| errors: [emailError, passwordError], | ||||||||||||||||||||||
| button: loginBtn, | ||||||||||||||||||||||
| }); | ||||||||||||||||||||||
| } | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| emailInput.addEventListener("blur", () => { | ||||||||||||||||||||||
| validateEmail(); | ||||||||||||||||||||||
| updateLoginBtnState(); | ||||||||||||||||||||||
| }); | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| passwordInput.addEventListener("blur", () => { | ||||||||||||||||||||||
| validatePassword(); | ||||||||||||||||||||||
| updateLoginBtnState(); | ||||||||||||||||||||||
| }); | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| emailInput.addEventListener("input", () => { | ||||||||||||||||||||||
| validateEmail(); | ||||||||||||||||||||||
| updateLoginBtnState(); | ||||||||||||||||||||||
| }); | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| passwordInput.addEventListener("input", () => { | ||||||||||||||||||||||
| validatePassword(); | ||||||||||||||||||||||
| updateLoginBtnState(); | ||||||||||||||||||||||
| }); | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| eyeIcon.addEventListener("click", () => { | ||||||||||||||||||||||
| eyeIconClickHandler(); | ||||||||||||||||||||||
| }); | ||||||||||||||||||||||
|
Comment on lines
+59
to
+61
Collaborator
There was a problem hiding this comment.
Suggested change
또는, 래핑 함수를 따로 만들지 않고, 리스너의 콜백에서 처리하는 방법도 있겠네요.
Suggested change
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| loginForm.addEventListener("submit", (e) => { | ||||||||||||||||||||||
| e.preventDefault(); | ||||||||||||||||||||||
| if (!loginBtn.disabled) { | ||||||||||||||||||||||
| window.location.href = "/items"; | ||||||||||||||||||||||
| } | ||||||||||||||||||||||
| }); | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| preventPasswordSpaces(passwordInput); | ||||||||||||||||||||||
| updateLoginBtnState(); // 초기 상태 업데이트 | ||||||||||||||||||||||
|
Collaborator
There was a problem hiding this comment. 이미 |
||||||||||||||||||||||
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
불필요한 속성은 최대한 줄여주시는 게 좋아요! 🙂
현재 클래스네임에는 해당 속성이 필요하지 않아요. 사용한 태그에는 보더 스타일이 적용되어 있지 않고,
text-decoration: none;은 이미 common.css 파일에 적용되어 있어요.