[251011] feat: 3-Layer 패널구조 기능추가

🕐 커밋 시간: 2025. 10. 11. 18:57:13

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/MainView/MainView.jsx
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.module.less

🔧 주요 변경 내용:
  • 소규모 기능 개선

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

@@ -184,7 +184,25 @@ export default function MainView({ className, initService }) {
   const renderTopPanel = useCallback(() => {
     if (panels && panels.length > 0) {
       let renderingPanels = [];
-      if (
+
+      // 3-layer 구조 체크: PlayerPanel + DetailPanel + MediaPanel(modal)
+      const hasThreeLayerStructure =
+        panels.length >= 3 &&
+        // PlayerPanel이 맨 아래
+        (panels[panels.length - 3]?.name === Config.panel_names.PLAYER_PANEL ||
+          panels[panels.length - 3]?.name === Config.panel_names.PLAYER_PANEL_NEW) &&
+        // DetailPanel이 중간
+        panels[panels.length - 2]?.name === Config.panel_names.DETAIL_PANEL &&
+        // MediaPanel modal이 맨 위
+        panels[panels.length - 1]?.name === Config.panel_names.MEDIA_PANEL &&
+        panels[panels.length - 1]?.panelInfo?.modal === true;
+
+      if (hasThreeLayerStructure) {
+        console.log(
+          '[MainView] Rendering 3-layer structure: PlayerPanel + DetailPanel + MediaPanel'
+        );
+        renderingPanels = panels.slice(-3);
+      } else if (
         panels[panels.length - 1]?.name === Config.panel_names.PLAYER_PANEL ||
         panels[panels.length - 1]?.name === Config.panel_names.PLAYER_PANEL_NEW ||
         panels[panels.length - 1]?.name === Config.panel_names.MEDIA_PANEL ||
@@ -206,18 +224,20 @@ export default function MainView({ className, initService }) {
           )}
           {renderingPanels.map((panel, index) => {
             const Component = panelMap[panel.name];
-            // render last two panels if there's videoplayer
             let isPanelOnTop = false;
-            //preview video play case : two panels can be on top (normal + previewVideo)
-            {
-              /* if (
-              index === 0 &&
-              renderingPanels.length === 2 &&
-              renderingPanels[1].name === Config.panel_names.PLAYER_PANEL &&
-              renderingPanels[1].panelInfo.modal
-            ) { */
+
+            // 3-layer 케이스: 중간 패널(DetailPanel)이 onTop
+            if (renderingPanels.length === 3) {
+              if (index === 1) {
+                // DetailPanel (중간)
+                isPanelOnTop = true;
+                console.log('[MainView] 3-layer: DetailPanel is onTop');
+              }
+              // PlayerPanel (index 0): isOnTop = false (백그라운드)
+              // MediaPanel (index 2): isOnTop = false (modal overlay)
             }
-            if (
+            // 2-layer 케이스: modal이면 첫 번째가 onTop
+            else if (
               index === 0 &&
               renderingPanels.length === 2 &&
               (renderingPanels[1].name === Config.panel_names.PLAYER_PANEL ||
@@ -227,8 +247,8 @@ export default function MainView({ className, initService }) {
             ) {
               isPanelOnTop = true;
             }
-            // normal case
-            if (index === renderingPanels.length - 1) {
+            // 일반 케이스: 마지막 패널이 onTop
+            else if (index === renderingPanels.length - 1) {
               isPanelOnTop = true;
             }
 
@@ -322,13 +342,26 @@ export default function MainView({ className, initService }) {
   useEffect(() => {
     if (panels && panels.length > 0) {
       let panel = panels[panels.length - 1];
+
+      // 3-layer 구조 체크: PlayerPanel + DetailPanel + MediaPanel(modal)
       if (
+        panels.length >= 3 &&
+        panels[panels.length - 1]?.name === Config.panel_names.MEDIA_PANEL &&
+        panels[panels.length - 1]?.panelInfo?.modal &&
+        panels[panels.length - 2]?.name === Config.panel_names.DETAIL_PANEL
+      ) {
+        panel = panels[panels.length - 2]; // DetailPanel로 포커스
+        console.log('[MainView] 3-layer: Focus on DetailPanel');
+      }
+      // 2-layer modal 구조
+      else if (
         (panels[panels.length - 1].name === Config.panel_names.PLAYER_PANEL ||
           panels[panels.length - 1].name === Config.panel_names.MEDIA_PANEL) &&
         panels[panels.length - 1].panelInfo.modal
       ) {
         panel = panels[panels.length - 2];
       }
+
       if (panel?.name) {
         setTimeout(() => {
           // focus to panel if it's not preview video status changing case

com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.module.less

@@ -11,15 +11,25 @@
   left: 0;
   top: 0;
 
-  &.modal,
-  &.modal-minimized,
-  &.background {
-    /* 실제 css */
+  &.modal {
+    /* Modal 모드: DetailPanel(z-index:21) 위에 표시 */
+    width: 1px;
+    height: 1px;
+    left: -1px;
+    top: -1px;
+    pointer-events: none;
+    z-index: 22;  /* DetailPanel보다 위 */
+    background-color: @videoBackgroundColor;
+    overflow: visible;
+  }
+
+  &.modal-minimized,
+  &.background {
+    /* 백그라운드 모드: 맨 아래 */
     width: 1px;
     height: 1px;
     left: -1px;
     top: -1px;
-    /* //실제 css */
     pointer-events: none;
     z-index: 1;
     background-color: @videoBackgroundColor;