SHOPTIME-1933 [Shoptime 고도화] TV 앱 테스트 (시스템 운영팀) / [SHOPTIME-3323] SBM / 빈 전화번호 히스토리 발생

1. MobileSendPopup.jsx
2. HistoryPhoneNumber.jsx
- 원인: 재현 경로 알 수 없음
- 대책: 방어 logic 추가 (rendering 조건 수정, 히스토리 배열 filtering)

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback } from "react";
 
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 import { Spottable } from "@enact/spotlight/Spottable";
@@ -15,17 +15,31 @@ const Container = SpotlightContainerDecorator(
 
 export default function HistoryPhoneNumber({
   handleClickSelect,
-  recentSentNumber,
   handleDelete,
+  recentSentNumber,
 }) {
-  const handleClickNumber = (number) => {
+  const handleClickNumber = useCallback(
-    handleClickSelect(number);
+    (number) => () => {
-  };
+      if (handleClickSelect) {
+        handleClickSelect(number);
+      }
+    },
+    [handleClickSelect]
+  );
+
+  const handleClickDelete = useCallback(
+    (index) => () => {
+      if (handleDelete) {
+        handleDelete(index);
+      }
+    },
+    [handleDelete]
+  );
 
   return (
     <>
       {recentSentNumber &&
-        recentSentNumber.length > 0 &&
+        recentSentNumber.filter((number) => number !== "")?.length > 0 &&
         recentSentNumber.map((number, index) => {
           return (
             <Container
@@ -33,18 +47,14 @@ export default function HistoryPhoneNumber({
               key={"history-phone-number-" + index}
             >
               <SpottableComponent
-                onClick={() => {
+                onClick={handleClickNumber(number)}
-                  handleClickNumber(number);
-                }}
                 className={css.phoneNumberList}
               >
                 {number}
               </SpottableComponent>
               <TButton
                 className={css.deleteButton}
-                onClick={() => {
+                onClick={handleClickDelete(index)}
-                  handleDelete(index);
-                }}
               />
             </Container>
           );

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

@@ -86,11 +86,8 @@ export default function MobileSendPopUp({
   shopByMobileLogRef,
   spotlightId,
 }) {
+  const dispatch = useDispatch();
   const deviceInfo = useSelector((state) => state.device.deviceInfo);
-  const [mobileNumber, setMobileNumber] = useState("");
-  const [recentSentNumber, setRecentSentNumber] = useState([]);
-  const [keyPadOff, setKeyPadOff] = useState(false);
-  const [smsRetCode, setSmsRetCode] = useState(undefined);
   const { httpHeader } = useSelector((state) => state.common);
   const regDeviceInfoRetCode = useSelector(
     (state) => state.device?.regDeviceInfoData?.retCode
@@ -106,11 +103,23 @@ export default function MobileSendPopUp({
   );
   const popupVisible = useSelector((state) => state.common.popup.popupVisible);
   const nowMenu = useSelector((state) => state.common.menu.nowMenu);
-  const deviceCountryCode = httpHeader["X-Device-Country"];
+
-  const dispatch = useDispatch();
+  const [inputDisabled, setInputDisabled] = useState(true);
+  const [mobileNumber, setMobileNumber] = useState("");
+  const [recentSentNumber, setRecentSentNumber] = useState([]);
+  const [keyPadOff, setKeyPadOff] = useState(false);
+  const [smsRetCode, setSmsRetCode] = useState(undefined);
 
   const agreeBtnClickedRef = useRef(false);
 
+  const deviceCountryCode = httpHeader["X-Device-Country"];
+
+  const mobileSendPopUpSpotlightId = useMemo(() => {
+    return !keyPadOff && recentSentNumber.length <= 0
+      ? "keypad-number-1"
+      : "agreeAndSend";
+  }, [keyPadOff, recentSentNumber]);
+
   const getMaxNum = useCallback((_deviceCountryCode) => {
     if (_deviceCountryCode === "DE" || _deviceCountryCode === "GB") {
       return 11;
@@ -236,16 +245,22 @@ export default function MobileSendPopUp({
     }
   }, [deviceInfo, dispatch]);
 
+  useEffect(() => {
+    const timer = setTimeout(() =>
+      setInputDisabled(mobileSendPopUpSpotlightId === "keypad-number-1")
+    );
+
+    return () => clearTimeout(timer);
+  }, [mobileSendPopUpSpotlightId]);
+
   useEffect(() => {
     if (!agreeBtnClickedRef.current && recentSentNumber) {
       if (recentSentNumber.length > 0) {
         setKeyPadOff(true);
         setMobileNumber(recentSentNumber[0]);
-        setTimeout(() => Spotlight.focus("agreeAndSend"));
       } else {
         setKeyPadOff(false);
         setMobileNumber("");
-        setTimeout(() => Spotlight.focus("keypad-number-1"));
       }
     }
   }, [recentSentNumber]);
@@ -279,9 +294,6 @@ export default function MobileSendPopUp({
           },
         })
       );
-      setTimeout(() => {
-        spotlight.focus("history-container");
-      });
     }
   };
 
@@ -531,6 +543,7 @@ export default function MobileSendPopUp({
             open={open}
             onClose={onClose}
             hasText
+            spotlightId={mobileSendPopUpSpotlightId}
           >
             <div className={css.header}>
               {productImg && (
@@ -570,7 +583,7 @@ export default function MobileSendPopUp({
                   <SpottableComponent
                     className={css.inputNum}
                     onClick={handleInputClick}
-                    spotlightDisabled
+                    spotlightDisabled={inputDisabled}
                   >
                     {deviceCountryCode && deviceCountryCode === "RU" && (
                       <span className={css.rucInput}>{"+7 "}</span>
@@ -578,19 +591,18 @@ export default function MobileSendPopUp({
                     <span>{mobileNumber}</span>
                   </SpottableComponent>
                 </InputContainer>
-                {keyPadOff ? (
+
-                  <Container spotlightId="history-container">
+                <Container>
+                  {keyPadOff && recentSentNumber.length > 0 ? (
                     <HistoryPhoneNumber
                       handleClickSelect={handleClickSelect}
                       handleDelete={handleDelete}
                       recentSentNumber={recentSentNumber}
                     />
-                  </Container>
+                  ) : (
-                ) : (
-                  <Container>
                     <SMSNumKeyPad onKeyDown={numKeypadClicked} />
-                  </Container>
+                  )}
-                )}
+                </Container>
               </div>
               <div className={css.instruction}>
                 {deviceCountryCode && (