[임상훈] week6 #251
There are no files selected for viewing
Binary file not shown.
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,165 @@ | ||
| import { | ||
| setInputError, | ||
| removeInputError, | ||
| isEmailValid, | ||
| isPasswordValid, | ||
| togglePassword, | ||
| TEST_USER, | ||
| } from "./utils.js"; | ||
|
|
||
| const emailInput = document.querySelector("#email"); | ||
| const emailErrorMessage = document.querySelector("#email-error-message"); | ||
| emailInput.addEventListener("focusout", (event) => | ||
| validateEmailInput(event.target.value) | ||
| ); | ||
| function validateEmailInput(email) { | ||
| if (email === "") { | ||
| setInputError( | ||
| { input: emailInput, errorMessage: emailErrorMessage }, | ||
| "이메일을 입력해주세요." | ||
| ); | ||
| return; | ||
| } | ||
|
|
||
| fetch("https://bootcamp-api.codeit.kr/api/check-email", { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: JSON.stringify({ email: email }), // 수정됨 | ||
| }) | ||
| .then((response) => response.json()) // 응답을 JSON으로 파싱 | ||
| .then((data) => { | ||
| if (data.isAvailable) { | ||
| // 가정: 응답에 isAvailable 필드가 있다고 가정 | ||
| removeInputError({ | ||
| input: emailInput, | ||
| errorMessage: emailErrorMessage, | ||
| }); | ||
| } else { | ||
| setInputError( | ||
| { input: emailInput, errorMessage: emailErrorMessage }, | ||
| "이미 사용 중인 이메일입니다." | ||
| ); | ||
| } | ||
| }) | ||
| .catch((error) => { | ||
| console.error("Error checking email:", error); | ||
| setInputError( | ||
| { input: emailInput, errorMessage: emailErrorMessage }, | ||
| "이메일 확인 중 오류가 발생했습니다." | ||
| ); | ||
| }); | ||
|
Comment on lines
+24
to
+52
There was a problem hiding this comment.
|
||
| } | ||
|
|
||
| const passwordInput = document.querySelector("#password"); | ||
| const passwordErrorMessage = document.querySelector("#password-error-message"); | ||
| passwordInput.addEventListener("focusout", (event) => | ||
| validatePasswordInput(event.target.value) | ||
| ); | ||
|
|
||
| function validatePasswordInput(password) { | ||
| if (password === "" || !isPasswordValid(password)) { | ||
| setInputError( | ||
| { input: passwordInput, errorMessage: passwordErrorMessage }, | ||
| "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요." | ||
| ); | ||
| return false; | ||
| } | ||
| removeInputError({ | ||
| input: passwordInput, | ||
| errorMessage: passwordErrorMessage, | ||
| }); | ||
| return true; | ||
| } | ||
|
Comment on lines
+61
to
+74
There was a problem hiding this comment. validation과 ui controlling을 함꼐하고 있네요. 조금 더 분리시킬 수 있으면 좋겠어요! |
||
|
|
||
| const confirmPasswordInput = document.querySelector("#confirm-password"); | ||
| const confirmPasswordErrorMessage = document.querySelector( | ||
| "#confirm-password-error-message" | ||
| ); | ||
| confirmPasswordInput.addEventListener("focusout", (event) => | ||
| validateConfirmPasswordInput(event.target.value) | ||
| ); | ||
| function validateConfirmPasswordInput(confirmPassword) { | ||
| if (confirmPassword === "" || !isPasswordValid(confirmPassword)) { | ||
| setInputError( | ||
| { | ||
| input: confirmPasswordInput, | ||
| errorMessage: confirmPasswordErrorMessage, | ||
| }, | ||
| "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요." | ||
| ); | ||
| return false; | ||
| } | ||
| if (passwordInput.value !== confirmPassword) { | ||
| setInputError( | ||
| { | ||
| input: confirmPasswordInput, | ||
| errorMessage: confirmPasswordErrorMessage, | ||
| }, | ||
| "비밀번호가 일치하지 않아요." | ||
| ); | ||
| return false; | ||
| } | ||
| removeInputError({ | ||
| input: confirmPasswordInput, | ||
| errorMessage: confirmPasswordErrorMessage, | ||
| }); | ||
| return true; | ||
| } | ||
|
|
||
| const passwordToggleButton = document.querySelector("#password-toggle"); | ||
| passwordToggleButton.addEventListener("click", () => | ||
| togglePassword(passwordInput, passwordToggleButton) | ||
| ); | ||
|
|
||
| const confirmPasswordToggleButton = document.querySelector( | ||
| "#confirm-password-toggle" | ||
| ); | ||
| confirmPasswordToggleButton.addEventListener("click", () => | ||
| togglePassword(confirmPasswordInput, confirmPasswordToggleButton) | ||
| ); | ||
|
|
||
| const signForm = document.querySelector("#form"); | ||
| signForm.addEventListener("submit", submitForm); | ||
| function submitForm(event) { | ||
| event.preventDefault(); | ||
|
|
||
| const isEmailInputValid = validateEmailInput(emailInput.value); | ||
| const isPasswordInputValid = validatePasswordInput(passwordInput.value); | ||
| const isConfirmPasswordInputValid = validateConfirmPasswordInput( | ||
| confirmPasswordInput.value | ||
| ); | ||
|
|
||
| if ( | ||
| isEmailInputValid && | ||
| isPasswordInputValid && | ||
| isConfirmPasswordInputValid | ||
|
Comment on lines
+135
to
+137
There was a problem hiding this comment. 이렇게 뭉뜽그려 validation를 체크하게 되면, 어떤 요소로 인해 회원가입이 실패했는지 확인하기 어렵습니다. |
||
| ) { | ||
| fetch("https://bootcamp-api.codeit.kr/api/sign-up", { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: JSON.stringify({ | ||
| email: emailInput.value, | ||
| password: passwordInput.value, | ||
| }), | ||
| }) | ||
| .then((response) => { | ||
| if (response.ok) { | ||
| window.location.href = "/folder"; | ||
| } else { | ||
| throw new Error("Server responded with an error!"); | ||
| } | ||
| }) | ||
| .catch((error) => { | ||
| console.error(error); | ||
| setInputError( | ||
| { input: emailInput, errorMessage: emailErrorMessage }, | ||
| "오류가 발생했습니다. 다시 시도해주세요." | ||
| ); | ||
| }); | ||
| } | ||
| location.href = "/folder"; | ||
|
Comment on lines
+139
to
+164
There was a problem hiding this comment. 이렇게 구현하면 fetch, then then catch등이 실행되고 난 후에 location.href가 실행되는 순서가 보장되나요? |
||
| } | ||
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
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.
@jose0229
submitForm은 사실 submit 이벤트가 발생되면 어떻게 처리할지를 정의해주는 함수이죠? 따라서submitForm이라는 네임보다는onFormSubmit또는handleFormSubmit이라는 함수 이름이 더 좋아보입니다