[SHOPTIME-3731] SBM / 팝업이 열릴때 포커스가 빠르게 이동해서 깜빡 거리는 현상

Changed files:
1. MobileSendPopUp.jsx

Detail note:
- 원인: History가 있을 경우의 포커스 예외 처리 부재
- 대책: History가 있을 경우에 포커스 예외 처리

com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import classNames from "classnames";
 import {
@@ -85,9 +91,6 @@ export default function MobileSendPopUp({
   const [recentSentNumber, setRecentSentNumber] = useState([]);
   const [keyPadOff, setKeyPadOff] = useState(false);
   const [smsRetCode, setSmsRetCode] = useState(undefined);
-  const [chkAgreeBtn, setChkAgreeBtn] = useState(false);
-  const [popText, setPopText] = useState(false);
-  const [spotlightDisabled, setSpotlightDisabled] = useState(true);
   const { httpHeader } = useSelector((state) => state.common);
   const regDeviceInfoRetCode = useSelector(
     (state) => state.device?.regDeviceInfoData?.retCode
@@ -106,6 +109,8 @@ export default function MobileSendPopUp({
   const deviceCountryCode = httpHeader["X-Device-Country"];
   const dispatch = useDispatch();
 
+  const agreeBtnClickedRef = useRef(false);
+
   const getMaxNum = useCallback((_deviceCountryCode) => {
     if (_deviceCountryCode === "DE" || _deviceCountryCode === "GB") {
       return 11;
@@ -232,13 +237,15 @@ export default function MobileSendPopUp({
   }, [deviceInfo, dispatch]);
 
   useEffect(() => {
-    if (!chkAgreeBtn) {
+    if (!agreeBtnClickedRef.current) {
       if (recentSentNumber && recentSentNumber.length > 0) {
         setKeyPadOff(true);
         setMobileNumber(recentSentNumber[0]);
+        setTimeout(() => Spotlight.focus("agreeAndSend"));
       } else {
         setKeyPadOff(false);
         setMobileNumber("");
+        setTimeout(() => Spotlight.focus("keypad-number-1"));
       }
     }
   }, [recentSentNumber]);
@@ -305,7 +312,7 @@ export default function MobileSendPopUp({
       }
 
       updatedNumbers.unshift(mobileNumber);
-      setChkAgreeBtn(true);
+      agreeBtnClickedRef.current = true;
       setRecentSentNumber(updatedNumbers);
 
       const encryptedNumbers = updatedNumbers.map(encryptPhoneNumber);
@@ -501,20 +508,6 @@ export default function MobileSendPopUp({
     }
   }, [curationCouponSuccess, mobileNumber]);
 
-  useEffect(() => {
-    if (keyPadOff) {
-      setTimeout(() => {
-        Spotlight.focus("agreeAndSend");
-      });
-      setSpotlightDisabled(false);
-    } else {
-      setSpotlightDisabled(true);
-      setTimeout(() => {
-        Spotlight.focus("keypad-number-1");
-      });
-    }
-  }, [keyPadOff]);
-
   const retCodeError =
     (smsRetCode !== undefined && smsRetCode !== 0) ||
     (curationCouponSuccess !== undefined && curationCouponSuccess !== 0);
@@ -577,7 +570,7 @@ export default function MobileSendPopUp({
                   <SpottableComponent
                     className={css.inputNum}
                     onClick={handleInputClick}
-                    spotlightDisabled={spotlightDisabled}
+                    spotlightDisabled={!keyPadOff}
                   >
                     {deviceCountryCode && deviceCountryCode === "RU" && (
                       <span className={css.rucInput}>{"+7 "}</span>