[theme]#1

- 테마 아이템 포커스 관련 처리. - 테마 4방향키 클릭시 두번 열리는부분 처리 - 모바일 샌드 팝업 기록 노출부분 수정 - 모바일 샌드 팝업 기록 4개까지만 디자인에 맞춰 노출되도록 수정.
2025-11-24 17:30:28 +09:00
parent 97ac10c675
commit b9b50caf84
7 changed files with 104 additions and 54 deletions
--- a/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.jsx
+++ b/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 { Spottable } from "@enact/spotlight/Spottable";
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import { Spottable } from '@enact/spotlight/Spottable';

-import TButton from "../../TButton/TButton";
-import css from "./HistoryPhoneNumber.module.less";
+import TButton from '../../TButton/TButton';
+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.map((number, index) => {
-          return (
-            <Container
-              className={css.container}
-              key={"history-phone-number-" + index}
-            >
-              <SpottableComponent
-                onClick={handleClickNumber(number)}
-                className={css.phoneNumberList}
+        recentSentNumber
+          .filter((number) => number !== "")
+          .slice(0, 4)
+          .map((number, index) => {
+            return (
+              <Container
+                className={css.container}
+                key={"history-phone-number-" + index}
              >
-                {number}
-              </SpottableComponent>
-              <TButton
-                className={css.deleteButton}
-                onClick={handleClickDelete(index)}
-              />
-            </Container>
-          );
-        })}
+                <SpottableComponent
+                  onClick={handleClickNumber(number)}
+                  className={css.phoneNumberList}
+                >
+                  {number}
+                </SpottableComponent>
+                <TButton
+                  className={css.deleteButton}
+                  onClick={handleClickDelete(index)}
+                />
+              </Container>
+            );
+          })}
    </>
  );
 }
--- a/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.module.less
+++ b/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;
--- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx
+++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx
@@ -653,7 +653,6 @@ export default function MobileSendPopUp({
                    <span>{mobileNumber}</span>
                  </SpottableComponent>
                </InputContainer>                
-                <div className={css.errTxt}></div>
                <Container className={css.flex}>
                  {keyPadOff && recentSentNumber.length > 0 ? (
                    <HistoryPhoneNumber
--- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less
+++ b/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; // 고정 너비
--- a/com.twin.app.shoptime/src/components/TToast/TToastEnhanced.jsx
+++ b/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);
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
+++ b/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 arrowDownIcon from '../../../../assets/images/icons/ic-arrow-down.svg';
-import indicatorDefaultImage from '../../../../assets/images/img-thumb-empty-144@3x.png';
-import { setHidePopup, setShowPopup } from '../../../actions/commonActions.js';
+import arrowDown
+  from '../../../../assets/images/icons/ic_arrow_down_3x_new.png';
+import indicatorDefaultImage
+  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 ProductDetail from '../ProductContentSection/ProductDetail/ProductDetail.new';
-import { ProductVideoV2 } from '../ProductContentSection/ProductVideo/ProductVideo.v2.jsx';
-import ProductVideo from '../ProductContentSection/ProductVideo/ProductVideo.v3';
+import ProductDescription
+  from '../ProductContentSection/ProductDescription/ProductDescription';
+import ProductDetail
+  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,11 +972,11 @@ export default function ProductAllSection({
        panelInfo,
        direction: 'horizontal',
        version: 2,
-        onToastClose: () => {
-          setTimeout(() => {
-            Spotlight.focus('theme-open-button');
-          }, 100);
-        },
+        // onToastClose: () => {
+        //   setTimeout(() => {
+        //     Spotlight.focus('theme-open-button');
+        //   }, 100);
+        // },
      })
    );    
  }, [dispatch, themeProducts, setSelectedIndex, panelInfo]);
--- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx
+++ b/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(() => {
-      Spotlight.focus('theme-contents-close-button');
+    const timeOut = setTimeout(() => {
+      Spotlight.focus('theme-items-container');
    }, 100);
+    return (()=>{
+      clearTimeout(timeOut);
+    })
  }, []);

  // 키 이동 보정: 위/아래/좌우 이동 설정