[TItemCard]VideoShow부분 수정.

- logo,catNm 추가.
 - 스타일 수정
 - 카테고리패널/홈패널부분 비디오쇼부분 수정.

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

@@ -51,6 +51,7 @@ export default memo(function TItemCard({
   productId,
   productName,
   hstNm,
+  catNm,
   rank,
   soldoutFlag,
   spotlightId,
@@ -109,9 +110,20 @@ export default memo(function TItemCard({
         )}
       </div>
 
-      <div className={classNames(css.descWrap, hstNm && css.hstNmWrap)}>
+      <div
+        className={classNames(css.descWrap, (hstNm || catNm) && css.hstNmWrap)}
+      >
+        {logo && (
+          <div className={css.logo}>
+            <img src={logo} />
+          </div>
+        )}
         <h3 className={css.title}>{productName}</h3>
-        {hstNm && <h4 className={css.hstmNmTitle}>{hstNm}</h4>}
+        {hstNm !== null ? (
+          <h4 className={css.hstmNmTitle}>{hstNm}</h4>
+        ) : (
+          catNm !== null && <h4 className={css.hstmNmTitle}>{catNm}</h4>
+        )}
         {!offerInfo ? (
           <p className={css.priceInfo}>
             {discountRate ? discountedPrice : originalPrice}

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

@@ -248,33 +248,43 @@
 
     .descWrap {
       display: flex;
-      .size(@w: 510px, @h: 64px);
+      .size(@w: 438px, @h: 64px);
       margin-top: 35px;
       color: @COLOR_GRAY06;
       font-size: 24px;
       flex-wrap: wrap;
+      .logo {
+        width: 60px;
+        height: 60px;
+        > img {
+          width: 60px;
+          height: 60px;
+        }
+      }
       .title {
+        .size(@w: 438px, @h: 64px);
         align-self: center;
         font-weight: bold;
         line-height: 1.33;
         .elip(@clamp: 2);
       }
       &.hstNmWrap {
-        margin-top: 12px;
+        margin-top: 11px;
 
-        .size(@w: 510px, @h: 107px);
+        .size(@w: 508px, @h: 107px);
         .title {
-          .size(@w: 510px, @h: 64px);
+          margin-left: 10px;
+          .size(@w: 438px, @h: 64px);
           align-self: center;
           font-weight: bold;
           line-height: 1.33;
           .elip(@clamp: 2);
         }
         .hstmNmTitle {
-          margin-top: 11px;
+          margin: 5px 0 0 70px;
-          .size(@w: 100%, @h: 36px);
+          .size(@w: 438px, @h: 36px);
           color: #767676;
-          font-size: 24px;
+          font-size: 22px;
           .elip(@clamp: 1);
           font-weight: normal;
         }
@@ -309,7 +319,7 @@
 
     .imageWrap {
       flex: none;
-      .size(@w: 227px, @h: 401px);
+      .size(@w: 227px, @h: 402px);
 
       > img {
         .size(@w: inherit, @h: inherit);
@@ -321,15 +331,30 @@
       flex: none;
       color: @COLOR_GRAY06;
       font-size: 24px;
-      .size(@w: 510px, @h: 61px);
+      .size(@w: 276px, @h: 100%);
-      display: flex;
+      padding: 18px 12px;
-
+      .logo {
+        width: 60px;
+        height: 60px;
+        > img {
+          width: 60px;
+          height: 60px;
+        }
+      }
       .title {
-        margin-left: 11px;
+        margin-top: 8px;
         width: 270px;
-        height: 402px;
+        .elip(@clamp: 9);
-        .elip(@clamp: 12);
         font-weight: bold;
+        line-height: 32px;
+      }
+      .hstmNmTitle {
+        margin-top: 5px;
+        .size(@w: 270px, @h: 30px);
+        color: #767676;
+        font-size: 22px;
+        .elip(@clamp: 1);
+        font-weight: normal;
       }
     }
   }

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

@@ -21,7 +21,6 @@ export default function ShowLists() {
   const showListDatas = useSelector(
     (state) => state.main.subCategoryData?.categoryShowInfos
   );
-
   const dispatch = useDispatch();
   const _onClick = (patnrId, showId, lgCatCd, showUrl) => {
     dispatch(
@@ -56,6 +55,8 @@ export default function ShowLists() {
                   patnrId,
                   lgCatCd,
                   hstNm,
+                  catNm,
+                  patncLogoPath,
                 },
                 index
               ) => (
@@ -66,12 +67,14 @@ export default function ShowLists() {
                     imageAlt={showId}
                     imageSource={thumbnailUrl}
                     productName={showNm}
+                    logo={patncLogoPath}
                     imgType={
                       vtctpYn !== "Y"
                         ? IMAGETYPES.imgHorizontal
                         : IMAGETYPES.imgVertical
                     }
                     hstNm={hstNm}
+                    catNm={catNm}
                     onClick={() => {
                       _onClick(patnrId, showId, lgCatCd, showUrl);
                     }}

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

@@ -27,6 +27,7 @@ const Container = SpotlightContainerDecorator(
 const PopularShow = ({ homeChk = true, order, ...rest }) => {
   const dispatch = useDispatch();
   const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
+
   const [drawChk, setDrawChk] = useState(false);
   const { getScrollTo, scrollLeft } = useScrollTo();
   const { handleScrollReset, handleStopScrolling } = useScrollReset(
@@ -75,6 +76,9 @@ const PopularShow = ({ homeChk = true, order, ...rest }) => {
                     ? IMAGETYPES.imgHorizontal
                     : IMAGETYPES.imgVertical
                 }
+                logo={item.patncLogoPath}
+                hstNm={item.hstNm}
+                catNm={item.catNm}
                 onFocus={index === 0 ? handleScrollReset : null}
                 onBlur={handleStopScrolling}
                 onClick={handleCardClick}