[카트 장바구니 포커스 수정]
- 첫번째 체크박스에 포커스 갔을시에 최상단 스크롤되도록 변경.
This commit is contained in:
junghoon86.park
@@ -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 />
|
||||
|
||||
@@ -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 className={css.partnerSection}>
|
||||
{/* 파트너사 정보 - 한 번만 표시 */}
|
||||
<div className={css.productCompany}>
|
||||
<div className={css.logo}>
|
||||
<CustomImage
|
||||
className={css.img}
|
||||
src={group.partnerInfo.logo}
|
||||
fallbackSrc={defaultImage}
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{/* 해당 파트너사의 상품 리스트 - 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)}
|
||||
<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}>
|
||||
<div className={css.logo}>
|
||||
<CustomImage
|
||||
className={css.img}
|
||||
src={group.partnerInfo.logo}
|
||||
fallbackSrc={defaultImage}
|
||||
/>
|
||||
<span className={css.productId}>
|
||||
ID : {item.prdtId}
|
||||
</div>
|
||||
<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 className={css.leftSection}>
|
||||
<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
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 해당 파트너사의 상품 리스트 - map으로 반복 */}
|
||||
{group.items.map((item, groupIndex) => {
|
||||
// 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)}
|
||||
onFocus={()=> {handleFocus(index, groupIndex)}}
|
||||
/>
|
||||
<span className={css.productId}>
|
||||
ID : {item.prdtId}
|
||||
</span>
|
||||
<div className={css.accountInfo}>
|
||||
{item.price2 && (
|
||||
<span className={css.originalAcc}>
|
||||
${parseFloat(item.price2).toLocaleString('en-US', {
|
||||
</div>
|
||||
<div className={css.productInfo}>
|
||||
<div className={css.leftSection}>
|
||||
<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>
|
||||
)}
|
||||
{item.price5 && parseFloat(item.price5) > 0 && (
|
||||
<span className={css.optionAcc}>
|
||||
OPTION : ${parseFloat(item.price5).toLocaleString('en-US', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
})}
|
||||
</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 className={css.accountInfo}>
|
||||
{item.price2 && (
|
||||
<span className={css.originalAcc}>
|
||||
${parseFloat(item.price2).toLocaleString('en-US', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
{item.price5 && parseFloat(item.price5) > 0 && (
|
||||
<span className={css.optionAcc}>
|
||||
OPTION : ${parseFloat(item.price5).toLocaleString('en-US', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
})}
|
||||
</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}>
|
||||
<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 className={css.rightBox}>
|
||||
<TButton
|
||||
className={css.trashImg}
|
||||
size="cartTrash"
|
||||
onClick={() => handleDeleteClick(item.prodSno)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.rightBox}>
|
||||
<TButton
|
||||
className={css.trashImg}
|
||||
size="cartTrash"
|
||||
onClick={() => handleDeleteClick(item.prodSno)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Container>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
@import "../../style/CommonStyle.module.less";
|
||||
@import "../../style/utils.module.less";
|
||||
|
||||
.scrollMarker {
|
||||
height: 1px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.productBox {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user