[251122] fix: DetailPaneel->ProductAllSection Focus-2

🕐 커밋 시간: 2025. 11. 22. 06:32:49

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +51줄
  • 삭제: -27줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript):
    🔄 Modified: extractProductMeta()

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

@@ -868,20 +868,20 @@ export default function ProductAllSection({
     Spotlight.focus('spotlightId_backBtn');
   }, []);
 
-  const handleSpotlightDown = useCallback((e) => {
+  // 아래 방향 이동 시 버튼 영역으로 포커스 이동
-    e.stopPropagation();
+  // BUY NOW / ADD TO CART / SHOP BY MOBILE / FavoriteBtn 등에서 공통 사용
-  }, []);
+  const focusNextButtons = useCallback(() => {
-
+    // 1) SHOP BY MOBILE이 있으면 우선 이동
-  // SHOP BY MOBILE에서 아래로 이동 시 제품 정보 영역으로 포커스 이동
+    if (SpotlightIds?.DETAIL_SHOPBYMOBILE) {
-  const handleSpotlightDownFromShopByMobile = useCallback((e) => {
+      if (Spotlight.focus(SpotlightIds.DETAIL_SHOPBYMOBILE)) return;
-    e.stopPropagation();
+    }
-    e.preventDefault();
+    if (Spotlight.focus('detail_shop_by_mobile')) return;
 
+    // 2) 상품 정보 버튼들로 이동
     if (!Spotlight.focus('product-details-button')) {
       Spotlight.focus('user-reviews-button');
     }
-
+    // 포커스가 비거나 다른 곳으로 튈 때 다시 보정
-    // 포커스가 비거나 다른 곳으로 튀는 경우를 방어
     setTimeout(() => {
       const current = Spotlight.getCurrent();
       const currentId = current?.dataset?.spotlightId;
@@ -894,6 +894,31 @@ export default function ProductAllSection({
     }, 0);
   }, []);
 
+  const handleSpotlightDown = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+
+  // SHOP BY MOBILE에서 아래로 이동 시 제품 정보 영역으로 포커스 이동
+  const handleSpotlightDownFromShopByMobile = useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      focusNextButtons();
+    },
+    [focusNextButtons]
+  );
+
+  // BUY NOW / ADD TO CART에서 아래로 이동 시 동일하게 전달
+  const handleSpotlightDownFromBuyButtons = useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      focusNextButtons();
+    },
+    [focusNextButtons]
+  );
+
   const onFavoriteFlagChanged = useCallback(
     (newFavoriteFlag) => setFavoriteOverride(newFavoriteFlag),
     []
@@ -1275,7 +1300,8 @@ export default function ProductAllSection({
                     className={css.buyNowButton}
                     onClick={handleBuyNowClick}
                     onSpotlightUp={handleSpotlightUpFromBuyButtons}
-                    onSpotlightDown={handleSpotlightDown}
+                    onSpotlightDown={handleSpotlightDownFromBuyButtons}
+                    data-spotlight-next-down={SpotlightIds.DETAIL_SHOPBYMOBILE}
                     type="detail_small"
                   >
                     <div className={css.buyNowText}>{$L('BUY NOW')}</div>
@@ -1286,7 +1312,8 @@ export default function ProductAllSection({
                     // onClick={handleAddToCartClick}
                     onClick={handleBuyNowClick}
                     onSpotlightUp={handleSpotlightUpFromBuyButtons}
-                    onSpotlightDown={handleSpotlightDown}
+                    onSpotlightDown={handleSpotlightDownFromBuyButtons}
+                    data-spotlight-next-down={SpotlightIds.DETAIL_SHOPBYMOBILE}
                     type="detail_small"
                   >
                     <div className={css.addToCartText}>{$L('ADD TO CART')}</div>