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

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

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

@@ -129,6 +129,7 @@ export default memo(function SearchShowCard({
       onFocus={handleFocus}
       {...rest}
     >
+      <div className={css.innerWrapper}>
         <div className={css.imageBox}>
           {liveFlag === "Y" && (
             <span className={css.liveBadge}>
@@ -136,14 +137,10 @@ export default memo(function SearchShowCard({
             </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>
     </CardContainer>
   );
 });

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

@@ -2,9 +2,12 @@
 @import "../../../../style/utils.module.less";
 
 .card {
-  .size(@w: 324px, @h: 240px);
+  .size(@w: 348px, @h: 264px);
+  padding: 12px;
+  .innerWrapper {
+    width: 100%;
+    height: 100%;
     background-color: @COLOR_LIGHT_SKYBLUE;
-  border-radius: 10px;
     overflow: hidden;
     border-radius: 12px;
     .imageBox {
@@ -22,6 +25,8 @@
       }
 
       > img {
+        border-radius: 12px 12px 0px 0px;
+        display: block;
         max-width: 100%;
         max-height: 100%;
       }
@@ -40,6 +45,7 @@
       line-height: 1.2;
       margin-top: 17px;
     }
+  }
 
   &:focus {
     .title {
@@ -52,10 +58,11 @@
       display: -webkit-box;
       line-height: 29px;
     }
+    .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

@@ -9,7 +9,7 @@
   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;
       }
     }
   }