[상품 상세] 장바구니 담을때 팝업 노출관련 수정

- 장바구니 담을때 토스트 블러로 인하여 자동으로 닫히는부분 에 대한 수정
 - 매직마우스는 상관이없지만 4방향키에서 문제가 있어 이부분에 대한 수정.
This commit is contained in:
junghoon86.park
2025-11-26 20:39:21 +09:00
parent 9439630bad
commit 2289001006
3 changed files with 26 additions and 9 deletions

View File

@@ -58,14 +58,18 @@ export default function TToastEnhanced({
const timerRef = useRef(null); const timerRef = useRef(null);
const progressRef = useRef(null); const progressRef = useRef(null);
const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible); const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible);
const { popupVisible } = useSelector((state) => state.common.popup);
// BuyOption 포커스 이탈 감지 핸들러 // BuyOption 포커스 이탈 감지 핸들러
const handleBuyOptionBlur = (e) => { const handleBuyOptionBlur = (e) => {
// 포커스가 BuyOption 컴포넌트 외부로 이동했는지 확인 // 포커스가 BuyOption 컴포넌트 외부로 이동했는지 확인
if (!e.currentTarget.contains(e.relatedTarget) && !cursorVisible) { if(popupVisible){
return;
}
if (!e.currentTarget.contains(e.relatedTarget)) {
console.log('[TToastEnhanced] Focus left BuyOption - closing toast'); console.log('[TToastEnhanced] Focus left BuyOption - closing toast');
handleClose(); handleClose();
} }
}; };
// 애니메이션 시작 // 애니메이션 시작
@@ -123,7 +127,9 @@ export default function TToastEnhanced({
console.log( console.log(
`[TToastEnhanced] Focus left ${type} after receiving focus - closing toast` `[TToastEnhanced] Focus left ${type} after receiving focus - closing toast`
); );
handleClose(); if(type !== "buyOption"){
handleClose();
}
} }
} }
}; };
@@ -212,7 +218,7 @@ export default function TToastEnhanced({
{...rest} {...rest}
> >
{type === 'buyOption' ? ( {type === 'buyOption' ? (
<div ref={buyOptionRef} onBlur={handleBuyOptionBlur}> <div ref={buyOptionRef} onBlur={cursorVisible ? handleBuyOptionBlur : null}>
<BuyOption <BuyOption
productInfo={productInfo} productInfo={productInfo}
selectedPatnrId={selectedPatnrId} selectedPatnrId={selectedPatnrId}

View File

@@ -266,6 +266,7 @@ export default function ProductAllSection({
const { partnerCoupon } = useSelector((state) => state.coupon.productCouponSearchData); const { partnerCoupon } = useSelector((state) => state.coupon.productCouponSearchData);
const { userNumber } = useSelector((state) => state.common.appStatus.loginUserData); const { userNumber } = useSelector((state) => state.common.appStatus.loginUserData);
const { popupVisible, activePopup } = useSelector((state) => state.common.popup); const { popupVisible, activePopup } = useSelector((state) => state.common.popup);
const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible);
// ProductVideo 버전 관리 (1: 기존 modal 방식, 2: 내장 방식 , 3: 비디오 생략) // ProductVideo 버전 관리 (1: 기존 modal 방식, 2: 내장 방식 , 3: 비디오 생략)
const [productVideoVersion, setProductVideoVersion] = useState(1); const [productVideoVersion, setProductVideoVersion] = useState(1);
// 비디오 재생 여부 flag (재생 전에는 minimize/restore 로직 비활성화) // 비디오 재생 여부 flag (재생 전에는 minimize/restore 로직 비활성화)
@@ -877,7 +878,7 @@ export default function ProductAllSection({
); );
//닫히도록 //닫히도록
const handleCloseToast = useCallback(() => { const handleCloseToast = useCallback((e) => {
// 팝업이 열려있으면 닫지 않음 // 팝업이 열려있으면 닫지 않음
if (popupVisible) { if (popupVisible) {
return; // 팝업이 활성이면 무시 return; // 팝업이 활성이면 무시
@@ -886,6 +887,15 @@ export default function ProductAllSection({
setOpenToast(false); setOpenToast(false);
}, [dispatch, popupVisible]); }, [dispatch, popupVisible]);
const handleFocus = useCallback((e)=>{
// 팝업이 열려있으면 닫지 않음
if (popupVisible && cursorVisible) {
return; // 팝업이 활성이면 무시
}
dispatch(clearAllToasts());
setOpenToast(false);
},[dispatch, popupVisible, cursorVisible])
// 스크롤 컨테이너의 클릭 이벤트 추적용 로깅 // 스크롤 컨테이너의 클릭 이벤트 추적용 로깅
const handleScrollContainerClick = useCallback((e) => { const handleScrollContainerClick = useCallback((e) => {
// console.log('📱 [ProductAllSection] TScrollerDetail onClick 감지됨', { // console.log('📱 [ProductAllSection] TScrollerDetail onClick 감지됨', {
@@ -1493,7 +1503,7 @@ export default function ProductAllSection({
} }
return ( return (
<HorizontalContainer className={css.detailArea} onClick={handleCloseToast}> <HorizontalContainer className={css.detailArea} onClick={handleCloseToast} onFocus={handleFocus}>
{/* Left Margin Section - 60px */} {/* Left Margin Section - 60px */}
<div className={css.leftMarginSection}></div> <div className={css.leftMarginSection}></div>

View File

@@ -1247,7 +1247,7 @@ const BuyOption = ({
}) })
); );
} }
dispatch(clearAllToasts()); // dispatch(clearAllToasts());
}, [ }, [
dispatch, dispatch,
userNumber, userNumber,
@@ -1458,6 +1458,7 @@ const BuyOption = ({
const handleCartMove = useCallback(() => { const handleCartMove = useCallback(() => {
dispatch(setHidePopup()); dispatch(setHidePopup());
clearAllToasts();
dispatch( dispatch(
pushPanel({ pushPanel({
name: Config.panel_names.CART_PANEL, name: Config.panel_names.CART_PANEL,