[HLM SHOPTIME-5511] 핑크퐁 featured brand page 내 vod 편성 요청 건

[수정사항]
featuredBrandPanel LiveChannels에서 Live 방송이 아닌 VOD 채널을 편성
기존에는  startVideoPlayer Action을 호출할때 videoType을 LIVE 타입으로 하드코딩되어있는 부분을 수정

핑크퐁에서만 SectionTitle 부분에 LIVE CHANNELS 텍스트가 변경되므로 patncNm으로 분기처리

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx

@@ -108,6 +108,10 @@ const hasTemplateCodeWithValue = (array, value) =>
   array?.some((obj) => obj?.shptmBrndOptTpCd === value) ?? false;
 
 const shouldRenderComponent = (data) => {
+  if (data === null) {
+    return;
+  }
+
   return (
     (Array.isArray(data) && data.length > 0) ||
     (typeof data === "object" && Object.keys(data).length > 0)
@@ -405,6 +409,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
   );
 
   const renderPageItem = useCallback(() => {
+    console.log("#brandChannelCnt", brandChannelCnt);
     return (
       <>
         {sortedBrandLayoutInfo.map((el, idx) => {

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx

@@ -1,4 +1,11 @@
-import React, { memo, useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
@@ -83,6 +90,14 @@ const LiveChannels = ({
     selectedPatnrId,
   ]);
 
+  const liveChannelsTitle = useMemo(() => {
+    if (brandChanInfo[0]?.patncNm === "Pinkfong") {
+      return "Subscription";
+    }
+
+    return $L(STRING_CONF.LIVE_CHANNELS);
+  }, [brandChanInfo]);
+
   const _handleItemFocus = useCallback(() => {
     if (handleItemFocus) handleItemFocus(spotlightId, shelfOrder);
 
@@ -120,7 +135,7 @@ const LiveChannels = ({
     >
       {brandChanInfo && brandChanInfo.length > 0 && (
         <SectionTitle
-          title={$L(STRING_CONF.LIVE_CHANNELS)}
+          title={liveChannelsTitle}
           data-title="live-channels"
           aria-label="LIVE CHANNELS, Heading1"
         />
@@ -136,7 +151,7 @@ const LiveChannels = ({
                 .slice(0, 1)
                 .map(
                   (brandChanInfoItem, contentsIndex) =>
-                    brandChanInfoItem.liveYn === "N" && (
+                    brandChanInfoItem.liveYn === "Y" && (
                       <NoLiveContents
                         brandChanInfoItem={brandChanInfoItem}
                         contentsIndex={contentsIndex}
@@ -149,13 +164,14 @@ const LiveChannels = ({
             </>
           )}
 
-          {brandChannelCnt === 1 && (
+          {Number(brandChannelCnt) === 1 && (
             <>
               {brandChanInfo
                 .slice(0, 1)
                 .map(
                   (brandChanInfoItem, contentsIndex) =>
-                    brandChanInfoItem.liveYn === "Y" && (
+                    (brandChanInfoItem.liveYn === "Y" ||
+                      brandChanInfoItem.patncNm === "Pinkfong") && (
                       <LiveChannelsVerticalContents
                         brandChanInfoItem={brandChanInfoItem}
                         contentsIndex={contentsIndex}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveChannelsVerticalContents.jsx

@@ -73,6 +73,7 @@ const LiveChannelsVerticalContents = ({
     lgCatNm,
     chanNm,
     brndNm,
+    liveYn,
   } = brandChanInfoItem;
 
   const isJuvelirochka = useMemo(
@@ -123,7 +124,7 @@ const LiveChannelsVerticalContents = ({
             patnrId,
             showId,
             showUrl,
-            shptmBanrTpNm: "LIVE",
+            shptmBanrTpNm: liveYn === "Y " ? "LIVE" : "VOD",
           })
         );
       });
@@ -167,7 +168,7 @@ const LiveChannelsVerticalContents = ({
           patnrId,
           showId,
           showUrl,
-          shptmBanrTpNm: "LIVE",
+          shptmBanrTpNm: liveYn === "Y " ? "LIVE" : "VOD",
           sourcePanel: panel_names.FEATURED_BRANDS_PANEL,
         })
       );
@@ -220,6 +221,7 @@ const LiveChannelsVerticalContents = ({
         onBlur={handleBlur}
         onClick={handleClick}
         onFocus={handleFocus}
+        liveYn={liveYn}
         spotlightId={"spotlightId-featuredBrands-liveChannels"}
       />
       {brandProductInfo && brandProductInfo.length > 0 ? (

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveVideoCard/LiveVideoCard.jsx

@@ -19,6 +19,7 @@ export default memo(function LiveVideoCard({
   onClick,
   onFocus,
   onLoad,
+  liveYn,
   ...rest
 }) {
   const [imageLoaded, setIsImageLoaded] = useState(false);
@@ -76,15 +77,16 @@ export default memo(function LiveVideoCard({
           onLoad={_onLoad}
         />
       </figure>
-
-      <div className={css.videoInfo}>
-        <CustomImage src={ImgLiveShow} alt="Live Icon" />
-        <h3>{showNm.replace(/<br\s*\/?>/gi, " ")}</h3>
-        <time>
-          {convertToTimeFormat(convertUtcToLocal(strtDt))} ~{" "}
-          {convertToTimeFormat(convertUtcToLocal(endDt))}
-        </time>
-      </div>
+      {liveYn === "Y" && (
+        <div className={css.videoInfo}>
+          <CustomImage src={ImgLiveShow} alt="Live Icon" />
+          <h3>{showNm.replace(/<br\s*\/?>/gi, " ")}</h3>
+          <time>
+            {convertToTimeFormat(convertUtcToLocal(strtDt))} ~{" "}
+            {convertToTimeFormat(convertUtcToLocal(endDt))}
+          </time>
+        </div>
+      )}
 
       {imageLoaded && <div className={css.darkGradient} />}
     </SpottableComponent>

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx

@@ -179,7 +179,7 @@ export default memo(function UpComingList({
         brandLiveChannelUpcoming[index];
 
       const selectedAlertShow = alertShows //
-        .find((show) => show.showId === showId && show.strtDt === strtDt);
+        .find((show) => show?.showId === showId && show?.strtDt === strtDt);
 
       const alamDispFlag = selectedAlertShow?.alamDispFlag;
 

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.jsx

@@ -1,18 +1,14 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 
-import Spotlight from '@enact/spotlight';
+import Spotlight from "@enact/spotlight";
 
-import TBody from '../../../../components/TBody/TBody';
-import TButtonTab from '../../../../components/TButtonTab/TButtonTab';
-import THeader from '../../../../components/THeader/THeader';
-import { $L } from '../../../../utils/helperMethods';
-import ContactContents from './ContactContents/ContactContents';
-import ListContents from './ListContents/ListContents';
-import css from './Support.module.less';
+import TBody from "../../../../components/TBody/TBody";
+import TButtonTab from "../../../../components/TButtonTab/TButtonTab";
+import THeader from "../../../../components/THeader/THeader";
+import { $L } from "../../../../utils/helperMethods";
+import ContactContents from "./ContactContents/ContactContents";
+import ListContents from "./ListContents/ListContents";
+import css from "./Support.module.less";
 
 export default function Support({ title, cbScrollTo }) {
   const [selectedTab, setSelectedTab] = useState(0);
@@ -20,7 +16,6 @@ export default function Support({ title, cbScrollTo }) {
   const tabList = [$L("FAQ"), $L("Contact"), $L("Notice")];
   const handleItemClick = useCallback(
     ({ index, ...rest }) => {
-      console.log("#TButtonTab onItemClick", index, rest);
       setSelectedTab(index);
     },
     [selectedTab]