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

[DetailPanel] 불필요한 rendering

Browse Source
This commit is contained in:
고동영
2024-07-30 17:34:52 +09:00
parent d7a78321d8
commit 961f304944
2 changed files with 112 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -77,57 +77,63 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const shopByMobileLogRef = useRef(null);
const {
themeHotelId,
themePrdtId,
prdtId,
patnrId,
curationId,
curationNm,
type,
bgImgNo,
} = panelInfo;
// const {
// themeHotelId,
// panelInfo?.themePrdtId,
// prdtId,
// patnrId,
// curationId,
// curationNm,
// type,
// bgImgNo,
// } = panelInfo;
useEffect(() => {
if (type === "hotel") {
if (panelInfo?.type === "hotel") {
dispatch(
getThemeHotelDetailInfo({
patnrId: patnrId,
curationId: curationId,
patnrId: panelInfo?.patnrId,
curationId: panelInfo?.curationId,
})
);
}
if (type === "theme") {
if (panelInfo?.type === "theme") {
dispatch(
getThemeCurationDetailInfo({
patnrId: patnrId,
curationId: curationId,
bgImgNo: bgImgNo,
patnrId: panelInfo?.patnrId,
curationId: panelInfo?.curationId,
bgImgNo: panelInfo?.bgImgNo,
})
);
}
if (prdtId && !curationId) {
console.log("#panelInfo", panelInfo.liveReqFlag);
if (panelInfo?.prdtId && !panelInfo?.curationId) {
dispatch(
getMainCategoryDetail({
patnrId: patnrId,
prdtId: prdtId,
liveReqFlag: panelInfo.liveReqFlag ? panelInfo.liveReqFlag : "N",
patnrId: panelInfo?.patnrId,
prdtId: panelInfo?.prdtId,
liveReqFlag: panelInfo?.liveReqFlag ? panelInfo?.liveReqFlag : "N",
})
);
}
dispatch(getDeviceAdditionInfo());
}, [dispatch, panelInfo]);
}, [
dispatch,
panelInfo.liveReqFlag,
panelInfo.curationId,
panelInfo.prdtId,
panelInfo.type,
panelInfo.patnrId,
]);
useEffect(() => {
if (productData?.pmtSuptYn === "Y" && productData?.grPrdtProcYn === "Y") {
dispatch(
getProductGroup({
patnrId: patnrId,
prdtId: prdtId,
patnrId: panelInfo?.patnrId,
prdtId: panelInfo?.prdtId,
})
);
}
@@ -135,26 +141,30 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
useEffect(() => {
if (
panelInfo &&
themeProductInfos &&
themeProductInfos.length > 0 &&
themePrdtId
panelInfo?.themePrdtId
) {
for (let i = 0; i < themeProductInfos.length; i++) {
if (themeProductInfos[i].prdtId === themePrdtId) {
if (themeProductInfos[i].prdtId === panelInfo?.themePrdtId) {
setSelectedIndex(i);
}
}
}
if (panelInfo && hotelInfos && hotelInfos.length > 0 && themeHotelId) {
if (hotelInfos && hotelInfos.length > 0 && panelInfo?.themeHotelId) {
for (let i = 0; i < hotelInfos.length; i++) {
if (hotelInfos[i].hotelId === themeHotelId) {
if (hotelInfos[i].hotelId === panelInfo?.themeHotelId) {
setSelectedIndex(i);
}
}
}
}, [panelInfo, themeProductInfos, hotelInfos, themeHotelId, themePrdtId]);
}, [
themeProductInfos,
hotelInfos,
panelInfo?.themePrdtId,
panelInfo?.themeHotelId,
]);
const onSpotlightUpTButton = (e) => {
e.stopPropagation();
@@ -178,7 +188,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const saveToLocalSettings = useCallback(() => {
let recentItems = [];
const prdtId =
themeProductInfos && themeProductInfos.length > 0 && type === "theme"
themeProductInfos &&
themeProductInfos.length > 0 &&
panelInfo?.type === "theme"
? themeProductInfos[selectedIndex].prdtId
: panelInfo?.prdtId;
@@ -202,7 +214,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
recentItems.push({
prdtId: prdtId,
patnrId: patnrId,
patnrId: panelInfo?.patnrId,
date: formattedDate,
expireTime: currentDate.getTime() + 1000 * 60 * 60 * 24 * 14,
cntryCd: httpHeader["X-Device-Country"],
@@ -224,47 +236,59 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
]);
const getlgCatCd = useCallback(() => {
if (productData && !curationId) {
if (productData && !panelInfo?.curationId) {
setLgCatCd(productData.catCd);
} else if (
themeProductInfos &&
themeProductInfos[selectedIndex]?.pmtSuptYn === "N" &&
curationId
panelInfo?.curationId
) {
setLgCatCd(themeProductInfos[selectedIndex]?.catCd);
} else {
setLgCatCd("");
}
}, [productData, themeProductInfos, selectedIndex, panelInfo]);
}, [productData, themeProductInfos, selectedIndex, panelInfo?.curationId]);
const mobileSendPopUpProductImg = useMemo(() => {
if (type === "theme" && themeProductInfos) {
if (panelInfo?.type === "theme" && themeProductInfos) {
return themeProductInfos[selectedIndex]?.imgUrls600[0];
} else if (type === "hotel" && hotelInfos) {
} else if (panelInfo?.type === "hotel" && hotelInfos) {
return hotelInfos[selectedIndex]?.hotelImgUrl;
} else {
return productData?.imgUrls600[0];
}
}, [themeProductInfos, hotelInfos, selectedIndex, productData, type]);
}, [
themeProductInfos,
hotelInfos,
selectedIndex,
productData,
panelInfo?.type,
]);
const mobileSendPopUpSubtitle = useMemo(() => {
if (type === "theme" && themeProductInfos) {
if (panelInfo?.type === "theme" && themeProductInfos) {
return themeProductInfos[selectedIndex]?.prdtNm;
} else if (type === "hotel" && hotelInfos) {
} else if (panelInfo?.type === "hotel" && hotelInfos) {
return hotelInfos[selectedIndex]?.hotelNm;
} else {
return productData?.prdtNm;
}
}, [themeProductInfos, hotelInfos, selectedIndex, productData, type]);
}, [
themeProductInfos,
hotelInfos,
selectedIndex,
productData,
panelInfo?.type,
]);
const isBillingProductVisible = useMemo(() => {
return (
productData?.pmtSuptYn === "Y" &&
productData?.grPrdtProcYn === "N" &&
prdtId &&
panelInfo?.prdtId &&
webOSVersion >= "6.0"
);
}, [productData, webOSVersion, prdtId]);
}, [productData, webOSVersion, panelInfo?.prdtId]);
const isUnavailableProductVisible = useMemo(() => {
return (
@@ -272,9 +296,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
(productData?.pmtSuptYn === "Y" &&
productData?.grPrdtProcYn === "N" &&
webOSVersion < "6.0" &&
prdtId)
panelInfo?.prdtId)
);
}, [productData, webOSVersion, prdtId]);
}, [productData, webOSVersion, panelInfo?.prdtId]);
const isGroupProductVisible = useMemo(() => {
return (
@@ -286,8 +310,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
}, [productData, groupInfos]);
const isTravelProductVisible = useMemo(() => {
return curationId && (hotelInfos || themeData);
}, [curationId, hotelInfos, themeData]);
return panelInfo?.curationId && (hotelInfos || themeData);
}, [panelInfo?.curationId, hotelInfos, themeData]);
const Price = () => {
return (
@@ -303,7 +327,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
}, [themeProductInfos, productData, panelInfo, selectedIndex]);
useEffect(() => {
if (panelInfo && patnrId && prdtId) {
if (panelInfo && panelInfo?.patnrId && panelInfo?.prdtId) {
saveToLocalSettings();
}
}, [panelInfo, selectedIndex]);
@@ -314,12 +338,12 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
(hotelInfos && hotelInfos.length > 0)) &&
selectedIndex !== undefined
) {
if (type === "theme") {
if (panelInfo?.type === "theme") {
const imgUrls600 = themeProductInfos[selectedIndex]?.imgUrls600 || [];
dispatch(getProductImageLength({ imageLength: imgUrls600.length }));
return;
}
if (type === "hotel") {
if (panelInfo?.type === "hotel") {
const imgUrls600 = hotelInfos[selectedIndex]?.imgUrls600 || [];
dispatch(getProductImageLength({ imageLength: imgUrls600.length }));
}
@@ -345,9 +369,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
<THeader
className={css.header}
title={
(prdtId && productData?.prdtNm) ||
(type === "hotel" && hotelData?.hotelInfo.curationNm) ||
(type === "theme" && themeData?.themeInfo[0]?.curationNm)
(panelInfo?.prdtId && productData?.prdtNm) ||
(panelInfo?.type === "hotel" && hotelData?.hotelInfo.curationNm) ||
(panelInfo?.type === "theme" && themeData?.themeInfo[0]?.curationNm)
}
onBackButton
onClick={onClick}
@@ -356,9 +380,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
onSpotlightLeft={onSpotlightUpTButton}
marqueeDisabled={false}
ariaLabel={
(prdtId && productData?.prdtNm) ||
(type === "hotel" && hotelData?.hotelInfo.curationNm) ||
(type === "theme" && themeData?.themeInfo[0]?.curationNm)
(panelInfo?.prdtId && productData?.prdtNm) ||
(panelInfo?.type === "hotel" && hotelData?.hotelInfo.curationNm) ||
(panelInfo?.type === "theme" && themeData?.themeInfo[0]?.curationNm)
}
/>
<TBody
@@ -374,8 +398,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
<SingleProduct
isOnTop={isOnTop}
panelInfo={panelInfo}
selectedPatnrId={patnrId}
selectedPrdtId={prdtId}
selectedPatnrId={panelInfo?.patnrId}
selectedPrdtId={panelInfo?.prdtId}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
shopByMobileLogRef={shopByMobileLogRef}
@@ -387,8 +411,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
<UnableProduct
isOnTop={isOnTop}
panelInfo={panelInfo}
selectedPatnrId={patnrId}
selectedPrdtId={prdtId}
selectedPatnrId={panelInfo?.patnrId}
selectedPrdtId={panelInfo?.prdtId}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
shopByMobileLogRef={shopByMobileLogRef}
@@ -400,8 +424,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
<GroupProduct
isOnTop={isOnTop}
panelInfo={panelInfo}
selectedPatnrId={patnrId}
selectedPrdtId={prdtId}
selectedPatnrId={panelInfo?.patnrId}
selectedPrdtId={panelInfo?.prdtId}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
shopByMobileLogRef={shopByMobileLogRef}
@@ -413,12 +437,12 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
<ThemeProduct
isOnTop={isOnTop}
panelInfo={panelInfo}
selectedCurationId={curationId}
selectedCurationNm={curationNm}
selectedCurationId={panelInfo?.curationId}
selectedCurationNm={panelInfo?.curationNm}
selectedIndex={selectedIndex}
selectedPatnrId={patnrId}
selectedPatnrId={panelInfo?.patnrId}
setSelectedIndex={setSelectedIndex}
themeType={type}
themeType={panelInfo?.type}
isLoading={isLoading}
shopByMobileLogRef={shopByMobileLogRef}
isYouMayLikeOpened={isYouMayLikeOpened}
@@ -432,14 +456,14 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
<YouMayLike
isUnable={
productData?.pmtSuptYn === "N" ||
type === "hotel" ||
type === "theme"
panelInfo?.type === "hotel" ||
panelInfo?.type === "theme"
}
lgCatCd={lgCatCd}
panelInfo={panelInfo}
selectedCurationId={curationId}
selectedPatnrId={patnrId}
selectedPrdtId={prdtId}
selectedCurationId={panelInfo?.curationId}
selectedPatnrId={panelInfo?.patnrId}
selectedPrdtId={panelInfo?.prdtId}
setSelectedIndex={setSelectedIndex}
productInfo={productData || themeData}
setIsYouMayLikeOpened={setIsYouMayLikeOpened}
@@ -452,18 +476,22 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
title={$L("Send a purchase link for this item via SMS")}
subTitle={mobileSendPopUpSubtitle}
productImg={mobileSendPopUpProductImg}
patnrId={patnrId}
prdtId={prdtId}
smsTpCd={type === "hotel" ? "APP00205" : "APP00201"}
curationId={curationId}
curationNm={curationNm}
hotelId={type === "hotel" && hotelInfos[selectedIndex]?.hotelId}
hotelNm={type === "hotel" && hotelInfos[selectedIndex]?.hotelNm}
patnrId={panelInfo?.patnrId}
prdtId={panelInfo?.prdtId}
smsTpCd={panelInfo?.type === "hotel" ? "APP00205" : "APP00201"}
curationId={panelInfo?.curationId}
curationNm={panelInfo?.curationNm}
hotelId={
panelInfo?.type === "hotel" && hotelInfos[selectedIndex]?.hotelId
}
hotelNm={
panelInfo?.type === "hotel" && hotelInfos[selectedIndex]?.hotelNm
}
hotelDtlUrl={
type === "hotel" &&
panelInfo?.type === "hotel" &&
hotelInfos[selectedIndex]?.hotelDetailInfo?.hotelDtlUrl
}
productPrice={type === "hotel" && Price()}
productPrice={panelInfo?.type === "hotel" && Price()}
shopByMobileLogRef={shopByMobileLogRef}
spotlightId="shopbymobile_Btn"
/>

6
com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx
View File

@@ -23,7 +23,7 @@ import css from "./ThemeIndicator.module.less";
import ThemeIndicatorArrow from "./ThemeIndicatorArrow";
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", preserveld: true },
{ enterTo: "last-focused" },
"div"
);
const SpottableComponent = Spottable("div");
@@ -284,10 +284,10 @@ function ThemeIndicator({
}, [canPlayVideo, autoPlaying]);
const onSpotlightRight = useCallback((ev) => {
Spotlight.focus(`indicator-image-${imageSelectedIndex}`);
Spotlight.focus("IndicatorGridlistContainer");
ev.stopPropagation();
ev.preventDefault();
}, imageSelectedIndex[selectedIndex]);
}, []);
const onSpotlightLeft = useCallback(
(ev) => {