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

[FeaturedBrandsPanel] component 추가 및 css 수정

Browse Source 
Detail Notes :

1. Recommended Show Nav 추가
2. 다수의 panel, padding 수정
3. FeaturedBestSellerList, action 추가
This commit is contained in:
younghoon100.park
2024-02-21 14:37:08 +09:00
parent a097e947ca
commit 3b2f30f6dc
12 changed files with 173 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSeller.module.less
View File

@@ -3,6 +3,7 @@
.container {
margin-bottom: 58px;
padding-left: 60px;
h2 {
margin-bottom: 24px;

23
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx
View File

@@ -1,9 +1,29 @@
import React, { memo } from "react";
import React, { memo, useCallback } from "react";
import { useDispatch } from "react-redux";
import { pushPanel } from "../../../../actions/panelActions";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import { panel_names } from "../../../../utils/Config";
import css from "./FeaturedBestSellerList.module.less";
export default memo(function FeaturedBestSellerList({ brandBestSellerInfo }) {
const dispatch = useDispatch();
const handleClick = useCallback(
(brandBestSellerInfo) => {
const { patnrId, prdtId } = brandBestSellerInfo;
dispatch(
pushPanel({
name: panel_names.DETAIL_PANEL,
panelInfo: { patnrId, prdtId },
})
);
},
[dispatch, brandBestSellerInfo]
);
return (
<div className={css.container}>
{brandBestSellerInfo && (
@@ -14,6 +34,7 @@ export default memo(function FeaturedBestSellerList({ brandBestSellerInfo }) {
items={brandBestSellerInfo}
itemHeight={438}
itemWidth={324}
onClick={handleClick}
spacing={18}
/>
)}

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

@@ -119,37 +119,36 @@ export default function FeaturedBrandsPanel() {
/>
)}
<div className={css.sectionContainer}>
{brandChanInfo && (
<LiveChannels
brandChanInfo={brandChanInfo[0]}
brandChannelCnt={brandChannelCnt}
{brandChanInfo && (
<LiveChannels
brandChanInfo={brandChanInfo[0]}
brandChannelCnt={brandChannelCnt}
/>
)}
{brandLiveChannelUpcoming && brandLiveChannelUpcoming.length > 0 && (
<UpComing brandLiveChannelUpcoming={brandLiveChannelUpcoming} />
)}
{brandTsvInfo && isNotEmptyObject(brandTsvInfo) && (
<TodaysDeals brandTsvInfo={brandTsvInfo} />
)}
{brandBestSellerInfo && ( // @@pyh Todo, 추후 노출 조건 전달 (현재 노출 조건 존재 하지 않음)
<FeaturedBestSeller brandBestSellerInfo={brandBestSellerInfo} />
)}
{brandRecommendedShowCategoryInfo &&
brandRecommendedShowInfo && ( // @@pyh Todo, 노출 조건 문의 (현재 노출 조건 존재 하지 않음)
<RecommendedShows
brandRecommendedShowCategoryInfo={
brandRecommendedShowCategoryInfo
}
brandRecommendedShowInfo={brandRecommendedShowInfo}
selectedCatCd={selectedCatCd}
setSelectedCatCd={setSelectedCatCd}
/>
)}
{brandLiveChannelUpcoming && brandLiveChannelUpcoming.length > 0 && (
<UpComing brandLiveChannelUpcoming={brandLiveChannelUpcoming} />
)}
{brandTsvInfo && isNotEmptyObject(brandTsvInfo) && (
<TodaysDeals brandTsvInfo={brandTsvInfo} />
)}
{brandBestSellerInfo && ( // @@pyh Todo, 추후 노출 조건 전달 (현재 노출 조건 존재 하지 않음)
<FeaturedBestSeller brandBestSellerInfo={brandBestSellerInfo} />
)}
{brandRecommendedShowCategoryInfo &&
brandRecommendedShowInfo && ( // @@pyh Todo, 노출 조건 문의 (현재 노출 조건 존재 하지 않음)
<RecommendedShows
brandRecommendedShowCategoryInfo={
brandRecommendedShowCategoryInfo
}
brandRecommendedShowInfo={brandRecommendedShowInfo}
setSelectedCatCd={setSelectedCatCd}
/>
)}
</div>
</TBody>
</TPanel>
);

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

@@ -6,9 +6,5 @@
.tBody {
height: 1080px;
.sectionContainer {
padding-left: 60px;
}
}
}

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

@@ -3,6 +3,7 @@
.container {
margin-bottom: 58px;
padding-left: 60px;
h2 {
margin-bottom: 24px;

36
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.jsx
View File

@@ -3,30 +3,46 @@ import React, { memo } from "react";
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import { $L } from "../../../utils/helperMethods";
import css from "./RecommendedShows.module.less";
import RecommendedShowsNav from "./RecommendedShowsNav/RecommendedShowsNav";
const STRING_CONF = {
RECOMMENDED_SHOWS: $L("RECOMMENDED SHOWS"),
};
{
/* <TButton
onClick={() => handleClick(catCd)}
selected={selectedCatCd === String(catCd)}
type={TYPES.oneDepthCategory}
>
{catNm}
</TButton>
<TButton
selected={selectedCatCd === String(catCd)}
size={null}
color={null}
type={TYPES.twoDepthCategory}
withMarquee
>
{catNm}
</TButton> */
}
export default function RecommendedShows({
brandRecommendedShowCategoryInfo,
brandRecommendedShowInfo,
selectedCatCd,
setSelectedCatCd,
}) {
const handleClick = (catCd) => {
setSelectedCatCd(String(catCd));
};
return (
<div className={css.container}>
<SectionTitle title={STRING_CONF.RECOMMENDED_SHOWS} />
{brandRecommendedShowCategoryInfo &&
brandRecommendedShowCategoryInfo.map(({ catNm, catCd }) => (
<div key={catNm} onClick={() => handleClick(catCd)}>
{catNm} {catCd}
</div>
))}
<RecommendedShowsNav
brandRecommendedShowCategoryInfo={brandRecommendedShowCategoryInfo}
selectedCatCd={selectedCatCd}
setSelectedCatCd={setSelectedCatCd}
/>
</div>
);
}

1
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.module.less
View File

@@ -6,5 +6,6 @@
h2 {
margin-bottom: 24px;
padding-left: 60px;
}
}

68
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/RecommendedShowsNav.jsx Normal file
View File

@@ -0,0 +1,68 @@
import React, { useCallback } from "react";
import Scroller from "@enact/sandstone/Scroller";
import TButton, { TYPES } from "../../../../components/TButton/TButton";
import useScrollReset from "../../../../hooks/useScrollReset";
import useScrollTo from "../../../../hooks/useScrollTo";
import css from "./RecommendedShowsNav.module.less";
export default function RecommendedShowsNav({
brandRecommendedShowCategoryInfo,
selectedCatCd,
setSelectedCatCd,
}) {
const { getScrollTo, scrollLeft } = useScrollTo();
const { handleScrollReset, handleStopScrolling } = useScrollReset(
scrollLeft,
true
);
const handleBlur = useCallback((index) => {
if (index !== 0) {
return;
}
handleStopScrolling();
}, []);
const handleClick = useCallback((catCd) => {
setSelectedCatCd(String(catCd));
}, []);
const handleFocus = useCallback((index) => {
if (index !== 0) {
return;
}
handleScrollReset();
}, []);
return (
<nav className={css.nav}>
<Scroller
cbScrollTo={getScrollTo}
direction="horizontal"
horizontalScrollbar="hidden"
noScrollByWheel
scrollMode="translate"
>
<ul>
{brandRecommendedShowCategoryInfo &&
brandRecommendedShowCategoryInfo.map(({ catNm, catCd }, index) => (
<li key={"brandRecommendedShowCategoryInfo-" + index}>
<TButton
onBlur={() => handleBlur(index)}
onClick={() => handleClick(catCd)}
onFocus={() => handleFocus(index)}
selected={selectedCatCd === String(catCd)}
type={TYPES.oneDepthCategory}
>
{catNm}
</TButton>
</li>
))}
</ul>
</Scroller>
</nav>
);
}

18
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/RecommendedShowsNav.module.less Normal file
View File

@@ -0,0 +1,18 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.nav {
.size(@w: 100%, @h: 144px);
background-color: #dddddd;
ul {
display: flex;
align-items: center;
height: inherit;
padding-left: 60px;
li {
margin-right: 12px;
}
}
}

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

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

1
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.module.less
View File

@@ -3,6 +3,7 @@
.container {
margin-bottom: 58px;
padding-left: 60px;
h2 {
margin-bottom: 24px;

1
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.module.less
View File

@@ -3,6 +3,7 @@
.container {
margin-bottom: 58px;
padding-left: 60px;
h2 {
margin-bottom: 24px;