[윤효준] Sprint2 #38
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
|
Collaborator
There was a problem hiding this comment. 벡터 이미지는
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,11 +1,50 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <!--pretendard 폰트--> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"> | ||
| <link rel="stylesheet" href="/src/styles/reset.css"> | ||
| <link rel="stylesheet" href="/src/styles/global.css"> | ||
| <link rel="stylesheet" href="/src/styles/pages/login.css"> | ||
| <title>login</title> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <a href="/index.html"> | ||
| <img src="/src/assets/icons/panda-market-logo.svg" alt="판다 마켓 로고" class="logo"> | ||
| </a> | ||
| <div class="content-wrapper"> | ||
| <div class="form-structure"> | ||
| <label for="email" class="form-label">이메일</label> | ||
| <input id="email" class="form-input" type="email" placeholder="이메일을 입력해주세요"> | ||
|
Comment on lines
+20
to
+21
Collaborator
There was a problem hiding this comment. 굿굿 ! 라벨과 인풋이 적절히 작성되었군요 !!
Collaborator
There was a problem hiding this comment.
|
||
| </div> | ||
| <div class="form-structure"> | ||
| <label for="password" class="form-label">비밀번호</label> | ||
| <div class="input-wrapper"> | ||
| <input id="password" class="form-input" type="password" placeholder="비밀번호를 입력해주세요"> | ||
| <img class="input-icon" src="/src/assets/icons/visibility_on_btn.svg" alt="비밀번호 보기"> | ||
| </div> | ||
| </div> | ||
| <button class="primary-button login-button" disabled>로그인</button> | ||
| <div class="social-login"> | ||
| <p>간편 로그인하기</p> | ||
| <ul class="icon-list"> | ||
| <a href="https://www.google.com" class="circle white-background"> | ||
| <img class="google-icon" src="/src/assets/icons/google_icon.png" alt="구글 로그인"> | ||
| </a> | ||
| <a href="https://www.kakaocorp.com/page/" class="circle kakao-background"> | ||
| <img class="kakao-icon" src="/src/assets/icons/kakaotalk_icon.png" alt="카카오 로그인"> | ||
| </a> | ||
| </ul> | ||
| </div> | ||
| <div class="signup-prompt"> | ||
| <span>판다마켓이 처음이신가요?</span> | ||
| <a href="/src/pages/signup.html">회원가입</a> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| <script type="module" src="/src/scripts/pages/login.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,61 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <!--pretendard 폰트--> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"> | ||
| <link rel="stylesheet" href="/src/styles/reset.css"> | ||
| <link rel="stylesheet" href="/src/styles/global.css"> | ||
| <link rel="stylesheet" href="/src/styles/pages/signup.css"> | ||
| <title>signup</title> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <a href="/index.html"> | ||
| <img src="/src/assets/icons/panda-market-logo.svg" alt="판다 마켓 로고" class="logo"> | ||
| </a> | ||
| <div class="content-wrapper"> | ||
| <div class="form-structure"> | ||
| <label for="email" class="form-label">이메일</label> | ||
| <input id="email" class="form-input" type="email" placeholder="이메일을 입력해주세요"> | ||
| </div> | ||
| <div class="form-structure"> | ||
| <label for="nickname" class="form-label">닉네임</label> | ||
| <input id="nickname" class="form-input" type="text" placeholder="닉네임을 입력해주세요"> | ||
| </div> | ||
| <div class="form-structure"> | ||
| <label for="password" class="form-label">비밀번호</label> | ||
| <div class="input-wrapper"> | ||
| <input id="password" class="form-input" type="password" placeholder="비밀번호를 입력해주세요"> | ||
| <img class="input-icon" src="/src/assets/icons/visibility_on_btn.svg" alt="비밀번호 보기"> | ||
| </div> | ||
| </div> | ||
| <div class="form-structure"> | ||
| <label for="password" class="form-label">비밀번호 확인</label> | ||
| <div class="input-wrapper"> | ||
| <input id="password" class="form-input" type="password" placeholder="비밀번호를 입력해주세요"> | ||
| <img class="input-icon" src="/src/assets/icons/visibility_on_btn.svg" alt="비밀번호 보기"> | ||
| </div> | ||
| </div> | ||
| <button class="primary-button login-button" disabled>회원가입</button> | ||
| <div class="social-login"> | ||
| <p>간편 로그인하기</p> | ||
| <ul class="icon-list"> | ||
| <a href="https://www.google.com" class="circle white-background"> | ||
| <img class="google-icon" src="/src/assets/icons/google_icon.png" alt="구글 로그인"> | ||
| </a> | ||
| <a href="https://www.kakaocorp.com/page/" class="circle kakao-background"> | ||
| <img class="kakao-icon" src="/src/assets/icons/kakaotalk_icon.png" alt="카카오 로그인"> | ||
| </a> | ||
| </ul> | ||
| </div> | ||
| <div class="login-prompt"> | ||
| <span>이미 회원이신가요?</span> | ||
| <a href="/src/pages/login.html">로그인</a> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| <script type="module" src="/src/scripts/pages/signup.js"></script> | ||
| </body> | ||
| </html> |
|
Collaborator
There was a problem hiding this comment. (의견)
|
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,49 @@ | ||||||||||||||||||||||||||||||||||||||||||||
| export function setVisibilityToggle(inputWrapperSelector) { | ||||||||||||||||||||||||||||||||||||||||||||
| const inputWrapperList = document.querySelectorAll(inputWrapperSelector); | ||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||
| inputWrapperList.forEach((wrapper) => { | ||||||||||||||||||||||||||||||||||||||||||||
| wrapper.addEventListener("click", event => { | ||||||||||||||||||||||||||||||||||||||||||||
| const target = event.target; | ||||||||||||||||||||||||||||||||||||||||||||
| if(target.classList.contains("input-icon")) { | ||||||||||||||||||||||||||||||||||||||||||||
| const input = wrapper.querySelector("input"); | ||||||||||||||||||||||||||||||||||||||||||||
| const icon = target; | ||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||
| if (input.type === "password") | ||||||||||||||||||||||||||||||||||||||||||||
| { | ||||||||||||||||||||||||||||||||||||||||||||
| input.type = "text"; | ||||||||||||||||||||||||||||||||||||||||||||
| icon.src = "/src/assets/icons/visibility_off_btn.svg"; | ||||||||||||||||||||||||||||||||||||||||||||
| icon.alt = "비밀번호 숨기기"; | ||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||
| else | ||||||||||||||||||||||||||||||||||||||||||||
| { | ||||||||||||||||||||||||||||||||||||||||||||
| input.type = "password"; | ||||||||||||||||||||||||||||||||||||||||||||
| icon.src = "/src/assets/icons/visibility_on_btn.svg"; | ||||||||||||||||||||||||||||||||||||||||||||
| icon.alt = "비밀번호 보기"; | ||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+11
to
+22
Collaborator
There was a problem hiding this comment. Guard Clause 패턴을 사용해볼까요?:
Suggested change
Guard Clause을 사용하게 되면 조건부를 조기에 처리할 수 있게 되어 핵심 로직을 구분할 수 있다는 장점이 있습니다. 따라서 가독성을 향상시킬 수 있어요. 또한, 미리 조건에 따라서 데이터의 범위를 좁힐 수 있기에 핵심 로직에서는 보장받은 데이터를 편리하게 사용할 수 있다는 장점도 있어요 😊 Guard Clause ?다음과 같이 조기에 함수를 끝내는 기법을 의미합니다: function calculateDiscount(price, discountRate) {
// Guard Clause: 가격이나 할인율이 유효하지 않으면 함수 종료
if (price <= 0 || discountRate <= 0 || discountRate > 1) {
console.error("Invalid price or discount rate");
return;
}
// 할인된 가격 계산
const discountedPrice = price * (1 - discountRate);
return discountedPrice;
}
Collaborator
Author
There was a problem hiding this comment. 제가 Guard Clause 패턴 사용을 권하신 이유에 대해 이해가 덜 된 거 같아 코멘트 남깁니다!
Collaborator
There was a problem hiding this comment. 지금처럼 if (input.type === "password") { ... }
else if (input.type === "email") { ... }
else if (input.type === "tel") { ... }
else if (input.type === "number") {
if (number < 18) { ... }
if (number > 24) { ... }
}
else { ... }위와 같이 복잡한 |
||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||
| }) | ||||||||||||||||||||||||||||||||||||||||||||
| }) | ||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||
| export function setButtonDisable(parent, buttonClass) { | ||||||||||||||||||||||||||||||||||||||||||||
| const button = parent.querySelector(buttonClass); | ||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||
| // 초기 상태 및 입력값 검증 함수 | ||||||||||||||||||||||||||||||||||||||||||||
| function validateInputs() { | ||||||||||||||||||||||||||||||||||||||||||||
| const inputs = parent.querySelectorAll("input"); | ||||||||||||||||||||||||||||||||||||||||||||
| const allFilled = Array.from(inputs).every(input => input.value.trim() !== ""); | ||||||||||||||||||||||||||||||||||||||||||||
| button.disabled = !allFilled; | ||||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+34
to
+35
Collaborator
There was a problem hiding this comment. 굿굿 ! 조건부를 그대로 사용하지 않고 이름을 붙였군요 !조건에 이름을 붙임으로서 가독성이 좋습니다 ! 👍👍 |
||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||
| /* | ||||||||||||||||||||||||||||||||||||||||||||
| 초기 상태에 button을 disabled로 설정하였으나 | ||||||||||||||||||||||||||||||||||||||||||||
| 안전성과 일관성을 위해 호출 | ||||||||||||||||||||||||||||||||||||||||||||
| */ | ||||||||||||||||||||||||||||||||||||||||||||
| validateInputs(); | ||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||
| parent.addEventListener("input", (event) => { | ||||||||||||||||||||||||||||||||||||||||||||
| if (event.target.tagName === "INPUT") { | ||||||||||||||||||||||||||||||||||||||||||||
| validateInputs(); | ||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||
| }); | ||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||
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,6 @@ | ||
| import { setVisibilityToggle, setButtonDisable } from "/src/scripts/global.js"; | ||
|
|
||
| setVisibilityToggle(".input-wrapper"); | ||
|
|
||
| const contentWrapper = document.querySelector(".content-wrapper"); | ||
| setButtonDisable(contentWrapper, ".primary-button"); |
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,6 @@ | ||
| import { setVisibilityToggle, setButtonDisable } from "/src/scripts/global.js"; | ||
|
|
||
| setVisibilityToggle(".input-wrapper"); | ||
|
|
||
| const contentWrapper = document.querySelector(".content-wrapper"); | ||
| setButtonDisable(contentWrapper, ".primary-button"); |
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
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.
굿굿 ! 파일명에 띄어쓰기, 한글이 없어졌군요. 👍