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

[FeaturedBrandsPanel] add prop(order) to section components

Browse Source
This commit is contained in:
younghoon100.park
2024-07-25 11:12:30 +09:00
parent 949c7fad1a
commit 9ce42b4d36
10 changed files with 47 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,6 +21,7 @@ const Container = SpotlightContainerDecorator(
export default memo(function FeaturedBestSeller({
brandBestSellerInfo,
handleItemFocus,
order,
spotlightId,
selectedPatnrId,
}) {
@@ -62,6 +63,7 @@ export default memo(function FeaturedBestSeller({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.BEST_SELLER)}

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

@@ -139,9 +139,8 @@ const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
const findAndFocusFirstContainer = (timerRef) => {
if (typeof window === "object") {
const containers = document.querySelectorAll("[data-wheel-point]");
const firstContainer = Array.from(containers).find(
(container) => window.getComputedStyle(container)?.order === "1"
);
const firstContainer = Array.from(containers) //
.find((container) => container.getAttribute("data-shelf-order") === "1");
if (firstContainer) {
Spotlight.focus(firstContainer);
@@ -322,7 +321,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
dispatch(getBrandList());
dispatch({ type: types.RESET_BRAND_LAYOUT_INFO });
dispatch(getBrandLayoutInfo({ patnrId: panelInfo?.patnrId }));
// dispatch(getMyUpcomingAlertShow());
setIsInitialRendered(true);
setIsInitialFocusOccurred(false);
}
@@ -461,7 +459,12 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
]);
useEffect(() => {
if (isMounted && !isInitialFocusOccurred && isOnTop) {
if (
isMounted &&
!isInitialFocusOccurred &&
isOnTop &&
sortedBrandLayoutInfo
) {
let targetId;
if (fromDetail) {
@@ -526,6 +529,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
isInitialFocusOccurred,
isOnTop,
panelInfo,
sortedBrandLayoutInfo,
]);
useEffect(() => {
@@ -681,7 +685,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
const renderPageItem = useCallback(() => {
return (
<>
{sortedBrandLayoutInfo.map((el) => {
{sortedBrandLayoutInfo.map((el, idx) => {
switch (el.shptmBrndOptTpCd) {
case TEMPLATE_CODE_CONF.LIVE_CHANNELS: {
return (
@@ -695,6 +699,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
brandChanInfo={brandChanInfo}
brandChannelCnt={brandChannelCnt}
handleItemFocus={handleItemFocus}
order={idx + 1}
panelInfo={panelInfo}
spotlightId={TEMPLATE_CODE_CONF.LIVE_CHANNELS}
selectedPatnrId={selectedPatnrId}
@@ -715,6 +720,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
<UpComing
brandLiveChannelUpcoming={brandLiveChannelUpcoming}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.UP_COMING}
selectedPatnrId={selectedPatnrId}
/>
@@ -735,6 +741,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
brandTsvInfo={brandTsvInfo}
handleItemFocus={handleItemFocus}
hasQuickMenu={hasQuickMenu}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.TODAYS_DEALS}
/>
)}
@@ -753,6 +760,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
<FeaturedBestSeller
brandBestSellerInfo={brandBestSellerInfo}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.BEST_SELLER}
selectedPatnrId={selectedPatnrId}
/>
@@ -778,6 +786,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.RECOMMENDED_SHOWS}
selectedCatCd={selectedCatCd}
selectedPatncNm={selectedPatncNm}
@@ -804,6 +813,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.FEATURED_CREATORS}
selectedHstNm={selectedHstNm}
selectedPatncNm={selectedPatncNm}
@@ -830,6 +840,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.SERIES}
selectedPatncNm={selectedPatncNm}
selectedPatnrId={selectedPatnrId}
@@ -855,6 +866,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
brandCategoryProductInfo={brandCategoryProductInfo}
fromGNB={fromGNB}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.CATEGORY}
selectedCatCdLv1={selectedCatCdLv1}
selectedCatCdLv2={selectedCatCdLv2}
@@ -881,6 +893,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
selectedPatnrId={selectedPatnrId}
selectedPatncNm={selectedPatncNm}
spotlightId={TEMPLATE_CODE_CONF.SHOWROOM}

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

@@ -25,7 +25,7 @@ export default memo(function FeaturedCategory({
fromGNB,
fromQuickMenu,
handleItemFocus,
// order,
order,
spotlightId,
selectedCatCdLv1,
selectedCatCdLv2,
@@ -34,28 +34,21 @@ export default memo(function FeaturedCategory({
setSelectedCatCdLv1,
setSelectedCatCdLv2,
}) {
// const [copiedBrandCategoryProductInfo, setCopiedBrandCategoryProductInfo] =
// useState([]);
const [
filteredBrandCategoryProductInfo,
setFilteredBrandCategoryProductInfo,
] = useState();
// const [isCopyFinished, setIsCopyFinished] = useState(false);
const [firstChk, setFirstChk] = useState(0);
const orderStyle = useMemo(
() => ({
// order,
height:
filteredBrandCategoryProductInfo &&
filteredBrandCategoryProductInfo.length === 0
? scaleH(1080) + "px"
: "auto",
}),
[
// order,
filteredBrandCategoryProductInfo,
]
[filteredBrandCategoryProductInfo]
);
const catCdLv1Array = useMemo(
@@ -78,77 +71,6 @@ export default memo(function FeaturedCategory({
[selectedCategoryLv2Infos]
);
// useEffect(() => {
// if (brandCategoryProductInfo) {
// setCopiedBrandCategoryProductInfo([...brandCategoryProductInfo]);
// setIsCopyFinished(true);
// }
// }, [brandCategoryProductInfo]);
// useEffect(() => {
// if (isCopyFinished) {
// if (!selectedCatCdLv1 && !selectedCatCdLv2) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(({ catCd }) => catCdLv1Array.includes(catCd))
// );
// setIsCopyFinished(false);
// return;
// }
// if (
// selectedCatCdLv1 &&
// !selectedCatCdLv2 &&
// selectedCategoryLv2Infos?.length === 0
// ) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(({ catCd }) => catCd === selectedCatCdLv1)
// );
// setIsCopyFinished(false);
// return;
// }
// if (
// selectedCatCdLv1 &&
// !selectedCatCdLv2 &&
// selectedCategoryLv2Infos?.length > 0
// ) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(
// ({ catCd }) =>
// !catCdLv1Array.includes(catCd) &&
// selectedCatCdLv2Array.includes(catCd)
// )
// );
// setIsCopyFinished(false);
// return;
// }
// if (
// selectedCatCdLv1 &&
// selectedCatCdLv2 &&
// selectedCategoryLv2Infos?.length > 0
// ) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(({ catCd }) => catCd === selectedCatCdLv2)
// );
// setIsCopyFinished(false);
// }
// }
// }, [
// copiedBrandCategoryProductInfo,
// catCdLv1Array,
// isCopyFinished,
// selectedCatCdLv1,
// selectedCatCdLv2,
// selectedCatCdLv2Array,
// selectedPatnrId,
// selectedCategoryLv2Infos?.length,
// ]);
useEffect(() => {
if (!selectedCatCdLv1 && !selectedCatCdLv2) {
setFilteredBrandCategoryProductInfo(
@@ -196,7 +118,15 @@ export default memo(function FeaturedCategory({
.filter(({ catCd }) => catCd === selectedCatCdLv2)
);
}
}, [brandCategoryProductInfo, catCdLv1Array, selectedCatCdLv1, selectedCatCdLv2, selectedCatCdLv2Array, selectedPatnrId, selectedCategoryLv2Infos?.length]);
}, [
brandCategoryProductInfo,
catCdLv1Array,
selectedCatCdLv1,
selectedCatCdLv2,
selectedCatCdLv2Array,
selectedPatnrId,
selectedCategoryLv2Infos?.length,
]);
const _handleItemFocus = useCallback(() => {
if (handleItemFocus) {
@@ -214,7 +144,6 @@ export default memo(function FeaturedCategory({
}
setFirstChk(1);
} else if (firstChk === 1) {
// const c = Spotlight.getCurrent();
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
if (cAriaLabel) {
@@ -233,6 +162,7 @@ export default memo(function FeaturedCategory({
style={orderStyle}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.CATEGORY)}

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

@@ -24,6 +24,7 @@ export default memo(function FeaturedCreators({
fromGNB,
fromQuickMenu,
handleItemFocus,
order,
spotlightId,
selectedHstNm,
selectedPatncNm,
@@ -68,6 +69,7 @@ export default memo(function FeaturedCreators({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.FEATURED_CREATORS)}

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

@@ -29,6 +29,7 @@ export default memo(function LiveChannels({
brandChannelCnt,
handleItemFocus,
panelInfo,
order,
selectedPatnrId,
spotlightId,
}) {
@@ -41,8 +42,6 @@ export default memo(function LiveChannels({
const intervalRef = useRef(null);
// const orderStyle = useMemo(() => ({ order }), [order]);
useEffect(() => {
dispatch(getMyUpcomingAlertShow());
}, []);
@@ -118,6 +117,7 @@ export default memo(function LiveChannels({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.LIVE_CHANNELS)}

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

@@ -27,7 +27,7 @@ export default memo(function RecommendedShows({
fromGNB,
fromQuickMenu,
handleItemFocus,
// order,
order,
spotlightId,
selectedCatCd,
selectedPatncNm,
@@ -38,8 +38,6 @@ export default memo(function RecommendedShows({
const [firstChk, setFirstChk] = useState(0);
// const orderStyle = useMemo(() => ({ order }), [order]);
const selectedCatNm = useMemo(
() =>
brandRecommendedShowCategoryInfo //
@@ -72,7 +70,6 @@ export default memo(function RecommendedShows({
}
setFirstChk(1);
} else if (firstChk === 1) {
// const c = Spotlight.getCurrent();
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
if (cAriaLabel) {
@@ -91,9 +88,9 @@ export default memo(function RecommendedShows({
return (
<Container
className={css.container}
// style={orderStyle}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.RECOMMENDED_SHOWS)}

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

@@ -25,6 +25,7 @@ export default memo(function Series({
fromGNB,
fromQuickMenu,
handleItemFocus,
order,
spotlightId,
selectedPatncNm,
selectedPatnrId,
@@ -79,6 +80,7 @@ export default memo(function Series({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle title={$L(STRING_CONF.SERIES)} data-title="series" />
<SeriesNav

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

@@ -26,7 +26,7 @@ export default memo(function Showroom({
fromGNB,
fromQuickMenu,
handleItemFocus,
// order,
order,
selectedPatnrId,
selectedPatncNm,
spotlightId,
@@ -36,8 +36,6 @@ export default memo(function Showroom({
const [selectedRoomId, setSelectedRoomId] = useState(null);
const [firstChk, setFirstChk] = useState(0);
// const orderStyle = useMemo(() => ({ order }), [order]);
const selectedRoomThemeInfos = useMemo(
() =>
brandShowroomInfo //
@@ -71,7 +69,6 @@ export default memo(function Showroom({
}
setFirstChk(1);
} else if (firstChk === 1) {
// const c = Spotlight.getCurrent();
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
if (cAriaLabel) {
@@ -87,9 +84,9 @@ export default memo(function Showroom({
return (
<Container
className={css.container}
// style={orderStyle}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle title={$L(STRING_CONF.SHOWROOM)} data-title="showroom" />
<ShowroomNav

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

@@ -21,6 +21,7 @@ const Container = SpotlightContainerDecorator(
export default memo(function TodaysDeals({
brandTsvInfo,
handleItemFocus,
order,
spotlightId,
}) {
const [firstChk, setFirstChk] = useState(0);
@@ -58,6 +59,7 @@ export default memo(function TodaysDeals({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.TODAYS_DEALS)}

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

@@ -21,6 +21,7 @@ const STRING_CONF = {
export default memo(function UpComing({
brandLiveChannelUpcoming,
handleItemFocus,
order,
spotlightId,
selectedPatnrId,
}) {
@@ -41,7 +42,6 @@ export default memo(function UpComing({
}
setFirstChk(1);
} else if (firstChk === 1) {
// const c = Spotlight.getCurrent();
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
if (cAriaLabel) {
@@ -59,6 +59,7 @@ export default memo(function UpComing({
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
>
<SectionTitle
title={$L(STRING_CONF.UPCOMING)}