[지라이슈없음] PIN CODE에서 주문완료 화면까지 로딩이미지에 문구 추가

- Please wait a moment. It may take more than 1 minute to process the order.

com.twin.app.shoptime/src/actions/checkoutActions.js

@@ -73,12 +73,20 @@ export const insertMyInfoCheckoutOrder =
         );
       }
 
-      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+      dispatch(
+        changeAppStatus({
+          showLoadingPanel: { show: false, showMessage: false },
+        })
+      );
     };
 
     const onFail = (error) => {
       console.error("insertMyInfoCheckoutOrder onFail: ", error);
-      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+      dispatch(
+        changeAppStatus({
+          showLoadingPanel: { show: false, showMessage: false },
+        })
+      );
     };
 
     TAxios(

com.twin.app.shoptime/src/actions/pinCodeActions.js

@@ -9,7 +9,9 @@ export const getMyInfoCardPincodeCheck =
     const { mbrNo, pinCd } = params;
 
     dispatch(
-      changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
+      changeAppStatus({
+        showLoadingPanel: { show: true, type: "wait", showMessage: true },
+      })
     );
 
     const onSuccess = (response) => {
@@ -21,7 +23,11 @@ export const getMyInfoCardPincodeCheck =
       });
 
       if (response.data.retCode !== 0) {
-        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+        dispatch(
+          changeAppStatus({
+            showLoadingPanel: { show: false, showMessage: false },
+          })
+        );
       }
 
       if (callback) {
@@ -31,7 +37,11 @@ export const getMyInfoCardPincodeCheck =
 
     const onFail = (error) => {
       console.error("getMyInfoCardPincodeCheck onFail ", error);
-      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+      dispatch(
+        changeAppStatus({
+          showLoadingPanel: { show: false, showMessage: false },
+        })
+      );
     };
 
     TAxios(

com.twin.app.shoptime/src/components/Loader/Loader.jsx

@@ -1,13 +1,27 @@
 import React from "react";
 
+import { useSelector } from "react-redux";
+
+import { $L } from "../../utils/helperMethods";
 import css from "./Loader.module.less";
 
 export default function Loader() {
+  const showMessage = useSelector(
+    (state) => state.common.appStatus.showLoadingPanel?.showMessage
+  );
+
   return (
     <div className={css.loaderContainer}>
       <div className={css.loaderBox}>
         <div className={css.loader}></div>
       </div>
+      {showMessage && (
+        <p className={css.loaderText}>
+          {$L(
+            "Please wait a moment. It may take more than 1 minute to process the order."
+          )}
+        </p>
+      )}
     </div>
   );
 }

com.twin.app.shoptime/src/components/Loader/Loader.module.less

@@ -1,3 +1,5 @@
+@import "../../style/CommonStyle.module.less";
+
 .loaderContainer {
   width: 100%;
   height: 100%;
@@ -13,7 +15,7 @@
   > .loaderBox {
     display: inline-block;
     width: 220px;
-    height: 220px;
+    height: 300px;
     z-index: 3;
     > .loader {
       font-size: 30px;
@@ -27,6 +29,18 @@
       animation: mulShdSpin 1.2s infinite ease;
     }
   }
+  .loaderText {
+    color: @PRIMARY_COLOR_RED; // 검은색으로 변경
+    font-size: 24px; // 폰트 크기 약간 키움
+    text-align: center;
+    font-family: "LG Smart UI";
+    white-space: pre-wrap; // 긴 텍스트 줄바꿈 처리
+    word-break: keep-all; // 단어 단위로 줄바꿈
+    line-height: 1.4; // 줄간격 조정
+    max-width: 100%; // 텍스트가 너무 길게 늘어나지 않도록
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 @-webkit-keyframes mulShdSpin {