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

[Search, TrendingNow] 스타일 및 props 변경

Browse Source 
Detail Notes :
1. SearchPane - noData 일 경우 스타일 추가, - 검색 기본 스타일 변경
2. TrendingNow - props 변경에 따라 값 변경
This commit is contained in:
jangheon Pyo
2024-01-29 19:10:27 +09:00
parent 6706ef8a2b
commit d690537b3e
3 changed files with 103 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx
View File

@@ -5,10 +5,7 @@ import TPanel from "../../components/TPanel/TPanel";
import TButton from "../../components/TButton/TButton";
import { $L } from "../../utils/helperMethods";
import css from "./SearchPanel.module.less";
import TIconButton, {
ICON_TYPES,
SIZES,
} from "../../components/TIconButton/TIconButton";
import TIconButton, { ICON_TYPES, SIZES } from "../../components/TIconButton/TIconButton";
import classNames from "classnames";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
@@ -20,11 +17,9 @@ import { getSearch } from "../../features/search/searchSlice";
import SearchNoDataImage from "../../../assets/searchpanel/img-search-nodata.png";
import TGrid from "../../components/TGrid/TGrid";
import TItemCard from "../../components/TItemCard/TItemCard";
import SectionTitle from "../../components/SectionTitle/SectionTitle";
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const Container = SpotlightContainerDecorator({ enterTo: "last-focused" }, "div");
const ITEMS_PER_PAGE = 9;
@@ -35,13 +30,8 @@ export default function SearchPanel() {
const recommandedKeywords = useSelector(
(state) => state.myPage.recommandedKeywordData.data?.keywords
);
const searchDatas = useSelector(
(state) => state.search.searchDatas.data?.result.results
);
const bestSellerDatas = useSelector(
(state) => state.product.bestSellerData.bestSeller
);
const searchDatas = useSelector((state) => state.search.searchDatas.data?.result.results);
const bestSellerDatas = useSelector((state) => state.product.bestSellerData.bestSeller);
const [currentPage, setCurrentPage] = useState(1);
const [paginatedKeywords, setPaginatedKeywords] = useState([]);
const [pageChanged, setPageChanged] = useState(false);
@@ -124,8 +114,7 @@ export default function SearchPanel() {
}, [currentPage]);
const hasPrevPage = currentPage > 1;
const hasNextPage =
currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;
const hasNextPage = currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;
const renderContents = () => {
if (searchPerformed) {
@@ -133,29 +122,36 @@ export default function SearchPanel() {
return <div>data!!</div>;
} else {
return (
<Container>
<img src={SearchNoDataImage} alt="No Datas" />
<p>{$L("SORRY, NO RESULTS MATCHING YOUR SEARCH")}</p>
<TGrid>
{bestSellerDatas &&
bestSellerDatas
.slice(0, 5)
.map((bestSeller) => (
<TItemCard
key={bestSeller.rankOrd}
imageSource={bestSeller.imgUrl}
imageAlt={bestSeller.prdtNm}
productName={bestSeller.prdtNm}
priceInfo={bestSeller.priceInfo}
/>
))}
</TGrid>
<Container className={css.noDataWrap}>
<div className={css.noDataResult}>
<img src={SearchNoDataImage} alt="No Datas" />
<p>{$L("SORRY, NO RESULTS MATCHING YOUR SEARCH")}</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>
</Container>
);
}
} else {
return (
<>
<div className={css.keywordWrap}>
{hasPrevPage && (
<TIconButton
iconType={ICON_TYPES.leftArrow}
@@ -182,7 +178,7 @@ export default function SearchPanel() {
onClick={handleNext}
/>
)}
</>
</div>
);
}
};