[PlayerPanel] SideTab 폴더 구조 분해

2024-04-29 14:35:14 +09:00
parent 15115b44d0
commit 363e3e557c
17 changed files with 280 additions and 155 deletions
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
@@ -0,0 +1,83 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
+
+import { pushPanel, updatePanel } from "../../../../actions/panelActions";
+import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
+import { panel_names } from "../../../../utils/Config";
+import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
+import css from "./LiveChannelContents.module.less";
+import PlayerTabLoading from "./PlayerTabLoading";
+
+export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
+  const dispatch = useDispatch();
+
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      const {
+        dfltThumbnailImgPath,
+        patncLogoPath,
+        prdtId,
+        patnrId,
+        showId,
+        showNm,
+        patncNm,
+        strtDt,
+        endDt,
+        timezone,
+        thumbnailUrl,
+        showType,
+      } = liveInfos[index];
+
+      console.log("#liveInfos", liveInfos);
+      const handleItemClick = () => {
+        setSelectedIndex(index);
+
+        dispatch(
+          updatePanel({
+            name: panel_names.PLAYER_PANEL,
+            panelInfo: { patnrId, showId, shptmBanrTpNm: "LIVE" },
+          })
+        );
+      };
+
+      return (
+        <PlayerItemCard
+          {...rest}
+          key={prdtId}
+          imageAlt={prdtId}
+          logo={patncLogoPath}
+          imageSource={thumbnailUrl ? thumbnailUrl : dfltThumbnailImgPath}
+          productName={showNm}
+          patnerName={patncNm}
+          startDt={strtDt}
+          endDt={endDt}
+          timezone={timezone}
+          onClick={handleItemClick}
+          type={TYPES.liveHorizontal}
+        />
+      );
+    },
+    [liveInfos, dispatch]
+  );
+  return (
+    <>
+      <div className={css.container}>
+        {liveInfos && liveInfos.length > 0 ? (
+          <TVirtualGridList
+            dataSize={liveInfos.length}
+            direction="vertical"
+            renderItem={renderItem}
+            itemWidth={600}
+            itemHeight={236}
+            spacing={12}
+            className={css.itemList}
+            noScrollByWheel={false}
+          />
+        ) : (
+          <PlayerTabLoading />
+        )}
+      </div>
+    </>
+  );
+}