[SHOPTIME-3813 ShopTime 주문결제 시나리오_테스트] PinCode Input 디자인 변경

com.twin.app.shoptime/src/views/CheckOutPanel/components/PinCodeInput.jsx

@@ -28,6 +28,7 @@ import {
   resetPanels,
 } from '../../../actions/panelActions';
 import { getMyInfoCardPincodeCheck } from '../../../actions/pinCodeActions';
+import CustomImage from '../../../components/CustomImage/CustomImage';
 import TButton from '../../../components/TButton/TButton';
 import TPopUp from '../../../components/TPopUp/TPopUp';
 import TQRCode from '../../../components/TQRCode/TQRCode';
@@ -42,7 +43,7 @@ import css from './PinCodeInput.module.less';
 
 const PinCodeContainer = SpotlightContainerDecorator("div");
 const PinCodeDigitsContainer = SpotlightContainerDecorator(
-  { enterTo: null },
+  { enterTo: "default-element" },
   "div"
 );
 
@@ -171,10 +172,15 @@ export default function PinCodeInput({
     }
   }, [pin]);
 
-  const onClickCancel = useCallback(() => {
+  const onClickBack = useCallback(() => {
     setPin(["", "", "", ""]);
     setPlaceOrderPopup(false);
-  }, [setPlaceOrderPopup]);
+  }, []);
+
+  const onClickForgetPinCode = useCallback(() => {
+    setPin(["", "", "", ""]);
+    dispatch(setShowPopup(Config.ACTIVE_POPUP.qrPopup2));
+  }, [dispatch]);
 
   const onClickConfirm = useCallback(() => {
     if (pin.includes("")) {
@@ -283,13 +289,23 @@ export default function PinCodeInput({
     setTimeout(() => Spotlight.focus("initFocusDigit"), 10);
   }, [dispatch]);
 
+  useEffect(() => {
+    Spotlight.focus("initFocusDigit");
+  }, []);
+
   return (
     <>
       <PinCodeContainer
         spotlightId={SpotlightIds.PINCODE_CONTAINER}
         className={css.pinCodeContainer}
       >
-        <h1 className={css.pinCodeTitle}>{$L("Enter PIN CODE")}</h1>
+        <div className={css.headerContainer}>
+          <SpottableButton className={css.backBtn} onClick={onClickBack}>
+            <div className={css.arrowBtn} />
+            <span className={css.backText}>{$L("Back")}</span>
+          </SpottableButton>
+          <h1 className={css.pinCodeTitle}>{$L("PIN Code")}</h1>
+        </div>
         <div className={css.pinCodeBoxes}>
           {pin.map((digit, index) => (
             <div
@@ -304,7 +320,7 @@ export default function PinCodeInput({
           ))}
         </div>
         <div className={css.errMsg}>{errorMsg}</div>
-        <div className={css.pinCodeDigits}>
+        <PinCodeDigitsContainer className={css.pinCodeDigits}>
           {[...Array(10).keys()].map((digit) => (
             <SpottableButton
               key={digit}
@@ -319,10 +335,10 @@ export default function PinCodeInput({
             className={classNames(css.pinCodeDigit, css.deleteKey)}
             onClick={handleBackspace}
           />
-        </div>
+        </PinCodeDigitsContainer>
         <div className={css.buttonContainer}>
-          <TButton onClick={onClickCancel} className={css.cancelBtn}>
+          <TButton onClick={onClickForgetPinCode} className={css.cancelBtn}>
-            {$L("Cancel")}
+            {$L("Forget PIN code?")}
           </TButton>
           <TButton
             onClick={onClickConfirm}

com.twin.app.shoptime/src/views/CheckOutPanel/components/PinCodeInput.module.less

@@ -6,11 +6,44 @@
   height: 100%;
   padding: 120px 0;
 
+  .headerContainer {
+    position: relative;
+
+    .backBtn {
+      position: absolute;
+      left: 120px;
+      font-size: 38px;
+      height: 60px;
+      color: @COLOR_GRAY04;
+      display: flex;
+      align-items: center;
+
+      .arrowBtn {
+        width: 50px;
+        height: 50px;
+        margin-right: 30px;
+        background: url(../../../../assets/images/btn/ic_wizard_prev_f.png);
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
+
+      &:focus {
+        color: #e6e6e6;
+
+        .arrowBtn {
+          background: url(../../../../assets/images/btn/ic_wizard_prev_n.png);
+          background-repeat: no-repeat;
+          background-size: cover;
+        }
+      }
+    }
+
     .pinCodeTitle {
       text-align: center;
       font-size: 72px;
       color: #e6e6e6;
     }
+  }
 
   .pinCodeBoxes {
     margin-top: 162px;