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

홈 마지막 아이템 선택시에 여백 부분 처리건.

Browse Source
This commit is contained in:
junghoon86.park
2024-05-16 17:16:09 +09:00
parent b2e753c96d
commit 41dc727360
8 changed files with 85 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
View File

@@ -93,7 +93,7 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
const orderStyle = useMemo(() => ({ order: order }), [order]);
const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode;
const x = container.scrollWidth - container.clientWidth;
const x = container.scrollWidth - container.clientWidth + 60;
setTimeout(() => {
scrollLeft({ x, animate: true });
@@ -145,11 +145,13 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
)}
{drawChk && (
<SpottableComponent
<div
className={css.addItem}
onClick={handleMoreCardClick}
onFocus={handleScrollRight}
></SpottableComponent>
>
<SpottableComponent className={css.displayBox}></SpottableComponent>
</div>
)}
</TScroller>
</Container>

14
com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less
View File

@@ -16,34 +16,36 @@
width: 100%;
> div {
> div {
padding: 20px 60px 30px;
padding: 20px 0px 30px 60px;
display: flex;
> div {
flex: none;
margin-right: 18px;
&:last-child {
margin-right: 0;
margin-right: 0px;
}
}
}
}
}
}
.addItem {
&.addItem {
flex: none;
.size(@w:198px,@h:438px);
.size(@w:258px, @h:438px);
> .displayBox {
.size(@w: 198px, @h: 438px);
background-color: @COLOR_WHITE;
border: 1px solid #e4e4e4;
.border-solid(@size:1px, @color:#e4e4e4);
border-radius: 12px;
background-image: url("../../../../assets/images/btn/ic-more-nor@3x.png");
background-size: 66px 66px;
background-position: center center;
background-repeat: no-repeat;
margin-right: 60px;
&:focus {
border: 4px solid @PRIMARY_COLOR_RED;
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
border-radius: 12px;
background-image: url("../../../../assets/images/btn/ic-more-sel@3x.png");
}
}
}

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

@@ -30,12 +30,13 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
scrollLeft,
true
);
const homeOnSaleInfosLength = homeOnSaleInfos?.length;
const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode;
const gap = 60;
const x = container.scrollWidth - container.clientWidth + gap;
const x = container.scrollWidth + container.clientWidth;
setTimeout(() => {
scrollLeft({ x, animate: true });
@@ -102,6 +103,7 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
/>
);
})}
<div className={css.addItem}></div>
</>
</TScroller>
</div>

6
com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less
View File

@@ -51,10 +51,14 @@
}
}
&:last-child {
margin-right: 60px;
margin-right: 0px;
}
}
}
}
}
}
.addItem {
.size(@w: 60px, @h:414px);
}

8
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
View File

@@ -93,7 +93,7 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
const orderStyle = useMemo(() => ({ order: order }), [order]);
const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode;
const x = container.scrollWidth - container.clientWidth;
const x = container.scrollWidth - container.clientWidth + 60;
setTimeout(() => {
scrollLeft({ x, animate: true });
@@ -160,11 +160,13 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
)}
{drawChk && homeChk === true && (
<SpottableComponent
<div
className={css.addItem}
onClick={handleMoreCardClick}
onFocus={handleScrollRight}
></SpottableComponent>
>
<SpottableComponent className={css.displayBox}></SpottableComponent>
</div>
)}
</TScroller>
</Container>

15
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
View File

@@ -12,32 +12,37 @@
width: 100%;
> div {
> div {
padding: 20px 60px 30px;
padding: 20px 0px 30px 60px;
display: flex;
.addItem {
flex: none;
.size(@w:258px, @h:438px);
> .displayBox {
.size(@w: 198px, @h: 438px);
background-color: @COLOR_WHITE;
border: 1px solid #e4e4e4;
box-sizing: border-box;
.border-solid(@size:1px, @color:#e4e4e4);
border-radius: 12px;
background-image: url("../../../../assets/images/btn/ic-more-nor@3x.png");
background-size: 66px 66px;
background-position: center center;
background-repeat: no-repeat;
&:focus {
border: 4px solid @PRIMARY_COLOR_RED;
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
.border-solid(@size:4px, @color:@PRIMARY_COLOR_RED);
border-radius: 12px;
background-image: url("../../../../assets/images/btn/ic-more-sel@3x.png");
}
}
}
.theOrderBox {
.size(@w: 18px, @h: 438px);
}
> div {
flex: none;
margin-right: 18px;
&:last-child {
margin-right: 0;
margin-right: 0px;
}
}
}

10
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
View File

@@ -178,7 +178,7 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode;
const x = container.scrollWidth - container.clientWidth;
const x = container.scrollWidth + container.clientWidth;
setTimeout(() => {
scrollLeft({ x, animate: true });
@@ -238,13 +238,17 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
)}
{drawChk && (
<SpottableComponent
<div
className={css.addItem}
onClick={handleMoreCardClick}
onFocus={handleScrollRight}
>
<SpottableComponent
className={css.displayBox}
spotlightId={"home-cate-more-btn"}
data-catcd-num={currentLgCatCd}
onFocus={handleScrollRight}
></SpottableComponent>
</div>
)}
</TScroller>
</ContainerBasic>

10
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less
View File

@@ -8,8 +8,10 @@
overflow: unset !important;
width: 100%;
> div {
width: 100%;
> div {
padding: 19px 60px;
width: 100%;
padding: 19px 0px 19px 60px;
display: flex;
flex-direction: row;
overflow-x: auto;
@@ -18,10 +20,12 @@
flex: none;
margin-right: 18px;
&:last-child {
margin-right: 0;
margin-right: 0px;
}
&.addItem {
flex: none;
.size(@w:258px, @h:438px);
> .displayBox {
.size(@w: 198px, @h: 438px);
background-color: @COLOR_WHITE;
.border-solid(@size:1px, @color:#e4e4e4);
@@ -30,7 +34,6 @@
background-size: 66px 66px;
background-position: center center;
background-repeat: no-repeat;
&:focus {
border: 4px solid @PRIMARY_COLOR_RED;
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
@@ -41,4 +44,5 @@
}
}
}
}
}