[디테일] 하단 구매 토스트 노출 관련수정

- 디테일 상단 백버튼에 포커스가면 clearAllToasts 처리.
This commit is contained in:
junghoon86.park
2025-10-30 14:26:29 +09:00
parent b727499e4b
commit 8e3d03ef19
2 changed files with 14 additions and 0 deletions

View File

@@ -35,6 +35,7 @@ import {
clearProductDetail, clearProductDetail,
getProductOptionId, getProductOptionId,
} from '../../actions/productActions'; } from '../../actions/productActions';
import { clearAllToasts } from '../../actions/toastActions';
import TBody from '../../components/TBody/TBody'; import TBody from '../../components/TBody/TBody';
import TPanel from '../../components/TPanel/TPanel'; import TPanel from '../../components/TPanel/TPanel';
import { panel_names } from '../../utils/Config'; import { panel_names } from '../../utils/Config';
@@ -180,6 +181,10 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
[dispatch, panelInfo, panels] [dispatch, panelInfo, panels]
); );
const onBackButtonFocus = useCallback(() => {
dispatch(clearAllToasts());
},[dispatch])
const handleScrollToSection = useCallback( const handleScrollToSection = useCallback(
(sectionId) => { (sectionId) => {
console.log('DetailPanel: handleScrollToSection called with:', sectionId); console.log('DetailPanel: handleScrollToSection called with:', sectionId);
@@ -681,6 +686,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
title={headerTitle} title={headerTitle}
onBackButton onBackButton
onClick={onClick(false)} onClick={onClick(false)}
onBackButtonFocus={onBackButtonFocus}
spotlightDisabled={isLoading} spotlightDisabled={isLoading}
onSpotlightUp={onSpotlightUpTButton} onSpotlightUp={onSpotlightUpTButton}
onSpotlightLeft={onSpotlightUpTButton} onSpotlightLeft={onSpotlightUpTButton}

View File

@@ -28,6 +28,7 @@ export default function THeaderCustom({
onBackButton, onBackButton,
onSpotlightUp, onSpotlightUp,
onSpotlightLeft, onSpotlightLeft,
onBackButtonFocus,
marqueeDisabled = true, marqueeDisabled = true,
onClick, onClick,
ariaLabel, ariaLabel,
@@ -65,12 +66,19 @@ export default function THeaderCustom({
} }
}; };
const _onBackButtonFocus = useCallback(() => {
if(onBackButtonFocus){
onBackButtonFocus();
}
},[onBackButtonFocus])
return ( return (
<Container className={classNames(css.tHeaderCustom, className)} {...rest}> <Container className={classNames(css.tHeaderCustom, className)} {...rest}>
{onBackButton && ( {onBackButton && (
<SpottableComponent <SpottableComponent
className={css.button} className={css.button}
onClick={_onClick} onClick={_onClick}
onFocus={_onBackButtonFocus}
spotlightId={"spotlightId_backBtn"} spotlightId={"spotlightId_backBtn"}
onSpotlightUp={_onSpotlightUp} onSpotlightUp={_onSpotlightUp}
onSpotlightLeft={_onSpotlightLeft} onSpotlightLeft={_onSpotlightLeft}