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

[FeaturedBrandsPaenl] component 분리

Browse Source 
Detail Notes :

1. LiveProductList 생성 및 최적화
This commit is contained in:
younghoon100.park
2024-02-07 11:24:24 +09:00
parent 789fe10b73
commit edbf47fb5b
5 changed files with 106 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,9 @@
import React, { useEffect } from "react";
import { VirtualGridList } from "@enact/sandstone/VirtualList";
import ri from "@enact/ui/resolution";
import React, { useCallback } from "react";
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import TItemCard from "../../../components/TItemCard/TItemCard";
import { $L } from "../../../utils/helperMethods";
import css from "./LiveChannels.module.less";
import LiveProductList from "./LiveProductList/LiveProductList";
import LiveVideoCard from "./LiveVideoCard/LiveVideoCard";
// getBrandLiveChannelInfo → brandChanInfo → brandProductInfo
@@ -23,12 +20,6 @@ import LiveVideoCard from "./LiveVideoCard/LiveVideoCard";
const LIVE_CHANNELS_STRING = "LIVE CHANNELS";
const LIST_ITEM_CONF = {
ITEM_WIDTH: 660 * 2,
ITEM_HEIGHT: 236 * 2,
SAPCING: 12 * 2,
};
export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
const {
alamDispFlag,
@@ -52,25 +43,8 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
vtctpYn, // 영상 세로 여부
} = brandChanInfo;
const renderItem = ({ index, ...rest }) => {
const { prdtImgUrl, prdtId, prdtNm, priceInfo, soldoutFlag } =
brandProductInfo[index];
return (
<>
<TItemCard
key={prdtId}
imageAlt={prdtNm}
imageSource={prdtImgUrl}
priceInfo={priceInfo}
productId={prdtId}
productName={prdtNm}
{...rest}
soldoutFlag={soldoutFlag}
type="horizontal"
/>
</>
);
};
// @@pyh Todo, scenario page 100, thumbnail click → 영상 full 화면 이동 및 해당 상품 focuse
const handleCardClick = useCallback((productId) => {}, []);
return (
<>
@@ -79,6 +53,7 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
<SectionTitle title={$L(LIVE_CHANNELS_STRING)} />
{brandChannelCnt === 1 && (
// 라이브 영상이 1개일 경우
<div>
<LiveVideoCard
endTime={endDt}
@@ -88,28 +63,18 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
title={showNm}
/>
<div className={css.tempContainer}>
{brandProductInfo && (
<VirtualGridList
className={css.virtualGridList}
dataSize={brandProductInfo.length}
direction="vertical"
itemRenderer={renderItem}
itemSize={{
minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
}}
noScrollByWheel
scrollMode="translate"
spacing={ri.scale(LIST_ITEM_CONF.SAPCING)}
verticalScrollbar="hidden"
<LiveProductList
brandProductInfo={brandProductInfo}
onCardClick={handleCardClick}
/>
)}
</div>
</div>
)}
{brandChannelCnt > 1 && (
// @@pyh Todo, 영상이 2개 이상일 경우 UI/UX 작업 (harmony API 신청 후 작업)
// 라이브 영상이 1개보다 많을 경우
<div>
{"brandChannelCnt(영상의 수)가 1보다 클 경우, type = vertical"}
</div>

11
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less
View File

@@ -12,16 +12,5 @@
position: relative;
.flex(@justifyCenter: flex-start);
width: 100%;
.tempContainer {
.size(@w: 660px, @h: 564px);
.virtualGridList {
// overflow: unset;
> div {
// overflow: unset !important;
}
}
}
}
}

64
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.jsx Normal file
View File

@@ -0,0 +1,64 @@
import React, { useCallback } from "react";
import { VirtualGridList } from "@enact/sandstone/VirtualList";
import ri from "@enact/ui/resolution";
import TItemCard from "../../../../components/TItemCard/TItemCard";
import css from "./LiveProductList.module.less";
const LIST_ITEM_CONF = {
ITEM_WIDTH: 660 * 2,
ITEM_HEIGHT: 236 * 2,
SAPCING: 12 * 2,
};
export default function LiveProductList({ brandProductInfo, onCardClick }) {
const renderItem = useCallback(
({ index, ...rest }) => {
const {
prdtImgUrl,
prdtId: productId,
prdtNm: productName,
priceInfo,
soldoutFlag,
} = brandProductInfo[index];
return (
<TItemCard
key={productId}
imageAlt={productName}
imageSource={prdtImgUrl}
onCardClick={onCardClick}
priceInfo={priceInfo}
productId={productId}
productName={productName}
{...rest}
soldoutFlag={soldoutFlag}
type="horizontal"
/>
);
},
[brandProductInfo, onCardClick]
);
return (
<div className={css.container}>
{brandProductInfo && (
<VirtualGridList
className={css.virtualGridList}
dataSize={brandProductInfo.length}
direction="vertical"
itemRenderer={renderItem}
itemSize={{
minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
}}
noScrollByWheel
scrollMode="translate"
spacing={ri.scale(LIST_ITEM_CONF.SAPCING)}
verticalScrollbar="hidden"
/>
)}
</div>
);
}

23
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.module.less Normal file
View File

@@ -0,0 +1,23 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.container {
position: relative;
.size(@w: 660px, @h: 564px);
&::after {
.position(@position: absolute, @bottom: 0, @left: 0);
.size(@w: 100%, @h: 50px);
background-image: linear-gradient(to bottom, transparent 65%, @COLOR_WHITE);
content: "";
}
// @@pyh Todo, box-shadow issue
// .virtualGridList {
// overflow: unset;
// > div {
// overflow: unset !important;
// }
// }
}

6
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/package.json Normal file
View File

@@ -0,0 +1,6 @@
{
"main": "LiveProductList.jsx",
"styles": [
"LiveProductList.module.less"
]
}