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

통합로그 피드백 수정

Browse Source
This commit is contained in:
opacity@t-win.kr
2025-08-12 16:38:43 +09:00
parent eac8a1d1d4
commit fd4358b986
4 changed files with 241 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
View File

@@ -12,7 +12,7 @@ import {
// setShowPopup,
fetchCurrentUserHomeTerms,
} from "../../../actions/homeActions";
import {
import {
changeAppStatus,
setOptionalTermsPopupShown,
setOptionalTermsUserDecision,
@@ -45,11 +45,11 @@ import SimpleVideoContainer from "./SimpleVideoContainer";
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div",
"div"
);
const ContainerBasic = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div",
"div"
);
export default function HomeBanner({
@@ -60,11 +60,11 @@ export default function HomeBanner({
}) {
const dispatch = useDispatch();
const homeTopDisplayInfo = useSelector(
(state) => state.home.homeTopDisplayInfo,
(state) => state.home.homeTopDisplayInfo
);
const bannerDataList = useSelector(
(state) => state.home.bannerData?.bannerInfos,
(state) => state.home.bannerData?.bannerInfos
);
const popupVisible = useSelector((state) => state.common.popup.popupVisible);
@@ -141,11 +141,11 @@ export default function HomeBanner({
modalClassName: css.videoModal,
isVerticalModal: true, // Assuming second banner is horizontal, so modal is vertical
};
// 중앙 제어 시스템에 '미리보기' 재생을 요청
dispatch(requestPlayControl("banner1_preview", videoInfo));
}
if (handleItemFocus) {
handleItemFocus();
}
@@ -158,10 +158,16 @@ export default function HomeBanner({
const termsData = useSelector((state) => state.home.termsData);
const termsIdMap = useSelector((state) => state.home.termsIdMap);
const optionalTermsAvailable = useSelector((state) => state.home.optionalTermsAvailable);
const optionalTermsAvailable = useSelector(
(state) => state.home.optionalTermsAvailable
);
const optionalTermsData = useSelector((state) => {
// Chromium68 호환성을 위해 Optional Chaining 제거
if (state.home.termsData && state.home.termsData.data && state.home.termsData.data.terms) {
if (
state.home.termsData &&
state.home.termsData.data &&
state.home.termsData.data.terms
) {
return state.home.termsData.data.terms.find(
(term) => term.trmsTpCd === "MST00405"
);
@@ -174,7 +180,9 @@ export default function HomeBanner({
const introTermsAgree = useSelector((state) => state.common.introTermsAgree);
// 새로운 Redux 상태: 선택약관 팝업 플로우 관리
const optionalTermsPopupFlow = useSelector((state) => state.common.optionalTermsPopupFlow);
const optionalTermsPopupFlow = useSelector(
(state) => state.common.optionalTermsPopupFlow
);
//------------------------------------------------------------------------------
// 팝업표시 상태
@@ -186,46 +194,57 @@ export default function HomeBanner({
// 선택약관 팝업 표시 여부 ===================================================
const shouldShowOptionalTermsPopup = useMemo(() => {
console.log('[HomeBanner] Step 1: 상태 확인', {
termsLoading,
isGnbOpened,
console.log("[HomeBanner] Step 1: 상태 확인", {
termsLoading,
isGnbOpened,
optionalTermsAvailable,
optionalTermsPopupFlow
optionalTermsPopupFlow,
});
// 1. 기본 조건 확인
if (termsLoading || isGnbOpened || !optionalTermsAvailable) {
console.log('[HomeBanner] Early return: 기본 조건 불만족');
console.log("[HomeBanner] Early return: 기본 조건 불만족");
return false;
}
// 2. 새로운 Redux 상태 확인 (TV 환경 최적화)
if (optionalTermsPopupFlow.popupShown ||
optionalTermsPopupFlow.userDecision ||
optionalTermsPopupFlow.agreedInSession) {
console.log('[HomeBanner] Early return: 이미 처리됨', optionalTermsPopupFlow);
if (
optionalTermsPopupFlow.popupShown ||
optionalTermsPopupFlow.userDecision ||
optionalTermsPopupFlow.agreedInSession
) {
console.log(
"[HomeBanner] Early return: 이미 처리됨",
optionalTermsPopupFlow
);
return false;
}
// 3. 서버 데이터 확인
const terms = termsData && termsData.data && termsData.data.terms;
console.log('[HomeBanner] Step 2: termsData 확인', terms);
console.log("[HomeBanner] Step 2: termsData 확인", terms);
if (!terms) {
console.log('[HomeBanner] Early return: terms가 존재하지 않음');
console.log("[HomeBanner] Early return: terms가 존재하지 않음");
return false;
}
const optionalTerm = terms.find((term) => term.trmsTpCd === "MST00405");
console.log('[HomeBanner] Step 3: optionalTerm 검색 결과', optionalTerm);
console.log("[HomeBanner] Step 3: optionalTerm 검색 결과", optionalTerm);
const result = optionalTerm
? optionalTerm.trmsPopFlag === "Y" && optionalTerm.trmsAgrFlag === "N"
: false;
console.log('[HomeBanner] Step 4: 최종 결과', result);
console.log("[HomeBanner] Step 4: 최종 결과", result);
return result;
}, [termsData, termsLoading, isGnbOpened, optionalTermsAvailable, optionalTermsPopupFlow]);
}, [
termsData,
termsLoading,
isGnbOpened,
optionalTermsAvailable,
optionalTermsPopupFlow,
]);
// 선택약관 팝업 표시 여부 ===================================================
const handleOptionalAgree = useCallback(() => {
@@ -355,7 +374,7 @@ export default function HomeBanner({
}
} else if (
bannerDetailInfos.find(
(el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD",
(el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD"
)
) {
targetIndex = i;
@@ -395,12 +414,12 @@ export default function HomeBanner({
// 약관 데이터 로딩 중에는 아무것도 하지 않음
return;
}
// 선택 약관 팝업을 띄워야 하는 경우
if (shouldShowOptionalTermsPopup && !isOptionalConfirmVisible) {
console.log("shouldShowOptionalTermsPopup", shouldShowOptionalTermsPopup);
console.log("App.js optionalTermsConfirm 팝업 표시");
const timer = setTimeout(() => {
setIsOptionalConfirmVisible(true);
// 팝업이 실제로 표시된 후에 Redux 상태 업데이트
@@ -410,7 +429,12 @@ export default function HomeBanner({
// 컴포넌트 언마운트 시 타이머 클리어
return () => clearTimeout(timer);
}
}, [shouldShowOptionalTermsPopup, termsLoading, isOptionalConfirmVisible, dispatch]);
}, [
shouldShowOptionalTermsPopup,
termsLoading,
isOptionalConfirmVisible,
dispatch,
]);
// const renderItem = useCallback(
// (index, isHorizontal) => {
@@ -527,7 +551,7 @@ export default function HomeBanner({
</div>
);
},
[_handleItemFocus, _handleShelfFocus, bannerDataList],
[_handleItemFocus, _handleShelfFocus, bannerDataList]
);
// 1번째 배너(포커스 재생) 및 기타 배너를 위한 렌더링 함수
@@ -579,7 +603,7 @@ export default function HomeBanner({
</div>
);
},
[_handleItemFocus, _handleShelfFocus, bannerDataList, selectTemplate],
[_handleItemFocus, _handleShelfFocus, bannerDataList, selectTemplate]
);
// 0번째 배너(영구 재생)를 위한 렌더링 함수
@@ -595,7 +619,7 @@ export default function HomeBanner({
</div>
);
},
[_handleShelfFocus],
[_handleShelfFocus]
);
const renderSimpleVideoContainer = useCallback(
@@ -610,7 +634,7 @@ export default function HomeBanner({
</div>
);
},
[_handleShelfFocus],
[_handleShelfFocus]
);
const renderLayout = useCallback(() => {
@@ -618,7 +642,7 @@ export default function HomeBanner({
case "DSP00201": {
return (
<>
<ContainerBasic className={css.smallBox}>
<ContainerBasic className={css.smallBox}>
{renderItem(0, true)}
{renderItem(1, true)}
</ContainerBasic>

137
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
View File

@@ -48,7 +48,7 @@ const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div",
"div"
);
export default function RandomUnit({
@@ -61,16 +61,19 @@ export default function RandomUnit({
}) {
const dispatch = useDispatch();
const bannerDetailInfos = bannerData && bannerData.bannerDetailInfos ? bannerData.bannerDetailInfos : [];
const bannerDetailInfos =
bannerData && bannerData.bannerDetailInfos
? bannerData.bannerDetailInfos
: [];
const shptmTmplCd = useSelector(
(state) => state.home?.bannerData?.shptmTmplCd,
(state) => state.home?.bannerData?.shptmTmplCd
);
const nowMenu = useSelector((state) => state.common.menu.nowMenu);
const entryMenu = useSelector((state) => state.common.menu.entryMenu);
const homeCategory = useSelector(
(state) => state.home.menuData?.data?.homeCategory,
(state) => state.home.menuData?.data?.homeCategory
);
const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd);
@@ -86,8 +89,10 @@ export default function RandomUnit({
const timerRef = useRef();
const bannerDataRef = useRef(bannerData);
const randomDataRef = useRef(
bannerDetailInfos && randomNumber !== undefined && bannerDetailInfos.length > 0
? bannerDetailInfos[randomNumber]
bannerDetailInfos &&
randomNumber !== undefined &&
bannerDetailInfos.length > 0
? bannerDetailInfos[randomNumber]
: null
);
@@ -147,30 +152,47 @@ export default function RandomUnit({
return {};
}, [shptmTmplCd]);
const sendBannerLog = useCallback((bannerClick) => {
const data = randomDataRef.current;
const sendBannerLog = useCallback(
(bannerClick) => {
const data = randomDataRef.current;
if (data && nowMenu === LOG_MENU.HOME_TOP) {
dispatch(
sendLogTotalRecommend({
contextName: LOG_CONTEXT_NAME.HOME,
messageId: bannerClick ? LOG_MESSAGE_ID.BANNER_CLICK : LOG_MESSAGE_ID.BANNER,
curationId,
curationTitle,
contentType: data.shptmBanrTpNm,
contentId: data.showId,
contentTitle: data.showNm,
productId: data.prdtId,
productTitle: data.prdtNm,
displayType: "rolling",
partner: data.patncNm,
brand: data.brndNm, // <- 'brnad' 확인
location: data.dspyOrdr,
bannerType: data.vtctpYn === "Y" ? "Vertical" : "Horizontal",
}),
);
}
}, [dispatch, nowMenu, curationId, curationTitle]);
const newParams =
data.shptmBanrTpNm === "LIVE"
? {
showId: data.showId,
showTitle: data.showNm,
displayType: "Fix",
bannerType: "Horizontal",
}
: {
contentId: data.showId,
contentTitle: data.showNm,
displayType: "Rolling",
bannerType: "Vertical",
};
if (data && nowMenu === LOG_MENU.HOME_TOP) {
dispatch(
sendLogTotalRecommend({
contextName: LOG_CONTEXT_NAME.HOME,
messageId: bannerClick
? LOG_MESSAGE_ID.BANNER_CLICK
: LOG_MESSAGE_ID.BANNER,
...newParams,
curationId,
curationTitle,
contentType: data.shptmBanrTpNm,
productId: data.prdtId,
productTitle: data.prdtNm,
partner: data.patncNm,
brand: data.brndNm, // <- 'brnad' 확인
location: bannerData.banrLctnNo,
})
);
}
},
[dispatch, nowMenu, curationId, curationTitle]
);
// 1. 비디오(live) 에러 감지
// 2. 라이브 영상이 2개 이상이면, 그 다음 영상으로 전환
@@ -178,9 +200,15 @@ export default function RandomUnit({
// 라이브 영상이 1개 라도 순간적인 네트워크 오류나, 일시적인 오류 일수 있으므로, 일정 시간을 주고, 비디오를 다시 호출 한다.
useEffect(() => {
if (bannerDetailInfos && bannerDetailInfos.length > 0 && randomNumber !== undefined) {
if (
bannerDetailInfos &&
bannerDetailInfos.length > 0 &&
randomNumber !== undefined
) {
const indices = bannerDetailInfos
.map((info, index) => (info && info.shptmBanrTpNm === "LIVE" ? index : null))
.map((info, index) =>
info && info.shptmBanrTpNm === "LIVE" ? index : null
)
.filter((index) => index !== null && index !== randomNumber);
setLiveIndicies(indices);
@@ -193,7 +221,7 @@ export default function RandomUnit({
pushPanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: { from: "gnb", patnrId: randomData.patnrId },
}),
})
);
}, [randomData, dispatch]);
@@ -236,7 +264,7 @@ export default function RandomUnit({
if (randomData && randomData.shptmLnkTpCd === "DSP00505") {
if (homeCategory && homeCategory.length > 0) {
const foundCategory = homeCategory.find(
(data) => data.lgCatCd === randomData.lgCatCd,
(data) => data.lgCatCd === randomData.lgCatCd
);
if (foundCategory) {
return {
@@ -364,7 +392,7 @@ export default function RandomUnit({
...topContentsLogInfo,
inDt: formatGMTString(new Date()) ?? "",
logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
}),
})
);
}, [
categoryData,
@@ -388,7 +416,7 @@ export default function RandomUnit({
patnrId: randomData.patnrId,
prdtId: randomData.prdtId,
},
}),
})
);
sendBannerLog(true);
@@ -398,7 +426,7 @@ export default function RandomUnit({
...topContentsLogInfo,
inDt: formatGMTString(new Date()) ?? "",
logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
}),
})
);
}, [
dispatch,
@@ -422,7 +450,7 @@ export default function RandomUnit({
focusedContainerId: TEMPLATE_CODE_CONF.TOP,
currentSpot: currentSpot?.getAttribute("data-spotlight-id"),
},
}),
})
);
}
@@ -437,7 +465,7 @@ export default function RandomUnit({
modal: false,
modalContainerId: spotlightId,
modalClassName: css.videoModal,
}),
})
);
sendBannerLog(true);
@@ -447,11 +475,19 @@ export default function RandomUnit({
...topContentsLogInfo,
inDt: formatGMTString(new Date()) ?? "",
logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
}),
})
);
onBlur();
}, [randomData, spotlightId, topContentsLogInfo, nowMenu, randomDataRef, sendBannerLog, onBlur]);
}, [
randomData,
spotlightId,
topContentsLogInfo,
nowMenu,
randomDataRef,
sendBannerLog,
onBlur,
]);
// 투데이즈 딜 가격 정보
const { originalPrice, discountedPrice, discountRate, offerInfo } =
@@ -481,7 +517,12 @@ export default function RandomUnit({
}, [sendBannerLog]);
useEffect(() => {
if (bannerData && bannerDetailInfos && randomNumber !== undefined && bannerDetailInfos.length > 0) {
if (
bannerData &&
bannerDetailInfos &&
randomNumber !== undefined &&
bannerDetailInfos.length > 0
) {
setRandomData(bannerDetailInfos[randomNumber]);
}
}, [bannerData, bannerDetailInfos, randomNumber]);
@@ -510,9 +551,9 @@ export default function RandomUnit({
modalContainerId: spotlightId,
modalClassName: css.videoModal,
isVerticalModal: !isHorizontal,
}),
})
),
1000,
1000
);
}
if (!isFocused) {
@@ -554,7 +595,7 @@ export default function RandomUnit({
<Container
className={classNames(
css.rollingWrap,
isHorizontal && css.isHorizontalWrap,
isHorizontal && css.isHorizontalWrap
)}
onFocus={shelfFocus}
>
@@ -562,7 +603,7 @@ export default function RandomUnit({
<SpottableComponent
className={classNames(
css.itemBox,
isHorizontal && css.isHorizontal,
isHorizontal && css.isHorizontal
)}
onClick={imageBannerClick}
spotlightId={spotlightId}
@@ -584,7 +625,7 @@ export default function RandomUnit({
<SpottableComponent
className={classNames(
css.itemBox,
isHorizontal && css.isHorizontal,
isHorizontal && css.isHorizontal
)}
onClick={videoError === true ? videoErrorClick : videoClick}
onFocus={onFocus}
@@ -630,7 +671,7 @@ export default function RandomUnit({
<div
className={classNames(
css.itemBox,
isHorizontal && css.isHorizontal,
isHorizontal && css.isHorizontal
)}
>
{randomData.tmnlImgPath ? (
@@ -682,7 +723,7 @@ export default function RandomUnit({
css.todaysDeals,
countryCode === "RU" ? css.ru : "",
countryCode === "DE" ? css.de : "",
isHorizontal && css.isHorizontal,
isHorizontal && css.isHorizontal
)}
onClick={todayDealClick}
spotlightId={spotlightId}

102
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
View File

@@ -44,7 +44,7 @@ const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", preserveId: true },
"div",
"div"
);
const LINK_TYPES = {
@@ -87,13 +87,13 @@ export default function RollingUnit({
const { curationId, curationTitle } = useSelector((state) => state.home);
const curtNm = useSelector((state) => state.home?.bannerData?.curtNm);
const shptmTmplCd = useSelector(
(state) => state.home?.bannerData?.shptmTmplCd,
(state) => state.home?.bannerData?.shptmTmplCd
);
const nowMenu = useSelector((state) => state.common.menu.nowMenu);
const entryMenu = useSelector((state) => state.common.menu.entryMenu);
const homeCategory = useSelector(
(state) => state.home.menuData?.data?.homeCategory,
(state) => state.home.menuData?.data?.homeCategory
);
const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd);
@@ -101,7 +101,7 @@ export default function RollingUnit({
const savedIndex = useSelector((state) => state.home.bannerIndices[bannerId]);
const [startIndex, setStartIndex] = useState(
savedIndex !== undefined ? savedIndex : 0,
savedIndex !== undefined ? savedIndex : 0
);
const lastIndexRef = useRef(rollingDataLength - 1);
const doRollingRef = useRef(false);
@@ -172,31 +172,42 @@ export default function RollingUnit({
return {};
}, [shptmTmplCd, startIndex]);
const sendBannerLog = useCallback(() => {
if (rollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) {
dispatch(
sendLogTotalRecommend({
contextName: LOG_CONTEXT_NAME.HOME,
messageId: LOG_MESSAGE_ID.BANNER,
curationId: curationId,
curationTitle: curationTitle,
contentType: rollingDataRef.current[startIndex].shptmBanrTpNm,
contentId: rollingDataRef.current[startIndex].showId,
contentTitle: rollingDataRef.current[startIndex].showNm,
productId: rollingDataRef.current[startIndex].prdtId,
productTitle: rollingDataRef.current[startIndex].prdtNm,
displayType: "button",
partner: rollingDataRef.current[startIndex].patncNm,
brand: rollingDataRef.current[startIndex].brndNm,
location: rollingDataRef.current[startIndex].dspyOrdr,
bannerType:
rollingDataRef.current[startIndex].vtctpYn === "Y"
? "Vertical"
: "Horizontal",
}),
);
}
}, [nowMenu, rollingDataRef]);
const sendBannerLog = useCallback(
(bannerClick) => {
const data = rollingDataRef.current[startIndex];
const newParams =
bannerData.banrLctnNo === "2"
? {
bannerType: "Horizontal",
}
: {
bannerType: "Vertical",
};
if (rollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) {
dispatch(
sendLogTotalRecommend({
contextName: LOG_CONTEXT_NAME.HOME,
messageId: bannerClick
? LOG_MESSAGE_ID.BANNER_CLICK
: LOG_MESSAGE_ID.BANNER,
curationId: curationId,
curationTitle: curationTitle,
contentType: data.shptmBanrTpNm,
contentId: data.showId,
contentTitle: data.showNm,
productId: data.prdtId,
productTitle: data.prdtNm,
displayType: "button",
partner: data.patncNm,
brand: data.brndNm,
location: bannerData.banrLctnNo,
...newParams,
})
);
}
},
[nowMenu, rollingDataRef]
);
useEffect(() => {
if (savedIndex !== undefined) {
@@ -210,7 +221,7 @@ export default function RollingUnit({
if (deltaTime >= 10000 && doRollingRef.current) {
setStartIndex((prevIndex) =>
prevIndex === lastIndexRef.current ? 0 : prevIndex + 1,
prevIndex === lastIndexRef.current ? 0 : prevIndex + 1
);
previousTimeRef.current = time;
}
@@ -304,7 +315,7 @@ export default function RollingUnit({
) {
if (homeCategory && homeCategory.length > 0) {
const foundCategory = homeCategory.find(
(data) => data.lgCatCd === rollingData[startIndex].lgCatCd,
(data) => data.lgCatCd === rollingData[startIndex].lgCatCd
);
if (foundCategory) {
return {
@@ -324,14 +335,14 @@ export default function RollingUnit({
(name, panelInfo) => {
dispatch(pushPanel({ name, panelInfo }));
},
[dispatch],
[dispatch]
);
const handleStartVideoPlayer = useCallback(
(playerInfo) => {
dispatch(startVideoPlayer(playerInfo));
},
[dispatch],
[dispatch]
);
const imageBannerClick = useCallback(() => {
@@ -350,7 +361,7 @@ export default function RollingUnit({
...topContentsLogInfo,
inDt: formatGMTString(new Date()) ?? "",
logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
}),
})
);
return;
}
@@ -366,14 +377,14 @@ export default function RollingUnit({
case LINK_TYPES.TRENDING_NOW:
handlePushPanel(
panel_names.TRENDING_NOW_PANEL,
createPanelInfo(currentData),
createPanelInfo(currentData)
);
break;
case LINK_TYPES.HOT_PICKS:
handlePushPanel(
panel_names.HOT_PICKS_PANEL,
createPanelInfo(currentData),
createPanelInfo(currentData)
);
break;
@@ -387,7 +398,7 @@ export default function RollingUnit({
if (Object.keys(categoryData).length > 0) {
handlePushPanel(
panel_names.CATEGORY_PANEL,
createPanelInfo(currentData, categoryData),
createPanelInfo(currentData, categoryData)
);
}
break;
@@ -412,13 +423,13 @@ export default function RollingUnit({
default:
return;
}
sendBannerLog();
sendBannerLog(true);
dispatch(
sendLogTopContents({
...topContentsLogInfo,
inDt: formatGMTString(new Date()) ?? "",
logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
}),
})
);
}, [
rollingData,
@@ -427,6 +438,7 @@ export default function RollingUnit({
dispatch,
categoryData,
handlePushPanel,
sendBannerLog,
topContentsLogInfo,
]);
@@ -443,7 +455,7 @@ export default function RollingUnit({
focusedContainerId: TEMPLATE_CODE_CONF.TOP,
currentSpot: currentSpot?.getAttribute("data-spotlight-id"),
},
}),
})
);
}
@@ -471,7 +483,7 @@ export default function RollingUnit({
...topContentsLogInfo,
inDt: formatGMTString(new Date()) ?? "",
logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK,
}),
})
);
}, [
rollingData,
@@ -544,7 +556,7 @@ export default function RollingUnit({
<Container
className={classNames(
css.rollingWrap,
isHorizontal && css.isHorizontalWrap,
isHorizontal && css.isHorizontalWrap
)}
spotlightId={`container-${spotlightId}`}
onFocus={shelfFocus}
@@ -603,7 +615,7 @@ export default function RollingUnit({
<div
className={classNames(
css.itemBox,
isHorizontal && css.isHorizontal,
isHorizontal && css.isHorizontal
)}
>
{rollingData[startIndex].tmnlImgPath == null ? (
@@ -662,7 +674,7 @@ export default function RollingUnit({
<div
className={classNames(
css.itemBox,
isHorizontal && css.isHorizontal,
isHorizontal && css.isHorizontal
)}
>
{rollingData[startIndex].tmnlImgPath == null ? (
@@ -715,7 +727,7 @@ export default function RollingUnit({
css.todaysDeals,
countryCode === "RU" ? css.ru : "",
countryCode === "DE" ? css.de : "",
isHorizontal && css.isHorizontal,
isHorizontal && css.isHorizontal
)}
onClick={imageBannerClick}
onFocus={onFocus}

64
com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
View File

@@ -75,43 +75,43 @@ const HomePanel = ({ isOnTop }) => {
const isGnbOpened = useSelector((state) => state.common.isGnbOpened);
const homeLayoutInfo = useSelector((state) => state.home.layoutData);
const panelInfo = useSelector(
(state) => state.home.homeInfo?.panelInfo ?? {},
(state) => state.home.homeInfo?.panelInfo ?? {}
);
const panels = useSelector((state) => state.panels.panels);
const webOSVersion = useSelector(
(state) => state.common.appStatus?.webOSVersion,
(state) => state.common.appStatus?.webOSVersion
);
const enterThroughGNB = useSelector((state) => state.home.enterThroughGNB);
const defaultFocus = useSelector((state) => state.home.defaultFocus);
const categoryInfos = useSelector(
(state) => state.onSale.homeOnSaleData?.data?.categoryInfos,
(state) => state.onSale.homeOnSaleData?.data?.categoryInfos
);
const categoryItemInfos = useSelector(
(state) => state.main.subCategoryData?.categoryItemInfos,
(state) => state.main.subCategoryData?.categoryItemInfos
);
const { popupVisible, activePopup } = useSelector(
(state) => state.common.popup,
(state) => state.common.popup
);
const eventPopInfosData = useSelector(
(state) => state.event.eventData.eventPopInfo,
(state) => state.event.eventData.eventPopInfo
);
const eventData = useSelector((state) => state.event.eventData);
const eventClickSuccess = useSelector(
(state) => state.event.eventClickSuccess,
(state) => state.event.eventClickSuccess
);
const homeOnSaleInfos = useSelector(
(state) => state.onSale.homeOnSaleData?.data.homeOnSaleInfos,
(state) => state.onSale.homeOnSaleData?.data.homeOnSaleInfos
);
const bestSellerDatas = useSelector(
(state) => state.product.bestSellerData?.bestSeller,
(state) => state.product.bestSellerData?.bestSeller
);
const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
const isDeepLink = useSelector(
(state) => state.common.deepLinkInfo.isDeepLink,
(state) => state.common.deepLinkInfo.isDeepLink
);
const [btnDisabled, setBtnDisabled] = useState(true);
@@ -120,13 +120,13 @@ const HomePanel = ({ isOnTop }) => {
const [eventPopOpen, setEventPopOpen] = useState(false);
const [nowShelf, setNowShelf] = useState(panelInfo.nowShelf);
const [firstLgCatCd, setFirstLgCatCd] = useState(
panelInfo.currentCatCd ?? null,
panelInfo.currentCatCd ?? null
);
const [cateCd, setCateCd] = useState(panelInfo.currentCatCd ?? null);
const [cateNm, setCateNm] = useState(panelInfo.currentCateName ?? null);
const { entryMenu, nowMenu } = useSelector((state) => state.common.menu);
const [focusedContainerId, setFocusedContainerId] = useState(
panelInfo.focusedContainerId,
panelInfo.focusedContainerId
);
const isInitialRender = useRef(true);
@@ -139,7 +139,7 @@ const HomePanel = ({ isOnTop }) => {
sendLogTotalRecommend({
messageId: LOG_MESSAGE_ID.HOME,
contextName: LOG_CONTEXT_NAME.HOME,
}),
})
);
}
}, [entryMenu, nowMenu]);
@@ -147,7 +147,7 @@ const HomePanel = ({ isOnTop }) => {
const sortedHomeLayoutInfo = useMemo(() => {
if (homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) {
const sorted = [...homeLayoutInfo.homeLayoutInfo].sort(
(x, y) => x.expsOrd - y.expsOrd,
(x, y) => x.expsOrd - y.expsOrd
);
return sorted;
}
@@ -183,7 +183,7 @@ const HomePanel = ({ isOnTop }) => {
panelInfo: {
currentSpot: currentSpot,
},
}),
})
);
dispatch(setShowPopup(ACTIVE_POPUP.exitPopup));
@@ -197,7 +197,7 @@ const HomePanel = ({ isOnTop }) => {
contextName: LOG_CONTEXT_NAME.SHOPTIME,
messageId: LOG_MESSAGE_ID.VIEW_CHANGE,
visible: false,
}),
})
);
}, [dispatch]);
@@ -261,7 +261,7 @@ const HomePanel = ({ isOnTop }) => {
shelfLocation: location,
shelfId: containerId,
shelfTitle: title,
}),
})
);
setNowShelf(containerId);
@@ -271,14 +271,14 @@ const HomePanel = ({ isOnTop }) => {
currentSentMenuRef.current = nowMenu;
}
},
[pageSpotIds, nowShelf, panelInfo.nowShelf],
[pageSpotIds, nowShelf, panelInfo.nowShelf]
);
const handleItemFocus = useCallback(
(containerId, location, title) => () => {
doSendLogGNB(containerId, location, title);
},
[doSendLogGNB],
[doSendLogGNB]
);
const renderPageItem = useCallback(() => {
@@ -298,7 +298,7 @@ const HomePanel = ({ isOnTop }) => {
handleShelfFocus={handleItemFocus(
el.shptmApphmDspyOptCd,
el.expsOrd,
el.shptmApphmDspyOptNm,
el.shptmApphmDspyOptNm
)}
handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
/>
@@ -320,7 +320,7 @@ const HomePanel = ({ isOnTop }) => {
handleShelfFocus={handleItemFocus(
el.shptmApphmDspyOptCd,
el.expsOrd,
el.shptmApphmDspyOptNm,
el.shptmApphmDspyOptNm
)}
handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
shelfLocation={el.expsOrd}
@@ -338,7 +338,7 @@ const HomePanel = ({ isOnTop }) => {
handleShelfFocus={handleItemFocus(
el.shptmApphmDspyOptCd,
el.expsOrd,
el.shptmApphmDspyOptNm,
el.shptmApphmDspyOptNm
)}
handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
shelfLocation={el.expsOrd}
@@ -356,7 +356,7 @@ const HomePanel = ({ isOnTop }) => {
handleShelfFocus={handleItemFocus(
el.shptmApphmDspyOptCd,
el.expsOrd,
el.shptmApphmDspyOptNm,
el.shptmApphmDspyOptNm
)}
handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
shelfLocation={el.expsOrd}
@@ -374,7 +374,7 @@ const HomePanel = ({ isOnTop }) => {
handleShelfFocus={handleItemFocus(
el.shptmApphmDspyOptCd,
el.expsOrd,
el.shptmApphmDspyOptNm,
el.shptmApphmDspyOptNm
)}
handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
shelfLocation={el.expsOrd}
@@ -473,7 +473,7 @@ const HomePanel = ({ isOnTop }) => {
cbChangePageRef,
dispatch,
isOnTop,
],
]
);
const bestSellerLoaded = useCallback(() => {
@@ -486,7 +486,7 @@ const HomePanel = ({ isOnTop }) => {
if (isDeepLink || (!panels.length && !panelInfo.focusedContainerId)) {
dispatch(
changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }),
changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
);
dispatch(getHomeMainContents());
dispatch(getHomeLayout());
@@ -495,7 +495,7 @@ const HomePanel = ({ isOnTop }) => {
homeSaleInfosIncFlag: "Y",
categoryIncFlag: "Y",
saleInfosIncFlag: "N",
}),
})
);
dispatch(getTop20Show());
dispatch(getBestSeller(bestSellerLoaded));
@@ -528,8 +528,8 @@ const HomePanel = ({ isOnTop }) => {
tabType: "CAT00102",
filterType: "CAT00202",
},
1,
),
1
)
);
}
}, [categoryInfos, firstLgCatCd, dispatch]);
@@ -544,7 +544,7 @@ const HomePanel = ({ isOnTop }) => {
} else setEventPopOpen(true);
} else setEventPopOpen(false);
},
[webOSVersion],
[webOSVersion]
);
useEffect(() => {
@@ -583,7 +583,7 @@ const HomePanel = ({ isOnTop }) => {
}
const tBody = document.querySelector(
`[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`,
`[data-spotlight-id="${SpotlightIds.HOME_TBODY}"]`
);
const currentSpot = c && tBody.contains(c) ? targetSpotlightId : null;
@@ -597,7 +597,7 @@ const HomePanel = ({ isOnTop }) => {
currentCateName: targetSpotlightCateNm,
focusedContainerId: focusedContainerIdRef.current,
},
}),
})
);
};
}, [dispatch]);