[PlayerPanel] 아이템 없을시 loading 문구 파일 추가

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx

@@ -18,9 +18,9 @@ import {
   panel_names,
 } from '../../../../utils/Config';
 import { $L } from '../../../../utils/helperMethods';
-import ListEmptyContents
-  from '../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents';
 import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard';
+import ListEmptyContents
+  from '../TabContents/ListEmptyContents/ListEmptyContents';
 import css from './LiveChannelContents.module.less';
 
 export default function FeaturedShowContents({

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents.jsx

@@ -0,0 +1,25 @@
+import React, { memo } from 'react';
+
+import ImgContentsLoading
+  from '../../../../../../assets/images/img-contents-loading@3x.png';
+import { $L } from '../../../../../utils/helperMethods';
+import css from './ListEmptyContents.module.less';
+
+const STRING_CONF = {
+  PRODUCT: "Product",
+  THEME: "Show",
+};
+
+export default memo(function ListEmptyContents({ tabIndex = 0 }) {
+  return (
+    <figure className={css.container}>
+      <img src={ImgContentsLoading} alt="" />
+      <figcaption>
+        {$L("Loading {tabName} Details. Please Wait").replace(
+          "{tabName}",
+          tabIndex === 0 ? STRING_CONF.PRODUCT : STRING_CONF.THEME
+        )}
+      </figcaption>
+    </figure>
+  );
+});

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents.module.less

@@ -0,0 +1,19 @@
+@import "../../../../../style/CommonStyle.module.less";
+@import "../../../../../style/utils.module.less";
+
+.container {
+  .flex(@direction: column);
+  margin-top: 60px;
+
+  > img {
+    .size(@w: 360px , @h: 174px);
+  }
+
+  > figcaption {
+    .size(@w: 312px , @h: 80px);
+    color: #8290a0;
+    .font(@fontFamily: @baseFont, @fontSize: 30px);
+    text-align: center;
+    line-height: 1.4;
+  }
+}

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "ListEmptyContent.jsx",
+  "style": [
+    "ListEmptyContent.module.less"
+  ]
+}

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx

@@ -1,16 +1,25 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 
-import { useDispatch } from "react-redux";
+import { useDispatch } from 'react-redux';
 
-import Spotlight from "@enact/spotlight";
+import Spotlight from '@enact/spotlight';
 
-import { updatePanel } from "../../../../actions/panelActions";
+import { updatePanel } from '../../../../actions/panelActions';
-import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
+import TVirtualGridList
-import { LOG_MENU, panel_names } from "../../../../utils/Config";
+  from '../../../../components/TVirtualGridList/TVirtualGridList';
-import { $L } from "../../../../utils/helperMethods";
+import {
-import ListEmptyContents from "../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents";
+  LOG_MENU,
-import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
+  panel_names,
-import css from "./LiveChannelContents.module.less";
+} from '../../../../utils/Config';
+import { $L } from '../../../../utils/helperMethods';
+import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard';
+import ListEmptyContents
+  from '../TabContents/ListEmptyContents/ListEmptyContents';
+import css from './LiveChannelContents.module.less';
 
 export default function LiveChannelContents({
   liveInfos,

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx

@@ -1,19 +1,33 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
-import { useDispatch } from "react-redux";
+import { useDispatch } from 'react-redux';
 
-import Spotlight from "@enact/spotlight";
+import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 
-import { pushPanel, updatePanel } from "../../../../actions/panelActions";
+import {
+  pushPanel,
+  updatePanel,
+} from '../../../../actions/panelActions';
 import TItemCard, {
   removeDotAndColon,
   TYPES,
-} from "../../../../components/TItemCard/TItemCard";
+} from '../../../../components/TItemCard/TItemCard';
-import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
+import TVirtualGridList
-import { LOG_MENU, panel_names } from "../../../../utils/Config";
+  from '../../../../components/TVirtualGridList/TVirtualGridList';
-import ListEmptyContents from "../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents";
+import {
-import css from "./ShopNowContents.module.less";
+  LOG_MENU,
+  panel_names,
+} from '../../../../utils/Config';
+import ListEmptyContents
+  from '../TabContents/ListEmptyContents/ListEmptyContents';
+import css from './ShopNowContents.module.less';
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element" },