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

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

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 {
-import { popPanel, updatePanel } from '../../actions/panelActions';
+  initializeMockCart,
-import { BUYNOW_CONFIG } from '../../utils/BuyNowConfig';
+  resetMockCart,
-import * as Config from '../../utils/Config';
+} 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 {
+  const { getScrollTo, scrollTop } = useScrollTo();
-    getScrollTo,
-    getScrollTo: getScrollToBody,
-    scrollTop: scrollTopBody,
-  } = 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,176 +245,206 @@ 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}>
-            <div className={css.partnerSection}>
+              {index === 0 && (
-              {/* 파트너사 정보 - 한 번만 표시 */}
+              <div className={css.scrollMarker} id="cartFocus_0"></div>
-              <div className={css.productCompany}>
+              )}
-                <div className={css.logo}>
+              <Container className={css.productBox} spotlightId={"cartProduct_" + index}>
-                  <CustomImage
+                <div className={css.partnerSection}>
-                    className={css.img}
+                  {/* 파트너사 정보 - 한 번만 표시 */}
-                    src={group.partnerInfo.logo}
+                  <div className={css.productCompany}>
-                    fallbackSrc={defaultImage}
+                    <div className={css.logo}>
-                  />
+                      <CustomImage
-                </div>
+                        className={css.img}
-                <span className={css.company}>
+                        src={group.partnerInfo.logo}
-                  {group.partnerInfo.name}
+                        fallbackSrc={defaultImage}
-                  <span className={css.productEa}>
-                    ({group.items.length} ITEM{group.items.length > 1 ? 'S' : ''})
-                  </span>
-                </span>
-              </div>
-
-              {/* 파트너사별 가격 총합 - 한 번만 표시 */}
-              <div className={css.productPrice}>
-                <div className={css.leftSection}>
-                  Product Total ${totals.productTotal.toLocaleString('en-US', { 
-                        minimumFractionDigits: 2, 
-                        maximumFractionDigits: 2 
-                      })} +
-                                         
-                  {/* Option ${totals.optionTotal.toLocaleString('en-US', { 
-                        minimumFractionDigits: 2, 
-                        maximumFractionDigits: 2 
-                      })} +                    */}
-                      Option $0.00 +                   
-                  S&H ${totals.shippingTotal.toLocaleString('en-US', { 
-                        minimumFractionDigits: 2, 
-                        maximumFractionDigits: 2 
-                      })}
-                </div>
-                <div className={css.rightSection}>
-                  Total
-                  <span className={css.total}>
-                    $<span className={css.totalAcc}>
-                      {totals.total.toLocaleString('en-US', { 
-                        minimumFractionDigits: 2, 
-                        maximumFractionDigits: 2 
-                      })}
-                    </span>
-                  </span>
-                </div>
-              </div>
-
-              {/* 해당 파트너사의 상품 리스트 - map으로 반복 */}
-              {group.items.map((item) => {
-                // CheckOutPanel과 동일한 이미지 처리 방식 적용
-                const normalizedItem = normalizeProductDataForDisplay(item);
-
-                // ✅ 이미지 우선순위: ProductAllSection 고품질 이미지 → 기타 모든 이미지 필드
-                const imageSrc = (item.imgUrls600 && item.imgUrls600[0]) ||  // ✅ ProductAllSection의 고품질 이미지
-                                (item.thumbnailUrl960) ||  // ✅ 960px 썸네일
-                                (normalizedItem.imgUrls && normalizedItem.imgUrls[0]?.imgUrl) ||
-                                (item.imgUrls && item.imgUrls[0]?.imgUrl) ||
-                                (item.imgList && item.imgList[0]?.imgUrl) ||
-                                normalizedItem.imgUrl ||
-                                item.imgUrl ||
-                                item.thumbnailUrl ||
-                                defaultImage;
-
-                return (
-                <div key={item.prodSno} className={css.product}>
-                  <div className={css.leftBox}>
-                    <div className={css.checkBox}>
-                      <TCheckBoxSquare
-                        className={css.customeCheckbox}
-                        spotlightId={`productCheckbox-${item.prodSno}`}
-                        selected={isItemSelected(item.prodSno)}
-                        onToggle={handleCheckboxToggle(item.prodSno)}
                       />
-                      <span className={css.productId}>
+                    </div>
-                        ID : {item.prdtId}
+                    <span className={css.company}>
+                      {group.partnerInfo.name}
+                      <span className={css.productEa}>
+                        ({group.items.length} ITEM{group.items.length > 1 ? 'S' : ''})
+                      </span>
+                    </span>
+                  </div>
+
+                  {/* 파트너사별 가격 총합 - 한 번만 표시 */}
+                  <div className={css.productPrice}>
+                    <div className={css.leftSection}>
+                      Product Total ${totals.productTotal.toLocaleString('en-US', { 
+                            minimumFractionDigits: 2, 
+                            maximumFractionDigits: 2 
+                          })} +
+                                            
+                      {/* Option ${totals.optionTotal.toLocaleString('en-US', { 
+                            minimumFractionDigits: 2, 
+                            maximumFractionDigits: 2 
+                          })} +                    */}
+                          Option $0.00 +                   
+                      S&H ${totals.shippingTotal.toLocaleString('en-US', { 
+                            minimumFractionDigits: 2, 
+                            maximumFractionDigits: 2 
+                          })}
+                    </div>
+                    <div className={css.rightSection}>
+                      Total
+                      <span className={css.total}>
+                        $<span className={css.totalAcc}>
+                          {totals.total.toLocaleString('en-US', { 
+                            minimumFractionDigits: 2, 
+                            maximumFractionDigits: 2 
+                          })}
+                        </span>
                       </span>
                     </div>
-                    <div className={css.productInfo}>
+                  </div>
-                      <div className={css.leftSection}>
+
-                        <OptimizedImage
+                  {/* 해당 파트너사의 상품 리스트 - map으로 반복 */}
-                          className={css.productImage}
+                  {group.items.map((item, groupIndex) => {
-                          src={imageSrc}
+                    // CheckOutPanel과 동일한 이미지 처리 방식 적용
-                          fallbackSrc={defaultImage}
+                    const normalizedItem = normalizeProductDataForDisplay(item);
-                          alt={item.prdtNm || 'Product Image'}
+
-                        />
+                    // ✅ 이미지 우선순위: ProductAllSection 고품질 이미지 → 기타 모든 이미지 필드
-                      </div>
+                    const imageSrc = (item.imgUrls600 && item.imgUrls600[0]) ||  // ✅ ProductAllSection의 고품질 이미지
-                      <div className={css.rightSection}>
+                                    (item.thumbnailUrl960) ||  // ✅ 960px 썸네일
-                        <div className={css.productNm}>
+                                    (normalizedItem.imgUrls && normalizedItem.imgUrls[0]?.imgUrl) ||
-                          {item.prdtNm}
+                                    (item.imgUrls && item.imgUrls[0]?.imgUrl) ||
-                        </div>
+                                    (item.imgList && item.imgList[0]?.imgUrl) ||
-                        {item.optNm && (
+                                    normalizedItem.imgUrl ||
-                          <div className={css.optionNm}>{item.optNm}</div>
+                                    item.imgUrl ||
-                        )}
+                                    item.thumbnailUrl ||
-                        <div className={css.accountBox}>
+                                    defaultImage;
-                          <span className={css.account}>
+
-                            ${parseFloat(item.price3 || item.price2 || 0).toLocaleString('en-US', { 
+                    return (
-                              minimumFractionDigits: 2, 
+                    <div key={item.prodSno} className={css.product}>
-                              maximumFractionDigits: 2 
+                      <div className={css.leftBox}>
-                            })}
+                        <div className={css.checkBox}>
+                          <TCheckBoxSquare
+                            className={css.customeCheckbox}
+                            spotlightId={`productCheckbox-${item.prodSno}`}
+                            selected={isItemSelected(item.prodSno)}
+                            onToggle={handleCheckboxToggle(item.prodSno)}
+                            onFocus={()=> {handleFocus(index, groupIndex)}}
+                          />
+                          <span className={css.productId}>
+                            ID : {item.prdtId}
                           </span>
-                          <div className={css.accountInfo}>
+                        </div>
-                            {item.price2 && (
+                        <div className={css.productInfo}>
-                              <span className={css.originalAcc}>
+                          <div className={css.leftSection}>
-                                ${parseFloat(item.price2).toLocaleString('en-US', { 
+                            <OptimizedImage
+                              className={css.productImage}
+                              src={imageSrc}
+                              fallbackSrc={defaultImage}
+                              alt={item.prdtNm || 'Product Image'}
+                            />
+                          </div>
+                          <div className={css.rightSection}>
+                            <div className={css.productNm}>
+                              {item.prdtNm}
+                            </div>
+                            {item.optNm && (
+                              <div className={css.optionNm}>{item.optNm}</div>
+                            )}
+                            <div className={css.accountBox}>
+                              <span className={css.account}>
+                                ${parseFloat(item.price3 || item.price2 || 0).toLocaleString('en-US', { 
                                   minimumFractionDigits: 2, 
                                   maximumFractionDigits: 2 
                                 })}
                               </span>
-                            )}
+                              <div className={css.accountInfo}>
-                            {item.price5 && parseFloat(item.price5) > 0 && (
+                                {item.price2 && (
-                              <span className={css.optionAcc}>
+                                  <span className={css.originalAcc}>
-                                OPTION : ${parseFloat(item.price5).toLocaleString('en-US', { 
+                                    ${parseFloat(item.price2).toLocaleString('en-US', { 
-                                        minimumFractionDigits: 2, 
+                                      minimumFractionDigits: 2, 
-                                        maximumFractionDigits: 2 
+                                      maximumFractionDigits: 2 
-                                      })}
+                                    })}
-                              </span>
+                                  </span>
-                            )}
+                                )}
-                            {item.shippingCharge && parseFloat(item.shippingCharge) > 0 && (
+                                {item.price5 && parseFloat(item.price5) > 0 && (
-                              <span className={css.shippingAcc}>
+                                  <span className={css.optionAcc}>
-                                S&H: ${parseFloat(item.shippingCharge).toLocaleString('en-US', { 
+                                    OPTION : ${parseFloat(item.price5).toLocaleString('en-US', { 
-                                        minimumFractionDigits: 2, 
+                                            minimumFractionDigits: 2, 
-                                        maximumFractionDigits: 2 
+                                            maximumFractionDigits: 2 
-                                      })}
+                                          })}
-                              </span>
+                                  </span>
-                            )}
+                                )}
+                                {item.shippingCharge && parseFloat(item.shippingCharge) > 0 && (
+                                  <span className={css.shippingAcc}>
+                                    S&H: ${parseFloat(item.shippingCharge).toLocaleString('en-US', { 
+                                            minimumFractionDigits: 2, 
+                                            maximumFractionDigits: 2 
+                                          })}
+                                  </span>
+                                )}
+                              </div>
+                            </div>
+                            <div className={css.eaBox}>
+                              <TButton
+                                className={classNames(
+                                  css.minusBox,
+                                  item.prodQty === 1 ? css.dimm : ""
+                                )}
+                                size="cartEa"
+                                onClick={() => handleDecreseClick(item.prodSno, item.prodQty)}
+                                spotlightId={"pd_ea_decrese"}
+                                spotlightDisabled={item.prodQty === 1}
+                              />
+                              <div className={css.ea}>{item.prodQty}</div>
+                              <TButton
+                                onClick={() => handleIncreseClick(item.prodSno, item.prodQty)}
+                                className={css.plusBox}
+                                spotlightId={"pd_ea_increse"}
+                                size="cartEa"
+                              />
+                            </div>
                           </div>
                         </div>
-                        <div className={css.eaBox}>
+                      </div>
-                          <TButton
+                      <div className={css.rightBox}>
-                            className={classNames(
+                        <TButton
-                              css.minusBox,
+                          className={css.trashImg}
-                              item.prodQty === 1 ? css.dimm : ""
+                          size="cartTrash"
-                            )}
+                          onClick={() => handleDeleteClick(item.prodSno)}
-                            size="cartEa"
+                        />
-                            onClick={() => handleDecreseClick(item.prodSno, item.prodQty)}
-                            spotlightId={"pd_ea_decrese"}
-                            spotlightDisabled={item.prodQty === 1}
-                          />
-                          <div className={css.ea}>{item.prodQty}</div>
-                          <TButton
-                            onClick={() => handleIncreseClick(item.prodSno, item.prodQty)}
-                            className={css.plusBox}
-                            spotlightId={"pd_ea_increse"}
-                            size="cartEa"
-                          />
-                        </div>
                       </div>
                     </div>
-                  </div>
+                    );
-                  <div className={css.rightBox}>
+                  })}
-                    <TButton
-                      className={css.trashImg}
-                      size="cartTrash"
-                      onClick={() => handleDeleteClick(item.prodSno)}
-                    />
-                  </div>
                 </div>
-                );
+              </Container>
-              })}
             </div>
-          </Container>
           );
         })}
       </>

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>
   );
 };