[DetailPanel] themeDetail hotpicks에서 선택한 아이템 focus && select

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

@@ -43,9 +43,17 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   const groupInfos = useSelector((state) => state.product.groupInfo);
   const dispatch = useDispatch();
 
-  const { prdtId, patnrId, curationId, curationNm, type, bgImgNo } = panelInfo;
+  const {
+    themeHotelId,
+    themePrdtId,
+    prdtId,
+    patnrId,
+    curationId,
+    curationNm,
+    type,
+    bgImgNo,
+  } = panelInfo;
 
-  console.log("#panelInfo", panelInfo);
   useEffect(() => {
     if (type === "hotel") {
       dispatch(
@@ -87,6 +95,21 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
     }
   }, [productData]);
 
+  useEffect(() => {
+    if (
+      panelInfo &&
+      themeProductInfos &&
+      themeProductInfos.length > 0 &&
+      themePrdtId
+    ) {
+      for (let i = 0; i < themeProductInfos.length; i++) {
+        if (themeProductInfos[i].prdtId === themePrdtId) {
+          setSelectedIndex(i);
+        }
+      }
+    }
+  }, [panelInfo, themeProductInfos, themePrdtId]);
+
   const onSpotlightUpTButton = (e) => {
     e.stopPropagation();
     Spotlight.focus("spotlightId_backBtn");

com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx

@@ -38,6 +38,7 @@ export default function SingleOption({
   productInfo,
   patncNm,
   isSpotlight,
+  selectedIndex,
 }) {
   const dispatch = useDispatch();
   const productOptionInfos = useSelector((state) => state.product.prdtOptInfo);
@@ -83,14 +84,12 @@ export default function SingleOption({
   }, [partnerCoupon, shoptiemCoupon]);
 
   useEffect(() => {
-    if (productData?.prodOptYn === "Y" || productInfo?.prodOptYn === "Y") {
-      dispatch(
-        getProductOption({
-          patnrId: selectedPatnrId,
-          prdtId: selectedPrdtId,
-        })
-      );
-    }
+    dispatch(
+      getProductOption({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPrdtId,
+      })
+    );
 
     dispatch(
       getProductCouponSearch({
@@ -99,7 +98,7 @@ export default function SingleOption({
         mbrNo: userInfo,
       })
     );
-  }, [dispatch, selectedPatnrId, selectedPrdtId]);
+  }, [dispatch, selectedPatnrId, selectedPrdtId, productData]);
 
   const handleOptionClick = useCallback(
     (optionValIdx) => {

com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowOptions/ShowSingleOption.jsx

@@ -5,6 +5,7 @@ import SingleOption from "../../SingleProduct/SingleOption";
 
 export default function ThemeSingleOption({
   selectedIndex,
+
   productInfo,
   productData,
 }) {
@@ -19,6 +20,7 @@ export default function ThemeSingleOption({
           selectedPrdtId={productInfo[selectedIndex]?.prdtId}
           productInfo={productInfo[selectedIndex]}
           patncNm={productData?.themeInfo[0]?.patncNm}
+          selectedIndex={selectedIndex}
           isSpotlight={false}
         />
       </ProductOption>

com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx

@@ -221,11 +221,20 @@ export default function ThemeIndicator({
       Spotlight.focus("spotlightId_backBtn");
       return;
     }
-    if (themeProductInfos && themeProductInfos.length > 0 && isSpotlight) {
+    if (
+      themeProductInfos &&
+      themeProductInfos.length > 0 &&
+      isSpotlight &&
+      selectedIndex === 0
+    ) {
       Spotlight.focus("IndicatorGridlistContainer");
       Spotlight.focus("indicator-image-0");
     }
-  }, [themeProductInfos, isSpotlight]);
+
+    if (selectedIndex > 0) {
+      Spotlight.focus(`indicator-image-${selectedIndex}`);
+    }
+  }, [themeProductInfos, selectedIndex, isSpotlight]);
 
   const handleVideoOnClick = useCallback(() => {
     if (canPlayVideo) {
@@ -250,8 +259,6 @@ export default function ThemeIndicator({
   }, [dispatch, themeProductInfo, canPlayVideo, autoPlaying]);
 
   useEffect(() => {
-    console.log("#imageSelectedIndex", imageSelectedIndex);
-    console.log("#imagelenghth", imageLength);
     if (
       imageLength === (imageSelectedIndex || 1) ||
       (!themeProductInfo?.prdtMediaUrl &&
@@ -267,6 +274,7 @@ export default function ThemeIndicator({
     }
   }, [canPlayVideo, imageSelectedIndex]);
 
+  // 월요일 리펙토링 예정
   // const currentSpotlightDisabled = useMemo(() => {
   //   if (  imageLength === (imageSelectedIndex || 1) ||
   //   (!themeProductInfo?.prdtMediaUrl &&