[TItemCard] videoshow 부분 이미지 가로형 세로형 관련 추가.

- TItemCard imgType 추가.
 - getTop20Show topinfos 값중 vtctpYn값이 Y가 아닐시 가로형 이미지.

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

@@ -17,6 +17,11 @@ const TYPES = {
   videoShow: "videoShow",
 };
 
+const IMAGETYPES = {
+  imgHorizontal: "imgHorizontal",
+  imgVertical: "imgVertical",
+};
+
 // @@pyh Todo, 추후 다국어 resource 추가
 const STRING_CONF = {
   SOLD_OUT: $L("SOLD OUT"),
@@ -32,6 +37,7 @@ export default memo(function TItemCard({
   disabled,
   imageAlt,
   imageSource,
+  imgType = IMAGETYPES.imgHorizontal,
   logo,
   logoDisplay = false,
   isBestSeller = false,
@@ -78,14 +84,18 @@ export default memo(function TItemCard({
 
   return (
     <SpottableComponent
-      {...rest}
+      className={classNames(
-      className={classNames(css[type], nonPosition && css.nonPosition)}
+        css[type],
+        nonPosition && css.nonPosition,
+        type === "videoShow" && css[imgType]
+      )}
       onBlur={_onBlur}
       onClick={_onClick}
       onFocus={_onFocus}
       spotlightId={
         productId ? "spotlightId-" + removeDotAndColon(productId) : spotlightId
       }
+      {...rest}
     >
       <div className={css.imageWrap}>
         <CustomImage alt={imageAlt} delay={0} src={imageSource} />
@@ -111,4 +121,4 @@ export default memo(function TItemCard({
   );
 });
 
-export { TYPES };
+export { IMAGETYPES, TYPES };

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

@@ -186,43 +186,89 @@
 
 /* videoShow */
 .videoShow {
-  .size(@w: 546px, @h:438px);
+  &.imgHorizontal {
-  padding: 14px;
+    .size(@w: 546px, @h:438px);
-  background-color: @COLOR_WHITE;
+    padding: 18px;
-  border-radius: 12px;
+    background-color: @COLOR_WHITE;
-  .border-solid(@size:1px,@color:@COLOR_GRAY02);
+    border-radius: 12px;
-  font-family: @baseFontBold;
+    .border-solid(@size:1px,@color:@COLOR_GRAY02);
-  position: relative;
+    font-family: @baseFontBold;
+    position: relative;
 
-  &:focus {
-    &::after {
-      .focused(@boxShadow: 22px, @borderRadius: 12px);
-    }
-  }
-  &.nonPosition {
     &:focus {
       &::after {
         .focused(@boxShadow: 22px, @borderRadius: 12px);
       }
     }
-  }
+    &.nonPosition {
-  .imageWrap {
+      &:focus {
-    > img {
+        &::after {
-      .size(@w: 100%, @h: 288px);
+          .focused(@boxShadow: 22px, @borderRadius: 12px);
-      object-fit: cover;
+        }
+      }
+    }
+    .imageWrap {
+      > img {
+        .size(@w: 100%, @h: 288px);
+        object-fit: cover;
+      }
+    }
+
+    .descWrap {
+      margin-top: 38px;
+      color: @COLOR_GRAY06;
+      font-size: 24px;
+      .size(@w: 510px, @h: 61px);
+      display: flex;
+
+      .title {
+        width: calc(100% - 72px);
+        .elip(@clamp: 2);
+      }
     }
   }
-
+  &.imgVertical {
-  .descWrap {
+    .size(@w: 546px, @h:438px);
-    margin-top: 38px;
+    padding: 18px;
-    color: @COLOR_GRAY06;
+    background-color: @COLOR_WHITE;
-    font-size: 24px;
+    border-radius: 12px;
-    .size(@w: 510px, @h: 61px);
+    .border-solid(@size:1px,@color:@COLOR_GRAY02);
+    font-family: @baseFontBold;
+    position: relative;
     display: flex;
+    &:focus {
+      &::after {
+        .focused(@boxShadow: 22px, @borderRadius: 12px);
+      }
+    }
+    &.nonPosition {
+      &:focus {
+        &::after {
+          .focused(@boxShadow: 22px, @borderRadius: 12px);
+        }
+      }
+    }
+    .imageWrap {
+      flex: none;
+      > img {
+        .size(@w: 228px, @h: 402px);
+        object-fit: cover;
+      }
+    }
 
-    .title {
+    .descWrap {
-      width: calc(100% - 72px);
+      flex: none;
-      .elip(@clamp: 2);
+      color: @COLOR_GRAY06;
+      font-size: 24px;
+      .size(@w: 510px, @h: 61px);
+      display: flex;
+
+      .title {
+        margin-left: 11px;
+        width: 270px;
+        height: 402px;
+        .elip(@clamp: 12);
+      }
     }
   }
 }

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

@@ -7,7 +7,10 @@ import Spottable from "@enact/spotlight/Spottable";
 
 import { pushPanel } from "../../../actions/panelActions";
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
-import TItemCard, { TYPES } from "../../../components/TItemCard/TItemCard";
+import TItemCard, {
+  IMAGETYPES,
+  TYPES,
+} from "../../../components/TItemCard/TItemCard";
 import TScroller from "../../../components/TScroller/TScroller";
 import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
@@ -66,6 +69,11 @@ const PopularShow = ({ ...rest }) => {
                 productName={item.showNm}
                 nonPosition={true}
                 type={TYPES.videoShow}
+                imgType={
+                  item.vtctpYn !== "Y"
+                    ? IMAGETYPES.imgHorizontal
+                    : IMAGETYPES.imgVertical
+                }
                 onFocus={index === 0 ? handleScrollReset : null}
                 onBlur={handleStopScrolling}
                 onClick={handleCardClick}