From fc74ee545afd105b66a12ac6b4c687c5316f937f Mon Sep 17 00:00:00 2001 From: yonghyon Date: Thu, 10 Oct 2024 18:45:15 +0900 Subject: [PATCH] =?UTF-8?q?[SHOPTIME-3443]=20SHOPTIME-1933=20Search=20/=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=99=80=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=ED=85=8C=EB=91=90=EB=A6=AC=EA=B0=80=20=EC=96=B4?= =?UTF-8?q?=EA=B8=8B=EB=82=98=EC=84=9C=20=ED=91=9C=EC=8B=9C=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=20=EC=9B=90=EC=9D=B8=20:=20?= =?UTF-8?q?=EC=A0=80=EC=82=AC=EC=96=91=20browser=20=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=9F=AC=EC=9D=98=20overflow=20?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=EC=9B=90=EC=9C=BC=EB=A1=9C=20=EC=9D=B8?= =?UTF-8?q?=ED=95=B4=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=9E=90=EC=B2=B4?= =?UTF-8?q?=EB=A5=BC=20=ED=99=95=EB=8C=80=ED=95=98=EB=A9=B4=20=EC=95=88?= =?UTF-8?q?=EB=90=98=EB=8A=94=EB=8D=B0=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=20?= =?UTF-8?q?=EC=8B=9C=20=EC=95=84=EC=9D=B4=ED=85=9C=EC=9D=B4=20=ED=99=95?= =?UTF-8?q?=EB=8C=80=EB=90=98=EB=8A=94=20=EA=B5=AC=EC=A1=B0=EB=A1=9C=20?= =?UTF-8?q?=EB=90=98=EC=96=B4=20=EC=9E=88=EC=9D=8C.=20=EB=8C=80=EC=B1=85?= =?UTF-8?q?=20:=20scale=20=EA=B5=AC=ED=98=84=EC=9D=84=20=EC=A0=9C=EA=B1=B0?= =?UTF-8?q?=ED=95=98=EA=B3=A0=20=EC=82=AC=EC=9D=B4=EC=A6=88=EB=A1=9C=20?= =?UTF-8?q?=ED=99=95=EB=8C=80=ED=9A=A8=EA=B3=BC=EB=A5=BC=20=EC=A3=BC?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=ED=95=A8.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SearchCard/SearchShowCard.jsx | 23 +++-- .../SearchCard/SearchShowCard.module.less | 83 ++++++++++--------- .../SearchResults/SearchResultsType.jsx | 6 +- .../SearchResultsType.module.less | 10 +-- 4 files changed, 63 insertions(+), 59 deletions(-) diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.jsx index a473475b..968e9d1b 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.jsx @@ -129,21 +129,18 @@ export default memo(function SearchShowCard({ onFocus={handleFocus} {...rest} > -
- {liveFlag === "Y" && ( - - LIVE - - )} +
+
+ {liveFlag === "Y" && ( + + LIVE + + )} - + +
+

{title}

-

{title}

); }); diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.module.less index e610e0fd..5446857c 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.module.less +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.module.less @@ -2,43 +2,49 @@ @import "../../../../style/utils.module.less"; .card { - .size(@w: 324px, @h: 240px); - background-color: @COLOR_LIGHT_SKYBLUE; - border-radius: 10px; - overflow: hidden; - border-radius: 12px; - .imageBox { - .size(@w: 324px, @h: 182px); - background-color: @COLOR_WHITE; - background-size: cover; - position: relative; - text-align: center; - - .liveBadge { - position: absolute; - top: 10px; - right: 10px; - z-index: 1; - } - - > img { - max-width: 100%; - max-height: 100%; - } - } - - .title { + .size(@w: 348px, @h: 264px); + padding: 12px; + .innerWrapper { width: 100%; - height: 24px; - // height: 58px; - color: @COLOR_GRAY06; - .font(@fontFamily: @arialFont, @fontSize: 20px); - .elip(@clamp:1); - // line-height: 58px; - letter-spacing: -0.5px; - padding: 0 15px; - line-height: 1.2; - margin-top: 17px; + height: 100%; + background-color: @COLOR_LIGHT_SKYBLUE; + overflow: hidden; + border-radius: 12px; + .imageBox { + .size(@w: 324px, @h: 182px); + background-color: @COLOR_WHITE; + background-size: cover; + position: relative; + text-align: center; + + .liveBadge { + position: absolute; + top: 10px; + right: 10px; + z-index: 1; + } + + > img { + border-radius: 12px 12px 0px 0px; + display: block; + max-width: 100%; + max-height: 100%; + } + } + + .title { + width: 100%; + height: 24px; + // height: 58px; + color: @COLOR_GRAY06; + .font(@fontFamily: @arialFont, @fontSize: 20px); + .elip(@clamp:1); + // line-height: 58px; + letter-spacing: -0.5px; + padding: 0 15px; + line-height: 1.2; + margin-top: 17px; + } } &:focus { @@ -52,10 +58,11 @@ display: -webkit-box; line-height: 29px; } - background-color: @COLOR_WHITE; + .innerWrapper { + background-color: @COLOR_WHITE; + } .elip(@clamp:2); &::after { - transform: scale(1.07, 1.1); .focused(@boxShadow: 22px, @borderRadius:12px); } } diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.jsx index d39a09e1..c2f17e1c 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.jsx @@ -31,9 +31,9 @@ const ITEM_SIZE = { }, show: { - itemWidth: 324, - itemHeight: 240, - spacing: 30, + itemWidth: 348, + itemHeight: 264, + spacing: 6, }, item: { diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.module.less index f5bc3b6c..d5336a6a 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.module.less +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchResultsType.module.less @@ -5,11 +5,11 @@ padding-left: 60px; } .container { - .flex(); - margin: 30px 0 50px; - width: 100%; + .flex(); + margin: 30px 0 50px; + width: 100%; &.grid { - padding-right: 60px; + padding-right: 30px; padding-left: 60px; } @@ -24,7 +24,7 @@ &.show { &.grid { > div { - height: 240px; + height: 264px; } } }