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

🕐 커밋 시간: 2025. 11. 22. 17:34:39

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

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

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

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

@@ -114,6 +114,26 @@ const HorizontalContainer = SpotlightContainerDecorator(
   'div'
 );
 
+const ShopByMobileContainer = SpotlightContainerDecorator(
+  {
+    spotlightDirection: 'horizontal',
+    enterTo: 'default-element',
+    restrict: 'self-only',
+    defaultElement: SpotlightIds?.DETAIL_SHOPBYMOBILE || 'detail_shop_by_mobile',
+  },
+  'div'
+);
+
+const BuyNowContainer = SpotlightContainerDecorator(
+  {
+    spotlightDirection: 'horizontal',
+    enterTo: 'default-element',
+    restrict: 'self-only',
+    defaultElement: 'detail-buy-now-button',
+  },
+  'div'
+);
+
 const SpottableComponent = Spottable('div');
 
 const getProductData = curry((productType, themeProductInfo, productInfo) =>
@@ -1500,7 +1520,11 @@ export default function ProductAllSection({
                   );
                 })}
               {isBillingProductVisible && (
-                <div className={css.buyNowCartContainer}>
+                <BuyNowContainer
+                  className={css.buyNowCartContainer}
+                  spotlightId="detail-buy-container"
+                  defaultElement="detail-buy-now-button"
+                >
                   <TButton
                     spotlightId="detail-buy-now-button"
                     className={css.buyNowButton}
@@ -1524,14 +1548,16 @@ export default function ProductAllSection({
                   >
                     <div className={css.addToCartText}>{$L('ADD TO CART')}</div>
                   </TButton>
-                </div>
+                </BuyNowContainer>
               )}
 
-              <div
+              <ShopByMobileContainer
                 className={classNames(
                   css.buttonContainer,
                   isBillingProductVisible && css.buttonHasNoCart
                 )}
+                spotlightId="detail-shop-by-mobile-container"
+                defaultElement={SpotlightIds.DETAIL_SHOPBYMOBILE}
               >
                 {/* BUY NOW + ADD TO CART 버튼들 (결제 가능 상품일 때만 렌더링) */}
                 <TButton
@@ -1558,7 +1584,7 @@ export default function ProductAllSection({
                     />
                   </div>
                 )}
-              </div>
+              </ShopByMobileContainer>
 
               <div className={css.callToOrderSection}>
                 {orderPhnNo && (