결제창 모듈화 진행

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,18 +94,18 @@ $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")) {
       $InputPointBtn.classList.remove("falsefocus");
     }
 
     if (pointFlag === false) {
-      payErrorStyle("보유한 포인트를 초과하였습니다");
+      payErrorStyle("보유한 포인트를 초과하였습니다", $InputPointBtn, $btnPay);
     } else if (isPhonNumPatten === false) {
       $inputPhonNum.classList.add("falsefocus");
       scrollToError($inputPhonNum);
@@ -135,29 +115,21 @@ $payBtn.addEventListener("click", async (event) => {
     } else if (
       payPointMessage === "입력하신 포인트가 결제 금액을 초과했습니다."
     ) {
-      payErrorStyle("입력하신 포인트가 결제 금액을 초과했습니다.");
+      payErrorStyle(
+        "입력하신 포인트가 결제 금액을 초과했습니다.",
+        $InputPointBtn,
+        $btnPay
+      );
     } else if (payPointMessage === "포인트가 부족합니다.") {
+
       payErrorStyle("포인트가 부족합니다.");
     } else if (!isValid) {
       return;
     } else if (payPointMessage === "보유하신 포인트가 부족합니다.") {
       payErrorStyle("보유하신 포인트가 부족합니다.")
     }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" });
-}

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,
+};

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; // 메시지 반환
+}

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" });
+}

src/main/webapp/WEB-INF/views/html/payment.jsp

@@ -14,8 +14,11 @@
   <link rel="stylesheet" href="/assets/css/footer.css"/>
   <link rel="icon" href="/assets/img/favicon.ico">
   <script src="/assets/js/category.js/" defer></script>
-  <script src="/assets/js/payment.js/" defer></script>
-
+  <script type="module" src="/assets/js/paymentElements.js" defer></script>
+  <script type="module" src="/assets/js/paymentFetch.js" defer></script>
+  <script type="module" src="/assets/js/paymentFunction.js" defer></script>
+  <script type="module" src="assets/js/payment.js" defer></script>
+
   <!-- 카카오 주소 검색 API 스크립트 -->
   <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
   <script>