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

[홈패널] CSS 수정

Browse Source
This commit is contained in:
sungmin.in
2024-02-16 14:40:44 +09:00
parent 4bbb35ad57
commit 772377a029
5 changed files with 234 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -67,6 +67,8 @@ export default function HomeBannerTemplate1() {
}
}, [homeMainContentsBannerInfos, dispatch]);
const keyDown = useCallback(() => {}, []);
const onClickBanner = useCallback(() => {}, []);
return (
@@ -75,8 +77,9 @@ export default function HomeBannerTemplate1() {
<div className={css.mainBox}>
<div className={css.dualBox}>
{/* 배너1 */}
<SpottableComponent
<div
className={classNames(css.videoBox, css.topBox)}
onKeyDown={keyDown}
>
{bannerInfos &&
bannerInfos.map((item, index) => {
@@ -108,12 +111,10 @@ export default function HomeBannerTemplate1() {
/>
);
})}
</SpottableComponent>
</div>
{/* 배너2 */}
<SpottableComponent
className={classNames(css.videoBox, css.underBox)}
>
<div className={classNames(css.videoBox, css.underBox)}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" &&
@@ -124,7 +125,7 @@ export default function HomeBannerTemplate1() {
index={index}
key={index}
imageType={true}
onFocus={onFocus}
// spotlightId={"roll02"}
/>
) : item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Random" ? (
@@ -144,7 +145,7 @@ export default function HomeBannerTemplate1() {
/>
);
})}
</SpottableComponent>
</div>
</div>
{/* 배너3 */}

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

@@ -3,12 +3,10 @@
.container {
background-color: @BG_COLOR_01;
display: flex;
}
.homeTemplateBox {
margin: 24px 24px 0px;
display: flex;
padding: 24px;
img,
video {
.size(@w: 100%, @h: 100%);
@@ -17,7 +15,6 @@
}
.leftBannerBox {
.size(@w: 744px, @h: 858px);
margin-right: 18px;
&.dualBox {
.topBox {
.size(@w: 744px, @h: 420px);
@@ -26,9 +23,7 @@
border-radius: 12px;
overflow: hidden;
&:focus,
&:hover,
&:focus-within,
&:active {
&:focus-within {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
@@ -39,9 +34,7 @@
border-radius: 12px;
overflow: hidden;
&:focus,
&:hover,
&:focus-within,
&:active {
&:focus-within {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
@@ -54,13 +47,11 @@
margin: 0 18px 18px 0;
border-radius: 12px;
overflow: hidden;
&:focus,
&:hover,
&:focus-within,
&:active {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
// &:focus,
// &:focus-within {
// .focused(@boxShadow: 22px, @borderRadius: 12px);
// position: unset;
// }
.videoPlayer {
.size(@w: 744px, @h: 420px);
outline: "teal dashed 1px";
@@ -75,9 +66,7 @@
border-radius: 12px;
box-sizing: border-box;
&:focus,
&:hover,
&:focus-within,
&:active {
&:focus-within {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
@@ -91,9 +80,7 @@
border-radius: 12px;
margin-right: 18px;
&:focus,
&:hover,
&:focus-within,
&:active {
&:focus-within {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
@@ -103,9 +90,7 @@
.size(@w: 486px, @h: 858px);
.border-solid(@size:4px, @color:transparent);
&:focus,
&:hover,
&:focus-within,
&:active {
&:focus-within {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
@@ -145,6 +130,7 @@
.mainBox {
display: flex;
justify-content: space-between;
}
.mainBox {
@@ -157,9 +143,7 @@
border-radius: 12px;
overflow: hidden;
&:focus,
&:hover,
&:focus-within,
&:active {
&:focus-within {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}

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

@@ -1,31 +1,21 @@
import React, {
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import classNames from 'classnames';
import VideoPlay from '@enact/sandstone/VideoPlayer';
import image1 from '../../../../assets/Image/img-home-banner-h-01.png';
import image2 from '../../../../assets/Image/img-home-banner-h-01.png';
import image3 from '../../../../assets/Image/img-home-banner-v-01.png';
import image4 from '../../../../assets/Image/img-home-banner-v-02.png';
import CustomImage from '../../../components/CustomImage/CustomImage';
import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
import css from './RollingUnit.module.less';
// 더미 데이터
const imgArr = [
{ img: image1, key: 1 },
{ img: image2, key: 2 },
{ img: image3, key: 3 },
{ img: image4, key: 4 },
];
export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
export default function RollingUnit({
bannerData,
index,
imageType,
onFocus,
spotlightId,
}) {
const bannerDetailInfos = bannerData.bannerDetailInfos;
const bannerDetailInfosLength = bannerData.bannerDetailInfos.length;
@@ -35,46 +25,6 @@ export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
const [detailLenghth, setDetailLength] = useState();
const [startIndex, setStartIndex] = useState(0);
const [lastIndex, setLastIndex] = useState();
const [currentPage, setCurrentPage] = useState(0);
const handleNext = useCallback(() => {
setCurrentPage((currentPage) => currentPage + 1);
}, [currentPage]);
const handlePrev = useCallback(() => {
setCurrentPage((currentPage) =>
currentPage > 0 ? currentPage - 1 : currentPage
);
}, [currentPage]);
const [customInterval, setCustomeInterval] = useState(10000);
const intervalRef = useRef(null);
const useInterval = (callback, delay) => {
const savedCallback = useRef();
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
};
useInterval(() => {
if (onFocus === false) {
if (currentPage === lastIndex) {
setCurrentPage(0);
} else {
setCurrentPage(currentPage + 1);
}
}
}, customInterval);
useEffect(() => {
if (bannerData) {
@@ -84,43 +34,52 @@ export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
setLastIndex(bannerDetailInfosLength - 1);
}
}, [bannerData, shptmBanrTpNm]);
useEffect(() => {
if (intervalRef.current) {
}
}, [intervalRef]);
// 더미 데이터 테스트용
useEffect(() => {
// 포커스가 없을 경우에만 롤링
if (bannerDetailInfosLength === 1) {
return;
}
if (true) {
const id = setInterval(() => {
setCount((count) => count - 1);
}, 1000);
if (count === 0) {
setStartIndex(startIndex + 1);
setCount(10);
clearInterval(id);
if (startIndex === lastIndex) {
setStartIndex(0);
}
}
return () => clearInterval(id);
}
}, [count, onFocus]);
return (
<div
className={classNames(
css.container,
imageType === true && css.horizontal
)}
ref={intervalRef}
>
{currentPage !== 0 && (
<div className={css.leftBtn} onClick={handlePrev}></div>
)}
<>
{bannerDetailInfos &&
bannerDetailInfos[currentPage].shptmBanrTpNm === "Image Banner" ? (
bannerDetailInfos[startIndex].shptmBanrTpNm === "Image Banner" ? (
<CustomImage></CustomImage>
) : bannerDetailInfos[currentPage].shptmBanrTpNm === "LIVE" ||
bannerDetailInfos[currentPage].shptmBanrTpNm === "VOD" ? (
) : bannerDetailInfos[startIndex].shptmBanrTpNm === "LIVE" ||
bannerDetailInfos[startIndex].shptmBanrTpNm === "VOD" ? (
<VideoPlay></VideoPlay>
) : bannerDetailInfos[currentPage].shptmBanrTpNm === "Today's Deals" ? (
) : bannerDetailInfos[startIndex].shptmBanrTpNm === "Today's Deals" ? (
<HomeTodayDeal
imgAlt={bannerDetailInfos[currentPage].imgAlt}
imageName={bannerDetailInfos[currentPage].tmnlImgNm}
imgPath={bannerDetailInfos[currentPage].tmnlImgPath}
priceInfo={bannerDetailInfos[currentPage].priceInfo}
productId={bannerDetailInfos[currentPage].prdtId}
productName={bannerDetailInfos[currentPage].prdtNm}
soldoutFlag={bannerDetailInfos[currentPage].soldoutFlag}
imgAlt={bannerDetailInfos[startIndex].imgAlt}
imageName={bannerDetailInfos[startIndex].tmnlImgNm}
imgPath={bannerDetailInfos[startIndex].tmnlImgPath}
priceInfo={bannerDetailInfos[startIndex].priceInfo}
productId={bannerDetailInfos[startIndex].prdtId}
productName={bannerDetailInfos[startIndex].prdtNm}
soldoutFlag={bannerDetailInfos[startIndex].soldoutFlag}
isHorizontal={imageType} // TRUE, FALSE
rolling={bannerDetailInfosLength === 1 ? false : true}
spotlightId={spotlightId}
/>
) : null}
{lastIndex !== currentPage && (
<div className={css.rightBtn} onClick={handleNext}></div>
)}
</div>
</>
);
}

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

@@ -1,9 +1,15 @@
import React, { useCallback } from "react";
import React, {
useCallback,
useEffect,
} from 'react';
import classNames from "classnames";
import classNames from 'classnames';
import usePriceInfo from "../../../hooks/usePriceInfo";
import css from "./HomeTodayDeal.module.less";
import Spottable from '@enact/spotlight/Spottable';
import css from './HomeTodayDeal.module.less';
const SpottableComponent = Spottable("div");
export default function HomeTodayDeal({
children,
@@ -15,6 +21,7 @@ export default function HomeTodayDeal({
productName,
soldoutFlag,
isHorizontal,
rolling,
...rest
}) {
const handleClick = useCallback(
@@ -23,10 +30,44 @@ export default function HomeTodayDeal({
},
[productId]
);
const parsePriceInfo = useCallback(
(priceInfo) => {
const priceParts = priceInfo
.split("|")
.filter((part) => part !== "N")
.map((item) => item.trim());
let originalPrice, discountedPrice, discountRate;
if (priceParts.length === 4) {
[originalPrice, discountedPrice, , discountRate] = priceParts;
} else if (priceParts.length === 2) {
[originalPrice, discountedPrice] = priceParts;
discountRate = null;
} else {
originalPrice = null;
discountedPrice = null;
discountRate = null;
}
return { originalPrice, discountedPrice, discountRate };
},
[priceInfo]
);
const { originalPrice, discountedPrice, discountRate } =
usePriceInfo(priceInfo);
parsePriceInfo(priceInfo);
useEffect(() => {});
return (
<div
<div className={css.rollingWrap}>
{rolling === true && (
<SpottableComponent
className={classNames(css.arrow, css.leftBtn)}
></SpottableComponent>
)}
<SpottableComponent
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
onClick={() => handleClick(productId)}
>
@@ -41,9 +82,17 @@ export default function HomeTodayDeal({
)}
</div>
</div>
<div className={css.itemImgBox}>
<img src={imgPath} />
</div>
</SpottableComponent>
{rolling === true && (
<SpottableComponent
className={classNames(css.arrow, css.rightBtn)}
></SpottableComponent>
)}
</div>
);
}

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

@@ -1,12 +1,13 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.itemBox {
.rollingWrap {
position: relative;
.itemBox {
background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_ver.png);
background-repeat: no-repeat;
background-size: 486px 858px;
background-position: center center;
.size(@w: 486px, @h: 858px);
margin-right: 18px;
.size(@w: 744px, @h: 420px);
.border-solid(@size:4px, @color:transparent);
border-radius: 12px;
position: relative;
@@ -24,6 +25,7 @@
color: @COLOR_GRAY06;
line-height: 1.27;
}
.accBox {
.size(@w: 406px, @h: 50px);
margin: 6px 36px 0;
@@ -46,54 +48,14 @@
width: 100%;
}
}
.leftBtn {
.position(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px);
.size(@w: 42px, @h: 42px);
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
background-size: 42px 42px;
background-position: center center;
cursor: pointer;
&:focus,
&:focus-within,
&:hover,
&:active {
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
}
}
.rightBtn {
.position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto);
.size(@w: 42px, @h: 42px);
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
background-size: 42px 42px;
background-position: center center;
cursor: pointer;
&:focus,
&:focus-within,
&:hover,
&:active {
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
}
}
}
.itemBox.isHorizontal {
position: relative;
&.isHorizontal {
background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_hor.png);
background-repeat: no-repeat;
background-size: 744px 420px;
background-position: center center;
.size(@w: 744px, @h: 420px);
.border-solid(@size:4px, @color:transparent);
border-radius: 12px;
display: flex;
> div {
flex: none;
}
img {
width: 100%;
object-fit: contain;
}
.textBox {
margin: 230px 8px 0 46px;
.size(@w: 320px, @h: 80px);
@@ -103,52 +65,48 @@
color: @COLOR_GRAY06;
line-height: 1.27;
}
.accBox {
.size(@w: 320px, @h: 50px);
margin: 6px 8px 0 46px;
text-align: left;
.font (@fontFamily:@baseFontBold, @fontSize:42px);
color: @PRIMARY_COLOR_RED;
font-weight: bold;
line-height: 1.14;
.saleAccBox {
.font (@fontFamily:@baseFontBold, @fontSize:24px);
color: #767676;
vertical-align: middle;
text-decoration: line-through;
}
}
.itemImgBox {
margin: 44px 26px 44px 0;
.size(@w: 324px, @h: 324px);
> img {
width: 100%;
}
}
.leftBtn {
.position(@position: absolute, @top: 189px, @right: auto, @bottom: auto, @left: 18px);
}
&:focus-within,
&:focus {
&::after {
.focused(@borderRadius: 12px);
}
}
.arrow {
z-index: 10;
.size(@w: 42px, @h: 42px);
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
background-size: 42px 42px;
background-position: center center;
&.leftBtn {
.position(@position: absolute, @top: 200px, @left: 18px);
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
&:focus,
&:focus-within,
&:hover,
&:active {
&:focus-within {
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
}
}
.rightBtn {
.position(@position: absolute, @top: 189px, @right: 18px, @bottom: auto, @left:auto);
.size(@w: 42px, @h: 42px);
&.rightBtn {
.position(@position: absolute, @top: 200px, @right: 18px);
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
background-size: 42px 42px;
background-position: center center;
&:focus,
&:focus-within,
&:hover,
&:active {
&:focus-within {
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
}
}
}
}