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

[categoryPanel] 아이템 카드, 결과 없을 시 노출 view 구현

Browse Source
This commit is contained in:
hyunwoo93.cha
2024-02-16 16:22:00 +09:00
parent 0404528b93
commit b26dea0f13
9 changed files with 246 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx
View File

@@ -1,5 +1,88 @@
import React from "react";
import React, { useCallback } from "react";
import { useSelector } from "react-redux";
import { VirtualGridList } from "@enact/sandstone/VirtualList";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import TItemCard from "../../../../components/TItemCard/TItemCard";
import { scaleH, scaleW } from "../../../../utils/helperMethods";
import NoResultsCategoryItems from "../NoResultsCategory/NoResultsCategoryItems";
import css from "./ItemContents.module.less";
const LIST_ITEM_CONF = {
ITEM_WIDTH: 324,
ITEM_HEIGHT: 438,
SPACING: 18,
};
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
export default function ItemContents() {
return <p>ITEM</p>;
const itemListDatas = useSelector(
(state) => state.main.subCategoryData?.categoryItemInfos
);
const renderItem = useCallback(
({ index, ...rest }) => {
const itemInfo = itemListDatas[index];
const {
catNm,
cntryCd,
imgUrl,
lgCatCd,
offerInfo,
patncLogoPath,
patnrId,
prdtId,
prdtNm,
priceInfo,
rankOrd,
total,
} = itemInfo;
return (
<TItemCard
{...rest}
key={prdtId}
imageAlt={prdtId}
imageSource={imgUrl}
priceInfo={priceInfo}
productName={prdtNm}
/>
);
},
[itemListDatas]
);
return (
<>
<div>
<Container className={css.container}>
{itemListDatas && itemListDatas.length > 0 && (
<VirtualGridList
className={css.grid}
dataSize={itemListDatas.length}
direction="vertical"
verticalScrollbar="hidden"
itemRenderer={renderItem}
itemSize={{
minWidth: scaleW(LIST_ITEM_CONF.ITEM_WIDTH),
minHeight: scaleH(LIST_ITEM_CONF.ITEM_HEIGHT),
}}
noScrollByWheel
scrollMode="translate"
spacing={scaleW(LIST_ITEM_CONF.SPACING)}
/>
)}
{itemListDatas && itemListDatas.length === 0 && (
<NoResultsCategoryItems />
)}
</Container>
</div>
</>
);
}

15
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.module.less
View File

@@ -0,0 +1,15 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.container {
.size(@w: 100%, @h: auto);
margin-top: 34px;
.grid {
overflow: unset;
> div {
overflow: unset !important;
}
}
}

46
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryItems.jsx Normal file
View File

@@ -0,0 +1,46 @@
import React from "react";
import { useSelector } from "react-redux";
import NoResultsImage from "../../../../../assets/searchpanel/img-search-nodata.png";
import SectionTitle from "../../../../components/SectionTitle/SectionTitle";
import TGrid from "../../../../components/TGrid/TGrid";
import TItemCard from "../../../../components/TItemCard/TItemCard";
import { $L } from "../../../../utils/helperMethods";
import css from "./NoResultsCategoryItems.module.less";
export default function NoResultsCategoryItems() {
const bestSellerDatas = useSelector(
(state) => state.product.bestSellerData.bestSeller
);
return (
<div className={css.container}>
<div className={css.info}>
<div className={css.imageBox}>
<img src={NoResultsImage} alt="No Datas" />
</div>
<p>{$L("THERE ARE NO ITEMS AVAILABLE")}</p>
</div>
<div className={css.bestSellerWrap}>
<SectionTitle title={$L("BEST SELLER")} />
<TGrid>
{bestSellerDatas &&
bestSellerDatas
.slice(0, 5)
.map((bestSeller) => (
<TItemCard
key={bestSeller.rankOrd}
imageSource={bestSeller.imgUrl}
imageAlt={bestSeller.prdtNm}
productName={bestSeller.prdtNm}
priceInfo={bestSeller.priceInfo}
rank={bestSeller.rankOrd}
isBestSeller
/>
))}
</TGrid>
</div>
</div>
);
}

35
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryItems.module.less Normal file
View File

@@ -0,0 +1,35 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.container {
margin-top: 100px;
.info {
text-align: center;
.imageBox {
.size(@w: 360px, @h: 180px);
margin: 0 auto;
background-size: cover;
> img {
object-fit: cover;
.size(@w: 100%, @h: 100%);
}
}
> p {
.font (@fontFamily: @baseFontBold, @fontSize: 36px);
color: #a3a3a3;
margin-top: 6px;
}
}
.bestSellerWrap {
padding: 60px 60px 78px 0;
> h2 {
margin: 134px 0 34px;
}
}
}

26
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryShow.module.less Normal file
View File

@@ -0,0 +1,26 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.container {
margin-top: 100px;
.info {
text-align: center;
.imageBox {
.size(@w: 360px, @h: 180px);
margin: 0 auto;
background-size: cover;
> img {
object-fit: cover;
.size(@w: 100%, @h: 100%);
}
}
}
.popularShowWrap {
margin-left: -60px;
padding-bottom: 60px;
}
}

22
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryShows.jsx Normal file
View File

@@ -0,0 +1,22 @@
import React from "react";
import NoResultsImage from "../../../../../assets/searchpanel/img-search-nodata.png";
import { $L } from "../../../../utils/helperMethods";
import PopularShow from "../../../HomePanel/PopularShow/PopularShow";
import css from "./NoResultsCategoryShow.module.less";
export default function NoResultsCategoryShows() {
return (
<div className={css.container}>
<div className={css.info}>
<div className={css.imageBox}>
<img src={NoResultsImage} alt="No Datas" />
</div>
<p>{$L("THERE ARE NO SHOWS AVAILABLE")}</p>
</div>
<div className={css.popularShowWrap}>
<PopularShow />
</div>
</div>
);
}

6
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.jsx
View File

@@ -4,6 +4,7 @@ import { useSelector } from "react-redux";
import Spottable from "@enact/spotlight/Spottable";
import NoResultsCategoryShows from "../NoResultsCategory/NoResultsCategoryShows";
import css from "./ShowContents.module.less";
import ShowLists from "./ShowLists/ShowLists";
import ShowProductContents from "./ShowProductContents/ShowProductContents";
@@ -15,8 +16,6 @@ export default function ShowContents() {
const { categoryShowInfos, partnerInfos, topShowInfo } =
showContentDatas || {};
console.log("showContentDatas", showContentDatas);
return (
<>
{showContentDatas &&
@@ -36,6 +35,9 @@ export default function ShowContents() {
</div>
</>
)}
{categoryShowInfos && categoryShowInfos.length === 0 && (
<NoResultsCategoryShows />
)}
</>
);
}

7
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.jsx
View File

@@ -4,7 +4,6 @@ import { useSelector } from "react-redux";
import { VirtualGridList } from "@enact/sandstone/VirtualList";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { scaleH, scaleW } from "../../../../../utils/helperMethods";
import css from "./ShowLists.module.less";
@@ -28,7 +27,7 @@ export default function ShowLists() {
const renderItem = useCallback(
({ index, ...rest }) => {
const ItemInfo = showListDatas[index];
const itemInfo = showListDatas[index];
const {
catNm,
dfltThumbnailImgPath,
@@ -41,7 +40,7 @@ export default function ShowLists() {
thumbnailUrl,
total,
vtctpYn,
} = ItemInfo;
} = itemInfo;
return (
<ShowListsItem
@@ -55,8 +54,6 @@ export default function ShowLists() {
[showListDatas]
);
console.log("showListDatas", showListDatas);
return (
<Container className={css.container}>
{showListDatas && showListDatas.length > 0 && (

28
com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
View File

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import { getSubCategory } from "../../actions/mainActions";
import SectionTitle from "../../components/SectionTitle/SectionTitle";
@@ -16,6 +17,11 @@ import ItemContents from "./CategoryContents/ItemContents/ItemContents";
import ShowContents from "./CategoryContents/ShowContents/ShowContents";
import css from "./CategoryPanel.module.less";
const TabContainer = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const getButtonTabList = () => {
return [$L("SHOW"), $L("ITEM")];
};
@@ -67,12 +73,6 @@ export default function CategoryPanel() {
}
}, [categoryDatas, tab]);
useEffect(() => {
const tabType = tab === 0 ? "CAT00101" : "CAT00102";
dispatch(getSubCategory({ lgCatCd, tabType }));
}, [tab, dispatch]);
const handleItemClick = useCallback(
({ index }) => {
if (index === tab) return;
@@ -88,16 +88,10 @@ export default function CategoryPanel() {
useEffect(() => {
const filterType = dropDownTab === 0 ? "CAT00202" : "CAT00201";
const tabType = tab === 0 ? "CAT00101" : "CAT00102";
dispatch(getSubCategory({ lgCatCd, filterType }));
}, [dropDownTab, dispatch]);
console.log(
"panelInfos",
panelInfos.panelInfo,
"categoryDatas",
categoryDatas
);
dispatch(getSubCategory({ lgCatCd, tabType, filterType }));
}, [dropDownTab, dispatch, tab]);
useEffect(() => {
Spotlight.focus(`tab-${tab}`);
@@ -124,7 +118,7 @@ export default function CategoryPanel() {
/>
)}
{buttonTabList && buttonTabList.length > 0 && (
<div className={css.tabContainer}>
<TabContainer className={css.tabContainer}>
<TButtonTab
contents={buttonTabList}
onItemClick={handleItemClick}
@@ -139,7 +133,7 @@ export default function CategoryPanel() {
>
{filterMethods}
</TDropDown>
</div>
</TabContainer>
)}
{tab === 0 && <ShowContents />}
{tab === 1 && <ItemContents />}