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

[251209] feat: NBCU-ShopByShow-3

Browse Source 
🕐 커밋 시간: 2025. 12. 09. 16:05:46

📊 변경 통계:
  • 총 파일: 14개
  • 추가: +50줄
  • 삭제: -553줄

📁 추가된 파일:
  + com.twin.app.shoptime/shopByShow.response.json
  + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.jsx
  + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.module.less
  + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.jsx
  + com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.module.less

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.jsx
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.module.less
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowList.jsx

🗑️ 삭제된 파일:
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.jsx
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.module.less
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.jsx
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.module.less
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.jsx
  - com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.module.less

🔧 주요 변경 내용:
  • 소규모 기능 개선
  • 코드 정리 및 최적화
  • 모듈 구조 개선

Performance: 코드 최적화로 성능 개선 기대
This commit is contained in:
hyeon soo noh
2025-12-09 16:05:48 +09:00
parent 2a1cda560c
commit 85c44cdd8b
10 changed files with 234 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.jsx
View File

@@ -2,78 +2,35 @@ import React, { memo, useCallback } from "react";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import TItemCardNew, { removeDotAndColon } from "../../../../../components/TItemCard/TItemCard.new";
import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
import {
LOG_CONTEXT_NAME,
LOG_MESSAGE_ID,
panel_names,
} from "../../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods";
import Spotlight from "@enact/spotlight";
import { pushPanel, updatePanel } from "../../../../../actions/panelActions";
import { useDispatch } from "react-redux";
import css from "./ShopByShowContents.module.less";
import ShopByShowImageCard from "./ShopByShowImageCard/ShopByShowImageCard";
import ShopByShowProductList from "./ShopByShowProductList/ShopByShowProductList";
const Container = SpotlightContainerDecorator(
{ leaveFor: { right: "" }, enterTo: null },
"div"
);
const ShopByShowContents = memo(({
clctId,
clctNm,
export default memo(function ShopByShowContents({
brandProductInfos,
contentsIndex,
handleItemFocus,
clctNm,
clctImgUrl,
patnrId,
selectedPatnrId,
spotlightId,
shelfOrder,
shelfTitle,
getScrollTo,
}) => {
const dispatch = useDispatch();
const handleClick = useCallback(
(patnrId, prdtId) => (e) => {
const tItemCard = e.currentTarget;
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId = lastFocusedTarget?.getAttribute("data-spotlight-id");
const xContainer = tItemCard?.parentNode?.parentNode;
if (lastFocusedTargetId && xContainer) {
const section = "shop-by-show";
const x = getTranslate3dValueByDirection(xContainer);
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
lastFocusedTargetId,
patnrId,
section,
x,
},
})
);
}
dispatch(
pushPanel({
name: panel_names.DETAIL_PANEL,
panelInfo: { patnrId, prdtId },
})
);
},
[dispatch]
);
spotlightId,
}) {
const handleFocus = useCallback(() => {
if (handleItemFocus) {
handleItemFocus();
}
if (handleItemFocus) handleItemFocus();
}, [handleItemFocus]);
if (!brandProductInfos || brandProductInfos.length === 0) {
return null;
}
return (
<Container
className={css.container}
@@ -81,64 +38,26 @@ const ShopByShowContents = memo(({
spotlightId={`${spotlightId}-${contentsIndex}`}
>
<h3 data-collection-subtitle={clctNm}>{clctNm}</h3>
{brandProductInfos && brandProductInfos.length > 0 && (
<TVirtualGridList
cbScrollTo={getScrollTo}
className={css.tVirtualGridList}
dataSize={brandProductInfos.length}
direction="horizontal"
itemHeight={438}
itemWidth={324}
spacing={18}
renderItem={({ index, ...rest }) => {
if (!brandProductInfos || !brandProductInfos[index]) {
return null;
}
const product = brandProductInfos[index];
const {
prdtImgUrl,
prdtOfferId,
patnrId = "21",
prdtNm,
prdtId,
prdtPrice,
patncNm,
brndNm,
lgCatNm,
euEnrgLblInfos,
} = product;
return (
<TItemCardNew
catNm={lgCatNm}
contextName={LOG_CONTEXT_NAME.FEATURED_BRANDS}
messageId={LOG_MESSAGE_ID.SHELF_CLICK}
patnerName={patncNm || "Peacock | Shop The Moment"}
brandName={brndNm}
shelfId={spotlightId}
shelfLocation={shelfOrder}
shelfTitle={shelfTitle}
imageAlt={prdtNm}
imageSource={prdtImgUrl}
onClick={handleClick(patnrId, prdtId)}
onFocus={handleFocus}
offerInfo={prdtOfferId}
priceInfo={prdtPrice}
productId={prdtId}
productName={prdtNm}
spotlightId={"shop-by-show-spotlightId-" + removeDotAndColon(prdtId)}
label={index * 1 + 1 + " of " + brandProductInfos.length}
lastLabel=" go to detail, button"
euEnrgLblInfos={euEnrgLblInfos}
{...rest}
/>
);
}}
<div>
<ShopByShowImageCard
imageAlt={clctNm}
imageSource={clctImgUrl}
clctNm={clctNm}
spotlightDisabled
ariaLabel={clctNm}
/>
)}
<ShopByShowProductList
brandProductInfos={brandProductInfos}
contentsIndex={contentsIndex}
handleFocus={handleFocus}
patnrId={patnrId}
selectedPatnrId={selectedPatnrId}
clctNm={clctNm}
shelfOrder={shelfOrder}
shelfTitle={shelfTitle}
spotlightId={spotlightId}
/>
</div>
</Container>
);
});
export default ShopByShowContents;

19
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowContents.module.less
View File

@@ -8,20 +8,25 @@
position: relative;
.font(@fontFamily: @arialFontBold, @fontSize: 36px);
color: @COLOR_GRAY08;
margin-bottom: 22px;
}
> div:nth-child(2) {
.flex(@justifyCenter: flex-start);
.size(@w: 100%, @h: auto);
}
}
.tVirtualGridList {
padding-right: 18px;
.size(@h: 438px);
&.listContainer {
margin-bottom: 12px;
}
> div:nth-child(3) {
right: -18px;
&.gridContainer {
> h3 {
position: relative;
margin-bottom: 22px;
}
}
}
.container:last-child {
margin-bottom: 0;
}

2
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.jsx → com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.jsx
View File

@@ -2,7 +2,7 @@ import React, { memo } from "react";
import Spottable from "@enact/spotlight/Spottable";
import CustomImage from "../../../../../../../components/CustomImage/CustomImage";
import CustomImage from "../../../../../../components/CustomImage/CustomImage";
import css from "./ShopByShowImageCard.module.less";
const SpottableComponent = Spottable("figure");

8
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowImageCard/ShopByShowImageCard.module.less → com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowImageCard/ShopByShowImageCard.module.less
View File

@@ -1,16 +1,16 @@
@import "../../../../../../../style/CommonStyle.module.less";
@import "../../../../../../../style/utils.module.less";
@import "../../../../../../style/CommonStyle.module.less";
@import "../../../../../../style/utils.module.less";
.card {
position: relative;
.size(@w: 665px, @h:438px);
.size(@w: 663px, @h:438px);
padding: 18px;
background-color: @COLOR_WHITE;
border: solid 1px @COLOR_GRAY02;
border-radius: 12px;
img {
.size(@w: 629px, @h:402px);
.size(@w: 627px, @h:402px);
object-fit: cover;
}

49
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.jsx → com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.jsx
View File

@@ -1,31 +1,34 @@
import React, { useCallback, useRef, useEffect } from "react";
import React, { useCallback, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import { pushPanel, updatePanel } from "../../../../../../../actions/panelActions";
import TItemCardNew, { removeDotAndColon } from "../../../../../../../components/TItemCard/TItemCard.new";
import TVirtualGridList from "../../../../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../../../../hooks/useScrollTo";
import { pushPanel, updatePanel } from "../../../../../../actions/panelActions";
import TItemCardNew, {
removeDotAndColon,
} from "../../../../../../components/TItemCard/TItemCard.new";
import TVirtualGridList from "../../../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../../../hooks/useScrollTo";
import {
LOG_CONTEXT_NAME,
LOG_MESSAGE_ID,
panel_names,
} from "../../../../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../../../../utils/helperMethods";
} from "../../../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../../../utils/helperMethods";
import css from "./ShopByShowProductList.module.less";
export default function ShopByShowProductList({
brandProductInfos,
contentsIndex,
handleFocus,
patnrId,
selectedPatnrId,
spotlightId,
clctNm,
shelfOrder,
shelfTitle,
clctNm,
spotlightId,
}) {
const { getScrollTo, scrollLeft } = useScrollTo();
@@ -57,11 +60,12 @@ export default function ShopByShowProductList({
}, [scrollLeft, selectedPatnrId]);
const handleClick = useCallback(
(patnrId, prdtId) => (e) => {
(prdtId) => (e) => {
const tItemCard = e.currentTarget;
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId = lastFocusedTarget?.getAttribute("data-spotlight-id");
const lastFocusedTargetId =
lastFocusedTarget?.getAttribute("data-spotlight-id");
const exprOrd = parseInt(
lastFocusedTarget?.getAttribute("data-exposure-order")
);
@@ -93,20 +97,16 @@ export default function ShopByShowProductList({
})
);
},
[dispatch]
[dispatch, patnrId]
);
const renderItem = useCallback(
({ index, ...rest }) => {
if (!brandProductInfos || !brandProductInfos[index]) {
return null;
}
const product = brandProductInfos[index];
const {
prdtImgUrl,
prdtOfferId,
patnrId = "21",
patnrId: productPartnerId = "21",
prdtNm,
prdtId,
prdtPrice,
@@ -128,13 +128,13 @@ export default function ShopByShowProductList({
shelfTitle={shelfTitle}
imageAlt={prdtNm}
imageSource={prdtImgUrl}
onClick={handleClick(patnrId, prdtId)}
onClick={handleClick(prdtId)}
onFocus={handleFocus}
offerInfo={prdtOfferId}
priceInfo={prdtPrice}
productId={prdtId}
productName={prdtNm}
spotlightId={"shop-by-show-product-list-" + removeDotAndColon(prdtId)}
spotlightId={"shop-by-show-list-spotlightId-" + removeDotAndColon(prdtId)}
data-exposure-order={contentsIndex + 1}
label={index + 1 + " of " + brandProductInfos.length}
lastLabel=" go to detail, button"
@@ -143,7 +143,12 @@ export default function ShopByShowProductList({
/>
);
},
[brandProductInfos, contentsIndex, handleClick, handleFocus]
[
brandProductInfos,
contentsIndex,
handleClick,
handleFocus,
]
);
return (
@@ -155,8 +160,8 @@ export default function ShopByShowProductList({
dataSize={brandProductInfos.length}
direction="horizontal"
itemHeight={438}
itemWidth={323}
spacing={19}
itemWidth={324}
spacing={18}
renderItem={renderItem}
/>
)}

13
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowProductList/ShopByShowProductList.module.less → com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowContents/ShopByShowProductList/ShopByShowProductList.module.less
View File

@@ -1,9 +1,9 @@
@import "../../../../../../../style/utils.module.less";
@import "../../../../../../style/utils.module.less";
.container {
.flex();
overflow: hidden;
.size(@w: calc(100% - 665px), @h: 482px);
.size(@w: calc(100% - 663px), @h: 482px);
padding: 0 18px;
// tVirtualGridListContainer
@@ -19,12 +19,3 @@
}
}
}
.tVirtualGridList {
padding-right: 18px;
.size(@h: 438px);
> div:nth-child(3) {
right: -18px;
}
}

10
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowList.jsx
View File

@@ -22,7 +22,7 @@ import { getBrandShopByShow } from '../../../../actions/brandActions';
import useScrollTo from '../../../../hooks/useScrollTo';
import css from './ShopByShowList.module.less';
import ShopByShowNav from './ShopByShowNav/ShopByShowNav';
import ShopByShowSection from './ShopByShowSection/ShopByShowSection';
import ShopByShowContents from './ShopByShowContents/ShopByShowContents';
const Container = SpotlightContainerDecorator(
{ leaveFor: { right: "" }, enterTo: "last-focused" },
@@ -97,16 +97,18 @@ export default function ShopByShowList({
/>
{brandShopByShowClctInfos.map((collection, collIdx) => (
<ShopByShowSection
<ShopByShowContents
key={`${spotlightId}-${collIdx}`}
clctNm={collection.clctNm}
brandProductInfos={collection.brandProductInfos}
contentsIndex={collIdx}
handleItemFocus={_handleItemFocus}
clctNm={collection.clctNm}
clctImgUrl={collection.clctImgUrl}
patnrId={selectedPatnrId}
selectedPatnrId={selectedPatnrId}
spotlightId={spotlightId}
shelfOrder={shelfOrder}
shelfTitle={shelfTitle}
spotlightId={spotlightId}
/>
))}
</Container>

152
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.jsx
View File

@@ -1,152 +0,0 @@
import React, { memo, useCallback } from "react";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import TItemCardNew, { removeDotAndColon } from "../../../../../components/TItemCard/TItemCard.new";
import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../../hooks/useScrollTo";
import {
LOG_CONTEXT_NAME,
LOG_MESSAGE_ID,
panel_names,
} from "../../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods";
import { pushPanel, updatePanel } from "../../../../../actions/panelActions";
import { useDispatch } from "react-redux";
import css from "./ShopByShowSection.module.less";
const Container = SpotlightContainerDecorator(
{ leaveFor: { right: "" }, enterTo: null },
"div"
);
const ShopByShowSection = memo(({
clctNm,
brandProductInfos,
contentsIndex,
handleItemFocus,
selectedPatnrId,
spotlightId,
shelfOrder,
shelfTitle,
}) => {
const { getScrollTo } = useScrollTo();
const dispatch = useDispatch();
const handleClick = useCallback(
(patnrId, prdtId) => (e) => {
const tItemCard = e.currentTarget;
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId = lastFocusedTarget?.getAttribute("data-spotlight-id");
const xContainer = tItemCard?.parentNode?.parentNode;
if (lastFocusedTargetId && xContainer) {
const section = "shop-by-show";
const x = getTranslate3dValueByDirection(xContainer);
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
lastFocusedTargetId,
patnrId,
section,
x,
},
})
);
}
dispatch(
pushPanel({
name: panel_names.DETAIL_PANEL,
panelInfo: { patnrId, prdtId },
})
);
},
[dispatch]
);
const handleFocus = useCallback(() => {
if (handleItemFocus) {
handleItemFocus();
}
}, [handleItemFocus]);
const renderItem = useCallback(
({ index, ...rest }) => {
if (!brandProductInfos || !brandProductInfos[index]) {
return null;
}
const product = brandProductInfos[index];
const {
prdtImgUrl,
prdtOfferId,
patnrId = "21",
prdtNm,
prdtId,
prdtPrice,
patncNm,
brndNm,
lgCatNm,
euEnrgLblInfos,
} = product;
return (
<TItemCardNew
catNm={lgCatNm}
contextName={LOG_CONTEXT_NAME.FEATURED_BRANDS}
messageId={LOG_MESSAGE_ID.SHELF_CLICK}
patnerName={patncNm || "Peacock | Shop The Moment"}
brandName={brndNm}
shelfId={spotlightId}
shelfLocation={shelfOrder}
shelfTitle={shelfTitle}
imageAlt={prdtNm}
imageSource={prdtImgUrl}
onClick={handleClick(patnrId, prdtId)}
onFocus={handleFocus}
offerInfo={prdtOfferId}
priceInfo={prdtPrice}
productId={prdtId}
productName={prdtNm}
spotlightId={"shop-by-show-section-" + removeDotAndColon(prdtId)}
label={index * 1 + 1 + " of " + brandProductInfos.length}
lastLabel=" go to detail, button"
euEnrgLblInfos={euEnrgLblInfos}
{...rest}
/>
);
},
[brandProductInfos, handleClick, handleFocus]
);
if (!brandProductInfos || brandProductInfos.length === 0) {
return null;
}
return (
<Container
className={css.container}
data-wheel-point
spotlightId={`${spotlightId}-section-${contentsIndex}`}
>
<h3 className={css.sectionTitle}>{clctNm}</h3>
<TVirtualGridList
cbScrollTo={getScrollTo}
className={css.tVirtualGridList}
dataSize={brandProductInfos.length}
direction="horizontal"
itemHeight={438}
itemWidth={323}
spacing={19}
renderItem={renderItem}
/>
</Container>
);
});
export default ShopByShowSection;

38
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ShopByShow/ShopByShowList/ShopByShowSection/ShopByShowSection.module.less
View File

@@ -1,38 +0,0 @@
@import "../../../../../style/CommonStyle.module.less";
@import "../../../../../style/utils.module.less";
.container {
padding-left: 60px;
margin-bottom: 40px;
&:last-child {
margin-bottom: 0;
}
}
.sectionTitle {
position: relative;
.font(@fontFamily: @arialFontBold, @fontSize: 42px);
color: @COLOR_GRAY08;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
&::before {
content: "";
width: 6px;
height: 36px;
background-color: #C70850;
flex-shrink: 0;
}
}
.tVirtualGridList {
padding-right: 18px;
.size(@h: 438px);
> div:nth-child(3) {
right: -18px;
}
}