From b9b50caf845cdd802b461ebf14c0db2df36ad1b1 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Mon, 24 Nov 2025 17:30:28 +0900 Subject: [PATCH] [theme]#1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 테마 아이템 포커스 관련 처리. - 테마 4방향키 클릭시 두번 열리는부분 처리 - 모바일 샌드 팝업 기록 노출부분 수정 - 모바일 샌드 팝업 기록 4개까지만 디자인에 맞춰 노출되도록 수정. --- .../HistoryPhoneNumber/HistoryPhoneNumber.jsx | 54 +++++++------- .../HistoryPhoneNumber.module.less | 3 +- .../components/MobileSend/MobileSendPopUp.jsx | 3 +- .../MobileSend/MobileSendPopUp.module.less | 1 + .../src/components/TToast/TToastEnhanced.jsx | 12 ++- .../ProductAllSection/ProductAllSection.jsx | 74 +++++++++++++------ .../ThemeProduct/ThemeContents.jsx | 11 ++- 7 files changed, 104 insertions(+), 54 deletions(-) diff --git a/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.jsx b/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.jsx index 1332f4e3..e5e2597b 100644 --- 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 ( - - number !== "") + .slice(0, 4) + .map((number, index) => { + return ( + - {number} - - - - ); - })} + + {number} + + + + ); + })} ); -} +} \ No newline at end of file diff --git a/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.module.less b/com.twin.app.shoptime/src/components/MobileSend/HistoryPhoneNumber/HistoryPhoneNumber.module.less index 6628d736..5468e4ec 100644 --- 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; diff --git a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx index 2dcd5eb6..7c10576d 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx +++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx @@ -652,8 +652,7 @@ export default function MobileSendPopUp({ )} {mobileNumber} - -
+ {keyPadOff && recentSentNumber.length > 0 ? ( { Spotlight.focus('theme-contents-close-button'); + Spotlight.focus('theme-toast-item-0'); }, 100); } }, 50); diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx index 0368a627..d83a69c3 100644 --- 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,13 +972,13 @@ 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]); const handleProductDetailsClick = useCallback(() => { diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx index 156b8b33..3692627b 100644 --- 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); + }) }, []); // 키 이동 보정: 위/아래/좌우 이동 설정