[이슈] 미국 / Category 부분 영상들어갔을때 상품 포커싱 안돼는부분 처리건.

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowProductContents/ShowProductContents.jsx

@@ -5,10 +5,11 @@ import { useDispatch, useSelector } from "react-redux";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import { startVideoPlayer } from "../../../../../actions/playActions";
-import TItemCard from "../../../../../components/TItemCard/TItemCard";
+import TItemCard, {
+  removeDotAndColon,
+} from "../../../../../components/TItemCard/TItemCard";
 import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
 import useScrollTo from "../../../../../hooks/useScrollTo";
-import { panel_names } from "../../../../../utils/Config";
 import { SpotlightIds } from "../../../../../utils/SpotlightIds";
 import css from "./ShowProductContents.module.less";
 
@@ -36,11 +37,12 @@ export default function ShowProductContents({ onClick }) {
   }, [productInfos]);
 
   const handleItemClick = useCallback(
-    (index) => (ev) => {
+    (index, prdtId) => (ev) => {
       const { showId, patnrId, lgCatCd } = showProductContentDatas;
       onClick && onClick(ev);
       dispatch(
         startVideoPlayer({
+          targetId: "spotlightId-" + removeDotAndColon(prdtId),
           showId,
           patnrId,
           shptmBanrTpNm: "VOD",
@@ -66,11 +68,12 @@ export default function ShowProductContents({ onClick }) {
           imageSource={imgUrl}
           priceInfo={priceInfo}
           productName={prdtNm}
-          onClick={handleItemClick(index)}
+          onClick={handleItemClick(index, prdtId)}
           offerInfo={offerInfo}
           productId={prdtId}
           label={index * 1 + 1 + " of " + productInfos.length}
           lastLabel=" go to detail, button"
+          spotlightId={"showCategory-spotlightId-" + removeDotAndColon(prdtId)}
         />
       );
     },

com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx

@@ -100,6 +100,25 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
   const [styleChange, setStyleChange] = useState(false);
   const logTimerRef = useRef(null);
 
+  const [targetId, setTargetId] = useState(null);
+
+  const timerRef = useRef();
+
+  useEffect(() => {
+    if (panelInfo.currentSpot) {
+      setTargetId(panelInfo.currentSpot);
+    }
+  }, [panelInfo]);
+
+  useEffect(() => {
+    if (isOnTop) {
+      timerRef.current = setTimeout(() => {
+        Spotlight.focus(targetId);
+      }, 0);
+    }
+    return () => clearTimeout(timerRef.current);
+  }, [targetId]);
+
   useEffect(() => {
     let nowMenu;
     if (tab === 0) {