[buyoption] 마우스, 4방향키 수정

- 마우스 부분과 4방향키 처리 관련 수정.

com.twin.app.shoptime/src/components/TToast/TToastEnhanced.jsx

@@ -1,7 +1,17 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
 import classNames from 'classnames';
-import { useDispatch } from 'react-redux';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
+
 import Spottable from '@enact/spotlight/Spottable';
+
 import { changeAppStatus } from '../../actions/commonActions';
 import BuyOption from '../../views/DetailPanel/components/BuyOption';
 import css from './TToastEnhanced.module.less';
@@ -31,11 +41,12 @@ export default function TToastEnhanced({
   const [isExiting, setIsExiting] = useState(false);
   const timerRef = useRef(null);
   const progressRef = useRef(null);
+  const cursorVisible = useSelector((state) => state.common.appStatus.cursorVisible);
 
   // BuyOption 포커스 이탈 감지 핸들러
   const handleBuyOptionBlur = (e) => {
     // 포커스가 BuyOption 컴포넌트 외부로 이동했는지 확인
-    if (!e.currentTarget.contains(e.relatedTarget)) {
+    if (!e.currentTarget.contains(e.relatedTarget) && !cursorVisible) {
       console.log('[TToastEnhanced] Focus left BuyOption - closing toast');
       handleClose();
     }
@@ -67,24 +78,26 @@ export default function TToastEnhanced({
 
       const handleFocusChange = (e) => {
         // 1. BuyOption 내부로 포커스가 들어온 경우 - 플래그를 true로 설정
-        if (buyOptionRef.current && buyOptionRef.current.contains(e.target)) {
-          if (!hasBuyOptionReceivedFocus) {
-            hasBuyOptionReceivedFocus = true;
-            console.log('[TToastEnhanced] BuyOption received focus - now tracking focus leaving');
+        if(!cursorVisible){
+          if (buyOptionRef.current && buyOptionRef.current.contains(e.target)) {
+            if (!hasBuyOptionReceivedFocus) {
+              hasBuyOptionReceivedFocus = true;
+              console.log('[TToastEnhanced] BuyOption received focus - now tracking focus leaving');
+            }
+            return; // 내부에 포커스가 있으면 아무것도 하지 않음
           }
-          return; // 내부에 포커스가 있으면 아무것도 하지 않음
-        }
 
-        // 2. BuyOption이 포커스를 받은 적이 있고, 현재 외부로 포커스가 이동한 경우 - Toast 닫기
-        if (
-          hasBuyOptionReceivedFocus &&
-          buyOptionRef.current &&
-          !buyOptionRef.current.contains(e.target)
-        ) {
-          console.log(
-            '[TToastEnhanced] Focus left BuyOption after receiving focus - closing toast'
-          );
-          handleClose();
+          // 2. BuyOption이 포커스를 받은 적이 있고, 현재 외부로 포커스가 이동한 경우 - Toast 닫기
+          if (
+            hasBuyOptionReceivedFocus &&
+            buyOptionRef.current &&
+            !buyOptionRef.current.contains(e.target)
+          ) {
+            console.log(
+              '[TToastEnhanced] Focus left BuyOption after receiving focus - closing toast'
+            );
+            handleClose();
+          }
         }
       };
 

com.twin.app.shoptime/src/components/TToast/TToastEnhanced.module.less

@@ -112,7 +112,7 @@
 }
 
 .buyOption {
-  height: 360px;
+  height: 400px;
 }
 
 // 컨텐츠 스타일 - 간단한 메시지만

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx

@@ -30,7 +30,11 @@ import indicatorDefaultImage
 import { minimizeModalMedia } from '../../../actions/mediaActions';
 import { pauseFullscreenVideo } from '../../../actions/playActions';
 import { resetShowAllReviews } from '../../../actions/productActions';
-import { showToast } from '../../../actions/toastActions';
+import {
+  clearAllToasts,
+  removeToast,
+  showToast,
+} from '../../../actions/toastActions';
 // ProductInfoSection imports
 import TButton from '../../../components/TButton/TButton';
 import useReviews from '../../../hooks/useReviews/useReviews';
@@ -292,10 +296,12 @@ export default function ProductAllSection({
   }, []); // 빈 dependency array = 마운트 시에만 실행
 
   // BUY NOW 버튼 클릭 핸들러 - Toast로 BuyOption 표시
-  const handleBuyNowClick = useCallback(() => {
-    // console.log('[BuyNow] Buy Now button clicked');
+  const handleBuyNowClick = useCallback((e) => {
+    // console.log('[BuyNow] Buy Now button clicked');    
+    e.stopPropagation();
     dispatch(
       showToast({
+        id: productData.prdtId,
         message: '',
         type: 'buyOption',
         duration: 0,
@@ -310,6 +316,11 @@ export default function ProductAllSection({
     );
   }, [dispatch]);
 
+  //닫히도록
+  const handleCloseToast = useCallback(() => {
+    dispatch(clearAllToasts())
+  },[dispatch])
+
   // ADD TO CART 버튼 클릭 핸들러
   const handleAddToCartClick = useCallback(() => {
     // console.log('[AddToCart] Add To Cart button clicked');
@@ -639,7 +650,7 @@ export default function ProductAllSection({
   }, []);
 
   return (
-    <HorizontalContainer className={css.detailArea}>
+    <HorizontalContainer className={css.detailArea} onClick={handleCloseToast}>
       {/* Left Margin Section - 60px */}
       <div className={css.leftMarginSection}></div>
 

com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.module.less

@@ -1,7 +1,7 @@
 // BEM Style: buy-option (Block)
 .buy_option {
   width: 100%;
-  height: 360px;
+  height: 400px;
   padding: 60px 70px;
   background:
     linear-gradient(