[유경민] sprint4 #86
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| { | ||
| "arrowParens": "always", | ||
| "bracketSameLine": false, | ||
| "objectWrap": "preserve", | ||
| "bracketSpacing": true, | ||
| "semi": true, | ||
| "experimentalOperatorPosition": "end", | ||
| "experimentalTernaries": false, | ||
| "singleQuote": true, | ||
| "jsxSingleQuote": false, | ||
| "quoteProps": "as-needed", | ||
| "trailingComma": "all", | ||
| "singleAttributePerLine": false, | ||
| "htmlWhitespaceSensitivity": "css", | ||
| "vueIndentScriptAndStyle": false, | ||
| "proseWrap": "preserve", | ||
| "insertPragma": false, | ||
| "printWidth": 80, | ||
| "requirePragma": false, | ||
| "tabWidth": 2, | ||
| "useTabs": false, | ||
| "embeddedLanguageFormatting": "auto" | ||
| } |
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
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
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
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,12 +1,83 @@ | ||
| function inputPassword(inputId, eyeId) { | ||
| const passwordInput = document.getElementById(inputId); | ||
| const eyeIcon = document.getElementById(eyeId); | ||
|
|
||
| if (passwordInput.type === 'password') { | ||
| passwordInput.type = 'text'; | ||
| eyeIcon.src = 'images/eye-on.svg'; | ||
| } else { | ||
| passwordInput.type = 'password'; | ||
| eyeIcon.src = 'images/eye-off.svg'; | ||
| } | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function () { | ||
|
Collaborator
There was a problem hiding this comment. 굿굿 ! 적절한 이벤트 리스너네요 👍이렇게 되면 DOM이 로드가 된 후 순서를 보장할 수 있으며, 글로벌 스코프를 방지할 수 있겠어요 |
||
| const emailInput = document.getElementById('email'); | ||
| const emailError = document.getElementById('email-error'); | ||
| const passwordInput = document.getElementById('password'); | ||
| const passwordError = document.getElementById('password-error'); | ||
| const loginButton = document.getElementById('login-button'); | ||
|
|
||
| function validateEmail(email) { | ||
| const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; | ||
| return emailRegex.test(email); | ||
| } | ||
|
Comment on lines
+21
to
+24
Collaborator
There was a problem hiding this comment. 크으 ~ 순수 함수를 구현하시다니 👍해당 함수는 입력값(email)이 같으면 언제나 같은 결과(true/false)를 반환하고 외부 상태에 영향을 주거나 의존하지도 않아요. 이러한 구조는 테스트하기도 쉽고, 예측 가능한 코드 작성에 도움이 되는 좋은 패턴입니다. |
||
|
|
||
| function updateButtonState() { | ||
| const emailValue = emailInput.value.trim(); | ||
| const passwordValue = passwordInput.value.trim(); | ||
| const emailValid = emailValue !== '' && validateEmail(emailValue); | ||
| const passwordValid = passwordValue !== '' && passwordValue.length >= 8; | ||
| if (emailValid && passwordValid) { | ||
|
Comment on lines
+27
to
+31
Collaborator
There was a problem hiding this comment. 별칭을 작성해서 가독성을 높이셨군요 ! 깔끔합니다!
다만 보통 |
||
| loginButton.disabled = false; | ||
| loginButton.classList.add('enabled'); | ||
| } else { | ||
| loginButton.disabled = true; | ||
| loginButton.classList.remove('enabled'); | ||
| } | ||
| } | ||
|
|
||
| emailInput.addEventListener('input', function () { | ||
| const value = emailInput.value.trim(); | ||
| if (value === '') { | ||
| emailInput.classList.add('error-input'); | ||
| emailError.textContent = '이메일을 입력해주세요.'; | ||
| emailError.style.display = 'block'; | ||
| } else if (!validateEmail(value)) { | ||
| emailInput.classList.add('error-input'); | ||
| emailError.textContent = '잘못된 이메일 형식입니다.'; | ||
| emailError.style.display = 'block'; | ||
| } else { | ||
| emailInput.classList.remove('error-input'); | ||
| emailError.textContent = ''; | ||
| emailError.style.display = 'none'; | ||
| } | ||
| updateButtonState(); | ||
| }); | ||
|
|
||
| passwordInput.addEventListener('input', function () { | ||
| const value = passwordInput.value.trim(); | ||
| if (value === '') { | ||
| passwordInput.classList.add('error-input'); | ||
| passwordError.textContent = '비밀번호를 입력해주세요.'; | ||
| passwordError.style.display = 'block'; | ||
| } else if (value.length < 8) { | ||
| passwordInput.classList.add('error-input'); | ||
| passwordError.textContent = '비밀번호를 8자 이상 입력해주세요.'; | ||
| passwordError.style.display = 'block'; | ||
| } else { | ||
| passwordInput.classList.remove('error-input'); | ||
| passwordError.textContent = ''; | ||
| passwordError.style.display = 'none'; | ||
| } | ||
| updateButtonState(); | ||
| }); | ||
|
|
||
| loginButton.addEventListener('click', function () { | ||
| if (!this.disabled) { | ||
| window.location.href = '/items'; | ||
| } | ||
| }); | ||
|
|
||
| updateButtonState(); | ||
| }); | ||
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.
(제안) 만약 스타일 선택자 목적이라면 태그보다는
class를 선택자로 사용하는게 어떨까요?클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면
class를 추천드려요 !좀 더 자세히 🤔
유지보수가 어려워질 수 있어요.
특정
p태그에만 다른 스타일을 적용하려면 추가적인 선택자를 작성하거나 기존 스타일을 덮어써야 하므로 유지보수가 어려워집니다.태그 의미를 명확히 부여하기 어려워요.
스타일링을 태그에 직접 적용하면, 태그가 어떤 의미를 가지는지 어렵기에 가독성이 보다 좋지 못할 수 있어요.
물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.
예를 들어서
p의 기본 마진을 없애고 싶다면 다음과 같이 작성할 수 있을거예요:그렇지만 특정 스타일을 지정하고 싶다면 다음과 같이 작성해볼 수 있어요: