[카트 장바구니 포커스 수정]

- 첫번째 체크박스에 포커스 갔을시에 최상단 스크롤되도록 변경.

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

@@ -10,15 +10,21 @@ import {
 } from 'react-redux';
 
 import { getMyInfoCartSearch } from '../../actions/cartActions';
-import { initializeMockCart, resetMockCart } from '../../actions/mockCartActions';
-import { popPanel, updatePanel } from '../../actions/panelActions';
-import { BUYNOW_CONFIG } from '../../utils/BuyNowConfig';
-import * as Config from '../../utils/Config';
+import {
+  initializeMockCart,
+  resetMockCart,
+} from '../../actions/mockCartActions';
+import {
+  popPanel,
+  updatePanel,
+} from '../../actions/panelActions';
 import TBody from '../../components/TBody/TBody';
 import THeader from '../../components/THeader/THeader';
 import TPanel from '../../components/TPanel/TPanel';
 import TScroller from '../../components/TScroller/TScroller';
 import useScrollTo from '../../hooks/useScrollTo';
+import { BUYNOW_CONFIG } from '../../utils/BuyNowConfig';
+import * as Config from '../../utils/Config';
 import CartEmpty from './CartEmpty';
 import css from './CartPanel.module.less';
 import CartProductBar from './CartProductBar';
@@ -157,15 +163,11 @@ export default function CartPanel({ spotlightId, scrollOptions = [], panelInfo }
     }
   }, [displayCartData]);
 
-  const {
-    getScrollTo,
-    getScrollTo: getScrollToBody,
-    scrollTop: scrollTopBody,
-  } = useScrollTo();
+  const { getScrollTo, scrollTop } = useScrollTo();
 
   return (
     <TPanel spotlightId={spotlightId} isTabActivated={true}>
-      <TBody className={css.tbody}>
+      <TBody className={css.tbody} cbScrollTo={getScrollTo} >
         <THeader
           className={css.theader}
           kind={"cartPanel"}
@@ -177,15 +179,14 @@ export default function CartPanel({ spotlightId, scrollOptions = [], panelInfo }
           <div className={css.leftSection}>
             <CartSidebar cartInfo={displayCartData}/>
           </div>
-          <div className={css.rightSection} cbScrollTo={getScrollToBody}>
+          <div className={css.rightSection} >
             {/* 오른쪽 상품 영역 */}
             {displayCartData && displayCartData?.length > 0 ? (
               <TScroller
                 className={css.tScroller}
-                scrollTopBody={scrollTopBody}
                 {...scrollOptions}
               >
-                <CartProductBar cartInfo={displayCartData} />
+                <CartProductBar cartInfo={displayCartData} getScrollTo={getScrollTo} scrollTop={scrollTop}/>
               </TScroller>
             ) : (
               <CartEmpty />

com.twin.app.shoptime/src/views/CartPanel/CartProduct.jsx

@@ -14,6 +14,7 @@ import {
 import Spotlight from '@enact/spotlight';
 import SpotlightContainerDecorator
   from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 
 import logoImage from '../../../assets/images/ic-partners-qvc@3x.png';
 import defaultImage from '../../../assets/images/img-thumb-empty-144@3x.png';
@@ -29,8 +30,17 @@ import {
 import CustomImage from '../../components/CustomImage/CustomImage';
 import TButton from '../../components/TButton/TButton';
 import TCheckBoxSquare from '../../components/TCheckBox/TCheckBoxSquare';
+import useScrollTo from '../../hooks/useScrollTo';
 import store from '../../store/store';
 import { BUYNOW_CONFIG } from '../../utils/BuyNowConfig';
+import {
+  andThen,
+  curry,
+  isEmpty,
+  isNil,
+  pipe,
+  when,
+} from '../../utils/fp';
 import {
   normalizeProductDataForDisplay,
 } from '../../utils/mockDataSafetyUtils';
@@ -83,7 +93,9 @@ const OptimizedImage = ({ src, alt, className, fallbackSrc }) => {
 };
 
 const Container = SpotlightContainerDecorator("div");
-const CartProduct = ({ cartInfo }) => {
+
+const CartProduct = ({ cartInfo, getScrollTo, scrollTop  }) => {
+  
   const dispatch = useDispatch();
 
   // 항상 호출되어야 하는 Hook들
@@ -233,13 +245,41 @@ const CartProduct = ({ cartInfo }) => {
     return selectedItems.includes(prodSno);
   }, [selectedItems]);
 
+  const handleFocus = useCallback((index, groupIndex) => {    
+    if(index === 0 && groupIndex === 0){      
+      scrollToSection("cartFocus_0");
+    }
+  },[scrollToSection])
+
+  const scrollToSection = useCallback(
+    curry((sectionId) =>
+      pipe(
+        when(isEmpty, () => null),
+        andThen(() => document.getElementById(sectionId)),
+        when(isNil, () => null),
+        andThen((targetElement) => {
+          // offsetTop: 부모 컨테이너 기준 절대 위치 사용
+          // const y = targetElement.offsetTop;
+          const y = 0; //0으로 들어가는것이 깔끔.                   
+          return scrollTop({ y, animate: true });
+        })
+      )(sectionId)
+    ),
+    [scrollTop]
+  );
+
+
   return (
       <>
-        {Object.entries(groupedCartData).map(([partnerKey, group]) => {
+        {Object.entries(groupedCartData).map(([partnerKey, group],index) => {
           const totals = calculatePartnerTotal(group.items);
           
           return (
-         <Container key={partnerKey} className={css.productBox}>
+            <div key={partnerKey}>
+              {index === 0 && (
+              <div className={css.scrollMarker} id="cartFocus_0"></div>
+              )}
+              <Container className={css.productBox} spotlightId={"cartProduct_" + index}>
                 <div className={css.partnerSection}>
                   {/* 파트너사 정보 - 한 번만 표시 */}
                   <div className={css.productCompany}>
@@ -290,7 +330,7 @@ const CartProduct = ({ cartInfo }) => {
                   </div>
 
                   {/* 해당 파트너사의 상품 리스트 - map으로 반복 */}
-              {group.items.map((item) => {
+                  {group.items.map((item, groupIndex) => {
                     // CheckOutPanel과 동일한 이미지 처리 방식 적용
                     const normalizedItem = normalizeProductDataForDisplay(item);
 
@@ -314,6 +354,7 @@ const CartProduct = ({ cartInfo }) => {
                             spotlightId={`productCheckbox-${item.prodSno}`}
                             selected={isItemSelected(item.prodSno)}
                             onToggle={handleCheckboxToggle(item.prodSno)}
+                            onFocus={()=> {handleFocus(index, groupIndex)}}
                           />
                           <span className={css.productId}>
                             ID : {item.prdtId}
@@ -403,6 +444,7 @@ const CartProduct = ({ cartInfo }) => {
                   })}
                 </div>
               </Container>
+            </div>
           );
         })}
       </>

com.twin.app.shoptime/src/views/CartPanel/CartProduct.module.less

@@ -1,6 +1,11 @@
 @import "../../style/CommonStyle.module.less";
 @import "../../style/utils.module.less";
 
+.scrollMarker {    
+    height: 1px;
+    visibility: hidden;
+  }
+
 .productBox {
   background: #fff;
   width: 100%;

com.twin.app.shoptime/src/views/CartPanel/CartProductBar.jsx

@@ -6,12 +6,11 @@ import SpotlightContainerDecorator
 import CartProduct from './CartProduct';
 import css from './CartProductBar.module.less';
 
-const CartProductBar = ({ cartInfo, scrollOptions = {} }) => {
+const CartProductBar = ({ cartInfo, getScrollTo, scrollTop ,scrollOptions = {} }) => {
   const Container = SpotlightContainerDecorator("div");
-
   return (
     <Container className={css.productContainer}>
-      <CartProduct cartInfo={cartInfo} />
+      <CartProduct cartInfo={cartInfo} getScrollTo={getScrollTo} scrollTop={scrollTop}/>
     </Container>
   );
 };