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

[홈배너] 대체 이미지 추가

Browse Source
This commit is contained in:
sungmin.in
2024-06-13 16:49:24 +09:00
parent fe641afb14
commit c2267d1550
1 changed files with 92 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,128 +28,149 @@ export default function HomeBanner({
spotlightId,
handleItemFocus,
}) {
const homeTopDisplayInfo = useSelector(
(state) => state.home.homeTopDisplayInfo
);
const homeTopDisplayInfo = useSelector((state) => state.home.homeTopDisplayInfo);
const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos);
const bannerDataList = useSelector(
(state) => state.home.bannerData?.bannerInfos
);
const selectTemplate = useMemo(() => {
return homeTopDisplayInfo.shptmTmplCd;
}, [homeTopDisplayInfo]);
const _handleItemFocus = useCallback(() => {
if (handleItemFocus) {
handleItemFocus();
}
}, [handleItemFocus]);
const defaultFocus = useMemo(()=>{
if(bannerDataList){
const defaultFocus = useMemo(() => {
if (bannerDataList) {
let targetIndex = 0;
for(let i=0; i<bannerDataList.length; i++){
for (let i = 0; i < bannerDataList.length; i++) {
const data = bannerDataList[i];
let bannerDetailInfos = data.bannerDetailInfos;
if(data.shptmDspyTpNm === 'Random'){
if( bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "LIVE" ||
bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "VOD"){
if (data.shptmDspyTpNm === "Random") {
if (
bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "LIVE" ||
bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "VOD"
) {
targetIndex = i;
break;
}
}else if(bannerDetailInfos.find( (el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD")){
} else if (
bannerDetailInfos.find(
(el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD"
)
) {
targetIndex = i;
break;
}
}
return "banner"+targetIndex;
return "banner" + targetIndex;
}
return null;
},[bannerDataList]);
}, [bannerDataList]);
useEffect(()=>{
if(firstSpot && defaultFocus){
useEffect(() => {
if (firstSpot && defaultFocus) {
setTimeout(() => {
Spotlight.focus(defaultFocus)
Spotlight.focus(defaultFocus);
}, 0);
}
},[defaultFocus]);
}, [defaultFocus]);
const renderItem = useCallback((index, isHorizontal)=>{
const data = bannerDataList?.[index] ?? {};
return (
console.log("homeTopDisplayInfo", homeTopDisplayInfo);
const renderItem = useCallback(
(index, isHorizontal) => {
const data = bannerDataList?.[index] ?? {};
return (
<div className={!isHorizontal && css.imgBox}>
{data.shptmDspyTpNm === "Rolling" ?
{data.shptmDspyTpNm === "Rolling" ? (
<Rolling
bannerData={data}
isHorizontal={isHorizontal}
key={"banner"+index}
spotlightId={"banner"+index}
key={"banner" + index}
spotlightId={"banner" + index}
handleItemFocus={_handleItemFocus}
/>
: data.shptmDspyTpNm === "Random" ?
) : data.shptmDspyTpNm === "Random" ? (
<Random
bannerData={data}
isHorizontal={isHorizontal}
key={"banner"+index}
spotlightId={"banner"+index}
handleItemFocus={_handleItemFocus}
randomNumber={data.randomIndex}
bannerData={data}
isHorizontal={isHorizontal}
key={"banner" + index}
spotlightId={"banner" + index}
handleItemFocus={_handleItemFocus}
randomNumber={data.randomIndex}
/>
:
null
}
</div>
) : (
<SpottableComponent spotlightId={"banner" + index}>
<CustomImage
delay={0}
src={
isHorizontal
? homeTopDisplayInfo.wdthtpImgPath1
: homeTopDisplayInfo.vtctpImgPath1
}
aria-label={
isHorizontal
? homeTopDisplayInfo.wdthtpImgNm1
: homeTopDisplayInfo.vtctpImgNm1
}
/>
</SpottableComponent>
)}
</div>
);
},[_handleItemFocus, bannerDataList]);
},
[_handleItemFocus, bannerDataList]
);
const renderLayout = useCallback(()=>{
switch(selectTemplate){
case "DSP00201":{
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)}
<ContainerBasic className={css.smallBox}>
{renderItem(0, true)}
{renderItem(1, true)}
</ContainerBasic>
{renderItem(2, false)}
{renderItem(3, false)}
</>
);
}
case "DSP00203":{
case "DSP00202": {
return (
<>
{renderItem(0, false)}
{renderItem(1, false)}
<ContainerBasic
className={css.smallBox}
>
{renderItem(2, true)}
{renderItem(3, true)}
</ContainerBasic>
{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]);
}, [selectTemplate, renderItem]);
return (
<Container
@@ -157,9 +178,7 @@ export default function HomeBanner({
spotlightId={spotlightId}
data-wheel-point={true}
>
<div className={css.homeTemplateBox}>
{renderLayout()}
</div>
<div className={css.homeTemplateBox}>{renderLayout()}</div>
</Container>
);
}