[Detailpanel] themeIndicator spotlight focus && 의존성배열 추가

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

@@ -45,6 +45,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
 
   const { prdtId, patnrId, curationId, curationNm, type, bgImgNo } = panelInfo;
 
+  console.log("#panelInfo", panelInfo);
   useEffect(() => {
     if (type === "hotel") {
       dispatch(

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

@@ -99,7 +99,7 @@ export default function SingleOption({
         mbrNo: userInfo,
       })
     );
-  }, [dispatch, selectedPatnrId]);
+  }, [dispatch, selectedPatnrId, selectedPrdtId]);
 
   const handleOptionClick = useCallback(
     (optionValIdx) => {
@@ -126,7 +126,7 @@ export default function SingleOption({
         ]
       );
     }
-  }, [selectedBtnOptIdx, selectedOptionItemIndex]);
+  }, [selectedBtnOptIdx, selectedOptionItemIndex, productOptionInfos]);
 
   const handleIncrement = useCallback(() => {
     setQuantity(quantity + 1);
@@ -281,7 +281,6 @@ export default function SingleOption({
     [selectedOptionItemIndex]
   );
 
-  console.log("#focused", focused);
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       const {

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

@@ -18,6 +18,8 @@ export default function ShowOption({
   selectedIndex,
   setSelectedIndex,
   selectedCurationId,
+  selectedPatnrId,
+  selectedPrdtId,
   launchedFromPlayer,
   selectedCurationNm,
 }) {
@@ -78,7 +80,7 @@ export default function ShowOption({
               isFullOption={productInfo[selectedIndex]?.pmtSuptYn === "Y"}
               thumbnailUrl={productInfo[selectedIndex]?.thumbnailUrl}
               productInfo={productInfo[selectedIndex]}
-              isDescription
+              isDescription={!productInfo[selectedIndex]?.pmtSuptYn === "Y"}
             />
           </Container>
           <div className={css.optionContainer}>
@@ -87,6 +89,8 @@ export default function ShowOption({
                 selectedIndex={selectedIndex}
                 productInfo={productInfo}
                 productData={productData}
+                selectedPatnrId={selectedPatnrId}
+                selectedPrdtId={selectedPrdtId}
               />
             )}
             {productInfo[selectedIndex]?.pmtSuptYn === "N" && (

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

@@ -249,6 +249,32 @@ export default function ThemeIndicator({
     }
   }, [dispatch, themeProductInfo, canPlayVideo, autoPlaying]);
 
+  useEffect(() => {
+    console.log("#imageSelectedIndex", imageSelectedIndex);
+    console.log("#imagelenghth", imageLength);
+    if (
+      imageLength === (imageSelectedIndex || 1) ||
+      (!themeProductInfo?.prdtMediaUrl &&
+        imageLength - 1 === imageSelectedIndex)
+    ) {
+      Spotlight.focus("thumbnailPrevButton");
+    } else if (
+      imageSelectedIndex === -1 ||
+      (!themeProductInfo?.prdtMediaUrl && imageSelectedIndex === 0) ||
+      (themeProductInfo?.prdtMediaUrl && imageSelectedIndex === 0)
+    ) {
+      Spotlight.focus("thumbnailNextButton");
+    }
+  }, [canPlayVideo, imageSelectedIndex]);
+
+  // const currentSpotlightDisabled = useMemo(() => {
+  //   if (  imageLength === (imageSelectedIndex || 1) ||
+  //   (!themeProductInfo?.prdtMediaUrl &&
+  //     imageLength - 1 === imageSelectedIndex)) {
+  //     return true
+  //   }
+  // }, [])
+
   const renderThumbnail = useCallback(() => {
     const hasMediaUrl = getProductMediaUrlStatus();
 
@@ -282,8 +308,9 @@ export default function ThemeIndicator({
                 onClick={handlePrevClick}
                 spotlightDisabled={
                   imageSelectedIndex === -1 ||
-                  (!canPlayVideo && imageSelectedIndex === 0) ||
-                  (canPlayVideo && imageSelectedIndex === 0)
+                  (!themeProductInfo?.prdtMediaUrl &&
+                    imageSelectedIndex === 0) ||
+                  (themeProductInfo?.prdtMediaUrl && imageSelectedIndex === 0)
                 }
                 spotlightId="thumbnailPrevButton"
               />
@@ -300,10 +327,19 @@ export default function ThemeIndicator({
               <SpottableComponent
                 className={classNames(
                   css.nextButton,
-                  imageLength === imageSelectedIndex && css.disable
+                  imageLength === (imageSelectedIndex || 1) && css.disable,
+                  !themeProductInfo?.prdtMediaUrl &&
+                    imageLength - 1 === imageSelectedIndex &&
+                    css.disable
                 )}
                 onClick={handleNextClick}
-                spotlightDisabled={imageLength === imageSelectedIndex}
+                spotlightDisabled={
+                  imageLength === (imageSelectedIndex || 1) ||
+                  (!themeProductInfo?.prdtMediaUrl &&
+                    imageLength - 1 === imageSelectedIndex &&
+                    css.disable)
+                }
+                spotlightId="thumbnailNextButton"
               />
             </>
           )}