[Category] 리스트 아이템 스타일 수정

Detail Notes :
 
1. VirtualGridList 사용한 컴포넌트에 그림자 잘려보이는 현상 수정
2. 그림자 사이즈 50px -> 22px로 축소

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.module.less

@@ -2,7 +2,7 @@
 @import "../../../../style/utils.module.less";
 
 .topsTitle {
-  margin: 70px 0 26px;
+  margin-top: 70px;
   color: @COLOR_GRAY08;
   .font(@fontFamily: @baseFontBold, @fontSize: 36px);
 }
@@ -18,19 +18,19 @@
     padding: 11px 18px;
     border-radius: 12px;
     box-sizing: border-box;
+    margin-top: 26px;
+    position: relative;
 
     > img {
       object-fit: cover;
       width: 100%;
       height: 100%;
     }
-
     &:focus-within,
     &:focus {
-      outline: 4px solid @PRIMARY_COLOR_RED;
+      &::after {
-      outline-offset: -3px;
+        .focused(@boxShadow: 22px, @borderRadius: 12px);
-      box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED,
+      }
-        0 0 50px 0 rgba(0, 0, 0, 0.5);
     }
   }
 }

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.module.less

@@ -3,7 +3,7 @@
 
 .container {
   .size(@w: 100%, @h: auto);
-  margin-top: 60px;
+  margin-top: 34px;
 
   .grid {
     overflow: unset;

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowListsItem.module.less

@@ -7,6 +7,7 @@
   border: 1px solid @COLOR_GRAY02;
   background-color: @COLOR_WHITE;
   padding: 18px;
+  position: relative;
 
   .imgWrap {
     .size(@w: 100%, @h: 288px);
@@ -30,9 +31,10 @@
     }
   }
 
+  &:focus-within,
   &:focus {
     &::after {
-      .focused(@boxShadow: 50px, @borderRadius:12px);
+      .focused(@boxShadow: 22px, @borderRadius: 12px);
     }
   }
 }

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowProductContents/ShowProductContents.jsx

@@ -1,18 +1,22 @@
-import React, { useCallback } from "react";
+import React, { useCallback } from 'react';
 
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
 
-import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import { VirtualGridList } from '@enact/sandstone/VirtualList';
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 
-import TItemCard from "../../../../../components/TItemCard/TItemCard";
+import TItemCard from '../../../../../components/TItemCard/TItemCard';
-import { scaleH, scaleW } from "../../../../../utils/helperMethods";
+import {
-import css from "./ShowProductContents.module.less";
+  scaleH,
+  scaleW,
+} from '../../../../../utils/helperMethods';
+import css from './ShowProductContents.module.less';
 
 const LIST_ITEM_CONF = {
-  ITEM_WIDTH: 324,
+  ITEM_WIDTH: 342,
-  ITEM_HEIGHT: 438,
+  ITEM_HEIGHT: 490,
-  SPACING: 18,
+  SPACING: 0,
 };
 
 const Container = SpotlightContainerDecorator(
@@ -49,7 +53,7 @@ export default function ShowProductContents() {
     <Container className={css.container}>
       {productInfos && productInfos.length > 0 && (
         <VirtualGridList
-          classname={css.grid}
+          className={css.grid}
           dataSize={productInfos.length}
           direction="horizontal"
           horizontalScrollbar="hidden"

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowProductContents/ShowProductContents.module.less

@@ -3,16 +3,21 @@
 
 .container {
   .flex();
-  width: calc(100% - 790px);
+  width: calc(100% - 754px);
-  margin: 0 18px;
   overflow: hidden;
 }
 
 .grid {
-  height: 438px;
+  height: 490px;
   overflow: unset;
 
   > div {
     overflow: unset !important;
+    > div {
+      > div {
+        margin-left: 18px;
+        padding: 26px 0;
+      }
+    }
   }
 }