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 18:21:26 +09:00
parent be1120c5b6
commit d674658dd8
6 changed files with 75 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -67,6 +67,8 @@ export default function HomeBannerTemplate1() {
}
}, [homeMainContentsBannerInfos, dispatch]);
const [startFocus, setStartFocus] = useState();
return (
<Container className={css.container} spotlightId={"top"}>
<div className={css.homeTemplateBox}>
@@ -83,17 +85,18 @@ export default function HomeBannerTemplate1() {
index={index}
key={index}
imageType={true}
spotlightId={"banner01"}
/>
) : item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
index={index}
key={index}
imageType={true}
spotlightId={"banner01"}
/>
) : (
<SpottableComponent>
<SpottableComponent spotlightId={"banner01"}>
<CustomImage key={index} delay={0} src={wdthImage1} />
</SpottableComponent>
);
@@ -111,12 +114,18 @@ export default function HomeBannerTemplate1() {
index={index}
key={index}
imageType={true}
spotlightId={"banner02"}
/>
) : item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={true} />
<Random
bannerData={item}
key={index}
imageType={true}
spotlightId={"banner02"}
/>
) : (
<SpottableComponent>
<SpottableComponent spotlightId={"banner02"}>
<CustomImage key={index} delay={0} src={wdthImage2} />
</SpottableComponent>
);
@@ -135,14 +144,15 @@ export default function HomeBannerTemplate1() {
index={index}
key={index}
imageType={false}
spotlightId={"banner03"}
/>
) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
index={index}
key={index}
imageType={false}
spotlightId={"banner03"}
/>
) : (
<SpottableComponent>
@@ -163,17 +173,18 @@ export default function HomeBannerTemplate1() {
index={index}
key={index}
imageType={false}
spotlightId={"banner04"}
/>
) : item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
index={index}
key={index}
imageType={false}
spotlightId={"banner04"}
/>
) : (
<SpottableComponent>
<SpottableComponent spotlightId={"banner04"}>
<CustomImage key={index} delay={0} src={vctpImage2} />
</SpottableComponent>
);

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

@@ -82,17 +82,18 @@ export default function HomeBannerTemplate2() {
index={index}
key={index}
imageType={false}
spotlightId={"banner01"}
/>
) : item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
index={index}
key={index}
imageType={false}
spotlightId={"banner01"}
/>
) : (
<SpottableComponent>
<SpottableComponent spotlightId={"banner01"}>
<CustomImage key={index} delay={0} src={vctpImage1} />
</SpottableComponent>
);
@@ -111,17 +112,18 @@ export default function HomeBannerTemplate2() {
index={index}
key={index}
imageType={true}
spotlightId={"banner02"}
/>
) : item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
index={index}
key={index}
imageType={true}
spotlightId={"banner02"}
/>
) : (
<SpottableComponent>
<SpottableComponent spotlightId={"banner02"}>
<CustomImage key={index} delay={0} src={wdthImage1} />
</SpottableComponent>
);
@@ -139,17 +141,18 @@ export default function HomeBannerTemplate2() {
index={index}
key={index}
imageType={true}
spotlightId={"banner03"}
/>
) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
index={index}
key={index}
imageType={true}
spotlightId={"banner03"}
/>
) : (
<SpottableComponent>
<SpottableComponent spotlightId={"banner03"}>
<CustomImage key={index} delay={0} src={wdthImage2} />
</SpottableComponent>
);
@@ -167,18 +170,19 @@ export default function HomeBannerTemplate2() {
bannerData={item}
index={index}
key={index}
imageType={true}
imageType={false}
spotlightId={"banner04"}
/>
) : item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
index={index}
key={index}
imageType={true}
imageType={false}
spotlightId={"banner04"}
/>
) : (
<SpottableComponent>
<SpottableComponent spotlightId={"banner04"}>
<CustomImage key={index} delay={0} src={vctpImage2} />
</SpottableComponent>
);

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

@@ -62,7 +62,7 @@ export default function HomeBannerTemplate3() {
const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
setBannerInfos(banerInfo);
dispatch(getHomeMainContents);
console.log(homeMainContentsBannerInfos, "메인 컨텐츠 - 템플릿3");
console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
console.log(homeTopDisplayInfos, "탑디스");
}
}, [homeMainContentsBannerInfos, dispatch]);
@@ -71,7 +71,7 @@ export default function HomeBannerTemplate3() {
<Container className={css.homeTemplateBox} spotlightId="top">
<div className={css.mainBox}>
{/* 배너1 */}
<div className={css.imgBox} spotlightId="banner01">
<div className={css.imgBox}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" &&
@@ -81,16 +81,17 @@ export default function HomeBannerTemplate3() {
index={index}
key={index}
imageType={false}
spotlightId={"banner01"}
/>
) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
index={index}
key={index}
imageType={false}
spotlightId={"banner01"}
/>
) : (
<SpottableComponent>
<SpottableComponent spotlightId={"banner01"}>
<CustomImage key={index} delay={0} src={vctpImage1} />
</SpottableComponent>
);
@@ -108,16 +109,17 @@ export default function HomeBannerTemplate3() {
index={index}
key={index}
imageType={false}
spotlightId={"banner02"}
/>
) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
index={index}
key={index}
imageType={false}
spotlightId={"banner02"}
/>
) : (
<SpottableComponent>
<SpottableComponent spotlightId={"banner02"}>
<CustomImage key={index} delay={0} src={vctpImage2} />
</SpottableComponent>
);
@@ -126,7 +128,7 @@ export default function HomeBannerTemplate3() {
<div className={css.dualBox}>
{/* 배너3 */}
<div className={css.smallBox} spotlightId="banner03">
<div className={css.smallBox}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" &&
@@ -136,17 +138,18 @@ export default function HomeBannerTemplate3() {
index={index}
key={index}
imageType={true}
spotlightId={"banner03"}
/>
) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
index={index}
key={index}
imageType={true}
spotlightId={"banner03"}
/>
) : (
<SpottableComponent>
<SpottableComponent spotlightId={"banner03"}>
<CustomImage key={index} delay={0} src={wdthImage1} />
</SpottableComponent>
);
@@ -154,7 +157,7 @@ export default function HomeBannerTemplate3() {
</div>
{/* 배너4 */}
<div className={css.smallBox} spotlightId="banner04">
<div className={css.smallBox}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "4" &&
@@ -164,17 +167,18 @@ export default function HomeBannerTemplate3() {
index={index}
key={index}
imageType={true}
spotlightId={"banner04"}
/>
) : item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
index={index}
key={index}
imageType={true}
spotlightId={"banner04"}
/>
) : (
<SpottableComponent>
<SpottableComponent spotlightId={"banner04"}>
<CustomImage key={index} delay={0} src={wdthImage2} />
</SpottableComponent>
);

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

@@ -16,14 +16,14 @@ export default function RandomUnit({ bannerData, imageType }) {
setRandomData(bannerDetailInfos[num]);
}
}, [bannerData]);
// 추후 변경
return (
<>
{randomData.shptmBanrTpNm == "Image Banner" ? (
<p>TEST</p>
<p>이미지 배너</p>
) : randomData.shptmBanrTpNm == "LIVE" ||
randomData.shptmBanrTpNm == "VOD" ? (
<p>비디오</p>
<p>비디오/LIVE</p>
) : randomData.shptmBanrTpNm == "Today's Deals" ||
randomData.shptmBanrTpNm == "" ? (
<HomeTodayDeal

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

@@ -9,7 +9,7 @@ import VideoPlay from '@enact/sandstone/VideoPlayer';
import CustomImage from '../../../components/CustomImage/CustomImage';
import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
export default function RollingUnit({ bannerData, imageType }) {
export default function RollingUnit({ bannerData, imageType, spotlightId }) {
const bannerDetailInfos = bannerData.bannerDetailInfos;
const bannerDetailInfosLength = bannerData.bannerDetailInfos.length;
@@ -20,6 +20,7 @@ export default function RollingUnit({ bannerData, imageType }) {
const [lastIndex, setLastIndex] = useState();
const [currentIndex, setCurrentIndex] = useState(0);
const [onFocus, setOnFocus] = useState(false);
const [startFocus, setStartFocus] = useState(false);
const getIndex = (index) => {
setCurrentIndex(index);
@@ -69,10 +70,10 @@ export default function RollingUnit({ bannerData, imageType }) {
<>
{bannerDetailInfos &&
bannerDetailInfos[startIndex].shptmBanrTpNm === "Image Banner" ? (
<CustomImage></CustomImage>
<CustomImage />
) : bannerDetailInfos[startIndex].shptmBanrTpNm === "LIVE" ||
bannerDetailInfos[startIndex].shptmBanrTpNm === "VOD" ? (
<VideoPlay></VideoPlay>
(setStartFocus(true), (<VideoPlay />))
) : bannerDetailInfos[startIndex].shptmBanrTpNm === "Today's Deals" ? (
<HomeTodayDeal
imgAlt={bannerDetailInfos[startIndex].imgAlt}
@@ -82,12 +83,14 @@ export default function RollingUnit({ bannerData, imageType }) {
productId={bannerDetailInfos[startIndex].prdtId}
productName={bannerDetailInfos[startIndex].prdtNm}
soldoutFlag={bannerDetailInfos[startIndex].soldoutFlag}
isHorizontal={imageType} // TRUE, FALSE
isHorizontal={imageType} // WIDTH = TRUE / FALSE
rolling={bannerDetailInfosLength === 1 ? false : true}
lastIndex={lastIndex}
currentIndex={startIndex}
getIndex={getIndex}
getFocus={getFocus}
spotlightId={spotlightId}
startFocus={startFocus}
/>
) : null}
</>

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

@@ -6,6 +6,7 @@ import React, {
import classNames from 'classnames';
import Spotlight from '@enact/spotlight';
import Spottable from '@enact/spotlight/Spottable';
import css from './HomeTodayDeal.module.less';
@@ -28,6 +29,8 @@ export default function HomeTodayDeal({
currentIndex,
getIndex,
getFocus,
spotlightId,
startFocus,
...rest
}) {
const handleClick = () => {
@@ -50,13 +53,15 @@ export default function HomeTodayDeal({
};
const _onFocus = () => {
console.log("포커스 온");
getFocus(true);
if (rolling === true) {
getFocus(true);
}
};
const _onBlur = () => {
console.log("포커스 오프");
getFocus(false);
if (rolling === true) {
getFocus(false);
}
};
const parsePriceInfo = useCallback(
@@ -86,6 +91,13 @@ export default function HomeTodayDeal({
const { originalPrice, discountedPrice, discountRate } =
parsePriceInfo(priceInfo);
useEffect(() => {
console.log(startFocus, "스타트포커스");
if (startFocus === false) {
Spotlight.focus("banner01");
}
}, [startFocus]);
return (
<div
className={classNames(
@@ -104,6 +116,7 @@ export default function HomeTodayDeal({
onClick={handleClick}
onFocus={_onFocus}
onBlur={_onBlur}
spotlightId={spotlightId}
>
<div>
<div className={css.textBox}>{productName}</div>