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) => {
const { patnrId } = props;
console.log("[getBrandLayoutInfo] Called - patnrId:", patnrId);
// console.log("[getBrandLayoutInfo] Called - patnrId:", patnrId);
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } }));
const onSuccess = (response) => {
console.log("[getBrandLayoutInfo] onSuccess - patnrId:", patnrId, "data:", response.data.data);
// console.log("[getBrandLayoutInfo] onSuccess - patnrId:", patnrId, "data:", response.data.data);
dispatch({
type: types.GET_BRAND_LAYOUT_INFO,
@@ -55,7 +55,7 @@ export const getBrandLayoutInfo = (props) => (dispatch, getState) => {
};
const onFail = (error) => {
console.log("[getBrandLayoutInfo] onFail - patnrId:", patnrId, "error:", error);
// console.log("[getBrandLayoutInfo] onFail - patnrId:", patnrId, "error:", error);
derror('getBrandLayoutInfo onFail ', error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
@@ -339,15 +339,15 @@ export const getBrandCategoryProductInfo = (props) => (dispatch, getState) => {
export const getBrandBestSeller = (props) => (dispatch, getState) => {
const { patnrId } = props;
console.log("[getBrandBestSeller] Called - patnrId:", patnrId);
// console.log("[getBrandBestSeller] Called - patnrId:", patnrId);
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } }));
const onSuccess = (response) => {
console.log("[getBrandBestSeller] onSuccess - patnrId:", patnrId);
console.log("[getBrandBestSeller] Full response:", response.data.data);
console.log("[getBrandBestSeller] brandBestSellerInfo:", response.data.data.brandBestSellerInfo);
console.log("[getBrandBestSeller] brandBestSellerTitle in response:", response.data.data.brandBestSellerTitle);
// console.log("[getBrandBestSeller] onSuccess - patnrId:", patnrId);
// console.log("[getBrandBestSeller] Full response:", response.data.data);
// console.log("[getBrandBestSeller] brandBestSellerInfo:", response.data.data.brandBestSellerInfo);
// console.log("[getBrandBestSeller] brandBestSellerTitle in response:", response.data.data.brandBestSellerTitle);
dispatch({
type: types.GET_BRAND_BEST_SELLER,
@@ -360,7 +360,7 @@ export const getBrandBestSeller = (props) => (dispatch, getState) => {
};
const onFail = (error) => {
console.log("[getBrandBestSeller] onFail - patnrId:", patnrId, "error:", error);
// console.log("[getBrandBestSeller] onFail - patnrId:", patnrId, "error:", error);
derror('getBrandBestSeller onFail ', error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
@@ -399,12 +399,12 @@ export const getBrandShowroom = (props) => (dispatch, getState) => {
export const getBrandShopByShow = (props) => (dispatch, getState) => {
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' } }));
const onSuccess = (response) => {
console.log("[getBrandShopByShow] onSuccess - patnrId:", patnrId, "data:", response.data.data);
// console.log("[getBrandShopByShow] onSuccess - patnrId:", patnrId, "data:", response.data.data);
dispatch({
type: types.GET_BRAND_SHOP_BY_SHOW,
@@ -419,7 +419,7 @@ export const getBrandShopByShow = (props) => (dispatch, getState) => {
};
const onFail = (error) => {
console.log("[getBrandShopByShow] onFail - patnrId:", patnrId, "error:", error);
// console.log("[getBrandShopByShow] onFail - patnrId:", patnrId, "error:", error);
derror('getBrandShopByShow onFail ', error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
@@ -434,7 +434,7 @@ export const getBrandShopByShow = (props) => (dispatch, getState) => {
export const getBrandTopBanner = (props) => (dispatch, getState) => {
const { patnrId } = props;
console.log("[BRAND-TOP-BANNER-API] Called - patnrId:", patnrId);
// console.log("[BRAND-TOP-BANNER-API] Called - patnrId:", patnrId);
// NBCU(patnrId: 21)가 아니면 호출하지 않음
if (patnrId !== 21 && patnrId !== "21") {
@@ -445,9 +445,9 @@ export const getBrandTopBanner = (props) => (dispatch, getState) => {
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } }));
const onSuccess = (response) => {
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] brandTopBannerInfo:", response.data.data.brandTopBannerInfo);
// 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] brandTopBannerInfo:", response.data.data.brandTopBannerInfo);
dispatch({
type: types.GET_BRAND_TOP_BANNER,
@@ -460,7 +460,7 @@ export const getBrandTopBanner = (props) => (dispatch, getState) => {
};
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);
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에 비디오가 있는지 확인
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,
isModal,
playerPanelModalStatus: isModal,
hasProductVideo,
sourceMenu: panelInfo?.sourceMenu,
productDataUrl: productData?.prdtMediaUrl,
timestamp: Date.now(),
});
// PlayerPanel이 있고, 제품에 비디오가 있을 때만 비디오 멈춤
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) {
dispatch(pauseModalVideo());
} else {
dispatch(pauseFullscreenVideo());
}
} 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 () => {
// DetailPanel 언마운트 시: 비디오가 있었고 멈췄던 경우만 재생 재개
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) {
dispatch(resumeModalVideo());
} else {
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

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

@@ -77,26 +77,32 @@ export default function DetailPanelBackground({
useEffect(() => {
// launchedFromPlayer가 true이면 배경 이미지를 로드하지 않음 (PlayerPanel 비디오 보이도록)
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);
return;
}
// 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)) {
// console.log('[DetailPanelBackground] Using preloaded image:', detailPanelBg);
console.log('[Detail-BG] ✅ DetailPanelBackground - Using preloaded image:', detailPanelBg);
setImageReady(true);
} 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)
.then(() => {
// console.log('[DetailPanelBackground] On-demand image loaded:', detailPanelBg);
console.log('[Detail-BG] ✅ DetailPanelBackground - On-demand image loaded:', detailPanelBg);
setImageReady(true);
})
.catch((e) => {
// console.error('[DetailPanelBackground] On-demand image load failed:', e);
console.error('[Detail-BG] ❌ DetailPanelBackground - On-demand image load failed:', e);
// 실패해도 이미지를 표시해야 함
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 정보 사용
const isNBCU = selectedPatnrId === 21 || selectedPatnrId === "21";
console.log("[FB-BANNER-COMP] ===== BANNER COMPONENT START =====");
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] isNBCU:", isNBCU);
console.log("[FB-BANNER-COMP] brandTopBannerInfo:", brandTopBannerInfo);
// console.log("[FB-BANNER-COMP] ===== BANNER COMPONENT START =====");
// 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] isNBCU:", isNBCU);
// console.log("[FB-BANNER-COMP] brandTopBannerInfo:", brandTopBannerInfo);
// Top Banner 정보에서 필요한 필드 추출
const {
@@ -41,17 +41,16 @@ export default memo(function Banner({
const bannerImageSrc = topImgPath; // isNBCU ? banrImgUrl : topImgPath;
const bannerImageAlt = topImgAlt; // isNBCU ? banrImgNm || banrNm : topImgAlt;
console.log("[FB-BANNER-COMP] Top Banner 이미지는 현재 비활성화됨");
if (isNBCU && brandTopBannerInfo) {
console.log("[FB-BANNER-COMP] NBCU Top Banner 데이터 수신 (사용하지 않음):");
console.log("[FB-BANNER-COMP] - banrImgUrl:", banrImgUrl);
console.log("[FB-BANNER-COMP] - pupBanrImgUrl:", pupBanrImgUrl);
console.log("[FB-BANNER-COMP] - pupBanrTtl:", pupBanrTtl);
}
console.log("[FB-BANNER-COMP] Using original Top Image");
console.log("[FB-BANNER-COMP] bannerImageSrc:", bannerImageSrc);
console.log("[FB-BANNER-COMP] ===== BANNER COMPONENT END =====");
// console.log("[FB-BANNER-COMP] Top Banner 이미지는 현재 비활성화됨");
// if (isNBCU && brandTopBannerInfo) {
// console.log("[FB-BANNER-COMP] NBCU Top Banner 데이터 수신 (사용하지 않음):");
// console.log("[FB-BANNER-COMP] - banrImgUrl:", banrImgUrl);
// console.log("[FB-BANNER-COMP] - pupBanrImgUrl:", pupBanrImgUrl);
// console.log("[FB-BANNER-COMP] - pupBanrTtl:", pupBanrTtl);
// }
// console.log("[FB-BANNER-COMP] Using original Top Image");
// console.log("[FB-BANNER-COMP] bannerImageSrc:", bannerImageSrc);
// console.log("[FB-BANNER-COMP] ===== BANNER COMPONENT END =====");
return (
<div className={css.container}>
<figure>

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

@@ -32,8 +32,8 @@ const FeaturedBestSeller = ({
// brandBestSellerTitle 우선 사용, 없으면 shelfTitle, 없으면 기본값
const displayTitle = brandBestSellerTitle || shelfTitle || $L(STRING_CONF.BEST_SELLER);
console.log("[FeaturedBestSeller] brandBestSellerTitle:", brandBestSellerTitle);
console.log("[FeaturedBestSeller] displayTitle:", displayTitle);
// console.log("[FeaturedBestSeller] brandBestSellerTitle:", brandBestSellerTitle);
// console.log("[FeaturedBestSeller] displayTitle:", displayTitle);
const _handleItemFocus = useCallback(() => {
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);
console.log("[FeaturedBestSellerList] Mounted - selectedPatnrId:", selectedPatnrId);
console.log("[FeaturedBestSellerList] brandBestSellerInfo:", brandBestSellerInfo);
console.log("[FeaturedBestSellerList] Data count:", brandBestSellerInfo?.length || 0);
// console.log("[FeaturedBestSellerList] Mounted - selectedPatnrId:", selectedPatnrId);
// console.log("[FeaturedBestSellerList] brandBestSellerInfo:", brandBestSellerInfo);
// console.log("[FeaturedBestSellerList] Data count:", brandBestSellerInfo?.length || 0);
const cursorVisible = useSelector(
(state) => state.common.appStatus.cursorVisible
@@ -160,7 +160,7 @@ export default function FeaturedBestSellerList({
euEnrgLblInfos,
} = 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 =
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(() => {
console.log("[FeaturedBrandsPanel] renderPageItem - sortedBrandLayoutInfo length:", sortedBrandLayoutInfo.length);
console.log("[FeaturedBrandsPanel] renderPageItem - sortedBrandLayoutInfo items:", sortedBrandLayoutInfo.map(el => el.shptmBrndOptTpCd));
// console.log("[FeaturedBrandsPanel] renderPageItem - sortedBrandLayoutInfo length:", sortedBrandLayoutInfo.length);
// console.log("[FeaturedBrandsPanel] renderPageItem - sortedBrandLayoutInfo items:", sortedBrandLayoutInfo.map(el => el.shptmBrndOptTpCd));
return (
<>
{sortedBrandLayoutInfo.map((el, idx) => {
console.log("[FeaturedBrandsPanel] Processing template code:", el.shptmBrndOptTpCd);
// console.log("[FeaturedBrandsPanel] Processing template code:", el.shptmBrndOptTpCd);
switch (el.shptmBrndOptTpCd) {
case TEMPLATE_CODE_CONF.LIVE_CHANNELS: {
return (
@@ -524,10 +524,10 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
}
case TEMPLATE_CODE_CONF.BEST_SELLER: {
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 - shouldRender:", shouldRenderComponent(brandBestSellerInfo));
console.log("[FeaturedBrandsPanel] BEST_SELLER - data:", brandBestSellerInfo);
// 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 - shouldRender:", shouldRenderComponent(brandBestSellerInfo));
// console.log("[FeaturedBrandsPanel] BEST_SELLER - data:", brandBestSellerInfo);
return (
<React.Fragment key={el.shptmBrndOptTpCd}>
{hasTemplateCodeWithValue(
@@ -536,7 +536,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
) &&
shouldRenderComponent(brandBestSellerInfo) && (
<>
{console.log("[FeaturedBrandsPanel] Rendering FeaturedBestSeller for patnrId:", selectedPatnrId)}
{/* {console.log("[FeaturedBrandsPanel] Rendering FeaturedBestSeller for patnrId:", selectedPatnrId)} */}
<FeaturedBestSeller
brandBestSellerInfo={brandBestSellerInfo}
brandBestSellerTitle={brandBestSellerTitle}
@@ -699,10 +699,10 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
}
case TEMPLATE_CODE_CONF.NBCU: {
console.log("[FeaturedBrandsPanel] NBCU - patnrId:", selectedPatnrId);
console.log("[FeaturedBrandsPanel] NBCU - hasTemplateCode:", hasTemplateCodeWithValue(sortedBrandLayoutInfo, TEMPLATE_CODE_CONF.NBCU));
console.log("[FeaturedBrandsPanel] NBCU - shouldRender:", shouldRenderComponent(brandShopByShowContsList));
console.log("[FeaturedBrandsPanel] NBCU - data:", brandShopByShowContsList);
// console.log("[FeaturedBrandsPanel] NBCU - patnrId:", selectedPatnrId);
// console.log("[FeaturedBrandsPanel] NBCU - hasTemplateCode:", hasTemplateCodeWithValue(sortedBrandLayoutInfo, TEMPLATE_CODE_CONF.NBCU));
// console.log("[FeaturedBrandsPanel] NBCU - shouldRender:", shouldRenderComponent(brandShopByShowContsList));
// console.log("[FeaturedBrandsPanel] NBCU - data:", brandShopByShowContsList);
return (
<React.Fragment key={el.shptmBrndOptTpCd}>
{hasTemplateCodeWithValue(
@@ -711,7 +711,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
) &&
shouldRenderComponent(brandShopByShowContsList) && (
<>
{console.log("[FeaturedBrandsPanel] Rendering ShopByShow for patnrId:", selectedPatnrId)}
{/* {console.log("[FeaturedBrandsPanel] Rendering ShopByShow for patnrId:", selectedPatnrId)} */}
<ShopByShow
brandShopByShowContsList={brandShopByShowContsList}
brandShopByShowContsInfo={brandShopByShowContsInfo}
@@ -791,7 +791,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
// effect: layout information fetching due to partner id change
useEffect(() => {
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(getBrandLayoutInfo({ patnrId: panelInfo?.patnrId }));
setIsInitialFocusOccurred(false);
@@ -818,9 +818,9 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
// effect: data fetching based on brandLayoutInfo and selectedPatnrId
useEffect(() => {
console.log("[FB-PANEL-DATA-FETCH] Effect triggered");
console.log("[FB-PANEL-DATA-FETCH] sortedBrandLayoutInfo:", sortedBrandLayoutInfo);
console.log("[FB-PANEL-DATA-FETCH] selectedPatnrId:", selectedPatnrId);
// console.log("[FB-PANEL-DATA-FETCH] Effect triggered");
// console.log("[FB-PANEL-DATA-FETCH] sortedBrandLayoutInfo:", sortedBrandLayoutInfo);
// console.log("[FB-PANEL-DATA-FETCH] selectedPatnrId:", selectedPatnrId);
// 🆕 [251210] patnrId 변경 시 조회 상태 초기화
if (selectedPatnrId) {
@@ -828,14 +828,14 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
// 이전 patnrId와 다르면 ref 초기화
const currentFetchKeys = Array.from(fetchedCategoryGroupsRef.current).filter(key => key.startsWith(patnrIdString));
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 초기화
fetchedCategoryGroupsRef.current.clear();
}
}
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) //
.forEach(([templateCode, action]) => {
if (hasTemplateCodeWithValue(sortedBrandLayoutInfo, templateCode)) {
@@ -845,20 +845,20 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromDetail &&
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;
}
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 }));
}
});
// NBCU(patnrId: 21)인 경우 Top Banner API 호출
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] selectedPatnrId:", selectedPatnrId, "(type:", typeof selectedPatnrId, ")");
console.log("[FB-PANEL-TOP-BANNER] Before API call - brandTopBannerInfo:", brandTopBannerInfo);
// 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] Before API call - brandTopBannerInfo:", brandTopBannerInfo);
dispatch(getBrandTopBanner({ patnrId: selectedPatnrId }));
}
@@ -869,8 +869,8 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
// 🆕 [251210] patnrId=21인 경우 모든 카테고리 그룹 데이터 미리 조회
useEffect(() => {
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] brandShopByShowContsList:", brandShopByShowContsList);
// console.log("[FB-PANEL-CATEGORY-GROUPS] patnrId=21 detected - fetching all category group data");
// console.log("[FB-PANEL-CATEGORY-GROUPS] brandShopByShowContsList:", brandShopByShowContsList);
// 각 카테고리(contsId)별 그룹 데이터 조회
if (brandShopByShowContsList && brandShopByShowContsList.length > 0) {
@@ -879,14 +879,14 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
// useRef로 이미 조회된 contsId 추적 (무한루프 방지)
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); // 조회 상태 기록
dispatch(getBrandShopByShow({
patnrId: selectedPatnrId,
contsId: conts.contsId
}));
} 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 TopBannerImage = memo(({ banrImgUrl, banrImgNm, banrNm, pupBanrImgUrl, pupBanrImgNm, spotlightId }) => {
console.log("[TOP-BANNER-IMG] Rendering with URL:", banrImgUrl);
console.log("[TOP-BANNER-IMG] spotlightId:", spotlightId);
// console.log("[TOP-BANNER-IMG] Rendering with URL:", banrImgUrl);
// console.log("[TOP-BANNER-IMG] spotlightId:", spotlightId);
const dispatch = useDispatch();
const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
const handleClick = useCallback(() => {
console.log("[TOP-BANNER-IMG] Clicked - Opening popup");
// console.log("[TOP-BANNER-IMG] Clicked - Opening popup");
if (pupBanrImgUrl) {
console.log("[TOP-BANNER-IMG] Dispatching topBannerImagePopup");
// console.log("[TOP-BANNER-IMG] Dispatching topBannerImagePopup");
dispatch(setShowPopup({
activePopup: 'topBannerImagePopup',
data: {
@@ -37,7 +37,7 @@ const TopBannerImage = memo(({ banrImgUrl, banrImgNm, banrNm, pupBanrImgUrl, pup
const handleImageLoad = useCallback((e) => {
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;
@@ -50,7 +50,7 @@ const TopBannerImage = memo(({ banrImgUrl, banrImgNm, banrNm, pupBanrImgUrl, pup
}, []);
if (!banrImgUrl) {
console.log("[TOP-BANNER-IMG] No image URL provided");
// console.log("[TOP-BANNER-IMG] No image URL provided");
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) {
console.log('[PlayerPanel] popPanel - closeButtonHandler');
dispatch(PanelActions.popPanel());
dispatch(changeAppStatus({ cursorVisible: false }));
@@ -1192,6 +1193,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
return () => {
// 패널이 2개 존재할때만 popPanel 진행
if (panelInfo.modal && !isOnTop) {
console.log('[PlayerPanel] popPanel - useEffect cleanup');
dispatch(PanelActions.popPanel());
} else {
Spotlight.focus('tbody');
@@ -1810,9 +1812,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
panelInfo?.modalContainerId
) {
// case: Featured Brands
if (panelInfo?.sourcePanel === panel_names.FEATURED_BRANDS_PANEL) {
dispatch(PanelActions.popPanel());
}
// if (panelInfo?.sourcePanel === panel_names.FEATURED_BRANDS_PANEL) {
// dispatch(PanelActions.popPanel());
// }
console.log('[PlayerPanel] Condition 4: Handling video error in fullscreen mode');
}
}, [
broadcast?.type,
@@ -2384,6 +2387,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
);
Spotlight.pause();
timeoutRef.current = setTimeout(() => {
console.log('[PlayerPanel] popPanel - VIDEO_END_ACTION_DELAY');
Spotlight.resume();
dispatch(PanelActions.popPanel());
}, VIDEO_END_ACTION_DELAY);