[251019] fix: PlayerPanel Optimization-3

🕐 커밋 시간: 2025. 10. 19. 22:21:28

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +40줄
  • 삭제: -3줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/BelowTabContainer.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ChannelCard.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelContent.v2.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/BelowTabContainer.jsx (javascript):
    ✅ Added: BelowTabContainer(), propsAreEqual()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ChannelCard.jsx (javascript):
    ✅ Added: propsAreEqual()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelContent.v2.jsx (javascript):
    ✅ Added: LiveChannelContents(), propsAreEqual()

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/BelowTabContainer.jsx

@@ -10,7 +10,7 @@ import LiveChannelContents from './LiveChannelContents';
 
 const SpottableDiv = Spottable('div');
 
-export default function BelowTabContainer({
+function BelowTabContainer({
   liveInfos,
   currentTime,
   setSelectedIndex,
@@ -47,3 +47,16 @@ export default function BelowTabContainer({
     </div>
   );
 }
+
+const propsAreEqual = (prev, next) => {
+  return (
+    prev.liveInfos === next.liveInfos &&
+    prev.currentTime === next.currentTime &&
+    prev.videoVerticalVisible === next.videoVerticalVisible &&
+    prev.currentVideoShowId === next.currentVideoShowId &&
+    prev.tabTitle === next.tabTitle &&
+    prev.panelInfo?.shptmBanrTpNm === next.panelInfo?.shptmBanrTpNm
+  );
+};
+
+export default React.memo(BelowTabContainer, propsAreEqual);

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ChannelCard.jsx

@@ -51,4 +51,16 @@ const ChannelCard = ({
   );
 };
 
-export default ChannelCard;
+const propsAreEqual = (prev, next) => {
+  return (
+    prev.channelName === next.channelName &&
+    prev.programName === next.programName &&
+    prev.logoSrc === next.logoSrc &&
+    prev.thumbnailSrc === next.thumbnailSrc &&
+    prev.progressPercent === next.progressPercent &&
+    prev.backgroundColor === next.backgroundColor &&
+    prev.spotlightId === next.spotlightId
+  );
+};
+
+export default React.memo(ChannelCard, propsAreEqual);

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelContent.v2.jsx

@@ -12,7 +12,7 @@ import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContent
 import ChannelCard from './ChannelCard';
 import css from './LiveChannelContents.module.less';
 
-export default function LiveChannelContents({
+function LiveChannelContents({
   liveInfos,
   currentTime,
   setSelectedIndex,
@@ -142,3 +142,15 @@ export default function LiveChannelContents({
     </>
   );
 }
+
+const propsAreEqual = (prev, next) => {
+  return (
+    prev.liveInfos === next.liveInfos &&
+    prev.currentTime === next.currentTime &&
+    prev.videoVerticalVisible === next.videoVerticalVisible &&
+    prev.currentVideoShowId === next.currentVideoShowId &&
+    prev.panelInfo?.shptmBanrTpNm === next.panelInfo?.shptmBanrTpNm
+  );
+};
+
+export default React.memo(LiveChannelContents, propsAreEqual);