From b181e254268f75578f0e5dce989d4ad7adc19b40 Mon Sep 17 00:00:00 2001 From: yaejin12 Date: Tue, 1 Oct 2024 18:37:48 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B2=B0=EC=A0=9C=EC=B0=BD=20=EB=AA=A8?= =?UTF-8?q?=EB=93=88=ED=99=94=20=EC=A7=84=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/static/assets/js/payment.js | 72 ++++++------------- .../static/assets/js/paymentElements.js | 23 ++++++ .../static/assets/js/paymentFetch.js | 15 ++++ .../static/assets/js/paymentFunction.js | 13 ++++ .../webapp/WEB-INF/views/html/payment.jsp | 7 +- 5 files changed, 77 insertions(+), 53 deletions(-) create mode 100644 src/main/resources/static/assets/js/paymentElements.js create mode 100644 src/main/resources/static/assets/js/paymentFetch.js create mode 100644 src/main/resources/static/assets/js/paymentFunction.js diff --git a/src/main/resources/static/assets/js/payment.js b/src/main/resources/static/assets/js/payment.js index 01f0a0a..66112ac 100644 --- a/src/main/resources/static/assets/js/payment.js +++ b/src/main/resources/static/assets/js/payment.js @@ -1,41 +1,21 @@ -//====================== 변수 -const $inputPhonNum = document.querySelector(".receiver-phone"); -const $PointBtn = document.querySelector(".btn-point"); -const $InputPointBtn = document.querySelector(".usesPoint"); -const $pointInfo = document.querySelector(".user-point-info"); -const $btnPay = document.querySelector(".btn-pay"); -const totalOrderPrice = document.querySelector(".total-price").innerHTML; -const requiredFields = document.querySelectorAll("[required]"); -console.log(requiredFields); - -const $payBtn = document.querySelector(".btn-pay"); -const numPatten = /^[0-9]*$/; +import { + $inputPhonNum, + $InputPointBtn, + $btnPay, + totalOrderPrice, + requiredFields, + $payBtn, + numPatten, +} from "./paymentElements.js"; +import { fetchPayPoint, fetchPoint } from "./paymentFetch.js"; +import { payErrorStyle, scrollToError } from "./paymentFunction.js"; + let pointFlag = false; //입력값 검증 let IsInput = false; let InputPlaceholder = $InputPointBtn.placeholder; -console.log(InputPlaceholder); - -//====================== 비동기 fetch - -//포인트 사용 검증 -async function fetchPoint(InputValue) { - const res = await fetch(`/checkPoint?point=${InputValue}`); - const flag = await res.json(); - pointFlag = flag; - console.log(flag); -} - -//결제 검증 -async function fetchPayPoint(InputValue) { - const res = await fetch(`/payPoint?point=${InputValue}`); - const message = await res.json(); - return message.message; // 메시지 반환 -} - -// ====================== 결제 창 활성화 //====================== 이벤트 @@ -114,10 +94,10 @@ $payBtn.addEventListener("click", async (event) => { // 패턴 체크 if (InputValue === "") { - payErrorStyle("포인트를 입력하세요"); + payErrorStyle("포인트를 입력하세요", $InputPointBtn, $btnPay); } else if (!numPatten.test(InputValue)) { $InputPointBtn.classList.add("falsefocus"); - payErrorStyle("올바른 형식으로 입력부탁드립니다."); + payErrorStyle("올바른 형식으로 입력부탁드립니다.", $InputPointBtn, $btnPay); } else { // 입력 값이 유효한 경우 falsefocus 클래스를 제거합니다. if ($InputPointBtn.classList.contains("falsefocus")) { @@ -125,7 +105,7 @@ $payBtn.addEventListener("click", async (event) => { } if (pointFlag === false) { - payErrorStyle("보유한 포인트를 초과하였습니다"); + payErrorStyle("보유한 포인트를 초과하였습니다", $InputPointBtn, $btnPay); } else if (isPhonNumPatten === false) { $inputPhonNum.classList.add("falsefocus"); scrollToError($inputPhonNum); @@ -135,26 +115,16 @@ $payBtn.addEventListener("click", async (event) => { } else if ( payPointMessage === "입력하신 포인트가 결제 금액을 초과했습니다." ) { - payErrorStyle("입력하신 포인트가 결제 금액을 초과했습니다."); + payErrorStyle( + "입력하신 포인트가 결제 금액을 초과했습니다.", + $InputPointBtn, + $btnPay + ); } else if (payPointMessage === "포인트가 부족합니다.") { - payErrorStyle("포인트가 부족합니다."); + payErrorStyle("포인트가 부족합니다.", $InputPointBtn, $btnPay); } else if (isValid === false) { } else { document.querySelector(".form-pay").submit(); } } }); - -//====================== 함수 - -//결제부분 에러 함수 -const payErrorStyle = (text) => { - $InputPointBtn.classList.add("falsefocus"); - $InputPointBtn.value = ""; - $InputPointBtn.placeholder = text; - $btnPay.type = "button"; -}; - -function scrollToError(errorDiv) { - errorDiv.scrollIntoView({ behavior: "smooth", block: "center" }); -} diff --git a/src/main/resources/static/assets/js/paymentElements.js b/src/main/resources/static/assets/js/paymentElements.js new file mode 100644 index 0000000..ab7c546 --- /dev/null +++ b/src/main/resources/static/assets/js/paymentElements.js @@ -0,0 +1,23 @@ +//====================== 변수 +const $inputPhonNum = document.querySelector(".receiver-phone"); +const $PointBtn = document.querySelector(".btn-point"); +const $InputPointBtn = document.querySelector(".usesPoint"); +const $pointInfo = document.querySelector(".user-point-info"); +const $btnPay = document.querySelector(".btn-pay"); +const totalOrderPrice = document.querySelector(".total-price").innerHTML; +const requiredFields = document.querySelectorAll("[required]"); + +const $payBtn = document.querySelector(".btn-pay"); +const numPatten = /^[0-9]*$/; + +export { + $inputPhonNum, + $PointBtn, + $InputPointBtn, + $pointInfo, + $btnPay, + totalOrderPrice, + requiredFields, + $payBtn, + numPatten, +}; diff --git a/src/main/resources/static/assets/js/paymentFetch.js b/src/main/resources/static/assets/js/paymentFetch.js new file mode 100644 index 0000000..8b9e595 --- /dev/null +++ b/src/main/resources/static/assets/js/paymentFetch.js @@ -0,0 +1,15 @@ + +//포인트 사용 검증 +export async function fetchPoint(InputValue) { + const res = await fetch(`/checkPoint?point=${InputValue}`); + const flag = await res.json(); + return flag; + +} + +//결제 검증 +export async function fetchPayPoint(InputValue) { + const res = await fetch(`/payPoint?point=${InputValue}`); + const message = await res.json(); + return message.message; // 메시지 반환 +} diff --git a/src/main/resources/static/assets/js/paymentFunction.js b/src/main/resources/static/assets/js/paymentFunction.js new file mode 100644 index 0000000..d91a064 --- /dev/null +++ b/src/main/resources/static/assets/js/paymentFunction.js @@ -0,0 +1,13 @@ +//====================== 함수 + +//결제부분 에러 함수 +export const payErrorStyle = (text, $InputPointBtn, $btnPay) => { + $InputPointBtn.classList.add("falsefocus"); + $InputPointBtn.value = ""; + $InputPointBtn.placeholder = text; + $btnPay.type = "button"; +}; + +export function scrollToError(errorDiv) { + errorDiv.scrollIntoView({ behavior: "smooth", block: "center" }); +} diff --git a/src/main/webapp/WEB-INF/views/html/payment.jsp b/src/main/webapp/WEB-INF/views/html/payment.jsp index 297eb42..af567ae 100644 --- a/src/main/webapp/WEB-INF/views/html/payment.jsp +++ b/src/main/webapp/WEB-INF/views/html/payment.jsp @@ -14,8 +14,11 @@ - - + + + + +