[250929] feat: BuyOption onBlur toast사라짐 구현

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

@@ -31,6 +31,15 @@ export default function TToastEnhanced({
   const timerRef = useRef(null);
   const progressRef = useRef(null);
 
+  // BuyOption 포커스 이탈 감지 핸들러
+  const handleBuyOptionBlur = (e) => {
+    // 포커스가 BuyOption 컴포넌트 외부로 이동했는지 확인
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      console.log('[TToastEnhanced] Focus left BuyOption - closing toast');
+      handleClose();
+    }
+  };
+
   // 애니메이션 시작
   useEffect(() => {
     // 약간의 지연을 두고 애니메이션 시작
@@ -46,6 +55,26 @@ export default function TToastEnhanced({
     };
   }, []);
 
+  // BuyOption 컨테이너 ref
+  const buyOptionRef = useRef(null);
+
+  // BuyOption 타입일 때 전역 포커스 감지
+  useEffect(() => {
+    if (type === 'buyOption') {
+      const handleFocusChange = (e) => {
+        // BuyOption 컨테이너 외부로 포커스가 이동했는지 확인
+        if (buyOptionRef.current && !buyOptionRef.current.contains(e.target)) {
+          console.log('[TToastEnhanced] Focus moved outside BuyOption toast - closing');
+          handleClose();
+        }
+      };
+
+      // focusin 이벤트로 포커스 변경 감지
+      document.addEventListener('focusin', handleFocusChange);
+      return () => document.removeEventListener('focusin', handleFocusChange);
+    }
+  }, [type]);
+
   const startTimer = () => {
     if (duration > 0) {
       timerRef.current = setTimeout(handleClose, duration);
@@ -113,7 +142,9 @@ export default function TToastEnhanced({
       {...rest}
     >
       {type === 'buyOption' ? (
-        <BuyOption />
+        <div ref={buyOptionRef} onBlur={handleBuyOptionBlur}>
+          <BuyOption />
+        </div>
       ) : (
         <div className={css.content}>
           <div className={css.message}>{text}</div>