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-17 17:43:49 +09:00
parent 7e59ec28fe
commit c172cd0590
9 changed files with 211 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,9 +23,10 @@ import Random from './RandomUnit';
import Rolling from './RollingUnit';
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{ leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
{
enterTo: "last-focused",
},
"div"
);
@@ -77,7 +78,7 @@ export default function HomeBannerTemplate1() {
<div className={css.mainBox}>
<div className={css.dualBox}>
{/* 배너1 */}
<div className={css.smallBox} onKeyDown={keyDown}>
<div className={css.smallBox}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" &&
@@ -97,12 +98,14 @@ export default function HomeBannerTemplate1() {
imageType={true}
/>
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage1}
/>
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage1}
/>
</SpottableComponent>
);
})}
</div>
@@ -123,12 +126,14 @@ export default function HomeBannerTemplate1() {
item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={true} />
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage2}
/>
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage2}
/>
</SpottableComponent>
);
})}
</div>
@@ -155,12 +160,14 @@ export default function HomeBannerTemplate1() {
imageType={true}
/>
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage1}
/>
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage1}
/>
</SpottableComponent>
);
})}
</div>
@@ -186,12 +193,14 @@ export default function HomeBannerTemplate1() {
imageType={true}
/>
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage2}
/>
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage2}
/>
</SpottableComponent>
);
})}
</div>

35
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less
View File

@@ -22,12 +22,15 @@
.size(@w: 744px, @h: 420px);
border-radius: 12px;
position: relative;
> img {
border-radius: 12px;
}
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
> div {
position: relative;
> img {
border-radius: 12px;
}
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
}
}
}
@@ -35,16 +38,18 @@
.imgBox {
.size(@w: 486px, @h: 858px);
position: relative;
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
> div {
position: relative;
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
}
> img {
.size(@w: 486px, @h: 858px);
border-radius: 12px;
object-fit: contain;
}
}
> img {
.size(@w: 486px, @h: 858px);
border-radius: 12px;
object-fit: contain;
}
}
}

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

@@ -23,9 +23,10 @@ import Random from './RandomUnit';
import Rolling from './RollingUnit';
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{ leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
{
enterTo: "last-focused",
},
"div"
);
@@ -93,12 +94,14 @@ export default function HomeBannerTemplate2() {
imageType={false}
/>
) : (
<CustomImage
key={index}
onClick={onClickBanner}
delay={0}
src={vctpImage1}
/>
<SpottableComponent>
<CustomImage
key={index}
onClick={""}
delay={0}
src={vctpImage1}
/>
</SpottableComponent>
);
})}
</div>
@@ -125,12 +128,14 @@ export default function HomeBannerTemplate2() {
imageType={true}
/>
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage1}
/>
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={""}
delay={0}
src={wdthImage1}
/>
</SpottableComponent>
);
})}
</div>
@@ -156,12 +161,14 @@ export default function HomeBannerTemplate2() {
imageType={true}
/>
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage2}
/>
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={""}
delay={0}
src={wdthImage2}
/>
</SpottableComponent>
);
})}
</div>
@@ -188,12 +195,14 @@ export default function HomeBannerTemplate2() {
imageType={true}
/>
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage2}
/>
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={""}
delay={0}
src={vctpImage2}
/>
</SpottableComponent>
);
})}
</div>

36
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less
View File

@@ -22,12 +22,15 @@
.size(@w: 744px, @h: 420px);
border-radius: 12px;
position: relative;
> img {
border-radius: 12px;
}
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
> div {
position: relative;
> img {
border-radius: 12px;
}
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
}
}
}
@@ -35,17 +38,18 @@
.imgBox {
.size(@w: 486px, @h: 858px);
position: relative;
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
> div {
position: relative;
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
}
> img {
.size(@w: 486px, @h: 858px);
border-radius: 12px;
object-fit: contain;
}
}
> img {
.size(@w: 486px, @h: 858px);
border-radius: 12px;
object-fit: contain;
}
}
}

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

@@ -23,9 +23,10 @@ import Random from './RandomUnit';
import Rolling from './RollingUnit';
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{ leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
{
enterTo: "last-focused",
},
"div"
);
@@ -88,7 +89,6 @@ export default function HomeBannerTemplate3() {
<Container className={css.homeTemplateBox} spotlightId="top">
<div className={css.mainBox}>
{/* 배너1 */}
<div className={css.imgBox} spotlightId="banner01">
{bannerInfos &&
bannerInfos.map((item, index) => {
@@ -108,12 +108,14 @@ export default function HomeBannerTemplate3() {
imageType={false}
/>
) : (
<CustomImage
key={index}
onClick={onClickBanner}
delay={0}
src={vctpImage1}
/>
<SpottableComponent>
<CustomImage
key={index}
onClick={onClickBanner}
delay={0}
src={vctpImage1}
/>
</SpottableComponent>
);
})}
</div>
@@ -144,19 +146,20 @@ export default function HomeBannerTemplate3() {
imageType={false}
/>
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage2}
/>
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage2}
/>
</SpottableComponent>
);
})}
</div>
<div className={css.dualBox}>
{/* 배너3 */}
<div className={css.smallBox} spotlightId="banner03">
{bannerInfos &&
bannerInfos.map((item, index) => {
@@ -177,12 +180,14 @@ export default function HomeBannerTemplate3() {
imageType={true}
/>
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage1}
/>
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage1}
/>
</SpottableComponent>
);
})}
</div>
@@ -208,12 +213,14 @@ export default function HomeBannerTemplate3() {
imageType={true}
/>
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage2}
/>
<SpottableComponent>
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage2}
/>
</SpottableComponent>
);
})}
</div>

35
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less
View File

@@ -22,12 +22,15 @@
.size(@w: 744px, @h: 420px);
border-radius: 12px;
position: relative;
> img {
border-radius: 12px;
}
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
> div {
position: relative;
> img {
border-radius: 12px;
}
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
}
}
}
@@ -35,16 +38,18 @@
.imgBox {
.size(@w: 486px, @h: 858px);
position: relative;
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
> div {
position: relative;
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
}
> img {
.size(@w: 486px, @h: 858px);
border-radius: 12px;
object-fit: contain;
}
}
> img {
.size(@w: 486px, @h: 858px);
border-radius: 12px;
object-fit: contain;
}
}
}

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

@@ -9,13 +9,7 @@ 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,
spotlightId,
}) {
export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
const bannerDetailInfos = bannerData.bannerDetailInfos;
const bannerDetailInfosLength = bannerData.bannerDetailInfos.length;
@@ -25,6 +19,13 @@ export default function RollingUnit({
const [detailLenghth, setDetailLength] = useState();
const [startIndex, setStartIndex] = useState(0);
const [lastIndex, setLastIndex] = useState();
const [currentIndex, setCurrentIndex] = useState(0);
const [number, setNumber] = useState(0);
const getIndex = (index) => {
setCurrentIndex(index);
setStartIndex(index);
};
useEffect(() => {
if (bannerData) {
@@ -33,9 +34,10 @@ export default function RollingUnit({
setShptmBanrTpNm(bannerDetailInfos[startIndex].shptmBanrTpNm);
setLastIndex(bannerDetailInfosLength - 1);
}
}, [bannerData, shptmBanrTpNm]);
// 더미 데이터 테스트용
console.log(startIndex, "useEffect HOOK");
}, [bannerData, startIndex]);
useEffect(() => {
// 포커스가 없을 경우에만 롤링
if (bannerDetailInfosLength === 1) {
@@ -58,6 +60,7 @@ export default function RollingUnit({
return () => clearInterval(id);
}
}, [count, onFocus]);
return (
<>
{bannerDetailInfos &&
@@ -77,7 +80,10 @@ export default function RollingUnit({
soldoutFlag={bannerDetailInfos[startIndex].soldoutFlag}
isHorizontal={imageType} // TRUE, FALSE
rolling={bannerDetailInfosLength === 1 ? false : true}
spotlightId={spotlightId}
lastIndex={lastIndex}
currentIndex={startIndex}
number={number}
getIndex={getIndex}
/>
) : null}
</>

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

@@ -1,6 +1,7 @@
import React, {
useCallback,
useEffect,
useState,
} from 'react';
import classNames from 'classnames';
@@ -22,15 +23,34 @@ export default function HomeTodayDeal({
soldoutFlag,
isHorizontal,
rolling,
startIndex,
lastIndex,
currentIndex,
number,
getIndex,
...rest
}) {
const handleClick = useCallback(
const handleClick = () => (
(productId) => {
console.log("상세 페이지 이동");
},
[productId]
);
const handlePrev = () => {
if (currentIndex === 0) {
return;
}
getIndex(currentIndex - 1);
};
const handleNext = () => {
if (lastIndex === currentIndex) {
return;
}
getIndex(currentIndex + 1);
};
const parsePriceInfo = useCallback(
(priceInfo) => {
const priceParts = priceInfo
@@ -58,8 +78,6 @@ export default function HomeTodayDeal({
const { originalPrice, discountedPrice, discountRate } =
parsePriceInfo(priceInfo);
useEffect(() => {});
return (
<div
className={classNames(
@@ -70,21 +88,20 @@ export default function HomeTodayDeal({
{rolling === true && (
<SpottableComponent
className={classNames(css.arrow, css.leftBtn)}
onClick={handlePrev}
></SpottableComponent>
)}
<SpottableComponent
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
onClick={() => handleClick(productId)}
>
<div>
<div onClick={() => handleClick(productId)}>
<div className={css.textBox}>{productName}</div>
<div className={css.accBox}>
{discountedPrice}
{discountedPrice != originalPrice ? (
<span className={css.saleAccBox}>{originalPrice}</span>
) : (
<></>
)}
) : null}
</div>
</div>
@@ -96,6 +113,7 @@ export default function HomeTodayDeal({
{rolling === true && (
<SpottableComponent
className={classNames(css.arrow, css.rightBtn)}
onClick={handleNext}
></SpottableComponent>
)}
</div>

8
com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less
View File

@@ -75,10 +75,10 @@
}
}
}
}
&:focus {
&::after {
.focused(@borderRadius: 12px);
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius: 12px);
}
}
}