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: {},
themeCurationDetailInfoData: {},
themeCurationHotelDetailData: {},
mainContentsData: {
data: {},
status: "idle",
},
bannerRandomNumber: 0,
homeTopDisplayInfo: {},
bannerData: {
data: {},
status: "idle",
@@ -62,25 +58,21 @@ export const homeReducer = (state = initialState, action) => {
};
case types.GET_HOME_MAIN_CONTENTS: {
const bannerInfos =
action.payload?.homeMainContentsBannerInfos?.[0]?.bannerInfos;
let dataLength = 0;
if (bannerInfos) {
for (let i = 0; i < bannerInfos.length; i++) {
if (bannerInfos[i].shptmDspyTpNm === "Random") {
dataLength = bannerInfos[i].bannerDetailInfos.length;
break;
const homeTopDisplayInfo = action.payload?.homeTopDisplayInfos?.[0] ?? {};
const bannerData = action.payload?.homeMainContentsBannerInfos?.[0] ?? {};
if(bannerData.bannerInfos){
for (let i = 0; i < bannerData.bannerInfos.length; i++) {
const info = bannerData.bannerInfos[i];
if (info.shptmDspyTpNm === "Random") {
const dataLength = info.bannerDetailInfos.length;
info.randomIndex = Math.floor(Math.random() * dataLength);
}
}
}
const randomNumber = Math.floor(Math.random() * dataLength);
return {
...state,
mainContentsData: action.payload,
bannerRandomNumber: randomNumber,
bannerData: action.payload.homeMainContentsBannerInfos
? action.payload.homeMainContentsBannerInfos[0]
: initialState.bannerData,
homeTopDisplayInfo: homeTopDisplayInfo,
bannerData: bannerData
};
}
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";
return (
<TItemCard
key={prdtId}
key={"subItem"+itemIndex}
imageAlt={prdtId}
imageSource={imgUrl}
priceInfo={priceInfo}

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

@@ -24,234 +24,19 @@ const ContainerBasic = SpotlightContainerDecorator(
);
export default function HomeBanner({
selectTemplate,
order,
firstSpot,
spotlightId,
handleItemFocus,
}) {
const dispatch = useDispatch();
const timerRef = useRef();
const homeTopDisplayInfo = useSelector((state) => state.home.homeTopDisplayInfo);
const homeMainContentsBannerInfos = useSelector(
(state) => state.home.mainContentsData?.homeMainContentsBannerInfos
);
const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos);
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(() => {
if (handleItemFocus) {
@@ -259,158 +44,90 @@ export default function HomeBanner({
}
}, [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 (
<Container
className={css.container}
spotlightId={spotlightId}
data-wheel-point={true}
style={orderStyle}
>
<div className={css.homeTemplateBox}>
<ContainerBasic
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>
{renderLayout()}
</div>
</Container>
);

46
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
);
const homeTopDisplayInfos = useSelector(
(state) => state.home.mainContentsData.homeTopDisplayInfos
);
const categoryInfos = useSelector(
(state) => state.onSale.homeOnSaleData?.data.categoryInfos
);
@@ -110,22 +106,16 @@ export default function HomePanel({ isOnTop }) {
const sendedNowMenuRef = useRef(null);
const selectTemplate = useMemo(() => {
if (homeTopDisplayInfos) {
return homeTopDisplayInfos[0].shptmTmplCd;
}
return null;
}, [homeTopDisplayInfos]);
const sortedHomeLayoutInfo = useMemo(() => {
if (selectTemplate && homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) {
if (homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) {
const sorted = [...homeLayoutInfo.homeLayoutInfo].sort(
(x, y) => x.expsOrd - y.expsOrd
);
return sorted;
}
return [];
}, [homeLayoutInfo, selectTemplate]);
}, [homeLayoutInfo]);
const pageSpotIds = useMemo(() => {
const spots = [];
@@ -169,29 +159,15 @@ export default function HomePanel({ isOnTop }) {
Spotlight.focus(homeSpotlight?.currentSpot);
}, [dispatch, activePopup]);
const handleTopButtonClick = () => {
const handleTopButtonClick = useCallback(() => {
let spotId = "";
if (selectTemplate === "DSP00201") {
if (Spotlight.focus("banner01")) {
spotId = "banner01";
}
if (cbChangePageRef.current) {
cbChangePageRef.current(0, true);
}
return Spotlight.focus(spotId);
if(sortedHomeLayoutInfo?.[0]){
Spotlight.focus(sortedHomeLayoutInfo[0].shptmApphmDspyOptCd);
}
if (selectTemplate === "DSP00202" || selectTemplate === "DSP00203") {
if (Spotlight.focus("banner03")) {
spotId = "banner03";
}
if (cbChangePageRef.current) {
cbChangePageRef.current(0, true);
}
return Spotlight.focus(spotId);
}
};
},[sortedHomeLayoutInfo]);
const doSendLogGNB = useCallback(
(containerId) => {
@@ -238,7 +214,6 @@ export default function HomePanel({ isOnTop }) {
<HomeBanner
key={el.shptmApphmDspyOptCd}
spotlightId={el.shptmApphmDspyOptCd}
selectTemplate={selectTemplate}
firstSpot={firstSpot}
className={css.homeBannerWrap}
handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
@@ -298,7 +273,6 @@ export default function HomePanel({ isOnTop }) {
);
}, [
sortedHomeLayoutInfo,
selectTemplate,
cateCd,
cateNm,
handleItemFocus,
@@ -455,8 +429,8 @@ export default function HomePanel({ isOnTop }) {
return (
<>
{homeLayoutInfo && homeTopDisplayInfos && (
<TPanel className={css.panel} onCancel={onCancel}>
{homeLayoutInfo && (
<TBody
spotlightId={SpotlightIds.HOME_TBODY}
className={css.tBody}
@@ -476,12 +450,11 @@ export default function HomePanel({ isOnTop }) {
>
{renderPageItem()}
</TVerticalPagenator>
</TBody>
{arrowBottom && (
<p className={classNames(css.arrow, css.arrowBottom)} />
)}
</TBody>
)}
{activePopup === ACTIVE_POPUP.exitPopup && (
<TPopUp
kind="exitPopup"
@@ -499,7 +472,6 @@ export default function HomePanel({ isOnTop }) {
{(activePopup === ACTIVE_POPUP.eventPopup ||
activePopup === ACTIVE_POPUP.smsPopup) && <EventPopUpBanner />}
</TPanel>
)}
</>
);
}

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

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