[251119] feat: FloatingGradientLayer..Experimental..3

🕐 커밋 시간: 2025. 11. 19. 19:56:11

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +95줄
  • 삭제: -27줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선

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

@@ -148,24 +148,16 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
     };
   }, [dispatch]);
 
-  // ✅ DOM 렌더링 후 그라데이션 배경 숨기기 - HomePanel→DetailPanel 전환 완료 시
-  useEffect(() => {
-    // DOM이 렌더링된 후 약간의 지연 시간을 두고 그라데이션 숨김
-    const timer = setTimeout(() => {
-      dispatch(updateHomeInfo({
-        name: panel_names.HOME_PANEL,
-        panelInfo: {
-          showGradientBackground: false,
-        }
-      }));
-      console.log('[TRACE-GRADIENT] 🔴 DetailPanel mounted 100ms timeout set showGradientBackground: false');
-    }, 100); // 100ms 지연으로 DOM 렌더링 완료 후 실행
-
-    return () => {
-      clearTimeout(timer); // 컴포넌트 언마운트 시 타이머 정리
-      console.log('[TRACE-GRADIENT] 🔴 DetailPanel unmount - gradient timer cleared');
-    };
-  }, [dispatch]); // dispatch 포함
+  // ✅ DetailPanelBackground 이미지 완전 렌더링 후 그라데이션 배경 숨기기
+  const handleBackgroundImageReady = useCallback(() => {
+    console.log('[TRACE-GRADIENT] ✅ DetailPanel - BackgroundImage fully rendered, hiding gradient');
+    dispatch(updateHomeInfo({
+      name: panel_names.HOME_PANEL,
+      panelInfo: {
+        showGradientBackground: false,
+      }
+    }));
+  }, [dispatch]);
 
   // ✅ [251118] DetailPanel이 사라질 때 HomePanel 활성화
   useEffect(() => {
@@ -805,8 +797,12 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
 
   return (
     <div ref={containerRef}>
-    
-      <DetailPanelBackground launchedFromPlayer={panelLaunchedFromPlayer} patnrId={panelPatnrId}/>
+
+      <DetailPanelBackground
+        launchedFromPlayer={panelLaunchedFromPlayer}
+        patnrId={panelPatnrId}
+        onImageReady={handleBackgroundImageReady}
+      />
 
       <TPanel
         isTabActivated={false}