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 f741cabf..3ba91ef3 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx @@ -9,30 +9,21 @@ import 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 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, @@ -62,8 +53,7 @@ import CustomImage from '../../../components/CustomImage/CustomImage.jsx'; // ProductInfoSection imports import TButton, { TYPES } 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'; @@ -89,10 +79,7 @@ import { tap, when, } from '../../../utils/fp'; -import { - $L, - formatGMTString, -} from '../../../utils/helperMethods'; +import { $L, formatGMTString } from '../../../utils/helperMethods'; import { SpotlightIds } from '../../../utils/SpotlightIds'; import ShowUserReviews from '../../UserReview/ShowUserReviews'; // import CustomScrollbar from '../components/CustomScrollbar/CustomScrollbar'; @@ -103,21 +90,14 @@ 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 SeeMoreProducts - from '../ProductContentSection/SeeMoreProducts/SeeMoreProducts'; +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 SeeMoreProducts from '../ProductContentSection/SeeMoreProducts/SeeMoreProducts'; 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 @@ -166,7 +146,8 @@ const ShopByMobileContainer = SpotlightContainerDecorator( spotlightDirection: 'horizontal', enterTo: 'last-focused', restrict: 'self-only', - defaultElement: SpotlightIds?.DETAIL_SHOPBYMOBILE || 'detail_shop_by_mobile', + defaultElement: + SpotlightIds?.DETAIL_SHOPBYMOBILE || 'detail_shop_by_mobile', }, 'div' ); @@ -258,17 +239,27 @@ export default function ProductAllSection({ const dispatch = useDispatch(); // Redux 상태 - const webOSVersion = useSelector((state) => state.common.appStatus.webOSVersion); + const webOSVersion = useSelector( + (state) => state.common.appStatus.webOSVersion + ); const groupInfos = useSelector((state) => state.product.groupInfo); const nowMenu = useSelector((state) => state.common.menu.nowMenu); // YouMayLike 데이터는 API 응답 시간이 걸리므로 직접 구독 const youmaylikeData = useSelector((state) => state.main.youmaylikeData); //coupon - const { partnerCoupon } = useSelector((state) => state.coupon.productCouponSearchData); - const { userNumber } = useSelector((state) => state.common.appStatus.loginUserData); - const { popupVisible, activePopup } = useSelector((state) => state.common.popup); - const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible); + const { partnerCoupon } = useSelector( + (state) => state.coupon.productCouponSearchData + ); + const { userNumber } = useSelector( + (state) => state.common.appStatus.loginUserData + ); + const { popupVisible, activePopup } = useSelector( + (state) => state.common.popup + ); + const cursorVisible = useSelector( + (state) => state.common.appStatus.cursorVisible + ); // 🆕 [251210] patnrId=21 카테고리 그룹 데이터 const brandShopByShowCategoryGroups = useSelector( (state) => state.brand.brandShopByShowCategoryGroups @@ -293,12 +284,15 @@ export default function ProductAllSection({ // 출처 정보 통합 (향후 확장성 대비) // YouMayLike 상품이 아닐 경우 fromPanel을 초기화하여 오기 방지 - const fromPanel = useMemo(() => ({ - fromYouMayLike: panelInfo?.fromPanel?.fromYouMayLike || false, - // 향후 다른 출처 플래그들 추가 가능 - // fromRecommendation: panelInfo?.fromPanel?.fromRecommendation || false, - // fromSearch: panelInfo?.fromPanel?.fromSearch || false, - }), [panelInfo?.fromPanel?.fromYouMayLike]); + const fromPanel = useMemo( + () => ({ + fromYouMayLike: panelInfo?.fromPanel?.fromYouMayLike || false, + // 향후 다른 출처 플래그들 추가 가능 + // fromRecommendation: panelInfo?.fromPanel?.fromRecommendation || false, + // fromSearch: panelInfo?.fromPanel?.fromSearch || false, + }), + [panelInfo?.fromPanel?.fromYouMayLike] + ); //구매 하단 토스트 노출 확인을 위한 용도 const [openToast, setOpenToast] = useState(false); @@ -327,21 +321,18 @@ export default function ProductAllSection({ //topbutton const handleTopButtonClick = useCallback(() => { const container = scrollContainerRef?.current; - if (!container) return; - if (typeof container.scrollTo === 'function') { - scrollTop({ y: 0, animate: true }); - setTimeout(()=>{ - if(hasVideo){ - Spotlight.focus("product-video-player"); - } else { - Spotlight.focus("product-detail-container-0"); - } - },100); - } - }, [ - scrollTop, - hasVideo - ]); + if (!container) return; + if (typeof container.scrollTo === 'function') { + scrollTop({ y: 0, animate: true }); + setTimeout(() => { + if (hasVideo) { + Spotlight.focus('product-video-player'); + } else { + Spotlight.focus('product-detail-container-0'); + } + }, 100); + } + }, [scrollTop, hasVideo]); const fetchCouponData = useCallback(() => { dispatch( @@ -403,7 +394,9 @@ export default function ProductAllSection({ const handleCouponTotDownload = useCallback(() => { if (selectedCoupon && userNumber) { - const couponCodesArray = couponCodes.split(',').map((code) => parseInt(code.trim())); + const couponCodesArray = couponCodes + .split(',') + .map((code) => parseInt(code.trim())); setDownloadCouponArr((prevArr) => [...prevArr, ...couponCodesArray]); dispatch( @@ -474,7 +467,9 @@ export default function ProductAllSection({ return; } setDownloadCouponArr((prevArr) => [...prevArr, cpnSno]); - dispatch(getProductCouponDownload({ mbrNo: userNumber, cpnSno: cpnSno })); + dispatch( + getProductCouponDownload({ mbrNo: userNumber, cpnSno: cpnSno }) + ); dispatch(showToast({ message: 'Your coupon download is complete.' })); }; @@ -489,7 +484,13 @@ export default function ProductAllSection({ >