From 41dc727360dc8495589a3e239454f19b3cdef9e6 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Thu, 16 May 2024 17:16:09 +0900 Subject: [PATCH] =?UTF-8?q?=ED=99=88=20=EB=A7=88=EC=A7=80=EB=A7=89=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=84=A0=ED=83=9D=EC=8B=9C?= =?UTF-8?q?=EC=97=90=20=EC=97=AC=EB=B0=B1=20=EB=B6=80=EB=B6=84=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC=EA=B1=B4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/HomePanel/BestSeller/BestSeller.jsx | 8 +++-- .../BestSeller/BestSeller.module.less | 34 +++++++++--------- .../views/HomePanel/HomeOnSale/HomeOnSale.jsx | 6 ++-- .../HomeOnSale/HomeOnSale.module.less | 6 +++- .../HomePanel/PopularShow/PopularShow.jsx | 8 +++-- .../PopularShow/PopularShow.module.less | 35 +++++++++++-------- .../HomePanel/SubCategory/SubCategory.jsx | 14 +++++--- .../SubCategory/SubCategory.module.less | 34 ++++++++++-------- 8 files changed, 85 insertions(+), 60 deletions(-) diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index a4f65089..9d10d946 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -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 && ( - + > + + )} diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less index ec615130..1ddc1d54 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less @@ -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); - background-color: @COLOR_WHITE; - border: 1px solid #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); + .size(@w:258px, @h:438px); + > .displayBox { + .size(@w: 198px, @h: 438px); + background-color: @COLOR_WHITE; + .border-solid(@size:1px, @color:#e4e4e4); 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"); + } } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx index a725be3a..e76c5478 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx @@ -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 }) => { /> ); })} +
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less index 9be40cc7..8932a654 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less @@ -51,10 +51,14 @@ } } &:last-child { - margin-right: 60px; + margin-right: 0px; } } } } } } + +.addItem { + .size(@w: 60px, @h:414px); +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx index 6ac34a18..8f4fc890 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx @@ -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 && ( - + > + + )} diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less index 566177b6..edb7f926 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less @@ -12,32 +12,37 @@ width: 100%; > div { > div { - padding: 20px 60px 30px; + padding: 20px 0px 30px 60px; display: flex; .addItem { flex: none; - .size(@w: 198px, @h: 438px); - background-color: @COLOR_WHITE; - border: 1px solid #e4e4e4; - box-sizing: border-box; - 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 { - box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5); - .border-solid(@size:4px, @color:@PRIMARY_COLOR_RED); + .size(@w:258px, @h:438px); + > .displayBox { + .size(@w: 198px, @h: 438px); + background-color: @COLOR_WHITE; + .border-solid(@size:1px, @color:#e4e4e4); 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 { flex: none; margin-right: 18px; &:last-child { - margin-right: 0; + margin-right: 0px; } } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx index a5698584..0c9f175b 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -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 && ( - + > + + )} diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less index ca53d2e7..43377c52 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less @@ -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,24 +20,26 @@ flex: none; margin-right: 18px; &:last-child { - margin-right: 0; + margin-right: 0px; } &.addItem { flex: none; - .size(@w: 198px, @h: 438px); - background-color: @COLOR_WHITE; - .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); + .size(@w:258px, @h:438px); + > .displayBox { + .size(@w: 198px, @h: 438px); + background-color: @COLOR_WHITE; + .border-solid(@size:1px, @color:#e4e4e4); 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"); + } } } }