[TItemCard] 로고 제거 및 TItemCard 적용

- TItemCard 로고제거 및 스타일수정
 - 포지션 앱솔 걸수없을때 처리추가.
 - homepanel popularshow titemcard적용.
 - categorypanel showlist부분 로고 제거.

com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx

@@ -40,6 +40,7 @@ export default memo(function TItemCard({
   productName,
   rank,
   soldoutFlag,
+  nonPosition = false,
   type = TYPES.vertical,
   ...rest
 }) {
@@ -56,7 +57,7 @@ export default memo(function TItemCard({
   return (
     <SpottableComponent
       {...rest}
-      className={classNames(css[type])}
+      className={classNames(css[type], nonPosition && css.nonPosition)}
       onClick={() => handleClick(productId)}
       spotlightId={"spotlightId-" + removeDotAndColon(productId)}
     >
@@ -68,11 +69,6 @@ export default memo(function TItemCard({
         )}
       </div>
       <div className={css.descWrap}>
-        {logo && logoDisplay && (
-          <div className={css.logo}>
-            <img src={logo} alt={productName} />
-          </div>
-        )}
         <h3 className={css.title}>{productName}</h3>
         <p>
           {discountRate ? discountedPrice : originalPrice}

com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less

@@ -199,7 +199,14 @@
     box-sizing: border-box;
     .focused(@boxShadow: 22px, @borderRadius: 12px);
   }
-
+  &.nonPosition {
+    &:focus {
+      position: unset;
+      border: 4px solid @PRIMARY_COLOR_RED;
+      box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+      border-radius: 12px;
+    }
+  }
   .imageWrap {
     > img {
       .size(@w: 100%, @h: 288px);
@@ -214,17 +221,6 @@
     .size(@w: 510px, @h: 61px);
     display: flex;
 
-    .logo {
-      .size(@w: 60px, @h: 60px);
-      margin-right: 12px;
-
-      > img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
     .title {
       width: calc(100% - 72px);
       .elip(@clamp: 2);

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

@@ -29,7 +29,6 @@ export default function ShowLists() {
           itemWidth={546}
           itemHeight={438}
           spacing={18}
-          logoDisplay
         />
       )}
     </Container>

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

@@ -5,14 +5,13 @@ import TItemCard, {
 } from "../../../../../components/TItemCard/TItemCard";
 import css from "./ShowListsItem.module.less";
 
-export default function ShowListsItem({ thumbnail, title, logo }) {
+export default function ShowListsItem({ thumbnail, title }) {
   return (
     <TItemCard
       className={css.container}
       imageSource={thumbnail}
       imageAlt={title}
       productName={title}
-      logo={logo}
       type={TYPES.videoShow}
     />
   );

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx

@@ -7,6 +7,7 @@ import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainer
 import Spottable from "@enact/spotlight/Spottable";
 
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
+import TItemCard, { TYPES } from "../../../components/TItemCard/TItemCard";
 import TScroller from "../../../components/TScroller/TScroller";
 import { $L } from "../../../utils/helperMethods";
 import css from "../PopularShow/PopularShow.module.less";
@@ -26,26 +27,18 @@ const PopularShow = ({ ...rest }) => {
       <TScroller className={css.showList} direction="horizontal">
         {topInfos &&
           topInfos.map((item, index) => (
-            <SpottableComponent
-              className={classNames(
-                item.thumbnailUrl960 == item.thumbnailUrl
-                  ? css.listItemVertical
-                  : css.listItem
-              )}
+            <TItemCard
               key={item.showId}
-              {...rest}
-            >
-              <img src={item.thumbnailUrl960} className={css.itemImg} />
-              <div
-                className={classNames(
-                  item.thumbnailUrl960 == item.thumbnailUrl
-                    ? css.verticalItem
-                    : css.horizonItem
-                )}
-              >
-                <span className={css.showNm}>{item.showNm}</span>
-              </div>
-            </SpottableComponent>
+              imageSource={
+                item.thumbnailUrl !== item.thumbnailUrl960
+                  ? item.thumbnailUrl960
+                  : item.thumbnailUrl
+              }
+              imageAlt={item.showNm}
+              productName={item.showNm}
+              nonPosition={true}
+              type={TYPES.videoShow}
+            />
           ))}
 
         <SpottableComponent className={css.addItem}></SpottableComponent>

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less

@@ -41,51 +41,6 @@
   }
 }
 
-.listItem {
-  position: relative;
-  .size(@w:546px,@h:438px);
-  padding: 14px;
-  background-color: @COLOR_WHITE;
-  border-radius: 12px;
-  .border-solid(@size:4px,@color:transparent);
-  font-weight: bold;
-  font-family: @baseFontBold;
-  flex: none;
-  &:focus {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
-    border-radius: 12px;
-  }
-
-  > img {
-    .size(@w:510px,@h:288px);
-    object-fit: contain;
-  }
-  .horizonItem {
-    .size(@w:510px,@h:61px);
-    margin-top: 38px;
-    color: #333;
-    font-size: 24px;
-    .elip(@clamp:2);
-    display: flex;
-  }
-  .logo {
-    display: inline-block;
-    .size(@w:60px,@h:60px);
-    margin-right: 12px;
-    .logoPath {
-      width: 100%;
-      height: auto;
-    }
-  }
-  .showNm {
-    display: inline-block;
-    color: #333;
-    font-size: 24px;
-    .elip(@clamp:2);
-    .size(@w:510px,@h:61px);
-  }
-}
 .listItemVertical {
   display: flex;
   flex: none;