통합로그 No.27 AL_SBM 수정

This commit is contained in:
jiwon93.son
2025-10-15 17:18:54 +09:00
parent 55009a6afd
commit c0d5cd4e1e
2 changed files with 87 additions and 81 deletions

View File

@@ -4,51 +4,51 @@ import React, {
useMemo, useMemo,
useRef, useRef,
useState, useState,
} from 'react'; } from "react";
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from "react-redux";
import Spotlight from '@enact/spotlight'; import Spotlight from "@enact/spotlight";
import { setContainerLastFocusedElement } from '@enact/spotlight/src/container'; import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
import { import {
changeAppStatus, changeAppStatus,
changeLocalSettings, changeLocalSettings,
setHidePopup, setHidePopup,
} from '../../actions/commonActions'; } from "../../actions/commonActions";
import { clearCouponInfo } from '../../actions/couponActions'; import { clearCouponInfo } from "../../actions/couponActions";
import { getDeviceAdditionInfo } from '../../actions/deviceActions'; import { getDeviceAdditionInfo } from "../../actions/deviceActions";
import { import {
clearThemeDetail, clearThemeDetail,
getThemeCurationDetailInfo, getThemeCurationDetailInfo,
getThemeHotelDetailInfo, getThemeHotelDetailInfo,
} from '../../actions/homeActions'; } from "../../actions/homeActions";
import { import {
getMainCategoryDetail, getMainCategoryDetail,
getMainYouMayLike, getMainYouMayLike,
} from '../../actions/mainActions'; } from "../../actions/mainActions";
import { popPanel, updatePanel } from '../../actions/panelActions'; import { popPanel, updatePanel } from "../../actions/panelActions";
import { finishVideoPreview } from '../../actions/playActions'; import { finishVideoPreview } from "../../actions/playActions";
import { import {
clearProductDetail, clearProductDetail,
getProductGroup, getProductGroup,
getProductImageLength, getProductImageLength,
getProductOptionId, getProductOptionId,
} from '../../actions/productActions'; } from "../../actions/productActions";
import MobileSendPopUp from '../../components/MobileSend/MobileSendPopUp'; import MobileSendPopUp from "../../components/MobileSend/MobileSendPopUp";
import TBody from '../../components/TBody/TBody'; import TBody from "../../components/TBody/TBody";
import THeader from '../../components/THeader/THeader'; import THeader from "../../components/THeader/THeader";
import TPanel from '../../components/TPanel/TPanel'; import TPanel from "../../components/TPanel/TPanel";
import * as Config from '../../utils/Config'; import * as Config from "../../utils/Config";
import { panel_names } from '../../utils/Config'; import { panel_names } from "../../utils/Config";
import { $L, getQRCodeUrl } from '../../utils/helperMethods'; import { $L, getQRCodeUrl } from "../../utils/helperMethods";
import css from './DetailPanel.module.less'; import css from "./DetailPanel.module.less";
import GroupProduct from './GroupProduct/GroupProduct'; import GroupProduct from "./GroupProduct/GroupProduct";
import SingleProduct from './SingleProduct/SingleProduct'; import SingleProduct from "./SingleProduct/SingleProduct";
import ThemeProduct from './ThemeProduct/ThemeProduct'; import ThemeProduct from "./ThemeProduct/ThemeProduct";
import UnableProduct from './UnableProduct/UnableProduct'; import UnableProduct from "./UnableProduct/UnableProduct";
import YouMayLike from './YouMayLike/YouMayLike'; import YouMayLike from "./YouMayLike/YouMayLike";
import { now } from 'lodash'; import { now } from "lodash";
export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -85,7 +85,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
); );
const panels = useSelector((state) => state.panels.panels); const panels = useSelector((state) => state.panels.panels);
const [lgCatCd, setLgCatCd] = useState(''); const [lgCatCd, setLgCatCd] = useState("");
const [isYouMayLikeOpened, setIsYouMayLikeOpened] = useState(false); const [isYouMayLikeOpened, setIsYouMayLikeOpened] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(0); const [selectedIndex, setSelectedIndex] = useState(0);
@@ -93,7 +93,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
useEffect(() => { useEffect(() => {
dispatch(getProductOptionId(undefined)); dispatch(getProductOptionId(undefined));
if (panelInfo?.type === 'hotel') { if (panelInfo?.type === "hotel") {
dispatch( dispatch(
getThemeHotelDetailInfo({ getThemeHotelDetailInfo({
patnrId: panelInfo?.patnrId, patnrId: panelInfo?.patnrId,
@@ -102,7 +102,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
); );
} }
if (panelInfo?.type === 'theme') { if (panelInfo?.type === "theme") {
dispatch( dispatch(
getThemeCurationDetailInfo({ getThemeCurationDetailInfo({
patnrId: panelInfo?.patnrId, patnrId: panelInfo?.patnrId,
@@ -117,7 +117,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
getMainCategoryDetail({ getMainCategoryDetail({
patnrId: panelInfo?.patnrId, patnrId: panelInfo?.patnrId,
prdtId: panelInfo?.prdtId, prdtId: panelInfo?.prdtId,
liveReqFlag: panelInfo?.liveReqFlag ? panelInfo?.liveReqFlag : 'N', liveReqFlag: panelInfo?.liveReqFlag ? panelInfo?.liveReqFlag : "N",
}) })
); );
} }
@@ -153,7 +153,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
}, [panelInfo?.curationId, panelInfo?.patnrId, panelInfo?.prdtId, lgCatCd]); }, [panelInfo?.curationId, panelInfo?.patnrId, panelInfo?.prdtId, lgCatCd]);
useEffect(() => { useEffect(() => {
if (productData?.pmtSuptYn === 'Y' && productData?.grPrdtProcYn === 'Y') { if (productData?.pmtSuptYn === "Y" && productData?.grPrdtProcYn === "Y") {
dispatch( dispatch(
getProductGroup({ getProductGroup({
patnrId: panelInfo?.patnrId, patnrId: panelInfo?.patnrId,
@@ -199,14 +199,14 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
prdtId: productInfo?.prdtId, prdtId: productInfo?.prdtId,
entryMenu: entryMenu, entryMenu: entryMenu,
nowMenu: nowMenu, nowMenu: nowMenu,
liveFlag: 'Y', liveFlag: "Y",
qrType: 'billingDetail', qrType: "billingDetail",
}); });
}, [serverHOST, serverType, deviceInfo, entryMenu, productInfo]); }, [serverHOST, serverType, deviceInfo, entryMenu, productInfo]);
const onSpotlightUpTButton = (e) => { const onSpotlightUpTButton = (e) => {
e.stopPropagation(); e.stopPropagation();
Spotlight.focus('spotlightId_backBtn'); Spotlight.focus("spotlightId_backBtn");
}; };
const onClick = useCallback( const onClick = useCallback(
@@ -235,8 +235,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const handleSMSonClose = useCallback(() => { const handleSMSonClose = useCallback(() => {
dispatch(setHidePopup()); dispatch(setHidePopup());
setTimeout(() => { setTimeout(() => {
Spotlight.focus('spotlightId_backBtn'); Spotlight.focus("spotlightId_backBtn");
Spotlight.focus('shopbymobile_Btn'); Spotlight.focus("shopbymobile_Btn");
}, 0); }, 0);
}, [dispatch]); }, [dispatch]);
@@ -245,7 +245,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const prdtId = const prdtId =
themeProductInfos && themeProductInfos &&
themeProductInfos.length > 0 && themeProductInfos.length > 0 &&
panelInfo?.type === 'theme' panelInfo?.type === "theme"
? themeProductInfos[selectedIndex].prdtId ? themeProductInfos[selectedIndex].prdtId
: panelInfo?.prdtId; : panelInfo?.prdtId;
@@ -272,7 +272,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
patnrId: panelInfo?.patnrId, patnrId: panelInfo?.patnrId,
date: formattedDate, date: formattedDate,
expireTime: currentDate.getTime() + 1000 * 60 * 60 * 24 * 14, expireTime: currentDate.getTime() + 1000 * 60 * 60 * 24 * 14,
cntryCd: httpHeader['X-Device-Country'], cntryCd: httpHeader["X-Device-Country"],
}); });
if (recentItems.length >= 51) { if (recentItems.length >= 51) {
@@ -295,19 +295,19 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
setLgCatCd(productData.catCd); setLgCatCd(productData.catCd);
} else if ( } else if (
themeProductInfos && themeProductInfos &&
themeProductInfos[selectedIndex]?.pmtSuptYn === 'N' && themeProductInfos[selectedIndex]?.pmtSuptYn === "N" &&
panelInfo?.curationId panelInfo?.curationId
) { ) {
setLgCatCd(themeProductInfos[selectedIndex]?.catCd); setLgCatCd(themeProductInfos[selectedIndex]?.catCd);
} else { } else {
setLgCatCd(''); setLgCatCd("");
} }
}, [productData, themeProductInfos, selectedIndex, panelInfo?.curationId]); }, [productData, themeProductInfos, selectedIndex, panelInfo?.curationId]);
const mobileSendPopUpProductImg = useMemo(() => { const mobileSendPopUpProductImg = useMemo(() => {
if (panelInfo?.type === 'theme' && themeProductInfos) { if (panelInfo?.type === "theme" && themeProductInfos) {
return themeProductInfos[selectedIndex]?.imgUrls600[0]; return themeProductInfos[selectedIndex]?.imgUrls600[0];
} else if (panelInfo?.type === 'hotel' && hotelInfos) { } else if (panelInfo?.type === "hotel" && hotelInfos) {
return hotelInfos[selectedIndex]?.hotelImgUrl; return hotelInfos[selectedIndex]?.hotelImgUrl;
} else { } else {
return productData?.imgUrls600[0]; return productData?.imgUrls600[0];
@@ -321,9 +321,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
]); ]);
const mobileSendPopUpSubtitle = useMemo(() => { const mobileSendPopUpSubtitle = useMemo(() => {
if (panelInfo?.type === 'theme' && themeProductInfos) { if (panelInfo?.type === "theme" && themeProductInfos) {
return themeProductInfos[selectedIndex]?.prdtNm; return themeProductInfos[selectedIndex]?.prdtNm;
} else if (panelInfo?.type === 'hotel' && hotelInfos) { } else if (panelInfo?.type === "hotel" && hotelInfos) {
return hotelInfos[selectedIndex]?.hotelNm; return hotelInfos[selectedIndex]?.hotelNm;
} else { } else {
return productData?.prdtNm; return productData?.prdtNm;
@@ -338,27 +338,27 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const isBillingProductVisible = useMemo(() => { const isBillingProductVisible = useMemo(() => {
return ( return (
productData?.pmtSuptYn === 'Y' && productData?.pmtSuptYn === "Y" &&
productData?.grPrdtProcYn === 'N' && productData?.grPrdtProcYn === "N" &&
panelInfo?.prdtId && panelInfo?.prdtId &&
webOSVersion >= '6.0' webOSVersion >= "6.0"
); );
}, [productData, webOSVersion, panelInfo?.prdtId]); }, [productData, webOSVersion, panelInfo?.prdtId]);
const isUnavailableProductVisible = useMemo(() => { const isUnavailableProductVisible = useMemo(() => {
return ( return (
productData?.pmtSuptYn === 'N' || productData?.pmtSuptYn === "N" ||
(productData?.pmtSuptYn === 'Y' && (productData?.pmtSuptYn === "Y" &&
productData?.grPrdtProcYn === 'N' && productData?.grPrdtProcYn === "N" &&
webOSVersion < '6.0' && webOSVersion < "6.0" &&
panelInfo?.prdtId) panelInfo?.prdtId)
); );
}, [productData, webOSVersion, panelInfo?.prdtId]); }, [productData, webOSVersion, panelInfo?.prdtId]);
const isGroupProductVisible = useMemo(() => { const isGroupProductVisible = useMemo(() => {
return ( return (
productData?.pmtSuptYn === 'Y' && productData?.pmtSuptYn === "Y" &&
productData?.grPrdtProcYn === 'Y' && productData?.grPrdtProcYn === "Y" &&
groupInfos && groupInfos &&
groupInfos.length > 0 groupInfos.length > 0
); );
@@ -393,12 +393,12 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
(hotelInfos && hotelInfos.length > 0)) && (hotelInfos && hotelInfos.length > 0)) &&
selectedIndex !== undefined selectedIndex !== undefined
) { ) {
if (panelInfo?.type === 'theme') { if (panelInfo?.type === "theme") {
const imgUrls600 = themeProductInfos[selectedIndex]?.imgUrls600 || []; const imgUrls600 = themeProductInfos[selectedIndex]?.imgUrls600 || [];
dispatch(getProductImageLength({ imageLength: imgUrls600.length })); dispatch(getProductImageLength({ imageLength: imgUrls600.length }));
return; return;
} }
if (panelInfo?.type === 'hotel') { if (panelInfo?.type === "hotel") {
const imgUrls600 = hotelInfos[selectedIndex]?.imgUrls600 || []; const imgUrls600 = hotelInfos[selectedIndex]?.imgUrls600 || [];
dispatch(getProductImageLength({ imageLength: imgUrls600.length })); dispatch(getProductImageLength({ imageLength: imgUrls600.length }));
} }
@@ -410,7 +410,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
dispatch(clearProductDetail()); dispatch(clearProductDetail());
dispatch(clearThemeDetail()); dispatch(clearThemeDetail());
dispatch(clearCouponInfo()); dispatch(clearCouponInfo());
setContainerLastFocusedElement(null, ['indicator-GridListContainer']); setContainerLastFocusedElement(null, ["indicator-GridListContainer"]);
}; };
}, [dispatch]); }, [dispatch]);
@@ -426,8 +426,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
className={css.header} className={css.header}
title={ title={
(panelInfo?.prdtId && productData?.prdtNm) || (panelInfo?.prdtId && productData?.prdtNm) ||
(panelInfo?.type === 'hotel' && hotelData?.hotelInfo.curationNm) || (panelInfo?.type === "hotel" && hotelData?.hotelInfo.curationNm) ||
(panelInfo?.type === 'theme' && themeData?.themeInfo[0]?.curationNm) (panelInfo?.type === "theme" && themeData?.themeInfo[0]?.curationNm)
} }
onBackButton onBackButton
onClick={onClick(false)} onClick={onClick(false)}
@@ -437,8 +437,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
marqueeDisabled={false} marqueeDisabled={false}
ariaLabel={ ariaLabel={
(panelInfo?.prdtId && productData?.prdtNm) || (panelInfo?.prdtId && productData?.prdtNm) ||
(panelInfo?.type === 'hotel' && hotelData?.hotelInfo.curationNm) || (panelInfo?.type === "hotel" && hotelData?.hotelInfo.curationNm) ||
(panelInfo?.type === 'theme' && themeData?.themeInfo[0]?.curationNm) (panelInfo?.type === "theme" && themeData?.themeInfo[0]?.curationNm)
} }
/> />
<TBody <TBody
@@ -515,9 +515,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
{lgCatCd && youmaylikeData && youmaylikeData.length > 0 && isOnTop && ( {lgCatCd && youmaylikeData && youmaylikeData.length > 0 && isOnTop && (
<YouMayLike <YouMayLike
isUnable={ isUnable={
productData?.pmtSuptYn === 'N' || productData?.pmtSuptYn === "N" ||
panelInfo?.type === 'hotel' || panelInfo?.type === "hotel" ||
panelInfo?.type === 'theme' panelInfo?.type === "theme"
} }
panelInfo={panelInfo} panelInfo={panelInfo}
setSelectedIndex={setSelectedIndex} setSelectedIndex={setSelectedIndex}
@@ -529,35 +529,41 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
<MobileSendPopUp <MobileSendPopUp
open={popupVisible} open={popupVisible}
onClose={handleSMSonClose} onClose={handleSMSonClose}
title={$L('Send a purchase link for this item via SMS')} title={$L("Send a purchase link for this item via SMS")}
subTitle={mobileSendPopUpSubtitle} subTitle={mobileSendPopUpSubtitle}
patncNm={productData?.patncNm} patncNm={
panelInfo?.type === "theme" &&
themeProductInfos &&
themeProductInfos[selectedIndex]
? themeProductInfos[selectedIndex].patncNm
: productData?.patncNm
}
productImg={mobileSendPopUpProductImg} productImg={mobileSendPopUpProductImg}
patnrId={panelInfo?.patnrId} patnrId={panelInfo?.patnrId}
prdtId={ prdtId={
panelInfo?.type === 'theme' && panelInfo?.type === "theme" &&
themeProductInfos && themeProductInfos &&
themeProductInfos[selectedIndex] themeProductInfos[selectedIndex]
? themeProductInfos[selectedIndex].prdtId ? themeProductInfos[selectedIndex].prdtId
: panelInfo?.prdtId : panelInfo?.prdtId
} }
smsTpCd={panelInfo?.type === 'hotel' ? 'APP00205' : 'APP00201'} smsTpCd={panelInfo?.type === "hotel" ? "APP00205" : "APP00201"}
curationId={panelInfo?.curationId} curationId={panelInfo?.curationId}
curationNm={panelInfo?.curationNm} curationNm={panelInfo?.curationNm}
hotelId={ hotelId={
panelInfo?.type === 'hotel' && hotelInfos[selectedIndex]?.hotelId panelInfo?.type === "hotel" && hotelInfos[selectedIndex]?.hotelId
} }
hotelNm={ hotelNm={
panelInfo?.type === 'hotel' && hotelInfos[selectedIndex]?.hotelNm panelInfo?.type === "hotel" && hotelInfos[selectedIndex]?.hotelNm
} }
hotelDtlUrl={ hotelDtlUrl={
panelInfo?.type === 'hotel' && panelInfo?.type === "hotel" &&
hotelInfos[selectedIndex]?.hotelDetailInfo?.hotelDtlUrl hotelInfos[selectedIndex]?.hotelDetailInfo?.hotelDtlUrl
} }
productPrice={panelInfo?.type === 'hotel' && Price()} productPrice={panelInfo?.type === "hotel" && Price()}
shopByMobileLogRef={shopByMobileLogRef} shopByMobileLogRef={shopByMobileLogRef}
spotlightId="shopbymobile_Btn" spotlightId="shopbymobile_Btn"
smsText={productInfo?.pmtSuptYn === 'Y' ? detailUrl : undefined} smsText={productInfo?.pmtSuptYn === "Y" ? detailUrl : undefined}
/> />
)} )}
</> </>

View File

@@ -172,20 +172,20 @@ export default function ShowOption({
}, [productData]); }, [productData]);
const handleMobileSendPopupOpen = useCallback(() => { const handleMobileSendPopupOpen = useCallback(() => {
if (productData && Object.keys(productData).length > 0) { if (showProductInfo && Object.keys(showProductInfo).length > 0) {
const regularPrice = productData?.priceInfo?.split("|")[0]; const regularPrice = showProductInfo?.priceInfo?.split("|")[0];
const discountPrice = productData?.priceInfo?.split("|")[1]; const discountPrice = showProductInfo?.priceInfo?.split("|")[1];
const discountRate = productData?.priceInfo?.split("|")[4]; const discountRate = showProductInfo?.priceInfo?.split("|")[4];
const logParams = { const logParams = {
status: "open", status: "open",
nowMenu: nowMenu, nowMenu: nowMenu,
partner: productData?.patncNm, partner: showProductInfo?.patncNm,
productId: productData?.prdtId, productId: showProductInfo?.prdtId,
productTitle: productData?.prdtNm, productTitle: showProductInfo?.prdtNm,
price: discountRate ? discountPrice : regularPrice, price: discountRate ? discountPrice : regularPrice,
brand: productData?.brndNm, brand: showProductInfo?.brndNm,
discount: discountRate, discount: discountRate,
category: productData?.catNm, category: showProductInfo?.catNm,
contextName: LOG_CONTEXT_NAME.SHOPBYMOBILE, contextName: LOG_CONTEXT_NAME.SHOPBYMOBILE,
messageId: LOG_MESSAGE_ID.SMB, messageId: LOG_MESSAGE_ID.SMB,
}; };