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

[Home] 에러 조건문 추가 및 스타일 조정

Browse Source 
Detail Notes :
 
1. 데이터 없을 경우에 대해 조건문 추가
2. Random과 Rolling의 Today’s Deals 스타일 맞춤
This commit is contained in:
jangheon Pyo
2024-04-01 10:35:20 +09:00
parent 36c7acf03e
commit bb60e1a08b
3 changed files with 61 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -188,14 +188,14 @@ export default function HomeBanner({ scrollTop, selectTemplate, order }) {
>
{/* 배너1 */}
<div>
{firstBanner.shptmDspyTpNm === "Rolling" ? (
{firstBanner && firstBanner.shptmDspyTpNm === "Rolling" ? (
<Rolling
bannerData={firstBanner}
isHorizontal={true}
spotlightId={"banner01"}
scrollTop={scrollTop}
/>
) : firstBanner.shptmDspyTpNm === "Random" ? (
) : firstBanner && firstBanner.shptmDspyTpNm === "Random" ? (
<Random
bannerData={firstBanner}
isHorizontal={true}
@@ -215,14 +215,14 @@ export default function HomeBanner({ scrollTop, selectTemplate, order }) {
{/* 배너2 */}
<div>
{secondBanner.shptmDspyTpNm === "Rolling" ? (
{secondBanner && secondBanner.shptmDspyTpNm === "Rolling" ? (
<Rolling
bannerData={secondBanner}
isHorizontal={true}
spotlightId={"banner02"}
scrollTop={scrollTop}
/>
) : secondBanner.shptmDspyTpNm === "Random" ? (
) : secondBanner && secondBanner.shptmDspyTpNm === "Random" ? (
<Random
bannerData={secondBanner}
isHorizontal={true}
@@ -252,14 +252,14 @@ export default function HomeBanner({ scrollTop, selectTemplate, order }) {
: { order: 1 }
}
>
{thirdBanner.shptmDspyTpNm === "Rolling" ? (
{thirdBanner && thirdBanner.shptmDspyTpNm === "Rolling" ? (
<Rolling
bannerData={thirdBanner}
isHorizontal={false}
spotlightId={"banner03"}
scrollTop={scrollTop}
/>
) : thirdBanner.shptmDspyTpNm === "Random" ? (
) : thirdBanner && thirdBanner.shptmDspyTpNm === "Random" ? (
<Random
bannerData={thirdBanner}
isHorizontal={false}
@@ -288,14 +288,14 @@ export default function HomeBanner({ scrollTop, selectTemplate, order }) {
: { order: 2 }
}
>
{forthBanner.shptmDspyTpNm === "Rolling" ? (
{forthBanner && forthBanner.shptmDspyTpNm === "Rolling" ? (
<Rolling
bannerData={forthBanner}
isHorizontal={false}
spotlightId={"banner04"}
scrollTop={scrollTop}
/>
) : forthBanner.shptmDspyTpNm === "Random" ? (
) : forthBanner && forthBanner.shptmDspyTpNm === "Random" ? (
<Random
bannerData={forthBanner}
isHorizontal={false}

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

@@ -308,7 +308,7 @@ export default function RandomUnit({
onBlur={onBlur}
spotlightId={spotlightId}
>
<div>
<div className={css.productInfo}>
<div className={css.textBox}>{randomData.prdtNm}</div>
<div className={css.accBox}>{discountedPrice}</div>
{discountedPrice != originalPrice ? (

102
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.module.less
View File

@@ -7,37 +7,6 @@
.size(@w: 486px, @h: 858px);
position: relative;
text-align: center;
.textBox {
.size(@w: 100%, @h: 80px);
.elip(@clamp:2);
font-weight: bold;
font-size: 30px;
color: @COLOR_GRAY06;
line-height: 1.27;
margin-bottom: 6px;
}
.accBox {
.size(@w: 100%, @h: 50px);
font-weight: bold;
font-size: 42px;
color: @PRIMARY_COLOR_RED;
line-height: 1.14;
}
.saleAccBox {
font-weight: normal;
font-size: 24px;
color: @COLOR_GRAY04;
vertical-align: middle;
text-decoration: line-through;
margin-left: 9px;
width: 100%;
}
.itemImgBox {
> img {
.size(@w: 354px, @h: 354px);
}
}
.brandIcon {
overflow: hidden;
position: absolute;
@@ -50,6 +19,7 @@
left: 18px;
top: 18px;
}
.imgBanner {
> img {
border-radius: 12px;
@@ -70,9 +40,38 @@
background-position: left top;
border-radius: 12px;
padding: 268px 36px 0;
img {
width: 100%;
object-fit: contain;
.productInfo {
margin-bottom: 33px;
.textBox {
.size(@w: 100%, @h: 80px);
.elip(@clamp:2);
font-weight: bold;
font-size: 30px;
color: @COLOR_GRAY06;
line-height: 1.27;
margin-bottom: 6px;
}
.accBox {
height: 50px;
font-weight: bold;
font-size: 42px;
color: @PRIMARY_COLOR_RED;
line-height: 1.14;
display: inline-block;
}
.saleAccBox {
font-weight: normal;
font-size: 24px;
color: @COLOR_GRAY04;
vertical-align: middle;
text-decoration: line-through;
margin-left: 9px;
}
}
.itemImgBox {
> img {
.size(@w: 354px, @h: 354px);
}
}
&.isHorizontal {
@@ -84,23 +83,26 @@
> div {
flex: none;
}
.textBox {
.size(@w: 294px, @h: 80px);
margin: 234px 0 5px 50px;
text-align: left;
.productInfo {
margin-bottom: 0;
.textBox {
.size(@w: 294px, @h: 80px);
margin: 234px 0 5px 50px;
text-align: left;
}
.accBox {
.size(@w: 320px, @h: 50px);
margin-left: 50px;
text-align: left;
display: block;
}
.saleAccBox {
color: #767676;
display: block;
text-align: left;
margin: 5px 0 0 55px;
}
}
.accBox {
.size(@w: 320px, @h: 50px);
margin-left: 50px;
text-align: left;
}
.saleAccBox {
color: #767676;
display: block;
text-align: left;
margin: 5px 0 0 55px;
}
.itemImgBox {
margin: 47px 0 0 8px;
> img {