[theme]#1

- 테마 아이템 포커스 관련 처리.
 - 테마 4방향키 클릭시 두번 열리는부분 처리
 - 모바일 샌드 팝업 기록 노출부분 수정
 - 모바일 샌드 팝업 기록 4개까지만 디자인에 맞춰 노출되도록 수정.

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

@@ -1,10 +1,12 @@
-import React, { useCallback } from "react";
+import React, { useCallback } from 'react';
 
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import {
-import { Spottable } from "@enact/spotlight/Spottable";
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import { Spottable } from '@enact/spotlight/Spottable';
 
-import TButton from "../../TButton/TButton";
+import TButton from '../../TButton/TButton';
-import css from "./HistoryPhoneNumber.module.less";
+import css from './HistoryPhoneNumber.module.less';
 
 const SpottableComponent = Spottable("div");
 
@@ -39,26 +41,28 @@ export default function HistoryPhoneNumber({
   return (
     <>
       {recentSentNumber &&
-        recentSentNumber.filter((number) => number !== "")?.length > 0 &&
+        recentSentNumber
-        recentSentNumber.map((number, index) => {
+          .filter((number) => number !== "")
-          return (
+          .slice(0, 4)
-            <Container
+          .map((number, index) => {
-              className={css.container}
+            return (
-              key={"history-phone-number-" + index}
+              <Container
-            >
+                className={css.container}
-              <SpottableComponent
+                key={"history-phone-number-" + index}
-                onClick={handleClickNumber(number)}
-                className={css.phoneNumberList}
               >
-                {number}
+                <SpottableComponent
-              </SpottableComponent>
+                  onClick={handleClickNumber(number)}
-              <TButton
+                  className={css.phoneNumberList}
-                className={css.deleteButton}
+                >
-                onClick={handleClickDelete(index)}
+                  {number}
-              />
+                </SpottableComponent>
-            </Container>
+                <TButton
-          );
+                  className={css.deleteButton}
-        })}
+                  onClick={handleClickDelete(index)}
+                />
+              </Container>
+            );
+          })}
     </>
   );
-}
+}

com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.module.less

@@ -2,7 +2,8 @@
 @import "../../../style/utils.module.less";
 
 .container {
-  width: 492px;
+  margin-top:10px;
+  width: 100%;
   height: 68px;
   display: flex;
   align-items: center;

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

@@ -652,8 +652,7 @@ export default function MobileSendPopUp({
                     )}
                     <span>{mobileNumber}</span>
                   </SpottableComponent>
-                </InputContainer>
+                </InputContainer>                
-                <div className={css.errTxt}></div>
                 <Container className={css.flex}>
                   {keyPadOff && recentSentNumber.length > 0 ? (
                     <HistoryPhoneNumber

com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less

@@ -178,6 +178,7 @@
     .flex {
       display: flex;
       justify-content: center;
+      flex-wrap:wrap;
     }
     .instruction {
       width: 492.5px; // 고정 너비

com.twin.app.shoptime/src/components/TToast/TToastEnhanced.jsx

@@ -1,7 +1,14 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import classNames from 'classnames';
-import { useDispatch, useSelector } from 'react-redux';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
 import Spotlight from '@enact/spotlight';
 import Spottable from '@enact/spotlight/Spottable';
@@ -70,6 +77,7 @@ export default function TToastEnhanced({
       if (type === 'themeContents') {
         setTimeout(() => {
           Spotlight.focus('theme-contents-close-button');
+          Spotlight.focus('theme-toast-item-0');
         }, 100);
       }
     }, 50);

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx

@@ -1,38 +1,61 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import classNames from 'classnames';
 // import { throttle } from 'lodash';
 import { PropTypes } from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
 import Spotlight from '@enact/spotlight';
 /* eslint-disable react/jsx-no-bind */
 // src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
-import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 
 import couponImg from '../../../../assets/images/icons/coupon.png';
+import arrowDownIcon from '../../../../assets/images/icons/ic-arrow-down.svg';
 // import Spottable from '@enact/spotlight/Spottable';
 //image
-import arrowDown from '../../../../assets/images/icons/ic_arrow_down_3x_new.png';
+import arrowDown
-import arrowDownIcon from '../../../../assets/images/icons/ic-arrow-down.svg';
+  from '../../../../assets/images/icons/ic_arrow_down_3x_new.png';
-import indicatorDefaultImage from '../../../../assets/images/img-thumb-empty-144@3x.png';
+import indicatorDefaultImage
-import { setHidePopup, setShowPopup } from '../../../actions/commonActions.js';
+  from '../../../../assets/images/img-thumb-empty-144@3x.png';
+import {
+  setHidePopup,
+  setShowPopup,
+} from '../../../actions/commonActions.js';
 import {
   getProductCouponDownload,
   getProductCouponSearch,
   getProductCouponTotDownload,
 } from '../../../actions/couponActions.js';
 // import { pushPanel } from '../../../actions/panelActions';
-import { minimizeModalMedia, restoreModalMedia } from '../../../actions/mediaActions';
+import {
+  minimizeModalMedia,
+  restoreModalMedia,
+} from '../../../actions/mediaActions';
 import { pauseFullscreenVideo } from '../../../actions/playActions';
 import { resetShowAllReviews } from '../../../actions/productActions';
-import { clearAllToasts, removeToast, showToast } from '../../../actions/toastActions';
+import {
+  clearAllToasts,
+  removeToast,
+  showToast,
+} from '../../../actions/toastActions';
 import CustomImage from '../../../components/CustomImage/CustomImage.jsx';
 // ProductInfoSection imports
 import TButton from '../../../components/TButton/TButton';
 import TPopUp from '../../../components/TPopUp/TPopUp.jsx';
-import TVirtualGridList from '../../../components/TVirtualGridList/TVirtualGridList.jsx';
+import TVirtualGridList
+  from '../../../components/TVirtualGridList/TVirtualGridList.jsx';
 import useReviews from '../../../hooks/useReviews/useReviews';
 import useScrollTo from '../../../hooks/useScrollTo';
 import { BUYNOW_CONFIG } from '../../../utils/BuyNowConfig';
@@ -64,13 +87,19 @@ import StarRating from '../components/StarRating';
 // ProductContentSection imports
 import TScrollerDetail from '../components/TScroller/TScrollerDetail';
 import DetailPanelSkeleton from '../DetailPanelSkeleton/DetailPanelSkeleton';
-import ProductDescription from '../ProductContentSection/ProductDescription/ProductDescription';
+import ProductDescription
-import ProductDetail from '../ProductContentSection/ProductDetail/ProductDetail.new';
+  from '../ProductContentSection/ProductDescription/ProductDescription';
-import { ProductVideoV2 } from '../ProductContentSection/ProductVideo/ProductVideo.v2.jsx';
+import ProductDetail
-import ProductVideo from '../ProductContentSection/ProductVideo/ProductVideo.v3';
+  from '../ProductContentSection/ProductDetail/ProductDetail.new';
+import {
+  ProductVideoV2,
+} from '../ProductContentSection/ProductVideo/ProductVideo.v2.jsx';
+import ProductVideo
+  from '../ProductContentSection/ProductVideo/ProductVideo.v3';
 import UserReviews from '../ProductContentSection/UserReviews/UserReviews';
 // import ViewAllReviewsButton from '../ProductContentSection/UserReviews/ViewAllReviewsButton';
-import YouMayAlsoLike from '../ProductContentSection/YouMayAlsoLike/YouMayAlsoLike';
+import YouMayAlsoLike
+  from '../ProductContentSection/YouMayAlsoLike/YouMayAlsoLike';
 import QRCode from '../ProductInfoSection/QRCode/QRCode';
 import ProductOverview from '../ProductOverview/ProductOverview';
 // CSS imports
@@ -923,7 +952,8 @@ export default function ProductAllSection({
     []
   );
 
-  const handleThemeItemButtonClick = useCallback(() => {
+  const handleThemeItemButtonClick = useCallback((e) => {
+    e.stopPropagation();
     dispatch(
       showToast({
         id: 'theme-contents-toast',
@@ -942,13 +972,13 @@ export default function ProductAllSection({
         panelInfo,
         direction: 'horizontal',
         version: 2,
-        onToastClose: () => {
+        // onToastClose: () => {
-          setTimeout(() => {
+        //   setTimeout(() => {
-            Spotlight.focus('theme-open-button');
+        //     Spotlight.focus('theme-open-button');
-          }, 100);
+        //   }, 100);
-        },
+        // },
       })
-    );
+    );    
   }, [dispatch, themeProducts, setSelectedIndex, panelInfo]);
 
   const handleProductDetailsClick = useCallback(() => {

com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx

@@ -158,6 +158,9 @@ export default function ThemeContents({
     if (onThemeItemClose) {
       onThemeItemClose();
     }
+    setTimeout(()=>{
+      Spotlight.focus("theme-open-button")
+    },100)
   }, [onThemeItemClose]);
 
   const renderItem = useCallback(
@@ -206,6 +209,7 @@ export default function ThemeContents({
         blockTimeoutRef.current = setTimeout(() => {
           isClickBlocked.current = false;
           blockTimeoutRef.current = null;
+          Spotlight.focus("product-img-0");
         }, 600);
 
         if (!prdtId) return;
@@ -262,9 +266,12 @@ export default function ThemeContents({
   // 토스트가 열리면 THEME ITEM 버튼에 포커스되도록 보정
   useEffect(() => {
     // 약간의 지연을 주어 컴포넌트가 렌더링된 후 포커스 이동
-    setTimeout(() => {
+    const timeOut = setTimeout(() => {
-      Spotlight.focus('theme-contents-close-button');
+      Spotlight.focus('theme-items-container');
     }, 100);
+    return (()=>{
+      clearTimeout(timeOut);
+    })
   }, []);
 
   // 키 이동 보정: 위/아래/좌우 이동 설정