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

homeBanner

Browse Source
This commit is contained in:
yonghyon
2024-06-12 18:45:40 +09:00
parent 3de971e7c8
commit 55ffc527fa
5 changed files with 127 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
com.twin.app.shoptime/src/reducers/homeReducer.js
View File

@@ -8,11 +8,7 @@ const initialState = {
themeCurationInfoData: {}, themeCurationInfoData: {},
themeCurationDetailInfoData: {}, themeCurationDetailInfoData: {},
themeCurationHotelDetailData: {}, themeCurationHotelDetailData: {},
mainContentsData: { homeTopDisplayInfo: {},
data: {},
status: "idle",
},
bannerRandomNumber: 0,
bannerData: { bannerData: {
data: {}, data: {},
status: "idle", status: "idle",
@@ -62,25 +58,21 @@ export const homeReducer = (state = initialState, action) => {
}; };
case types.GET_HOME_MAIN_CONTENTS: { case types.GET_HOME_MAIN_CONTENTS: {
const bannerInfos = const homeTopDisplayInfo = action.payload?.homeTopDisplayInfos?.[0] ?? {};
action.payload?.homeMainContentsBannerInfos?.[0]?.bannerInfos; const bannerData = action.payload?.homeMainContentsBannerInfos?.[0] ?? {};
let dataLength = 0; if(bannerData.bannerInfos){
if (bannerInfos) { for (let i = 0; i < bannerData.bannerInfos.length; i++) {
for (let i = 0; i < bannerInfos.length; i++) { const info = bannerData.bannerInfos[i];
if (bannerInfos[i].shptmDspyTpNm === "Random") { if (info.shptmDspyTpNm === "Random") {
dataLength = bannerInfos[i].bannerDetailInfos.length; const dataLength = info.bannerDetailInfos.length;
break; info.randomIndex = Math.floor(Math.random() * dataLength);
} }
} }
} }
const randomNumber = Math.floor(Math.random() * dataLength);
return { return {
...state, ...state,
mainContentsData: action.payload, homeTopDisplayInfo: homeTopDisplayInfo,
bannerRandomNumber: randomNumber, bannerData: bannerData
bannerData: action.payload.homeMainContentsBannerInfos
? action.payload.homeMainContentsBannerInfos[0]
: initialState.bannerData,
}; };
} }
case types.GET_THEME_CURATION_INFO: case types.GET_THEME_CURATION_INFO:

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

@@ -149,7 +149,7 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
: rankOrd + "th"; : rankOrd + "th";
return ( return (
<TItemCard <TItemCard
key={prdtId} key={"subItem"+itemIndex}
imageAlt={prdtId} imageAlt={prdtId}
imageSource={imgUrl} imageSource={imgUrl}
priceInfo={priceInfo} priceInfo={priceInfo}

449
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
View File

@@ -24,234 +24,19 @@ const ContainerBasic = SpotlightContainerDecorator(
); );
export default function HomeBanner({ export default function HomeBanner({
selectTemplate,
order,
firstSpot,
spotlightId, spotlightId,
handleItemFocus, handleItemFocus,
}) { }) {
const dispatch = useDispatch();
const timerRef = useRef(); const homeTopDisplayInfo = useSelector((state) => state.home.homeTopDisplayInfo);
const homeMainContentsBannerInfos = useSelector( const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos);
(state) => state.home.mainContentsData?.homeMainContentsBannerInfos
);
const randomNumber = useSelector((state) => state.home.bannerRandomNumber); const selectTemplate = useMemo(() => {
return homeTopDisplayInfo.shptmTmplCd;
}, [homeTopDisplayInfo]);
const replaceImage = useSelector(
(state) => state.home.mainContentsData?.homeTopDisplayInfos[0]
);
const bannerDataList = useSelector(
(state) => state.home.bannerData?.bannerInfos
);
const homeSpotlight = useSelector((state) => state.home.spotData?.panelInfo);
const { activePopup } = useSelector((state) => state.common.popup);
const startFocus = () => {
let bannerInfoLength = homeMainContentsBannerInfos[0].bannerInfos.length;
if (firstSpot === false) {
// 템플릿1 포커스
if (selectTemplate === "DSP00201") {
const randomIndex = randomNumber;
for (let i = 0; i < bannerInfoLength; i++) {
let bannerFocus =
homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos;
if (
homeMainContentsBannerInfos[0].bannerInfos[i].shptmDspyTpNm ===
"Random"
) {
// 랜덤으로 선택된 배너에 포커스 설정
if (
homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
randomIndex
].shptmBanrTpNm === "LIVE" ||
homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
randomIndex
].shptmBanrTpNm === "VOD"
) {
return Spotlight.focus("banner0" + (i + 1));
}
} else if (
bannerFocus.find(
(el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD"
)
) {
return Spotlight.focus("banner0" + (i + 1));
}
}
return Spotlight.focus("banner01");
}
// 템플릿2 포커스
if (selectTemplate === "DSP00202") {
const randomIndex = randomNumber;
for (let i = 0; i < bannerInfoLength; i++) {
let bannerFocus =
homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos;
if (
homeMainContentsBannerInfos[0].bannerInfos[i].shptmDspyTpNm ===
"Random"
) {
// 랜덤으로 선택된 배너에 포커스 설정
if (
homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
randomIndex
].shptmBanrTpNm === "LIVE" ||
homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
randomIndex
].shptmBanrTpNm === "VOD"
) {
if (i == 0) {
return Spotlight.focus("banner03");
}
if (i == 1) {
return Spotlight.focus("banner01");
}
if (i == 2) {
return Spotlight.focus("banner02");
}
if (i == 3) {
return Spotlight.focus("banner04");
}
}
} else if (
bannerFocus.find(
(el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD"
)
) {
if (i == 0) {
return Spotlight.focus("banner03");
}
if (i == 1) {
return Spotlight.focus("banner01");
}
if (i == 2) {
return Spotlight.focus("banner02");
}
if (i == 3) {
return Spotlight.focus("banner04");
}
}
}
return Spotlight.focus("banner03");
}
// 템플릿3 포커스
if (selectTemplate === "DSP00203") {
const randomIndex = randomNumber;
for (let i = 0; i < bannerInfoLength; i++) {
let bannerFocus =
homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos;
if (
homeMainContentsBannerInfos[0].bannerInfos[i].shptmDspyTpNm ===
"Random"
) {
// 랜덤으로 선택된 배너에 포커스 설정
if (
homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
randomIndex
].shptmBanrTpNm === "LIVE" ||
homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
randomIndex
].shptmBanrTpNm === "VOD"
) {
if (i == 0) {
return Spotlight.focus("banner03");
}
if (i == 1) {
return Spotlight.focus("banner01");
}
if (i == 2) {
return Spotlight.focus("banner02");
}
if (i == 3) {
return Spotlight.focus("banner04");
}
}
} else if (
bannerFocus.find(
(el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD"
)
) {
if (i == 0) {
return Spotlight.focus("banner03");
}
if (i == 1) {
return Spotlight.focus("banner04");
}
if (i == 2) {
return Spotlight.focus("banner01");
}
if (i == 3) {
return Spotlight.focus("banner02");
}
}
}
return Spotlight.focus("banner03");
}
}
};
useEffect(() => {
if (!homeMainContentsBannerInfos) {
dispatch(getHomeMainContents());
}
if (
!activePopup &&
homeMainContentsBannerInfos?.length > 0 &&
!homeSpotlight
) {
timerRef.current = setTimeout(() => {
startFocus();
}, 0);
}
return () => clearTimeout(timerRef.current);
}, [
dispatch,
homeMainContentsBannerInfos,
selectTemplate,
activePopup,
homeSpotlight,
]);
const templateBanner = (index) => {
switch (selectTemplate) {
case "DSP00201":
return bannerDataList && bannerDataList[index];
case "DSP00202":
return index === 2
? bannerDataList && bannerDataList[0]
: index === 3
? bannerDataList && bannerDataList[3]
: bannerDataList && bannerDataList[index + 1];
case "DSP00203":
return index === 2
? bannerDataList && bannerDataList[0]
: index === 3
? bannerDataList && bannerDataList[1]
: bannerDataList && bannerDataList[index + 2];
default:
return bannerDataList && bannerDataList[index];
}
};
const firstBanner = homeMainContentsBannerInfos ? templateBanner(0) : null;
const secondBanner = homeMainContentsBannerInfos ? templateBanner(1) : null;
const thirdBanner = homeMainContentsBannerInfos ? templateBanner(2) : null;
const forthBanner = homeMainContentsBannerInfos ? templateBanner(3) : null;
const orderStyle = useMemo(() => ({ order }), [order]);
const _handleItemFocus = useCallback(() => { const _handleItemFocus = useCallback(() => {
if (handleItemFocus) { if (handleItemFocus) {
@@ -259,158 +44,90 @@ export default function HomeBanner({
} }
}, [handleItemFocus]); }, [handleItemFocus]);
const renderItem = useCallback((index, isHorizontal)=>{
const data = bannerDataList?.[index] ?? {};
return (
<div className={!isHorizontal && css.imgBox}>
{data.shptmDspyTpNm === "Rolling" ?
<Rolling
bannerData={data}
isHorizontal={isHorizontal}
key={"banner"+index}
spotlightId={"banner"+index}
handleItemFocus={_handleItemFocus}
/>
: data.shptmDspyTpNm === "Random" ?
<Random
bannerData={data}
isHorizontal={isHorizontal}
key={"banner"+index}
spotlightId={"banner"+index}
handleItemFocus={_handleItemFocus}
randomNumber={data.randomIndex}
/>
:
null
}
</div>
);
},[_handleItemFocus, bannerDataList]);
const renderLayout = useCallback(()=>{
switch(selectTemplate){
case "DSP00201":{
return (
<>
<ContainerBasic
className={css.smallBox}
>
{renderItem(0, true)}
{renderItem(1, true)}
</ContainerBasic>
{renderItem(2, false)}
{renderItem(3, false)}
</>
)
}
case "DSP00202":{
return (
<>
{renderItem(0, false)}
<ContainerBasic
className={css.smallBox}
>
{renderItem(1, true)}
{renderItem(2, true)}
</ContainerBasic>
{renderItem(3, false)}
</>
);
}
case "DSP00203":{
return (
<>
{renderItem(0, false)}
{renderItem(1, false)}
<ContainerBasic
className={css.smallBox}
>
{renderItem(2, true)}
{renderItem(3, true)}
</ContainerBasic>
</>
);
}
}
return null;
},[selectTemplate, renderItem]);
return ( return (
<Container <Container
className={css.container} className={css.container}
spotlightId={spotlightId} spotlightId={spotlightId}
data-wheel-point={true} data-wheel-point={true}
style={orderStyle}
> >
<div className={css.homeTemplateBox}> <div className={css.homeTemplateBox}>
<ContainerBasic {renderLayout()}
className={css.smallBox}
style={
selectTemplate === "DSP00201"
? { order: 1 }
: selectTemplate === "DSP00202"
? { order: 2 }
: { order: 3 }
}
>
{/* 배너1 */}
<div>
{firstBanner && firstBanner.shptmDspyTpNm === "Rolling" ? (
<Rolling
bannerData={firstBanner}
isHorizontal={true}
spotlightId={"banner01"}
handleItemFocus={_handleItemFocus}
/>
) : firstBanner && firstBanner.shptmDspyTpNm === "Random" ? (
<Random
bannerData={firstBanner}
isHorizontal={true}
spotlightId={"banner01"}
handleItemFocus={_handleItemFocus}
randomNumber={randomNumber}
/>
) : (
<SpottableComponent
spotlightId={"banner01"}
>
<CustomImage
delay={0}
src={replaceImage?.wdthtpImgPath1}
aria-label={replaceImage?.wdthtpImgNm1}
/>
</SpottableComponent>
)}
</div>
{/* 배너2 */}
<div>
{secondBanner && secondBanner.shptmDspyTpNm === "Rolling" ? (
<Rolling
bannerData={secondBanner}
isHorizontal={true}
spotlightId={"banner02"}
handleItemFocus={_handleItemFocus}
/>
) : secondBanner && secondBanner.shptmDspyTpNm === "Random" ? (
<Random
bannerData={secondBanner}
isHorizontal={true}
spotlightId={"banner02"}
handleItemFocus={_handleItemFocus}
randomNumber={randomNumber}
/>
) : (
<SpottableComponent
spotlightId={"banner02"}
>
<CustomImage
delay={0}
src={replaceImage?.wdthtpImgPath2}
aria-label={replaceImage?.wdthtpImgNm2}
/>
</SpottableComponent>
)}
</div>
</ContainerBasic>
{/* 배너3 */}
<div
className={css.imgBox}
style={
selectTemplate === "DSP00201"
? { order: 2 }
: selectTemplate === "DSP00202"
? { order: 1 }
: { order: 1 }
}
>
{thirdBanner && thirdBanner.shptmDspyTpNm === "Rolling" ? (
<Rolling
bannerData={thirdBanner}
isHorizontal={false}
spotlightId={"banner03"}
handleItemFocus={_handleItemFocus}
/>
) : thirdBanner && thirdBanner.shptmDspyTpNm === "Random" ? (
<Random
bannerData={thirdBanner}
isHorizontal={false}
spotlightId={"banner03"}
handleItemFocus={_handleItemFocus}
randomNumber={randomNumber}
/>
) : (
<SpottableComponent
spotlightId={"banner03"}
>
<CustomImage
delay={0}
src={replaceImage?.vtctpImgPath1}
aria-label={replaceImage?.vtctpImgPath1}
/>
</SpottableComponent>
)}
</div>
{/* 배너4 */}
<div
className={css.imgBox}
style={
selectTemplate === "DSP00201"
? { order: 3 }
: selectTemplate === "DSP00202"
? { order: 3 }
: { order: 2 }
}
>
{forthBanner && forthBanner.shptmDspyTpNm === "Rolling" ? (
<Rolling
bannerData={forthBanner}
isHorizontal={false}
spotlightId={"banner04"}
handleItemFocus={_handleItemFocus}
/>
) : forthBanner && forthBanner.shptmDspyTpNm === "Random" ? (
<Random
bannerData={forthBanner}
isHorizontal={false}
spotlightId={"banner04"}
handleItemFocus={_handleItemFocus}
randomNumber={randomNumber}
/>
) : (
<SpottableComponent
spotlightId={"banner04"}
>
<CustomImage delay={0} src={replaceImage?.vtctpImgPath2} />
</SpottableComponent>
)}
</div>
</div> </div>
</Container> </Container>
); );

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

@@ -68,10 +68,6 @@ export default function HomePanel({ isOnTop }) {
(state) => state.common.appStatus?.webOSVersion (state) => state.common.appStatus?.webOSVersion
); );
const homeTopDisplayInfos = useSelector(
(state) => state.home.mainContentsData.homeTopDisplayInfos
);
const categoryInfos = useSelector( const categoryInfos = useSelector(
(state) => state.onSale.homeOnSaleData?.data.categoryInfos (state) => state.onSale.homeOnSaleData?.data.categoryInfos
); );
@@ -110,22 +106,16 @@ export default function HomePanel({ isOnTop }) {
const sendedNowMenuRef = useRef(null); const sendedNowMenuRef = useRef(null);
const selectTemplate = useMemo(() => {
if (homeTopDisplayInfos) {
return homeTopDisplayInfos[0].shptmTmplCd;
}
return null;
}, [homeTopDisplayInfos]);
const sortedHomeLayoutInfo = useMemo(() => { const sortedHomeLayoutInfo = useMemo(() => {
if (selectTemplate && homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) { if (homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) {
const sorted = [...homeLayoutInfo.homeLayoutInfo].sort( const sorted = [...homeLayoutInfo.homeLayoutInfo].sort(
(x, y) => x.expsOrd - y.expsOrd (x, y) => x.expsOrd - y.expsOrd
); );
return sorted; return sorted;
} }
return []; return [];
}, [homeLayoutInfo, selectTemplate]); }, [homeLayoutInfo]);
const pageSpotIds = useMemo(() => { const pageSpotIds = useMemo(() => {
const spots = []; const spots = [];
@@ -169,29 +159,15 @@ export default function HomePanel({ isOnTop }) {
Spotlight.focus(homeSpotlight?.currentSpot); Spotlight.focus(homeSpotlight?.currentSpot);
}, [dispatch, activePopup]); }, [dispatch, activePopup]);
const handleTopButtonClick = () => { const handleTopButtonClick = useCallback(() => {
let spotId = ""; let spotId = "";
if (cbChangePageRef.current) {
if (selectTemplate === "DSP00201") { cbChangePageRef.current(0, true);
if (Spotlight.focus("banner01")) {
spotId = "banner01";
}
if (cbChangePageRef.current) {
cbChangePageRef.current(0, true);
}
return Spotlight.focus(spotId);
} }
if(sortedHomeLayoutInfo?.[0]){
if (selectTemplate === "DSP00202" || selectTemplate === "DSP00203") { Spotlight.focus(sortedHomeLayoutInfo[0].shptmApphmDspyOptCd);
if (Spotlight.focus("banner03")) {
spotId = "banner03";
}
if (cbChangePageRef.current) {
cbChangePageRef.current(0, true);
}
return Spotlight.focus(spotId);
} }
}; },[sortedHomeLayoutInfo]);
const doSendLogGNB = useCallback( const doSendLogGNB = useCallback(
(containerId) => { (containerId) => {
@@ -238,7 +214,6 @@ export default function HomePanel({ isOnTop }) {
<HomeBanner <HomeBanner
key={el.shptmApphmDspyOptCd} key={el.shptmApphmDspyOptCd}
spotlightId={el.shptmApphmDspyOptCd} spotlightId={el.shptmApphmDspyOptCd}
selectTemplate={selectTemplate}
firstSpot={firstSpot} firstSpot={firstSpot}
className={css.homeBannerWrap} className={css.homeBannerWrap}
handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)} handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
@@ -298,7 +273,6 @@ export default function HomePanel({ isOnTop }) {
); );
}, [ }, [
sortedHomeLayoutInfo, sortedHomeLayoutInfo,
selectTemplate,
cateCd, cateCd,
cateNm, cateNm,
handleItemFocus, handleItemFocus,
@@ -455,33 +429,32 @@ export default function HomePanel({ isOnTop }) {
return ( return (
<> <>
{homeLayoutInfo && homeTopDisplayInfos && (
<TPanel className={css.panel} onCancel={onCancel}> <TPanel className={css.panel} onCancel={onCancel}>
<TBody {homeLayoutInfo && (
spotlightId={SpotlightIds.HOME_TBODY} <TBody
className={css.tBody} spotlightId={SpotlightIds.HOME_TBODY}
scrollable={false} className={css.tBody}
spotlightDisabled={!isOnTop} scrollable={false}
> spotlightDisabled={!isOnTop}
<TVerticalPagenator
className={css.tVerticalPagenator}
spotlightId={"home_verticalPagenator"}
defaultContainerId={homeSpotlight?.focusedContainerId}
disabled={!isOnTop}
onScrollStatusChanged={_onScrollStatusChanged}
onFocusedContainerId={_onFocusedContainerId}
cbChangePageRef={cbChangePageRef}
topMargin={36}
onScroll={_onScroll}
> >
{renderPageItem()} <TVerticalPagenator
</TVerticalPagenator> className={css.tVerticalPagenator}
</TBody> spotlightId={"home_verticalPagenator"}
defaultContainerId={homeSpotlight?.focusedContainerId}
{arrowBottom && ( disabled={!isOnTop}
<p className={classNames(css.arrow, css.arrowBottom)} /> onScrollStatusChanged={_onScrollStatusChanged}
onFocusedContainerId={_onFocusedContainerId}
cbChangePageRef={cbChangePageRef}
topMargin={36}
onScroll={_onScroll}
>
{renderPageItem()}
</TVerticalPagenator>
{arrowBottom && (
<p className={classNames(css.arrow, css.arrowBottom)} />
)}
</TBody>
)} )}
{activePopup === ACTIVE_POPUP.exitPopup && ( {activePopup === ACTIVE_POPUP.exitPopup && (
<TPopUp <TPopUp
kind="exitPopup" kind="exitPopup"
@@ -499,7 +472,6 @@ export default function HomePanel({ isOnTop }) {
{(activePopup === ACTIVE_POPUP.eventPopup || {(activePopup === ACTIVE_POPUP.eventPopup ||
activePopup === ACTIVE_POPUP.smsPopup) && <EventPopUpBanner />} activePopup === ACTIVE_POPUP.smsPopup) && <EventPopUpBanner />}
</TPanel> </TPanel>
)}
</> </>
); );
} }

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

@@ -265,7 +265,7 @@ const SubCategory = ({
) => { ) => {
return ( return (
<TItemCard <TItemCard
key={prdtId} key={"subItem"+itemIndex}
imageAlt={prdtId} imageAlt={prdtId}
imageSource={imgUrl} imageSource={imgUrl}
priceInfo={priceInfo} priceInfo={priceInfo}