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

🕐 커밋 시간: 2025. 11. 22. 17:43:05

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +123줄
  • 삭제: -89줄

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

🔧 함수 변경 내용:
  📄 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

@@ -134,6 +134,15 @@ const BuyNowContainer = SpotlightContainerDecorator(
   'div'
 );
 
+const ButtonStackContainer = SpotlightContainerDecorator(
+  {
+    spotlightDirection: 'vertical',
+    enterTo: 'last-focused',
+    restrict: 'self-only',
+  },
+  'div'
+);
+
 const SpottableComponent = Spottable('div');
 
 const getProductData = curry((productType, themeProductInfo, productInfo) =>
@@ -948,6 +957,11 @@ export default function ProductAllSection({
     []
   );
 
+  const stackDefaultElement = useMemo(
+    () => shopByMobileId || firstStackElementId,
+    [shopByMobileId, firstStackElementId]
+  );
+
   // 버튼 스택(위→아래) 구성: 실제 렌더링 순서에 맞춰 행(row) 단위로 설정
   const { focusDownMap, focusUpMap, focusOrder, focusRows } = useMemo(() => {
     const rows = [];
@@ -1166,6 +1180,7 @@ export default function ProductAllSection({
       });
     }
   }, [focusRows]);
+  const firstStackElementId = focusRows[0]?.[0];
   const scrollPositionRef = useRef(0);
   const prevScrollPositionRef = useRef(0); // 이전 스크롤 위치 추적
   const prevScrollTopRef = useRef(0); // HomePanel 스타일 스크롤 위치 추적
@@ -1491,6 +1506,11 @@ export default function ProductAllSection({
                 </div>
               </ProductOverview>
 
+              <ButtonStackContainer
+                className={css.buttonStackContainer}
+                spotlightId="detail-button-stack"
+                defaultElement={stackDefaultElement}
+              >
                 {userNumber &&
                   promotions.map((promotion, idx) => {
                     const couponButtonId = `detail-coupon-button-${idx}`;
@@ -1585,6 +1605,7 @@ export default function ProductAllSection({
                     </div>
                   )}
                 </ShopByMobileContainer>
+              </ButtonStackContainer>
 
               <div className={css.callToOrderSection}>
                 {orderPhnNo && (

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less

@@ -605,6 +605,19 @@
   }
 }
 
+.buttonStackContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    margin-bottom: 5px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
 .favoriteBtnWrapper {
   width: 60px;
   height: 60px;