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);
+ })
}, []);
// 키 이동 보정: 위/아래/좌우 이동 설정