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

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

@@ -16,34 +16,36 @@
width: 100%; width: 100%;
> div { > div {
> div { > div {
padding: 20px 60px 30px; padding: 20px 0px 30px 60px;
display: flex; display: flex;
> div { > div {
flex: none; flex: none;
margin-right: 18px; margin-right: 18px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0px;
} }
} }
} }
} }
} }
} }
.addItem { &.addItem {
flex: none; flex: none;
.size(@w:198px,@h:438px); .size(@w:258px, @h:438px);
background-color: @COLOR_WHITE; > .displayBox {
border: 1px solid #e4e4e4; .size(@w: 198px, @h: 438px);
border-radius: 12px; background-color: @COLOR_WHITE;
background-image: url("../../../../assets/images/btn/ic-more-nor@3x.png"); .border-solid(@size:1px, @color:#e4e4e4);
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; border-radius: 12px;
background-image: url("../../../../assets/images/btn/ic-more-sel@3x.png"); 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-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, scrollLeft,
true true
); );
const homeOnSaleInfosLength = homeOnSaleInfos?.length; const homeOnSaleInfosLength = homeOnSaleInfos?.length;
const handleScrollRight = (e) => { const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode; const container = e.currentTarget?.parentNode;
const gap = 60;
const x = container.scrollWidth - container.clientWidth + gap; const x = container.scrollWidth + container.clientWidth;
setTimeout(() => { setTimeout(() => {
scrollLeft({ x, animate: true }); scrollLeft({ x, animate: true });
@@ -102,6 +103,7 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
/> />
); );
})} })}
<div className={css.addItem}></div>
</> </>
</TScroller> </TScroller>
</div> </div>

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

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

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

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

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

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

@@ -8,8 +8,10 @@
overflow: unset !important; overflow: unset !important;
width: 100%; width: 100%;
> div { > div {
width: 100%;
> div { > div {
padding: 19px 60px; width: 100%;
padding: 19px 0px 19px 60px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow-x: auto; overflow-x: auto;
@@ -18,24 +20,26 @@
flex: none; flex: none;
margin-right: 18px; margin-right: 18px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0px;
} }
&.addItem { &.addItem {
flex: none; flex: none;
.size(@w: 198px, @h: 438px); .size(@w:258px, @h:438px);
background-color: @COLOR_WHITE; > .displayBox {
.border-solid(@size:1px, @color:#e4e4e4); .size(@w: 198px, @h: 438px);
border-radius: 12px; background-color: @COLOR_WHITE;
background-image: url("../../../../assets/images/btn/ic-more-nor@3x.png"); .border-solid(@size:1px, @color:#e4e4e4);
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-radius: 12px; border-radius: 12px;
background-image: url("../../../../assets/images/btn/ic-more-sel@3x.png"); 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-radius: 12px;
background-image: url("../../../../assets/images/btn/ic-more-sel@3x.png");
}
} }
} }
} }