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

[HomePanel] 링크처리건.

Browse Source 
- Subcategory,popularshow,homeonsaleitem,bestseller 링크 처리건.
This commit is contained in:
junghoon86.park
2024-02-23 14:05:48 +09:00
parent a518d4a3f7
commit 9d1e719b0a
4 changed files with 114 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
View File

@@ -1,15 +1,17 @@
import React, { useEffect, useState } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { pushPanel } from "../../../actions/panelActions";
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import TItemCard from "../../../components/TItemCard/TItemCard";
import TScroller from "../../../components/TScroller/TScroller";
import useScrollReset from "../../../hooks/useScrollReset";
import useScrollTo from "../../../hooks/useScrollTo";
import { panel_names } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import css from "./BestSeller.module.less";
@@ -20,6 +22,7 @@ const Container = SpotlightContainerDecorator(
);
const BestSeller = () => {
const dispatch = useDispatch();
const bestSellerDatas = useSelector(
(state) => state.product.bestSellerData.bestSeller
);
@@ -32,6 +35,27 @@ const BestSeller = () => {
useEffect(() => {
setDrawChk(true);
}, [bestSellerDatas]);
const handleCardClick = useCallback((item) => {
dispatch(
pushPanel(
{
name: panel_names.DETAIL_PANEL,
panelInfo: { patnrId: item.patnrId, prdtId: item.prdtId },
},
[dispatch, item]
)
);
});
const handleMoreCardClick = useCallback(() => {
dispatch(
pushPanel(
{
name: panel_names.TRENDING_NOW_PANEL,
},
[dispatch]
)
);
});
return (
<Container className={css.bestSellerWrap}>
<SectionTitle title={$L(`BEST SELLER`)} />
@@ -54,11 +78,15 @@ const BestSeller = () => {
rank={item.rankOrd}
onFocus={index === 0 ? handleScrollReset : null}
onBlur={handleStopScrolling}
onClick={() => handleCardClick(item)}
/>
))}
{drawChk && (
<SpottableComponent className={css.addItem}></SpottableComponent>
<SpottableComponent
className={css.addItem}
onClick={handleMoreCardClick}
></SpottableComponent>
)}
</TScroller>
</Container>

25
com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.jsx
View File

@@ -1,7 +1,12 @@
import React, { useCallback } from "react";
import { useDispatch } from "react-redux";
import Spottable from "@enact/spotlight/Spottable";
import { pushPanel } from "../../../../actions/panelActions";
import { panel_names } from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import css from "./HomeOnSaleItem.module.less";
const SpottableComponent = Spottable("div");
@@ -33,15 +38,31 @@ export default function HomeOnSaleItem({ homeOnSaleInfos, itemData, ...rest }) {
const { originalPrice, discountedPrice, discountRate } = parsePriceInfo(
itemData.priceInfo
);
const dispatch = useDispatch();
const handleCardClick = useCallback(
(itemData) => {
dispatch(
pushPanel({
name: panel_names.ON_SALE_PANEL,
panelInfo: { categoryIncFlag: "Y", lgCatCd: itemData.lgCatCd },
})
);
},
[dispatch, itemData]
);
return (
<SpottableComponent className={css.onSaleItemList} {...rest}>
<SpottableComponent
className={css.onSaleItemList}
onClick={() => handleCardClick(itemData)}
{...rest}
>
<img src={itemData.imgUrl} className={css.onSaleItemListImg} />
<div className={css.onSaleItemListBox}>
<div className={css.onSaleItemListBoxTitle}>{itemData.catNm}</div>
{discountRate && (
<div className={css.onSaleItemListBoxSaleBox}>
up to&nbsp;
{$L(`up to `)}
<span className={css.onSaleItemListBoxSaleBoxPer}>
{discountRate}
</span>

18
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
View File

@@ -1,15 +1,17 @@
import React, { useEffect, useState } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { pushPanel } from "../../../actions/panelActions";
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import TItemCard, { TYPES } from "../../../components/TItemCard/TItemCard";
import TScroller from "../../../components/TScroller/TScroller";
import useScrollReset from "../../../hooks/useScrollReset";
import useScrollTo from "../../../hooks/useScrollTo";
import { panel_names } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import css from "../PopularShow/PopularShow.module.less";
@@ -20,6 +22,7 @@ const Container = SpotlightContainerDecorator(
);
const PopularShow = ({ ...rest }) => {
const dispatch = useDispatch();
const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
const [drawChk, setDrawChk] = useState(false);
const { getScrollTo, scrollLeft } = useScrollTo();
@@ -30,6 +33,16 @@ const PopularShow = ({ ...rest }) => {
useEffect(() => {
setDrawChk(true);
}, [topInfos]);
const handleCardClick = useCallback(() => {
dispatch(
pushPanel(
{
name: panel_names.TRENDING_NOW_PANEL,
},
[dispatch]
)
);
});
return (
<Container className={css.popularShow}>
<SectionTitle className={css.subTitle} title={$L(`POPULAR SHOW`)} />
@@ -55,6 +68,7 @@ const PopularShow = ({ ...rest }) => {
type={TYPES.videoShow}
onFocus={index === 0 ? handleScrollReset : null}
onBlur={handleStopScrolling}
onClick={handleCardClick}
/>
);
})}

49
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
@@ -6,10 +6,12 @@ import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainer
import Spottable from "@enact/spotlight/Spottable";
import { getSubCategory } from "../../../actions/mainActions";
import { pushPanel } from "../../../actions/panelActions";
import TItemCard from "../../../components/TItemCard/TItemCard";
import TScroller from "../../../components/TScroller/TScroller";
import useScrollReset from "../../../hooks/useScrollReset";
import useScrollTo from "../../../hooks/useScrollTo";
import { panel_names } from "../../../utils/Config";
import CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav";
import css from "../../HomePanel/SubCategory/SubCategory.module.less";
@@ -31,20 +33,53 @@ const SubCategory = () => {
(state) => state.main.subCategoryData.categoryItemInfos
);
const [currentLgCatCd, setCurrentLgCatCd] = useState(null);
const [currentLgCatNm, setCurrentLgCatNm] = useState(null);
const [currentCOUNT, setCurrentCOUNT] = useState(null);
const [drawChk, setDrawChk] = useState(false);
const handleCategoryNav = (lgCatCd, LgCatNm) => {
const handleCategoryNav = (lgCatCd, LgCatNm, COUNT) => {
if (currentLgCatCd === lgCatCd) {
return;
}
setCurrentLgCatCd(lgCatCd);
setCurrentLgCatNm(LgCatNm);
setCurrentCOUNT(COUNT);
};
const handleCardClick = useCallback((item) => {
dispatch(
pushPanel(
{
name: panel_names.DETAIL_PANEL,
panelInfo: { patnrId: item.patnrId, prdtId: item.prdtId },
},
[dispatch, item]
)
);
});
const handleMoreCardClick = useCallback(() => {
dispatch(
pushPanel(
{
name: panel_names.CATEGORY_PANEL,
panelInfo: {
lgCatCd: currentLgCatCd,
lgCatNm: currentLgCatNm,
COUNT: currentCOUNT,
},
//lgCatCd, lgCatNm, COUNT
},
[dispatch, categoryInfos]
)
);
});
useEffect(() => {
if (categoryInfos && !currentLgCatCd) {
const initialLgCatCd = categoryInfos[0].lgCatCd;
const initialLgCatNm = categoryInfos[0].lgCatNm;
const initialCOUNT = categoryInfos[0].COUNT;
setCurrentLgCatCd(initialLgCatCd);
setCurrentLgCatNm(initialLgCatNm);
setCurrentCOUNT(initialCOUNT);
}
}, [categoryInfos]);
const { getScrollTo, scrollLeft } = useScrollTo();
@@ -96,12 +131,16 @@ const SubCategory = () => {
productId={item.prdtId}
onFocus={index === 0 ? handleScrollReset : null}
onBlur={handleStopScrolling}
onClick={() => handleCardClick(item)}
/>
);
})}
{drawChk && (
<SpottableComponent className={css.addItem}></SpottableComponent>
<SpottableComponent
className={css.addItem}
onClick={handleMoreCardClick}
></SpottableComponent>
)}
</TScroller>
</Container>