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-02-18 15:32:34 +09:00
parent c172cd0590
commit be1120c5b6
5 changed files with 49 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,7 +33,6 @@ const Container = SpotlightContainerDecorator(
export default function HomeBannerTemplate1() {
const dispatch = useDispatch();
const [bannerInfos, setBannerInfos] = useState([]);
const [onFocus, setOnFocus] = useState(true);
const [vctpImage1, setVctpImage1] = useState();
const [vctpImage2, setVctpImage2] = useState();
const [wdthImage1, setwdthImage1] = useState();
@@ -68,10 +67,6 @@ export default function HomeBannerTemplate1() {
}
}, [homeMainContentsBannerInfos, dispatch]);
const keyDown = useCallback(() => {}, []);
const onClickBanner = useCallback(() => {}, []);
return (
<Container className={css.container} spotlightId={"top"}>
<div className={css.homeTemplateBox}>
@@ -99,12 +94,7 @@ export default function HomeBannerTemplate1() {
/>
) : (
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage1}
/>
<CustomImage key={index} delay={0} src={wdthImage1} />
</SpottableComponent>
);
})}
@@ -127,12 +117,7 @@ export default function HomeBannerTemplate1() {
<Random bannerData={item} key={index} imageType={true} />
) : (
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage2}
/>
<CustomImage key={index} delay={0} src={wdthImage2} />
</SpottableComponent>
);
})}
@@ -149,7 +134,7 @@ export default function HomeBannerTemplate1() {
bannerData={item}
index={index}
key={index}
imageType={true}
imageType={false}
/>
) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? (
@@ -157,16 +142,11 @@ export default function HomeBannerTemplate1() {
bannerData={item}
index={index}
key={index}
imageType={true}
imageType={false}
/>
) : (
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage1}
/>
<CustomImage key={index} delay={0} src={vctpImage1} />
</SpottableComponent>
);
})}
@@ -182,7 +162,7 @@ export default function HomeBannerTemplate1() {
bannerData={item}
index={index}
key={index}
imageType={true}
imageType={false}
/>
) : item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Random" ? (
@@ -190,16 +170,11 @@ export default function HomeBannerTemplate1() {
bannerData={item}
index={index}
key={index}
imageType={true}
imageType={false}
/>
) : (
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage2}
/>
<CustomImage key={index} delay={0} src={vctpImage2} />
</SpottableComponent>
);
})}

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

@@ -33,7 +33,6 @@ const Container = SpotlightContainerDecorator(
export default function HomeBannerTemplate2() {
const dispatch = useDispatch();
const [bannerInfos, setBannerInfos] = useState([]);
const [onFocus, setOnFocus] = useState(true);
const [vctpImage1, setVctpImage1] = useState();
const [vctpImage2, setVctpImage2] = useState();
const [wdthImage1, setwdthImage1] = useState();
@@ -68,7 +67,6 @@ export default function HomeBannerTemplate2() {
}
}, [homeMainContentsBannerInfos, dispatch]);
const onClickBanner = useCallback(() => {}, []);
return (
<Container className={css.container} spotlightId="top">
<div className={css.homeTemplateBox}>
@@ -95,12 +93,7 @@ export default function HomeBannerTemplate2() {
/>
) : (
<SpottableComponent>
<CustomImage
key={index}
onClick={""}
delay={0}
src={vctpImage1}
/>
<CustomImage key={index} delay={0} src={vctpImage1} />
</SpottableComponent>
);
})}
@@ -129,12 +122,7 @@ export default function HomeBannerTemplate2() {
/>
) : (
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={""}
delay={0}
src={wdthImage1}
/>
<CustomImage key={index} delay={0} src={wdthImage1} />
</SpottableComponent>
);
})}
@@ -162,12 +150,7 @@ export default function HomeBannerTemplate2() {
/>
) : (
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={""}
delay={0}
src={wdthImage2}
/>
<CustomImage key={index} delay={0} src={wdthImage2} />
</SpottableComponent>
);
})}
@@ -196,12 +179,7 @@ export default function HomeBannerTemplate2() {
/>
) : (
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={""}
delay={0}
src={vctpImage2}
/>
<CustomImage key={index} delay={0} src={vctpImage2} />
</SpottableComponent>
);
})}

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

@@ -33,7 +33,6 @@ const Container = SpotlightContainerDecorator(
export default function HomeBannerTemplate3() {
const dispatch = useDispatch();
const [bannerInfos, setBannerInfos] = useState([]);
const [onFocus, setOnFocus] = useState(false);
const [vctpImage1, setVctpImage1] = useState();
const [vctpImage2, setVctpImage2] = useState();
const [wdthImage1, setwdthImage1] = useState();
@@ -47,10 +46,6 @@ export default function HomeBannerTemplate3() {
(state) => state.home.mainContentsData.homeTopDisplayInfos
);
useEffect(() => {
Spotlight.focus("banner01");
}, []);
useEffect(() => {
if (homeTopDisplayInfos) {
setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1);
@@ -72,19 +67,6 @@ export default function HomeBannerTemplate3() {
}
}, [homeMainContentsBannerInfos, dispatch]);
const onClickBanner = useCallback(() => {
console.log("클릭");
}, []);
// 포커스가 들어오면 롤링 중지
const _onFocus = useCallback(() => {
setOnFocus(true);
}, [onFocus]);
const _onBlur = useCallback(() => {
setOnFocus(false);
}, [onFocus]);
return (
<Container className={css.homeTemplateBox} spotlightId="top">
<div className={css.mainBox}>
@@ -109,24 +91,14 @@ export default function HomeBannerTemplate3() {
/>
) : (
<SpottableComponent>
<CustomImage
key={index}
onClick={onClickBanner}
delay={0}
src={vctpImage1}
/>
<CustomImage key={index} delay={0} src={vctpImage1} />
</SpottableComponent>
);
})}
</div>
{/* 배너2 */}
<div
className={css.imgBox}
spotlightId="banner02"
onFocus={_onFocus}
onBlur={_onBlur}
>
<div className={css.imgBox}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" &&
@@ -136,7 +108,6 @@ export default function HomeBannerTemplate3() {
index={index}
key={index}
imageType={false}
onFocus={onFocus}
/>
) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
<Random
@@ -147,12 +118,7 @@ export default function HomeBannerTemplate3() {
/>
) : (
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage2}
/>
<CustomImage key={index} delay={0} src={vctpImage2} />
</SpottableComponent>
);
})}
@@ -181,12 +147,7 @@ export default function HomeBannerTemplate3() {
/>
) : (
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage1}
/>
<CustomImage key={index} delay={0} src={wdthImage1} />
</SpottableComponent>
);
})}
@@ -214,12 +175,7 @@ export default function HomeBannerTemplate3() {
/>
) : (
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage2}
/>
<CustomImage key={index} delay={0} src={wdthImage2} />
</SpottableComponent>
);
})}

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

@@ -9,50 +9,54 @@ import VideoPlay from '@enact/sandstone/VideoPlayer';
import CustomImage from '../../../components/CustomImage/CustomImage';
import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
export default function RollingUnit({ bannerData, imageType }) {
const bannerDetailInfos = bannerData.bannerDetailInfos;
const bannerDetailInfosLength = bannerData.bannerDetailInfos.length;
const [rollingData, setRollingData] = useState([]);
const [shptmBanrTpNm, setShptmBanrTpNm] = useState();
const [count, setCount] = useState(10);
const [detailLenghth, setDetailLength] = useState();
const [startIndex, setStartIndex] = useState(0);
const [lastIndex, setLastIndex] = useState();
const [currentIndex, setCurrentIndex] = useState(0);
const [number, setNumber] = useState(0);
const [onFocus, setOnFocus] = useState(false);
const getIndex = (index) => {
setCurrentIndex(index);
setStartIndex(index);
};
const getFocus = (focus) => {
setOnFocus(focus);
};
useEffect(() => {
if (bannerData) {
setRollingData(bannerDetailInfos);
setDetailLength(bannerDetailInfosLength);
setShptmBanrTpNm(bannerDetailInfos[startIndex].shptmBanrTpNm);
setLastIndex(bannerDetailInfosLength - 1);
}
console.log(startIndex, "useEffect HOOK");
}, [bannerData, startIndex]);
useEffect(() => {
// 포커스가 없을 경우에만 롤링
if (bannerDetailInfosLength === 1) {
return;
}
if (true) {
if (onFocus === false) {
const id = setInterval(() => {
setCount((count) => count - 1);
}, 1000);
if (count === 0) {
if (startIndex > lastIndex) {
setStartIndex(0);
}
setStartIndex(startIndex + 1);
setCount(10);
clearInterval(id);
if (startIndex === lastIndex) {
setStartIndex(0);
}
@@ -82,8 +86,8 @@ export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
rolling={bannerDetailInfosLength === 1 ? false : true}
lastIndex={lastIndex}
currentIndex={startIndex}
number={number}
getIndex={getIndex}
getFocus={getFocus}
/>
) : null}
</>

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

@@ -26,16 +26,14 @@ export default function HomeTodayDeal({
startIndex,
lastIndex,
currentIndex,
number,
getIndex,
getFocus,
...rest
}) {
const handleClick = () => (
(productId) => {
console.log("상세 페이지 이동");
},
[productId]
);
const handleClick = () => {
let proId = productId;
console.log("상품ID : ", proId);
};
const handlePrev = () => {
if (currentIndex === 0) {
@@ -51,6 +49,16 @@ export default function HomeTodayDeal({
getIndex(currentIndex + 1);
};
const _onFocus = () => {
console.log("포커스 온");
getFocus(true);
};
const _onBlur = () => {
console.log("포커스 오프");
getFocus(false);
};
const parsePriceInfo = useCallback(
(priceInfo) => {
const priceParts = priceInfo
@@ -93,9 +101,11 @@ export default function HomeTodayDeal({
)}
<SpottableComponent
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
onClick={() => handleClick(productId)}
onClick={handleClick}
onFocus={_onFocus}
onBlur={_onBlur}
>
<div onClick={() => handleClick(productId)}>
<div>
<div className={css.textBox}>{productName}</div>
<div className={css.accBox}>
{discountedPrice}