[디테일 수정]

- 현재 매직마우스로는 팝업및 노출 정상적으로 가능하지만 4방향키 수정진행해야함.
 - 토스트가 유지가 안됌에 따른 수정이 더 필요함.
This commit is contained in:
junghoon86.park
2025-11-21 18:22:07 +09:00
parent 1f7020b28b
commit 8cce06bcc3
5 changed files with 80 additions and 22 deletions

View File

@@ -113,6 +113,7 @@ export const ACTIVE_POPUP = {
toast: 'toast', toast: 'toast',
optionalConfirm: 'optionalConfirm', optionalConfirm: 'optionalConfirm',
energyPopup: 'energyPopup', energyPopup: 'energyPopup',
addCartPopup: 'addCartPopup',
}; };
export const DEBUG_VIDEO_SUBTITLE_TEST = false; export const DEBUG_VIDEO_SUBTITLE_TEST = false;
export const AUTO_SCROLL_DELAY = 600; export const AUTO_SCROLL_DELAY = 600;

View File

@@ -22,6 +22,7 @@ import {
popPanel, popPanel,
updatePanel, updatePanel,
} from '../../actions/panelActions'; } from '../../actions/panelActions';
import { clearAllToasts } from '../../actions/toastActions';
import TBody from '../../components/TBody/TBody'; import TBody from '../../components/TBody/TBody';
import THeader from '../../components/THeader/THeader'; import THeader from '../../components/THeader/THeader';
import TPanel from '../../components/TPanel/TPanel'; import TPanel from '../../components/TPanel/TPanel';
@@ -207,6 +208,11 @@ export default function CartPanel({ spotlightId, scrollOptions = [], panelInfo }
} }
},[userNumber, dispatch]) },[userNumber, dispatch])
useEffect(()=>{
dispatch(clearAllToasts());
//혹시라도 넘어올 토스트 제거.
},[])
return ( return (
<TPanel spotlightId={spotlightId} isTabActivated={true}> <TPanel spotlightId={spotlightId} isTabActivated={true}>
<TBody className={css.tbody} cbScrollTo={getScrollTo}> <TBody className={css.tbody} cbScrollTo={getScrollTo}>

View File

@@ -431,8 +431,11 @@ export default function ProductAllSection({
> >
{downloadCouponArr.length > 0 && {downloadCouponArr.length > 0 &&
downloadCouponArr.includes(cpnSno) downloadCouponArr.includes(cpnSno)
? $L("DOWNLOAD COMPLETED") ?
: $L("DOWNLOAD")} $L("DOWNLOAD COMPLETED")
:
$L("DOWNLOAD")
}
</div> </div>
)} )}
</div> </div>
@@ -663,9 +666,13 @@ export default function ProductAllSection({
//닫히도록 //닫히도록
const handleCloseToast = useCallback(() => { const handleCloseToast = useCallback(() => {
dispatch(clearAllToasts()); // 팝업이 열려있으면 닫지 않음
setOpenToast(false); if (popupVisible) {
}, [dispatch]); return; // 팝업이 활성이면 무시
}
dispatch(clearAllToasts());
setOpenToast(false);
}, [dispatch, popupVisible]);
// 스크롤 컨테이너의 클릭 이벤트 추적용 로깅 // 스크롤 컨테이너의 클릭 이벤트 추적용 로깅
const handleScrollContainerClick = useCallback((e) => { const handleScrollContainerClick = useCallback((e) => {

View File

@@ -639,7 +639,8 @@ const BuyOption = ({
Spotlight.focus('buy-option-buy-now-button'); Spotlight.focus('buy-option-buy-now-button');
} }
const handleBuyNowClick = useCallback(() => { const handleBuyNowClick = useCallback((e) => {
e.stopPropagation()
console.log('%c🔥🔥🔥 BUY NOW CLICKED! FUNCTION CALLED! 🔥🔥🔥', 'background: red; color: white; font-size: 16px; font-weight: bold; padding: 5px;'); console.log('%c🔥🔥🔥 BUY NOW CLICKED! FUNCTION CALLED! 🔥🔥🔥', 'background: red; color: white; font-size: 16px; font-weight: bold; padding: 5px;');
console.log('%cproductInfo exists:', 'background: red; color: white; padding: 3px;', !!productInfo); console.log('%cproductInfo exists:', 'background: red; color: white; padding: 3px;', !!productInfo);
console.log('%cuserNumber exists:', 'background: red; color: white; padding: 3px;', !!userNumber); console.log('%cuserNumber exists:', 'background: red; color: white; padding: 3px;', !!userNumber);
@@ -1013,7 +1014,7 @@ const BuyOption = ({
console.log('%c[BuyOption] ✅ AFTER pushPanel dispatch', 'background: orange; color: white; font-weight: bold; padding: 5px;'); console.log('%c[BuyOption] ✅ AFTER pushPanel dispatch', 'background: orange; color: white; font-weight: bold; padding: 5px;');
// Toast 정리는 성공적으로 패널 이동 후에만 실행 // Toast 정리는 성공적으로 패널 이동 후에만 실행
dispatch(clearAllToasts()); // dispatch(clearAllToasts());
} }
} }
}, [ }, [
@@ -1035,7 +1036,8 @@ const BuyOption = ({
]); ]);
// ADD TO CART 버튼 클릭 핸들러 // ADD TO CART 버튼 클릭 핸들러
const handleAddToCartClick = useCallback(() => { const handleAddToCartClick = useCallback((e) => {
e.stopPropagation();
console.log('[BuyOption] ADD TO CART clicked'); console.log('[BuyOption] ADD TO CART clicked');
const isMock = isMockMode; const isMock = isMockMode;
@@ -1180,17 +1182,18 @@ const BuyOption = ({
name: optionLabel, name: optionLabel,
price: optionForUse?.optPrc || '0.00', price: optionForUse?.optPrc || '0.00',
}; };
dispatch(setShowPopup(Config.ACTIVE_POPUP.addCartPopup));
dispatch( return;
pushPanel({ // dispatch(
name: Config.panel_names.CART_PANEL, // pushPanel({
panelInfo: { // name: Config.panel_names.CART_PANEL,
productInfo: productInfoForCart, // panelInfo: {
optionInfo: optionInfoForCart, // productInfo: productInfoForCart,
quantity: effectiveQuantity, // optionInfo: optionInfoForCart,
}, // quantity: effectiveQuantity,
}) // },
); // })
// );
} else { } else {
console.log('[BuyOption] Mock Mode - Adding to cart (Mock)'); console.log('[BuyOption] Mock Mode - Adding to cart (Mock)');
@@ -1403,7 +1406,7 @@ const BuyOption = ({
if (typeof spotlightId === 'string') { if (typeof spotlightId === 'string') {
currentSpot = spotlightId; currentSpot = spotlightId;
} else { } else {
currentSpot = 'buy-option-buy-now-button'; currentSpot = 'buy-option-add-to-cart-button';
} }
if (currentSpot) { if (currentSpot) {
@@ -1447,8 +1450,25 @@ const BuyOption = ({
} }
}, [dispatch, hasOnClose, isOptionValue, webOSVersion, userNumber]); }, [dispatch, hasOnClose, isOptionValue, webOSVersion, userNumber]);
useEffect(()=>{
return(()=>{
dispatch(clearAllToasts());
})
},[])
const handleCartMove = useCallback(() => {
dispatch(setHidePopup());
dispatch(
pushPanel({
name: Config.panel_names.CART_PANEL,
})
)
},[dispatch])
return ( return (
<Container className={styles.buy_option}> <Container
className={styles.buy_option}
>
<div className={styles.buy_option__left_section}> <div className={styles.buy_option__left_section}>
{/* 동적 옵션 렌더링 */} {/* 동적 옵션 렌더링 */}
{productOptionInfos && {productOptionInfos &&
@@ -1582,8 +1602,24 @@ const BuyOption = ({
onClose={onClose} onClose={onClose}
/> />
)} )}
{activePopup === Config.ACTIVE_POPUP.addCartPopup && (
<TPopUp
kind="textPopup"
hasText
open={popupVisible}
text={"Added to Cart"}
hasButton
hasOnClose={hasOnClose}
button1Text={$L('VIEW CART')}
button2Text={$L('CONTINUE SHOPPING')}
onClick={handleCartMove}
onClose={onClose}
/>
)}
</Container> </Container>
); );
}; };
export default BuyOption; export default BuyOption;

View File

@@ -133,3 +133,11 @@
text-align: center; text-align: center;
} }
} }
[id="floatLayer"] > div:not([id]) > div > div:nth-child(2) {
bottom: 54%;
transform: translateY(50%);
overflow: initial;
}