focus to panel if it's not preview video status changing case

com.twin.app.shoptime/src/reducers/panelReducer.js

@@ -3,7 +3,7 @@ import { panel_names } from "../utils/Config";
 
 const initialState = {
   panels: [],
-  isModalOpen: false,
+  lastPanelAction: "", //"", "push", "pop", "update", "reset", "previewPush", "previewPop", "previewUpdate"
 };
 
 // last one will be on top
@@ -47,28 +47,45 @@ export const panelsReducer = (state = initialState, action) => {
         }
       });
 
+      let lastAction = 'push';
+      if(action.payload.name === panel_names.PLAYER_PANEL){
+        if(action.payload.panelInfo.modal){
+          lastAction = 'previewPush';
+        }
+      }
       return {
         ...state,
         panels: newState,
+        lastPanelAction: lastAction
       };
     }
 
-    case types.POP_PANEL:
+    case types.POP_PANEL:{
+      let lastAction = 'pop';
       if (action.payload) {
+        if(state.lastPanelAction.indexOf('preview')=== 0 && action.payload === panel_names.PLAYER_PANEL){
+          lastAction = 'previewPop';
+        }
         return {
           ...state,
           panels: state.panels.filter((panel) => panel.name !== action.payload),
+          lastPanelAction: lastAction
         };
       } else {
+        if(state.lastPanelAction.indexOf('preview')===0){
+          lastAction = 'previewPop';
+        }
         return {
           ...state,
           panels: state.panels.slice(0, state.panels.length - 1),
+          lastPanelAction: lastAction
         };
       }
-
+    }
     case types.UPDATE_PANEL:
     {
       let lastIndex = -1;
+      let lastAction = 'update';
       // 배열의 끝에서부터 시작하여 조건에 맞는 마지막 인덱스 찾기
       for (let i = state.panels.length - 1; i >= 0; i--) {
         if (state.panels[i].name === action.payload.name) {
@@ -76,24 +93,26 @@ export const panelsReducer = (state = initialState, action) => {
           break; // 조건에 맞는 첫 번째 요소를 찾으면 루프 종료
         }
       }
+      const newPanels = state.panels.map((panel, index) =>
+        index === lastIndex
+          ? {
+              ...panel,
+              panelInfo: { ...panel.panelInfo, ...action.payload.panelInfo },
+            }
+          : panel
+      );
+      if(newPanels.length > 0){
+        const lastPanel = newPanels[newPanels.length-1];
+        if(lastPanel.name === panel_names.PLAYER_PANEL && lastPanel.panelInfo.modal){
+          lastAction = 'previewUpdate';
+        }
+      }
       return {
         ...state,
-        panels: state.panels.map((panel, index) =>
-          index === lastIndex
-            ? {
-                ...panel,
-                panelInfo: { ...panel.panelInfo, ...action.payload.panelInfo },
-              }
-            : panel
-        ),
+        panels: newPanels,
+        lastPanelAction: lastAction
       };
     }
-    case types.UPDATE_MODAL_STATUS:
-      return {
-        ...state,
-        isModalOpen: action.payload,
-      };
-
     case types.RESET_PANELS: {
       const updatedPanels = action.payload
         ? action.payload.map((panel) => ({
@@ -105,7 +124,7 @@ export const panelsReducer = (state = initialState, action) => {
       return {
         ...state,
         panels: updatedPanels,
-        isModalOpen: false,
+        lastPanelAction: "reset",
       };
     }