shoptime/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx

import React, { useCallback } from 'react';

import { useDispatch } from 'react-redux';

import Spotlight from '@enact/spotlight';

import { pushPanel, updatePanel, navigateFromSearch } from '../../../actions/panelActions';
import TItemCardNew from '../../../components/TItemCard/TItemCard.new';
import TScroller from '../../../components/TScroller/TScroller';
import { panel_names } from '../../../utils/Config';
import { SpotlightIds } from '../../../utils/SpotlightIds';
import css from './ItemCard.module.less';

const ItemCard = ({ onClick, itemInfo, searchQuery }) => {
  const dispatch = useDispatch();
  const _handleItemClick = useCallback(
    (patnrId, prdtId, spotlightId) => (ev) => {
      // 🎯 더 확실한 방법으로 spotlight-id 가져오기
      // 1. 이벤트 target에서부터 찾기
      let currentSpot = null;
      let target = ev.target;

      while (target && target !== document.body) {
        if (target.getAttribute('data-spotlight-id')) {
          currentSpot = target.getAttribute('data-spotlight-id');
          break;
        }
        target = target.parentElement;
      }

      // 2. 위에서 못 찾으면 전달받은 spotlightId 사용
      if (!currentSpot && spotlightId) {
        currentSpot = spotlightId;
      }

      // 3. 그래도 없으면 Spotlight.getCurrent() 사용
      if (!currentSpot) {
        const spotlightElement = Spotlight.getCurrent();
        if (spotlightElement) {
          currentSpot = spotlightElement.getAttribute('data-spotlight-id');
        }
      }

      if (onClick) {
        onClick(ev);
      }

      // 통합된 navigateToDetail 사용
      dispatch(
        navigateFromSearch({
          patnrId,
          prdtId,
          searchQuery,
          currentSpot,
          additionalInfo: { tab: 0 },
        })
      );
    },
    [onClick, dispatch, searchQuery]
  );

  return (
    <>
      <TScroller className={css.container} spotlightId={SpotlightIds.SEARCH_ITEM}>
        {itemInfo.map((item, index) => {
          const { thumbnail, title, dcPrice, price, soldout, contentId, euEnrgLblInfos } = item;
          const tokens = contentId && contentId.split('_');
          const patnrId = tokens?.[4] || '';
          const prdtId = tokens?.[5] || '';
          const spotlightId = 'searchItemContents' + index;
          return (
            <TItemCardNew
              key={prdtId}
              imageAlt={prdtId}
              imageSource={thumbnail}
              productName={title}
              productId={prdtId}
              onClick={_handleItemClick(patnrId, prdtId, spotlightId)}
              soldoutFlag={soldout}
              dcPrice={dcPrice}
              originPrice={price}
              spotlightId={spotlightId}
              // ✅ [251026] ADD: 첫 번째 상품 카드에만 Spotlight 포커스 업 네비게이션 적용 - data-spotlight-up 속성 사용
              {...(index === 0 ? { 'data-spotlight-up': 'searchtabContainer' } : {})}
              label={index * 1 + 1 + ' of ' + itemInfo.length + 1}
              lastLabel=" go to detail, button"
              euEnrgLblInfos={euEnrgLblInfos}
            />
          );
        })}
      </TScroller>
    </>
  );
};

export default ItemCard;