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

com.twin.app.shoptime/src/actions/actionTypes.js

@@ -3,7 +3,6 @@ export const types = {
   PUSH_PANEL: "PUSH_PANEL",
   POP_PANEL: "POP_PANEL",
   UPDATE_PANEL: "UPDATE_PANEL",
-  UPDATE_MODAL_STATUS: "UPDATE_MODAL_STATUS",
   RESET_PANELS: "RESET_PANELS",
 
   // device actions

com.twin.app.shoptime/src/actions/panelActions.js

@@ -23,11 +23,6 @@ export const updatePanel = (panelInfo) => ({
   payload: panelInfo,
 });
 
-export const updateModalStatus = (status) => ({
-  type: types.UPDATE_MODAL_STATUS,
-  payload: status,
-});
-
 export const resetPanels = (panels) => ({
   type: types.RESET_PANELS,
   payload: panels,

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) =>
+        panels: newPanels,
-          index === lastIndex
+        lastPanelAction: lastAction
-            ? {
-                ...panel,
-                panelInfo: { ...panel.panelInfo, ...action.payload.panelInfo },
-              }
-            : panel
-        ),
       };
     }
-    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",
       };
     }
 

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

@@ -89,6 +89,7 @@ export default function MainView({ className }) {
   const dispatch = useDispatch();
   const mainIndex = useSelector((state) => state.appData.mainIndex);
   const panels = useSelector((state) => state.panels.panels);
+  const lastPanelAction = useSelector((state) => state.panels.lastPanelAction);
   const loadingComplete = useSelector((state) => state.common?.loadingComplete);
   const { popupVisible, activePopup } = useSelector(
     (state) => state.common.popup
@@ -229,17 +230,16 @@ export default function MainView({ className }) {
   useEffect(() => {
     if (panels && panels.length > 0) {
       let panel = panels[panels.length - 1];
-      let hasModalPlayer = false;
       if (
         panels[panels.length - 1].name === Config.panel_names.PLAYER_PANEL &&
         panels[panels.length - 1].panelInfo.modal
       ) {
         panel = panels[panels.length - 2];
-        hasModalPlayer = true;
       }
       if (panel?.name) {
         setTimeout(() => {
-          if (!panel.panelInfo.focusedContainerId && !hasModalPlayer) {
+          // focus to panel if it's not preview video status changing case
+          if (!lastPanelAction || lastPanelAction.indexOf('preview') !== 0 ) {
             //do focus itself if has focusedContainerId
             Spotlight.focus(panel?.name);
           }