[SHOPTIME-3443] SHOPTIME-1933 Search / 이미지와 이미지 테두리가 어긋나서 표시되는 현상

원인 : 저사양 browser 에서 스크롤러의 overflow 미지원으로 인해 아이템
자체를 확대하면 안되는데 포커스 시 아이템이 확대되는 구조로 되어 있음.
대책 : scale 구현을 제거하고 사이즈로 확대효과를 주도록 수정함.

com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchCard/SearchShowCard.jsx

@@ -129,21 +129,18 @@ export default memo(function SearchShowCard({
       onFocus={handleFocus}
       {...rest}
     >
-      <div className={css.imageBox}>
-        {liveFlag === "Y" && (
-          <span className={css.liveBadge}>
-            <img src={IcLiveShow} alt="LIVE" />
-          </span>
-        )}
+      <div className={css.innerWrapper}>
+        <div className={css.imageBox}>
+          {liveFlag === "Y" && (
+            <span className={css.liveBadge}>
+              <img src={IcLiveShow} alt="LIVE" />
+            </span>
+          )}
 
-        <CustomImage
-          alt={title}
-          delay={0}
-          src={thumbnail}
-          fallbackSrc={defaultShowImage}
-        />
+          <CustomImage alt={title} delay={0} src={thumbnail} fallbackSrc={defaultShowImage} />
+        </div>
+        <p className={css.title}>{title}</p>
       </div>
-      <p className={css.title}>{title}</p>
     </CardContainer>
   );
 });

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);
     }
   }

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: {

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;
       }
     }
   }