chore: fix delete last page doesn't refresh the right panel

web/src/beta/features/Editor/Settings/hooks.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useCallback } from "react";
 
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { Page } from "@reearth/services/api/storytellingApi/utils";
@@ -30,25 +30,28 @@ export default ({ layers, selectedPage, onPageUpdate }: SettingProps) => {
     setAllCheckedLayers(allLayersSelected);
   }, [selectedLayerIds, allLayersSelected]);
 
-  const handleLayerCheck = (layerId: string) => {
-    if (!pageId) return;
-    setCheckedLayer(prev => {
-      const updatedLayers = prev.includes(layerId)
-        ? prev.filter(id => id !== layerId)
-        : [...prev, layerId];
-
-      onPageUpdate?.(pageId, updatedLayers);
-      return updatedLayers ? updatedLayers : prev;
-    });
-  };
-
-  const handleAllLayersCheck = () => {
+  const handleLayerCheck = useCallback(
+    (layerId: string) => {
+      if (!pageId) return;
+      setCheckedLayer(prev => {
+        const updatedLayers = prev.includes(layerId)
+          ? prev.filter(id => id !== layerId)
+          : [...prev, layerId];
+
+        onPageUpdate?.(pageId, updatedLayers);
+        return updatedLayers ? updatedLayers : prev;
+      });
+    },
+    [onPageUpdate, pageId],
+  );
+
+  const handleAllLayersCheck = useCallback(() => {
     if (!pageId) return;
     const updatedCheckedLayers = allCheckedLayers ? [] : layers?.map(layer => layer.id) || [];
     setCheckedLayer(updatedCheckedLayers);
     setAllCheckedLayers(!allCheckedLayers);
     onPageUpdate?.(pageId, updatedCheckedLayers);
-  };
+  }, [allCheckedLayers, layers, onPageUpdate, pageId]);
 
   return {
     checkedLayers,

web/src/beta/features/Editor/tabs/story/RightPanel/index.tsx

@@ -28,7 +28,6 @@ const StoryRightPanel: React.FC<Props> = ({
   onFlyTo,
 }) => {
   const t = useT();
-
   const propertyItems = useMemo(
     () =>
       selectedPage?.property.items?.filter(

web/src/beta/features/Editor/useStorytelling.ts

@@ -34,23 +34,29 @@ export default function ({ sceneId, onFlyTo }: Props) {
   const { installableStoryBlocks } = useInstallableStoryBlocksQuery({ sceneId });
   const [currentPage, setCurrentPage] = useState<Page | undefined>(undefined);
   const isAutoScrolling = useRef(false);
+  const [selectedPageId, setSelectedPageId] = useState<string | undefined>(undefined);
 
   const selectedStory = useMemo(() => {
     return stories?.length ? stories[0] : undefined;
   }, [stories]);
 
   useEffect(() => {
-    if (!currentPage) {
+    if (selectedPageId) {
+      const newPage = getPage(selectedPageId, selectedStory?.pages);
+      if (newPage) {
+        setCurrentPage(newPage);
+      }
+    } else {
       setCurrentPage(selectedStory?.pages?.[0]);
     }
-  }, [currentPage, selectedStory?.pages]);
+  }, [currentPage, selectedPageId, selectedStory?.pages]);
 
   const handleCurrentPageChange = useCallback(
     (pageId: string, disableScrollIntoView?: boolean) => {
       const newPage = getPage(pageId, selectedStory?.pages);
       if (!newPage) return;
 
-      setCurrentPage(newPage);
+      setSelectedPageId(pageId);
 
       if (!disableScrollIntoView) {
         const element = document.getElementById(newPage.id);
@@ -97,10 +103,10 @@ export default function ({ sceneId, onFlyTo }: Props) {
         pageId,
       });
       if (pageId === currentPage?.id) {
-        setCurrentPage(pages[deletedPageIndex + 1] ?? pages[deletedPageIndex - 1]);
+        setSelectedPageId(pages[deletedPageIndex + 1]?.id ?? pages[deletedPageIndex - 1]?.id);
       }
     },
-    [sceneId, currentPage?.id, selectedStory, useDeleteStoryPage],
+    [selectedStory, useDeleteStoryPage, sceneId, currentPage],
   );
 
   const handlePageAdd = useCallback(