[251123] fix: DetailPanel ThemeButton-4

🕐 커밋 시간: 2025. 11. 23. 07:00:05

📊 변경 통계:
  • 총 파일: 6개
  • 삭제: -189줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.figma.jsx
  + com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx
  + com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less

🗑️ 삭제된 파일:
  - com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.figma.jsx
  - com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.jsx
  - com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.module.less

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx (javascript):
    ✅ Added: handleItemClick(), productNameDangerouslySetInnerHTML()
  📄 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less (unknown):
    ✅ Added: child()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.jsx (javascript):
    ❌ Deleted: handleItemClick(), productNameDangerouslySetInnerHTML()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.module.less (unknown):
    ❌ Deleted: child()

Performance: 코드 최적화로 성능 개선 기대

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

@@ -1,167 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-
-import { useDispatch } from 'react-redux';
-
-import Spotlight from '@enact/spotlight';
-
-import { updatePanel } from '../../../../actions/panelActions';
-import TVirtualGridList from '../../../../components/TVirtualGridList/TVirtualGridList';
-import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../../../utils/Config';
-import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard';
-import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents';
-import css from './ThemeContents.module.less';
-import { sendLogTotalRecommend } from '../../../../actions/logActions';
-
-export default function ThemeContents({
-  themeItems,
-  setSelectedIndex,
-  videoVerticalVisible,
-  currentVideoShowId,
-  tabIndex,
-  handleItemFocus,
-  tabTitle,
-  panelInfo,
-  direction = 'horizontal',
-  version = 2,
-}) {
-  const dispatch = useDispatch();
-  const isClickBlocked = useRef(false);
-  const blockTimeoutRef = useRef(null);
-
-  const handleFocus = useCallback(
-    () => () => {
-      if (handleItemFocus) {
-        handleItemFocus(LOG_MENU.THEME_ITEMS);
-      }
-    },
-    [handleItemFocus]
-  );
-
-  const renderItem = useCallback(
-    ({ index, ...rest }) => {
-      const {
-        prdtId,
-        prdtNm,
-        prdtImgPath,
-        salePrice,
-        originalPrice,
-        patnrLogoPath,
-        patncNm,
-        showId,
-        catNm,
-        energyLabels,
-      } = themeItems[index];
-
-      const handleItemClick = () => {
-        const params = {
-          tabTitle: tabTitle[tabIndex],
-          productId: prdtId,
-          productTitle: prdtNm,
-          showType: panelInfo?.shptmBanrTpNm,
-          category: catNm,
-          partner: patncNm,
-          contextName: LOG_CONTEXT_NAME.PRODUCT,
-          messageId: LOG_MESSAGE_ID.CONTENTCLICK,
-        };
-        dispatch(sendLogTotalRecommend(params));
-
-        // 중복클릭방지
-        if (isClickBlocked.current) {
-          return;
-        }
-
-        isClickBlocked.current = true;
-
-        // 이전 타이머가 있으면 정리
-        if (blockTimeoutRef.current) {
-          clearTimeout(blockTimeoutRef.current);
-        }
-
-        blockTimeoutRef.current = setTimeout(() => {
-          isClickBlocked.current = false;
-          blockTimeoutRef.current = null;
-        }, 600);
-
-        if (!prdtId) return;
-
-        setSelectedIndex(index);
-        dispatch(
-          updatePanel({
-            name: panel_names.PLAYER_PANEL,
-            panelInfo: {
-              prdtId,
-              showId,
-              shptmBanrTpNm: 'THEME',
-              isUpdatedByClick: true,
-            },
-          })
-        );
-      };
-
-      const productNameDangerouslySetInnerHTML = () => {
-        return prdtNm ? { __html: prdtNm } : { __html: '' };
-      };
-
-      return (
-        <PlayerItemCard
-          {...rest}
-          key={prdtId}
-          imageAlt={prdtId}
-          logo={patnrLogoPath}
-          imageSource={prdtImgPath}
-          videoVerticalVisible={videoVerticalVisible}
-          productName={productNameDangerouslySetInnerHTML}
-          patnerName={patncNm}
-          salePrice={salePrice}
-          originalPrice={originalPrice}
-          energyLabels={energyLabels}
-          onClick={handleItemClick}
-          onFocus={handleFocus()}
-          onSpotlightUp={
-            version === 2 && index === 0
-              ? (e) => {
-                  // v2에서 첫 번째 아이템일 때 위로 가면 THEME ITEM 버튼으로
-                  e.stopPropagation();
-                  e.preventDefault();
-                  Spotlight.focus('below-tab-theme-button');
-                }
-              : undefined
-          }
-          type={TYPES.themeHorizontal}
-          spotlightId={`tabTheme-item-${index}`}
-          version={version}
-        />
-      );
-    },
-    [themeItems, currentVideoShowId, isClickBlocked, dispatch, handleFocus, version, tabIndex, tabTitle, panelInfo, setSelectedIndex]
-  );
-
-  // cleanup useEffect
-  useEffect(() => {
-    return () => {
-      if (blockTimeoutRef.current) {
-        clearTimeout(blockTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <>
-      <div className={css.container}>
-        {themeItems && themeItems.length > 0 ? (
-          <TVirtualGridList
-            dataSize={themeItems.length}
-            direction={direction}
-            renderItem={renderItem}
-            itemWidth={470}
-            itemHeight={180}
-            spacing={18}
-            noScrollByWheel={false}
-          />
-        ) : (
-          <ListEmptyContents tabIndex={tabIndex} />
-        )}
-      </div>
-    </>
-  );
-}

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

@@ -1,22 +0,0 @@
-@import "../../../../style/CommonStyle.module.less";
-@import "../../../../style/utils.module.less";
-
-.container {
-  width: 100%;
-  height: 180px;
-
-  > div:nth-child(1) {
-    .size(@w: 100%, @h: 100%);
-  }
-}
-
-.themeList {
-  width: 100%;
-  .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start);
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  > * + * {
-    margin-left: 18px;
-  }
-}