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

[251212] fix: FeaturedBrandsPanel관련 로그 정리

Browse Source 
🕐 커밋 시간: 2025. 12. 12. 14:41:05

📊 변경 통계:
  • 총 파일: 9개
  • 추가: +118줄
  • 삭제: -87줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/brandActions.js
  ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSeller.jsx
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TopBannerImage/TopBannerImage.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • UI 컴포넌트 아키텍처 개선
  • 중간 규모 기능 개선
  • 코드 정리 및 최적화
  • 모듈 구조 개선
This commit is contained in:
hyeon soo noh
2025-12-12 14:41:06 +09:00
parent 16a09b2e2b
commit 1ee664e8c1
9 changed files with 118 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
com.twin.app.shoptime/src/actions/brandActions.js
View File

@@ -37,12 +37,12 @@ export const getBrandList = () => (dispatch, getState) => {
export const getBrandLayoutInfo = (props) => (dispatch, getState) => { export const getBrandLayoutInfo = (props) => (dispatch, getState) => {
const { patnrId } = props; const { patnrId } = props;
console.log("[getBrandLayoutInfo] Called - patnrId:", patnrId); // console.log("[getBrandLayoutInfo] Called - patnrId:", patnrId);
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } })); dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } }));
const onSuccess = (response) => { const onSuccess = (response) => {
console.log("[getBrandLayoutInfo] onSuccess - patnrId:", patnrId, "data:", response.data.data); // console.log("[getBrandLayoutInfo] onSuccess - patnrId:", patnrId, "data:", response.data.data);
dispatch({ dispatch({
type: types.GET_BRAND_LAYOUT_INFO, type: types.GET_BRAND_LAYOUT_INFO,
@@ -55,7 +55,7 @@ export const getBrandLayoutInfo = (props) => (dispatch, getState) => {
}; };
const onFail = (error) => { const onFail = (error) => {
console.log("[getBrandLayoutInfo] onFail - patnrId:", patnrId, "error:", error); // console.log("[getBrandLayoutInfo] onFail - patnrId:", patnrId, "error:", error);
derror('getBrandLayoutInfo onFail ', error); derror('getBrandLayoutInfo onFail ', error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } })); dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
}; };
@@ -339,15 +339,15 @@ export const getBrandCategoryProductInfo = (props) => (dispatch, getState) => {
export const getBrandBestSeller = (props) => (dispatch, getState) => { export const getBrandBestSeller = (props) => (dispatch, getState) => {
const { patnrId } = props; const { patnrId } = props;
console.log("[getBrandBestSeller] Called - patnrId:", patnrId); // console.log("[getBrandBestSeller] Called - patnrId:", patnrId);
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } })); dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } }));
const onSuccess = (response) => { const onSuccess = (response) => {
console.log("[getBrandBestSeller] onSuccess - patnrId:", patnrId); // console.log("[getBrandBestSeller] onSuccess - patnrId:", patnrId);
console.log("[getBrandBestSeller] Full response:", response.data.data); // console.log("[getBrandBestSeller] Full response:", response.data.data);
console.log("[getBrandBestSeller] brandBestSellerInfo:", response.data.data.brandBestSellerInfo); // console.log("[getBrandBestSeller] brandBestSellerInfo:", response.data.data.brandBestSellerInfo);
console.log("[getBrandBestSeller] brandBestSellerTitle in response:", response.data.data.brandBestSellerTitle); // console.log("[getBrandBestSeller] brandBestSellerTitle in response:", response.data.data.brandBestSellerTitle);
dispatch({ dispatch({
type: types.GET_BRAND_BEST_SELLER, type: types.GET_BRAND_BEST_SELLER,
@@ -360,7 +360,7 @@ export const getBrandBestSeller = (props) => (dispatch, getState) => {
}; };
const onFail = (error) => { const onFail = (error) => {
console.log("[getBrandBestSeller] onFail - patnrId:", patnrId, "error:", error); // console.log("[getBrandBestSeller] onFail - patnrId:", patnrId, "error:", error);
derror('getBrandBestSeller onFail ', error); derror('getBrandBestSeller onFail ', error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } })); dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
}; };
@@ -399,12 +399,12 @@ export const getBrandShowroom = (props) => (dispatch, getState) => {
export const getBrandShopByShow = (props) => (dispatch, getState) => { export const getBrandShopByShow = (props) => (dispatch, getState) => {
const { patnrId, contsId } = props; const { patnrId, contsId } = props;
console.log("[getBrandShopByShow] Called - patnrId:", patnrId, "contsId:", contsId); // console.log("[getBrandShopByShow] Called - patnrId:", patnrId, "contsId:", contsId);
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } })); dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } }));
const onSuccess = (response) => { const onSuccess = (response) => {
console.log("[getBrandShopByShow] onSuccess - patnrId:", patnrId, "data:", response.data.data); // console.log("[getBrandShopByShow] onSuccess - patnrId:", patnrId, "data:", response.data.data);
dispatch({ dispatch({
type: types.GET_BRAND_SHOP_BY_SHOW, type: types.GET_BRAND_SHOP_BY_SHOW,
@@ -419,7 +419,7 @@ export const getBrandShopByShow = (props) => (dispatch, getState) => {
}; };
const onFail = (error) => { const onFail = (error) => {
console.log("[getBrandShopByShow] onFail - patnrId:", patnrId, "error:", error); // console.log("[getBrandShopByShow] onFail - patnrId:", patnrId, "error:", error);
derror('getBrandShopByShow onFail ', error); derror('getBrandShopByShow onFail ', error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } })); dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
}; };
@@ -434,7 +434,7 @@ export const getBrandShopByShow = (props) => (dispatch, getState) => {
export const getBrandTopBanner = (props) => (dispatch, getState) => { export const getBrandTopBanner = (props) => (dispatch, getState) => {
const { patnrId } = props; const { patnrId } = props;
console.log("[BRAND-TOP-BANNER-API] Called - patnrId:", patnrId); // console.log("[BRAND-TOP-BANNER-API] Called - patnrId:", patnrId);
// NBCU(patnrId: 21)가 아니면 호출하지 않음 // NBCU(patnrId: 21)가 아니면 호출하지 않음
if (patnrId !== 21 && patnrId !== "21") { if (patnrId !== 21 && patnrId !== "21") {
@@ -445,9 +445,9 @@ export const getBrandTopBanner = (props) => (dispatch, getState) => {
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } })); dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } }));
const onSuccess = (response) => { const onSuccess = (response) => {
console.log("[BRAND-TOP-BANNER-API] onSuccess - patnrId:", patnrId); // console.log("[BRAND-TOP-BANNER-API] onSuccess - patnrId:", patnrId);
console.log("[BRAND-TOP-BANNER-API] Full response data:", response.data.data); // console.log("[BRAND-TOP-BANNER-API] Full response data:", response.data.data);
console.log("[BRAND-TOP-BANNER-API] brandTopBannerInfo:", response.data.data.brandTopBannerInfo); // console.log("[BRAND-TOP-BANNER-API] brandTopBannerInfo:", response.data.data.brandTopBannerInfo);
dispatch({ dispatch({
type: types.GET_BRAND_TOP_BANNER, type: types.GET_BRAND_TOP_BANNER,
@@ -460,7 +460,7 @@ export const getBrandTopBanner = (props) => (dispatch, getState) => {
}; };
const onFail = (error) => { const onFail = (error) => {
console.log("[BRAND-TOP-BANNER-API] onFail - patnrId:", patnrId, "error:", error); // console.log("[BRAND-TOP-BANNER-API] onFail - patnrId:", patnrId, "error:", error);
derror('getBrandTopBanner onFail ', error); derror('getBrandTopBanner onFail ', error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } })); dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
}; };

32
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -1025,34 +1025,56 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
// ProductAllSection에 비디오가 있는지 확인 // ProductAllSection에 비디오가 있는지 확인
const hasProductVideo = fp.pipe(() => productData, fp.get('prdtMediaUrl'), fp.isNotNil)(); const hasProductVideo = fp.pipe(() => productData, fp.get('prdtMediaUrl'), fp.isNotNil)();
console.log('[BgVideo] DetailPanel - Video Control Check:', { console.log('[Detail-BG] 🎬 DetailPanel - Video Control Check (mount/update):', {
hasPlayerPanel, hasPlayerPanel,
isModal, playerPanelModalStatus: isModal,
hasProductVideo, hasProductVideo,
sourceMenu: panelInfo?.sourceMenu, sourceMenu: panelInfo?.sourceMenu,
productDataUrl: productData?.prdtMediaUrl,
timestamp: Date.now(),
}); });
// PlayerPanel이 있고, 제품에 비디오가 있을 때만 비디오 멈춤 // PlayerPanel이 있고, 제품에 비디오가 있을 때만 비디오 멈춤
if (hasPlayerPanel && hasProductVideo) { if (hasPlayerPanel && hasProductVideo) {
console.log('[BgVideo] DetailPanel - Pausing video'); console.log('[Detail-BG] ⏸️ DetailPanel - Pausing PlayerPanel video (match: playerPanel + productVideo)', {
isModalVideo: isModal,
action: isModal ? 'pauseModalVideo' : 'pauseFullscreenVideo',
timestamp: Date.now(),
});
if (isModal) { if (isModal) {
dispatch(pauseModalVideo()); dispatch(pauseModalVideo());
} else { } else {
dispatch(pauseFullscreenVideo()); dispatch(pauseFullscreenVideo());
} }
} else { } else {
console.log('[BgVideo] DetailPanel - Skipping pause'); console.log('[Detail-BG] ⏭️ DetailPanel - Skipping pause (no playerPanel or no productVideo)', {
hasPlayerPanel,
hasProductVideo,
reason: !hasPlayerPanel ? 'no playerPanel' : 'no productVideo',
timestamp: Date.now(),
});
} }
return () => { return () => {
// DetailPanel 언마운트 시: 비디오가 있었고 멈췄던 경우만 재생 재개 // DetailPanel 언마운트 시: 비디오가 있었고 멈췄던 경우만 재생 재개
if (hasPlayerPanel && hasProductVideo) { if (hasPlayerPanel && hasProductVideo) {
console.log('[BgVideo] DetailPanel - Resuming video'); console.log('[Detail-BG] ▶️ DetailPanel - Resuming PlayerPanel video (unmount cleanup)', {
isModalVideo: isModal,
action: isModal ? 'resumeModalVideo' : 'resumeFullscreenVideo',
sourceMenu: panelInfo?.sourceMenu,
timestamp: Date.now(),
});
if (isModal) { if (isModal) {
dispatch(resumeModalVideo()); dispatch(resumeModalVideo());
} else { } else {
dispatch(resumeFullscreenVideo()); dispatch(resumeFullscreenVideo());
} }
} else {
console.log('[Detail-BG] ⏭️ DetailPanel - Skipping resume on unmount', {
hasPlayerPanel,
hasProductVideo,
timestamp: Date.now(),
});
} }
}; };
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps

18
com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx
View File

@@ -77,26 +77,32 @@ export default function DetailPanelBackground({
useEffect(() => { useEffect(() => {
// launchedFromPlayer가 true이면 배경 이미지를 로드하지 않음 (PlayerPanel 비디오 보이도록) // launchedFromPlayer가 true이면 배경 이미지를 로드하지 않음 (PlayerPanel 비디오 보이도록)
if (launchedFromPlayer) { if (launchedFromPlayer) {
// console.log('[DetailPanelBackground] Skip background image loading - launchedFromPlayer=true (showing PlayerPanel video)'); console.log('[Detail-BG] 🔵 DetailPanelBackground - Skip background image (launchedFromPlayer=true, showing PlayerPanel video)', {
launchedFromPlayer,
timestamp: Date.now(),
});
setImageReady(false); setImageReady(false);
return; return;
} }
// launchedFromPlayer가 false일 때만 배경 이미지 로드 // launchedFromPlayer가 false일 때만 배경 이미지 로드
// console.log('[DetailPanelBackground] Loading background image - launchedFromPlayer=false'); console.log('[Detail-BG] 🟢 DetailPanelBackground - Loading background image (launchedFromPlayer=false)', {
patnrId,
imagePath: detailPanelBg,
});
if (ImagePreloader.isLoaded(detailPanelBg)) { if (ImagePreloader.isLoaded(detailPanelBg)) {
// console.log('[DetailPanelBackground] Using preloaded image:', detailPanelBg); console.log('[Detail-BG] ✅ DetailPanelBackground - Using preloaded image:', detailPanelBg);
setImageReady(true); setImageReady(true);
} else { } else {
// 프리로드되지 않았다면 즉시 로드 시도 // 프리로드되지 않았다면 즉시 로드 시도
// console.log('[DetailPanelBackground] Image not preloaded, loading on-demand:', detailPanelBg); console.log('[Detail-BG] 📥 DetailPanelBackground - Image not preloaded, loading on-demand:', detailPanelBg);
ImagePreloader.preloadImage(detailPanelBg) ImagePreloader.preloadImage(detailPanelBg)
.then(() => { .then(() => {
// console.log('[DetailPanelBackground] On-demand image loaded:', detailPanelBg); console.log('[Detail-BG] ✅ DetailPanelBackground - On-demand image loaded:', detailPanelBg);
setImageReady(true); setImageReady(true);
}) })
.catch((e) => { .catch((e) => {
// console.error('[DetailPanelBackground] On-demand image load failed:', e); console.error('[Detail-BG] ❌ DetailPanelBackground - On-demand image load failed:', e);
// 실패해도 이미지를 표시해야 함 // 실패해도 이미지를 표시해야 함
setImageReady(true); setImageReady(true);
}); });

31
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx
View File

@@ -20,11 +20,11 @@ export default memo(function Banner({
// NBCU(patnrId: 21)인 경우 Top Banner 정보 사용 // NBCU(patnrId: 21)인 경우 Top Banner 정보 사용
const isNBCU = selectedPatnrId === 21 || selectedPatnrId === "21"; const isNBCU = selectedPatnrId === 21 || selectedPatnrId === "21";
console.log("[FB-BANNER-COMP] ===== BANNER COMPONENT START ====="); // console.log("[FB-BANNER-COMP] ===== BANNER COMPONENT START =====");
console.log("[FB-BANNER-COMP] selectedPatnrId:", selectedPatnrId, "(type:", typeof selectedPatnrId, ")"); // console.log("[FB-BANNER-COMP] selectedPatnrId:", selectedPatnrId, "(type:", typeof selectedPatnrId, ")");
console.log("[FB-BANNER-COMP] panelPatnrId:", panelPatnrId, "(type:", typeof panelPatnrId, ")"); // console.log("[FB-BANNER-COMP] panelPatnrId:", panelPatnrId, "(type:", typeof panelPatnrId, ")");
console.log("[FB-BANNER-COMP] isNBCU:", isNBCU); // console.log("[FB-BANNER-COMP] isNBCU:", isNBCU);
console.log("[FB-BANNER-COMP] brandTopBannerInfo:", brandTopBannerInfo); // console.log("[FB-BANNER-COMP] brandTopBannerInfo:", brandTopBannerInfo);
// Top Banner 정보에서 필요한 필드 추출 // Top Banner 정보에서 필요한 필드 추출
const { const {
@@ -41,17 +41,16 @@ export default memo(function Banner({
const bannerImageSrc = topImgPath; // isNBCU ? banrImgUrl : topImgPath; const bannerImageSrc = topImgPath; // isNBCU ? banrImgUrl : topImgPath;
const bannerImageAlt = topImgAlt; // isNBCU ? banrImgNm || banrNm : topImgAlt; const bannerImageAlt = topImgAlt; // isNBCU ? banrImgNm || banrNm : topImgAlt;
console.log("[FB-BANNER-COMP] Top Banner 이미지는 현재 비활성화됨"); // console.log("[FB-BANNER-COMP] Top Banner 이미지는 현재 비활성화됨");
if (isNBCU && brandTopBannerInfo) { // if (isNBCU && brandTopBannerInfo) {
console.log("[FB-BANNER-COMP] NBCU Top Banner 데이터 수신 (사용하지 않음):"); // console.log("[FB-BANNER-COMP] NBCU Top Banner 데이터 수신 (사용하지 않음):");
console.log("[FB-BANNER-COMP] - banrImgUrl:", banrImgUrl); // console.log("[FB-BANNER-COMP] - banrImgUrl:", banrImgUrl);
console.log("[FB-BANNER-COMP] - pupBanrImgUrl:", pupBanrImgUrl); // console.log("[FB-BANNER-COMP] - pupBanrImgUrl:", pupBanrImgUrl);
console.log("[FB-BANNER-COMP] - pupBanrTtl:", pupBanrTtl); // console.log("[FB-BANNER-COMP] - pupBanrTtl:", pupBanrTtl);
} // }
console.log("[FB-BANNER-COMP] Using original Top Image"); // console.log("[FB-BANNER-COMP] Using original Top Image");
console.log("[FB-BANNER-COMP] bannerImageSrc:", bannerImageSrc); // console.log("[FB-BANNER-COMP] bannerImageSrc:", bannerImageSrc);
console.log("[FB-BANNER-COMP] ===== BANNER COMPONENT END ====="); // console.log("[FB-BANNER-COMP] ===== BANNER COMPONENT END =====");
return ( return (
<div className={css.container}> <div className={css.container}>
<figure> <figure>

4
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSeller.jsx
View File

@@ -32,8 +32,8 @@ const FeaturedBestSeller = ({
// brandBestSellerTitle 우선 사용, 없으면 shelfTitle, 없으면 기본값 // brandBestSellerTitle 우선 사용, 없으면 shelfTitle, 없으면 기본값
const displayTitle = brandBestSellerTitle || shelfTitle || $L(STRING_CONF.BEST_SELLER); const displayTitle = brandBestSellerTitle || shelfTitle || $L(STRING_CONF.BEST_SELLER);
console.log("[FeaturedBestSeller] brandBestSellerTitle:", brandBestSellerTitle); // console.log("[FeaturedBestSeller] brandBestSellerTitle:", brandBestSellerTitle);
console.log("[FeaturedBestSeller] displayTitle:", displayTitle); // console.log("[FeaturedBestSeller] displayTitle:", displayTitle);
const _handleItemFocus = useCallback(() => { const _handleItemFocus = useCallback(() => {
if (handleItemFocus) handleItemFocus(spotlightId, shelfOrder); if (handleItemFocus) handleItemFocus(spotlightId, shelfOrder);

8
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx
View File

@@ -60,9 +60,9 @@ export default function FeaturedBestSellerList({
const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo); const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
console.log("[FeaturedBestSellerList] Mounted - selectedPatnrId:", selectedPatnrId); // console.log("[FeaturedBestSellerList] Mounted - selectedPatnrId:", selectedPatnrId);
console.log("[FeaturedBestSellerList] brandBestSellerInfo:", brandBestSellerInfo); // console.log("[FeaturedBestSellerList] brandBestSellerInfo:", brandBestSellerInfo);
console.log("[FeaturedBestSellerList] Data count:", brandBestSellerInfo?.length || 0); // console.log("[FeaturedBestSellerList] Data count:", brandBestSellerInfo?.length || 0);
const cursorVisible = useSelector( const cursorVisible = useSelector(
(state) => state.common.appStatus.cursorVisible (state) => state.common.appStatus.cursorVisible
@@ -160,7 +160,7 @@ export default function FeaturedBestSellerList({
euEnrgLblInfos, euEnrgLblInfos,
} = brandBestSellerInfo[index]; } = brandBestSellerInfo[index];
console.log("[FeaturedBestSellerList] renderItem - index:", index, "patnrId:", patnrId, "rankOrd:", rankOrd, "prdtNm:", prdtNm); // console.log("[FeaturedBestSellerList] renderItem - index:", index, "patnrId:", patnrId, "rankOrd:", rankOrd, "prdtNm:", prdtNm);
const rankText = const rankText =
rankOrd === 1 rankOrd === 1

56
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
View File

@@ -448,12 +448,12 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
); );
const renderPageItem = useCallback(() => { const renderPageItem = useCallback(() => {
console.log("[FeaturedBrandsPanel] renderPageItem - sortedBrandLayoutInfo length:", sortedBrandLayoutInfo.length); // console.log("[FeaturedBrandsPanel] renderPageItem - sortedBrandLayoutInfo length:", sortedBrandLayoutInfo.length);
console.log("[FeaturedBrandsPanel] renderPageItem - sortedBrandLayoutInfo items:", sortedBrandLayoutInfo.map(el => el.shptmBrndOptTpCd)); // console.log("[FeaturedBrandsPanel] renderPageItem - sortedBrandLayoutInfo items:", sortedBrandLayoutInfo.map(el => el.shptmBrndOptTpCd));
return ( return (
<> <>
{sortedBrandLayoutInfo.map((el, idx) => { {sortedBrandLayoutInfo.map((el, idx) => {
console.log("[FeaturedBrandsPanel] Processing template code:", el.shptmBrndOptTpCd); // console.log("[FeaturedBrandsPanel] Processing template code:", el.shptmBrndOptTpCd);
switch (el.shptmBrndOptTpCd) { switch (el.shptmBrndOptTpCd) {
case TEMPLATE_CODE_CONF.LIVE_CHANNELS: { case TEMPLATE_CODE_CONF.LIVE_CHANNELS: {
return ( return (
@@ -524,10 +524,10 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
} }
case TEMPLATE_CODE_CONF.BEST_SELLER: { case TEMPLATE_CODE_CONF.BEST_SELLER: {
console.log("[FeaturedBrandsPanel] BEST_SELLER - patnrId:", selectedPatnrId); // console.log("[FeaturedBrandsPanel] BEST_SELLER - patnrId:", selectedPatnrId);
console.log("[FeaturedBrandsPanel] BEST_SELLER - hasTemplateCode:", hasTemplateCodeWithValue(sortedBrandLayoutInfo, TEMPLATE_CODE_CONF.BEST_SELLER)); // console.log("[FeaturedBrandsPanel] BEST_SELLER - hasTemplateCode:", hasTemplateCodeWithValue(sortedBrandLayoutInfo, TEMPLATE_CODE_CONF.BEST_SELLER));
console.log("[FeaturedBrandsPanel] BEST_SELLER - shouldRender:", shouldRenderComponent(brandBestSellerInfo)); // console.log("[FeaturedBrandsPanel] BEST_SELLER - shouldRender:", shouldRenderComponent(brandBestSellerInfo));
console.log("[FeaturedBrandsPanel] BEST_SELLER - data:", brandBestSellerInfo); // console.log("[FeaturedBrandsPanel] BEST_SELLER - data:", brandBestSellerInfo);
return ( return (
<React.Fragment key={el.shptmBrndOptTpCd}> <React.Fragment key={el.shptmBrndOptTpCd}>
{hasTemplateCodeWithValue( {hasTemplateCodeWithValue(
@@ -536,7 +536,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
) && ) &&
shouldRenderComponent(brandBestSellerInfo) && ( shouldRenderComponent(brandBestSellerInfo) && (
<> <>
{console.log("[FeaturedBrandsPanel] Rendering FeaturedBestSeller for patnrId:", selectedPatnrId)} {/* {console.log("[FeaturedBrandsPanel] Rendering FeaturedBestSeller for patnrId:", selectedPatnrId)} */}
<FeaturedBestSeller <FeaturedBestSeller
brandBestSellerInfo={brandBestSellerInfo} brandBestSellerInfo={brandBestSellerInfo}
brandBestSellerTitle={brandBestSellerTitle} brandBestSellerTitle={brandBestSellerTitle}
@@ -699,10 +699,10 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
} }
case TEMPLATE_CODE_CONF.NBCU: { case TEMPLATE_CODE_CONF.NBCU: {
console.log("[FeaturedBrandsPanel] NBCU - patnrId:", selectedPatnrId); // console.log("[FeaturedBrandsPanel] NBCU - patnrId:", selectedPatnrId);
console.log("[FeaturedBrandsPanel] NBCU - hasTemplateCode:", hasTemplateCodeWithValue(sortedBrandLayoutInfo, TEMPLATE_CODE_CONF.NBCU)); // console.log("[FeaturedBrandsPanel] NBCU - hasTemplateCode:", hasTemplateCodeWithValue(sortedBrandLayoutInfo, TEMPLATE_CODE_CONF.NBCU));
console.log("[FeaturedBrandsPanel] NBCU - shouldRender:", shouldRenderComponent(brandShopByShowContsList)); // console.log("[FeaturedBrandsPanel] NBCU - shouldRender:", shouldRenderComponent(brandShopByShowContsList));
console.log("[FeaturedBrandsPanel] NBCU - data:", brandShopByShowContsList); // console.log("[FeaturedBrandsPanel] NBCU - data:", brandShopByShowContsList);
return ( return (
<React.Fragment key={el.shptmBrndOptTpCd}> <React.Fragment key={el.shptmBrndOptTpCd}>
{hasTemplateCodeWithValue( {hasTemplateCodeWithValue(
@@ -711,7 +711,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
) && ) &&
shouldRenderComponent(brandShopByShowContsList) && ( shouldRenderComponent(brandShopByShowContsList) && (
<> <>
{console.log("[FeaturedBrandsPanel] Rendering ShopByShow for patnrId:", selectedPatnrId)} {/* {console.log("[FeaturedBrandsPanel] Rendering ShopByShow for patnrId:", selectedPatnrId)} */}
<ShopByShow <ShopByShow
brandShopByShowContsList={brandShopByShowContsList} brandShopByShowContsList={brandShopByShowContsList}
brandShopByShowContsInfo={brandShopByShowContsInfo} brandShopByShowContsInfo={brandShopByShowContsInfo}
@@ -791,7 +791,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
// effect: layout information fetching due to partner id change // effect: layout information fetching due to partner id change
useEffect(() => { useEffect(() => {
if (!fromDetail) { if (!fromDetail) {
console.log("[FeaturedBrandsPanel] Layout Info Effect - patnrId:", panelInfo?.patnrId); // console.log("[FeaturedBrandsPanel] Layout Info Effect - patnrId:", panelInfo?.patnrId);
dispatch({ type: types.RESET_BRAND_LAYOUT_INFO }); dispatch({ type: types.RESET_BRAND_LAYOUT_INFO });
dispatch(getBrandLayoutInfo({ patnrId: panelInfo?.patnrId })); dispatch(getBrandLayoutInfo({ patnrId: panelInfo?.patnrId }));
setIsInitialFocusOccurred(false); setIsInitialFocusOccurred(false);
@@ -818,9 +818,9 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
// effect: data fetching based on brandLayoutInfo and selectedPatnrId // effect: data fetching based on brandLayoutInfo and selectedPatnrId
useEffect(() => { useEffect(() => {
console.log("[FB-PANEL-DATA-FETCH] Effect triggered"); // console.log("[FB-PANEL-DATA-FETCH] Effect triggered");
console.log("[FB-PANEL-DATA-FETCH] sortedBrandLayoutInfo:", sortedBrandLayoutInfo); // console.log("[FB-PANEL-DATA-FETCH] sortedBrandLayoutInfo:", sortedBrandLayoutInfo);
console.log("[FB-PANEL-DATA-FETCH] selectedPatnrId:", selectedPatnrId); // console.log("[FB-PANEL-DATA-FETCH] selectedPatnrId:", selectedPatnrId);
// 🆕 [251210] patnrId 변경 시 조회 상태 초기화 // 🆕 [251210] patnrId 변경 시 조회 상태 초기화
if (selectedPatnrId) { if (selectedPatnrId) {
@@ -828,14 +828,14 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
// 이전 patnrId와 다르면 ref 초기화 // 이전 patnrId와 다르면 ref 초기화
const currentFetchKeys = Array.from(fetchedCategoryGroupsRef.current).filter(key => key.startsWith(patnrIdString)); const currentFetchKeys = Array.from(fetchedCategoryGroupsRef.current).filter(key => key.startsWith(patnrIdString));
if (currentFetchKeys.length === 0) { if (currentFetchKeys.length === 0) {
console.log("[FB-PANEL-DATA-FETCH] patnrId changed, clearing category group fetch status"); // console.log("[FB-PANEL-DATA-FETCH] patnrId changed, clearing category group fetch status");
// 다른 patnrId로 전환 시 ref 초기화 // 다른 patnrId로 전환 시 ref 초기화
fetchedCategoryGroupsRef.current.clear(); fetchedCategoryGroupsRef.current.clear();
} }
} }
if (sortedBrandLayoutInfo && selectedPatnrId) { if (sortedBrandLayoutInfo && selectedPatnrId) {
console.log("[FB-PANEL-DATA-FETCH] Fetching data - patnrId:", selectedPatnrId); // console.log("[FB-PANEL-DATA-FETCH] Fetching data - patnrId:", selectedPatnrId);
Object.entries(DISPATCH_MAP) // Object.entries(DISPATCH_MAP) //
.forEach(([templateCode, action]) => { .forEach(([templateCode, action]) => {
if (hasTemplateCodeWithValue(sortedBrandLayoutInfo, templateCode)) { if (hasTemplateCodeWithValue(sortedBrandLayoutInfo, templateCode)) {
@@ -845,20 +845,20 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromDetail && fromDetail &&
shouldRenderComponent(brandShopByShowContsList) shouldRenderComponent(brandShopByShowContsList)
) { ) {
console.log("[FB-PANEL-DATA-FETCH] Skip re-fetch ShopByShow on return from detail"); // console.log("[FB-PANEL-DATA-FETCH] Skip re-fetch ShopByShow on return from detail");
return; return;
} }
console.log("[FB-PANEL-DATA-FETCH] Dispatching for template:", templateCode, "patnrId:", selectedPatnrId); // console.log("[FB-PANEL-DATA-FETCH] Dispatching for template:", templateCode, "patnrId:", selectedPatnrId);
dispatch(action({ patnrId: selectedPatnrId })); dispatch(action({ patnrId: selectedPatnrId }));
} }
}); });
// NBCU(patnrId: 21)인 경우 Top Banner API 호출 // NBCU(patnrId: 21)인 경우 Top Banner API 호출
if (selectedPatnrId === 21 || selectedPatnrId === "21") { if (selectedPatnrId === 21 || selectedPatnrId === "21") {
console.log("[FB-PANEL-TOP-BANNER] NBCU(patnrId=21) detected - calling Top Banner API"); // console.log("[FB-PANEL-TOP-BANNER] NBCU(patnrId=21) detected - calling Top Banner API");
console.log("[FB-PANEL-TOP-BANNER] selectedPatnrId:", selectedPatnrId, "(type:", typeof selectedPatnrId, ")"); // console.log("[FB-PANEL-TOP-BANNER] selectedPatnrId:", selectedPatnrId, "(type:", typeof selectedPatnrId, ")");
console.log("[FB-PANEL-TOP-BANNER] Before API call - brandTopBannerInfo:", brandTopBannerInfo); // console.log("[FB-PANEL-TOP-BANNER] Before API call - brandTopBannerInfo:", brandTopBannerInfo);
dispatch(getBrandTopBanner({ patnrId: selectedPatnrId })); dispatch(getBrandTopBanner({ patnrId: selectedPatnrId }));
} }
@@ -869,8 +869,8 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
// 🆕 [251210] patnrId=21인 경우 모든 카테고리 그룹 데이터 미리 조회 // 🆕 [251210] patnrId=21인 경우 모든 카테고리 그룹 데이터 미리 조회
useEffect(() => { useEffect(() => {
if (selectedPatnrId === 21 || selectedPatnrId === "21") { if (selectedPatnrId === 21 || selectedPatnrId === "21") {
console.log("[FB-PANEL-CATEGORY-GROUPS] patnrId=21 detected - fetching all category group data"); // console.log("[FB-PANEL-CATEGORY-GROUPS] patnrId=21 detected - fetching all category group data");
console.log("[FB-PANEL-CATEGORY-GROUPS] brandShopByShowContsList:", brandShopByShowContsList); // console.log("[FB-PANEL-CATEGORY-GROUPS] brandShopByShowContsList:", brandShopByShowContsList);
// 각 카테고리(contsId)별 그룹 데이터 조회 // 각 카테고리(contsId)별 그룹 데이터 조회
if (brandShopByShowContsList && brandShopByShowContsList.length > 0) { if (brandShopByShowContsList && brandShopByShowContsList.length > 0) {
@@ -879,14 +879,14 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
// useRef로 이미 조회된 contsId 추적 (무한루프 방지) // useRef로 이미 조회된 contsId 추적 (무한루프 방지)
if (!fetchedCategoryGroupsRef.current.has(fetchKey)) { if (!fetchedCategoryGroupsRef.current.has(fetchKey)) {
console.log("[FB-PANEL-CATEGORY-GROUPS] Fetching category group for contsId:", conts.contsId); // console.log("[FB-PANEL-CATEGORY-GROUPS] Fetching category group for contsId:", conts.contsId);
fetchedCategoryGroupsRef.current.add(fetchKey); // 조회 상태 기록 fetchedCategoryGroupsRef.current.add(fetchKey); // 조회 상태 기록
dispatch(getBrandShopByShow({ dispatch(getBrandShopByShow({
patnrId: selectedPatnrId, patnrId: selectedPatnrId,
contsId: conts.contsId contsId: conts.contsId
})); }));
} else { } else {
console.log("[FB-PANEL-CATEGORY-GROUPS] Category group already fetched for contsId:", conts.contsId); // console.log("[FB-PANEL-CATEGORY-GROUPS] Category group already fetched for contsId:", conts.contsId);
} }
}); });
} }

12
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TopBannerImage/TopBannerImage.jsx
View File

@@ -15,16 +15,16 @@ import css from './TopBannerImage.module.less';
const SpottableDiv = Spottable("div"); const SpottableDiv = Spottable("div");
const TopBannerImage = memo(({ banrImgUrl, banrImgNm, banrNm, pupBanrImgUrl, pupBanrImgNm, spotlightId }) => { const TopBannerImage = memo(({ banrImgUrl, banrImgNm, banrNm, pupBanrImgUrl, pupBanrImgNm, spotlightId }) => {
console.log("[TOP-BANNER-IMG] Rendering with URL:", banrImgUrl); // console.log("[TOP-BANNER-IMG] Rendering with URL:", banrImgUrl);
console.log("[TOP-BANNER-IMG] spotlightId:", spotlightId); // console.log("[TOP-BANNER-IMG] spotlightId:", spotlightId);
const dispatch = useDispatch(); const dispatch = useDispatch();
const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 }); const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
const handleClick = useCallback(() => { const handleClick = useCallback(() => {
console.log("[TOP-BANNER-IMG] Clicked - Opening popup"); // console.log("[TOP-BANNER-IMG] Clicked - Opening popup");
if (pupBanrImgUrl) { if (pupBanrImgUrl) {
console.log("[TOP-BANNER-IMG] Dispatching topBannerImagePopup"); // console.log("[TOP-BANNER-IMG] Dispatching topBannerImagePopup");
dispatch(setShowPopup({ dispatch(setShowPopup({
activePopup: 'topBannerImagePopup', activePopup: 'topBannerImagePopup',
data: { data: {
@@ -37,7 +37,7 @@ const TopBannerImage = memo(({ banrImgUrl, banrImgNm, banrNm, pupBanrImgUrl, pup
const handleImageLoad = useCallback((e) => { const handleImageLoad = useCallback((e) => {
const img = e.target; const img = e.target;
console.log("[TOP-BANNER-IMG] Image loaded - dimensions:", img.naturalWidth, "x", img.naturalHeight); // console.log("[TOP-BANNER-IMG] Image loaded - dimensions:", img.naturalWidth, "x", img.naturalHeight);
// 원본 이미지 크기 // 원본 이미지 크기
const naturalWidth = img.naturalWidth; const naturalWidth = img.naturalWidth;
@@ -50,7 +50,7 @@ const TopBannerImage = memo(({ banrImgUrl, banrImgNm, banrNm, pupBanrImgUrl, pup
}, []); }, []);
if (!banrImgUrl) { if (!banrImgUrl) {
console.log("[TOP-BANNER-IMG] No image URL provided"); // console.log("[TOP-BANNER-IMG] No image URL provided");
return null; return null;
} }

10
com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
View File

@@ -1161,6 +1161,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
} }
if (!panelInfo.modal) { if (!panelInfo.modal) {
console.log('[PlayerPanel] popPanel - closeButtonHandler');
dispatch(PanelActions.popPanel()); dispatch(PanelActions.popPanel());
dispatch(changeAppStatus({ cursorVisible: false })); dispatch(changeAppStatus({ cursorVisible: false }));
@@ -1192,6 +1193,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
return () => { return () => {
// 패널이 2개 존재할때만 popPanel 진행 // 패널이 2개 존재할때만 popPanel 진행
if (panelInfo.modal && !isOnTop) { if (panelInfo.modal && !isOnTop) {
console.log('[PlayerPanel] popPanel - useEffect cleanup');
dispatch(PanelActions.popPanel()); dispatch(PanelActions.popPanel());
} else { } else {
Spotlight.focus('tbody'); Spotlight.focus('tbody');
@@ -1810,9 +1812,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
panelInfo?.modalContainerId panelInfo?.modalContainerId
) { ) {
// case: Featured Brands // case: Featured Brands
if (panelInfo?.sourcePanel === panel_names.FEATURED_BRANDS_PANEL) { // if (panelInfo?.sourcePanel === panel_names.FEATURED_BRANDS_PANEL) {
dispatch(PanelActions.popPanel()); // dispatch(PanelActions.popPanel());
} // }
console.log('[PlayerPanel] Condition 4: Handling video error in fullscreen mode');
} }
}, [ }, [
broadcast?.type, broadcast?.type,
@@ -2384,6 +2387,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
); );
Spotlight.pause(); Spotlight.pause();
timeoutRef.current = setTimeout(() => { timeoutRef.current = setTimeout(() => {
console.log('[PlayerPanel] popPanel - VIDEO_END_ACTION_DELAY');
Spotlight.resume(); Spotlight.resume();
dispatch(PanelActions.popPanel()); dispatch(PanelActions.popPanel());
}, VIDEO_END_ACTION_DELAY); }, VIDEO_END_ACTION_DELAY);