optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[통합로그]ShopNowContents 로그 정보 수정

Browse Source
This commit is contained in:
opacity@t-win.kr
2025-12-05 15:55:21 +09:00
parent d7f374a94f
commit 4e2014ae41
1 changed files with 90 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
View File

@@ -1,38 +1,60 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import classNames from 'classnames'; import classNames from "classnames";
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from "react-redux";
import { Job } from '@enact/core/util'; import { Job } from "@enact/core/util";
import Spotlight from '@enact/spotlight'; import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator'; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import { getContainerNode, setContainerLastFocusedElement } from '@enact/spotlight/src/container'; import {
getContainerNode,
setContainerLastFocusedElement,
} from "@enact/spotlight/src/container";
import { sendLogTotalRecommend } from '../../../../actions/logActions'; import { sendLogTotalRecommend } from "../../../../actions/logActions";
import { navigateToDetail, SOURCE_MENUS, pushPanel } from '../../../../actions/panelActions'; import {
import { hidePlayerOverlays } from '../../../../actions/videoPlayActions'; navigateToDetail,
import TItemCard, { TYPES } from '../../../../components/TItemCard/TItemCard'; SOURCE_MENUS,
import TVirtualGridList from '../../../../components/TVirtualGridList/TVirtualGridList'; pushPanel,
import useScrollTo from '../../../../hooks/useScrollTo'; } from "../../../../actions/panelActions";
import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../../../utils/Config'; import { hidePlayerOverlays } from "../../../../actions/videoPlayActions";
import { scaleH } from '../../../../utils/helperMethods'; import TItemCard, { TYPES } from "../../../../components/TItemCard/TItemCard";
import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents'; import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import css1 from './ShopNowContents.module.less'; import useScrollTo from "../../../../hooks/useScrollTo";
import cssV2 from './ShopNowContents.v2.module.less'; import {
LOG_CONTEXT_NAME,
LOG_MENU,
LOG_MESSAGE_ID,
panel_names,
} from "../../../../utils/Config";
import { scaleH } from "../../../../utils/helperMethods";
import ListEmptyContents from "../TabContents/ListEmptyContents/ListEmptyContents";
import css1 from "./ShopNowContents.module.less";
import cssV2 from "./ShopNowContents.v2.module.less";
const extractPriceInfo = (priceInfo) => { const extractPriceInfo = (priceInfo) => {
if (!priceInfo) return { originalPrice: '', discountedPrice: '', discountRate: '' }; if (!priceInfo)
return { originalPrice: "", discountedPrice: "", discountRate: "" };
const parts = priceInfo.split('|').map((part) => part.trim()); const parts = priceInfo.split("|").map((part) => part.trim());
return { return {
originalPrice: parts[0] || '', originalPrice: parts[0] || "",
discountedPrice: parts[1] || '', discountedPrice: parts[1] || "",
discountRate: parts[4] || '', discountRate: parts[4] || "",
}; };
}; };
const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div'); const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
export default function ShopNowContents({ export default function ShopNowContents({
shopNowInfo, shopNowInfo,
videoVerticalVisible, videoVerticalVisible,
@@ -42,7 +64,7 @@ export default function ShopNowContents({
panelInfo, panelInfo,
tabTitle, tabTitle,
version = 1, version = 1,
direction = 'vertical', direction = "vertical",
}) { }) {
const css = version === 2 ? cssV2 : css1; const css = version === 2 ? cssV2 : css1;
const { getScrollTo, scrollTop } = useScrollTo(); const { getScrollTo, scrollTop } = useScrollTo();
@@ -54,12 +76,12 @@ export default function ShopNowContents({
const gridStyle = useMemo(() => ({ height: `${height}px` }), [height]); const gridStyle = useMemo(() => ({ height: `${height}px` }), [height]);
useEffect(() => { useEffect(() => {
console.log('=== [ShopNow] Component Rendered ==='); console.log("=== [ShopNow] Component Rendered ===");
console.log('[ShopNow] shopNowInfo:', shopNowInfo); console.log("[ShopNow] shopNowInfo:", shopNowInfo);
console.log('[ShopNow] youmaylikeInfos:', youmaylikeInfos); console.log("[ShopNow] youmaylikeInfos:", youmaylikeInfos);
console.log('[ShopNow] version:', version); console.log("[ShopNow] version:", version);
console.log('[ShopNow] tabIndex:', tabIndex); console.log("[ShopNow] tabIndex:", tabIndex);
console.log('====================================='); console.log("=====================================");
}, [shopNowInfo, youmaylikeInfos, version, tabIndex]); }, [shopNowInfo, youmaylikeInfos, version, tabIndex]);
// ShopNow + YouMayLike 통합 아이템 (v2이고 shopNow < 3일 때만) // ShopNow + YouMayLike 통합 아이템 (v2이고 shopNow < 3일 때만)
@@ -69,17 +91,17 @@ export default function ShopNowContents({
// 기본: ShopNow 아이템 // 기본: ShopNow 아이템
let items = shopNowInfo.map((item) => ({ let items = shopNowInfo.map((item) => ({
...item, ...item,
_type: 'shopnow', _type: "shopnow",
})); }));
// v2 + ShopNow < 3 + YouMayLike 데이터 존재 시 통합 // v2 + ShopNow < 3 + YouMayLike 데이터 존재 시 통합
// for Test => // for Test =>
if (version === 2 && youmaylikeInfos && youmaylikeInfos.length > 0) { if (version === 2 && youmaylikeInfos && youmaylikeInfos.length > 0) {
// if (version === 2 && shopNowInfo.length < 3 && youmaylikeInfos && youmaylikeInfos.length > 0) { // if (version === 2 && shopNowInfo.length < 3 && youmaylikeInfos && youmaylikeInfos.length > 0) {
items = items.concat( items = items.concat(
youmaylikeInfos.map((item) => ({ youmaylikeInfos.map((item) => ({
...item, ...item,
_type: 'youmaylike', _type: "youmaylike",
})) }))
); );
} }
@@ -102,7 +124,7 @@ export default function ShopNowContents({
useEffect(() => { useEffect(() => {
return () => { return () => {
const gridListId = 'playVideoShopNowBox'; const gridListId = "playVideoShopNowBox";
const girdList = getContainerNode(gridListId); const girdList = getContainerNode(gridListId);
if (girdList) setContainerLastFocusedElement(null, [gridListId]); if (girdList) setContainerLastFocusedElement(null, [gridListId]);
@@ -144,14 +166,17 @@ export default function ShopNowContents({
const item = combinedItems[index]; const item = combinedItems[index];
// ===== YouMayLike 아이템 처리 ===== // ===== YouMayLike 아이템 처리 =====
if (item._type === 'youmaylike') { if (item._type === "youmaylike") {
const { imgUrl, patnrId, prdtId, prdtNm, priceInfo, offerInfo } = item; const { imgUrl, patnrId, prdtId, prdtNm, priceInfo, offerInfo } = item;
// YouMayLike 시작 지점 여부 (구분선 표시) // YouMayLike 시작 지점 여부 (구분선 표시)
const isYouMayLikeStart = shopNowInfo && index === shopNowInfo.length; const isYouMayLikeStart = shopNowInfo && index === shopNowInfo.length;
const handleYouMayLikeItemClick = () => { const handleYouMayLikeItemClick = () => {
console.log('[ShopNowContents] DetailPanel 진입 - sourceMenu:', SOURCE_MENUS.PLAYER_SHOP_NOW); console.log(
"[ShopNowContents] DetailPanel 진입 - sourceMenu:",
SOURCE_MENUS.PLAYER_SHOP_NOW
);
dispatch( dispatch(
navigateToDetail({ navigateToDetail({
@@ -195,7 +220,7 @@ export default function ShopNowContents({
onSpotlightUp={(e) => { onSpotlightUp={(e) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
Spotlight.focus('shownow_close_button'); Spotlight.focus("shownow_close_button");
}} }}
type={TYPES.horizontal} type={TYPES.horizontal}
version={version} version={version}
@@ -216,10 +241,12 @@ export default function ShopNowContents({
patncNm, patncNm,
brndNm, brndNm,
catNm, catNm,
lgCatNm,
} = item; } = item;
// 미리 계산된 가격 정보를 사용 // 미리 계산된 가격 정보를 사용
const { originalPrice, discountedPrice, discountRate } = priceInfoMap[index] || {}; const { originalPrice, discountedPrice, discountRate } =
priceInfoMap[index] || {};
const handleShopNowItemClick = () => { const handleShopNowItemClick = () => {
// ===== 기존 코드 (코멘트 처리) ===== // ===== 기존 코드 (코멘트 처리) =====
@@ -228,20 +255,20 @@ export default function ShopNowContents({
// const currentSpotlightId = currentFocusedElement?.getAttribute('data-spotlight-id'); // const currentSpotlightId = currentFocusedElement?.getAttribute('data-spotlight-id');
// console.log('[ShopNowContents] 현재 포커스된 spotlightId:', currentSpotlightId); // console.log('[ShopNowContents] 현재 포커스된 spotlightId:', currentSpotlightId);
// const params = { const params = {
// tabTitle: tabTitle[tabIndex], tabTitle: tabTitle[tabIndex],
// productId: prdtId, productId: prdtId,
// productTitle: prdtNm, productTitle: prdtNm,
// partner: patncNm, partner: patncNm,
// brand: brndNm, brand: brndNm,
// price: discountRate ? discountedPrice : originalPrice, price: discountRate ? discountedPrice : originalPrice,
// showType: panelInfo?.shptmBanrTpNm, showType: panelInfo?.shptmBanrTpNm,
// category: catNm, category: catNm ?? lgCatNm,
// discount: discountRate, discount: discountRate,
// contextName: LOG_CONTEXT_NAME.SHOW, contextName: LOG_CONTEXT_NAME.SHOW,
// messageId: LOG_MESSAGE_ID.CONTENTCLICK, messageId: LOG_MESSAGE_ID.CONTENTCLICK,
// }; };
// dispatch(sendLogTotalRecommend(params)); dispatch(sendLogTotalRecommend(params));
// // DetailPanel push 전에 VideoPlayer 오버레이 숨김 // // DetailPanel push 전에 VideoPlayer 오버레이 숨김
// dispatch(hidePlayerOverlays()); // dispatch(hidePlayerOverlays());
@@ -264,7 +291,10 @@ export default function ShopNowContents({
// ); // );
// ===== navigateToDetail 방식 (handleYouMayLikeItemClick 참고) ===== // ===== navigateToDetail 방식 (handleYouMayLikeItemClick 참고) =====
console.log('[ShopNowContents] ShopNow DetailPanel 진입 - sourceMenu:', SOURCE_MENUS.PLAYER_SHOP_NOW); console.log(
"[ShopNowContents] ShopNow DetailPanel 진입 - sourceMenu:",
SOURCE_MENUS.PLAYER_SHOP_NOW
);
dispatch( dispatch(
navigateToDetail({ navigateToDetail({
@@ -276,7 +306,7 @@ export default function ShopNowContents({
showId: playListInfo?.showId, showId: playListInfo?.showId,
liveFlag: playListInfo?.liveFlag, liveFlag: playListInfo?.liveFlag,
thumbnailUrl: playListInfo?.thumbnailUrl, thumbnailUrl: playListInfo?.thumbnailUrl,
liveReqFlag: panelInfo?.shptmBanrTpNm === 'LIVE' && 'Y', liveReqFlag: panelInfo?.shptmBanrTpNm === "LIVE" && "Y",
launchedFromPlayer: true, launchedFromPlayer: true,
}, },
}) })
@@ -304,7 +334,7 @@ export default function ShopNowContents({
// v2에서 첫 번째 아이템일 때 위로 가면 Close 버튼으로 // v2에서 첫 번째 아이템일 때 위로 가면 Close 버튼으로
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
Spotlight.focus('shownow_close_button'); Spotlight.focus("shownow_close_button");
} }
: undefined : undefined
} }
@@ -341,7 +371,9 @@ export default function ShopNowContents({
itemWidth={version === 2 ? 310 : videoVerticalVisible ? 540 : 600} itemWidth={version === 2 ? 310 : videoVerticalVisible ? 540 : 600}
itemHeight={version === 2 ? 445 : 236} itemHeight={version === 2 ? 445 : 236}
spacing={version === 2 ? 30 : 12} spacing={version === 2 ? 30 : 12}
className={videoVerticalVisible ? css.verticalItemList : css.itemList} className={
videoVerticalVisible ? css.verticalItemList : css.itemList
}
noScrollByWheel={false} noScrollByWheel={false}
spotlightId="playVideoShopNowBox" spotlightId="playVideoShopNowBox"
/> />