[상품 상세] 장바구니 담을때 팝업 노출관련 수정
- 장바구니 담을때 토스트 블러로 인하여 자동으로 닫히는부분 에 대한 수정 - 매직마우스는 상관이없지만 4방향키에서 문제가 있어 이부분에 대한 수정.
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user