refactor: pageStore을 entity로 이동 및 editorStore로 분리

Author: yewonJin

apps/frontend/src/entities/page/index.ts

@@ -6,5 +6,5 @@ export {
   updatePage,
 } from "./api/pageApi";
 
-export { usePageStore } from "../../features/pageSidebar/model/pageStore";
+export { usePageStore } from "./model/pageStore";
 export { type Page, type CreatePageRequest } from "./model/pageTypes";

apps/frontend/src/entities/page/model/pageStore.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface PageStore {
+  currentPage: number | null;
+  setCurrentPage: (currentPage: number | null) => void;
+}
+
+export const usePageStore = create<PageStore>((set) => ({
+  currentPage: null,
+  setCurrentPage: (currentPage: number | null) => set({ currentPage }),
+}));

apps/frontend/src/entities/user/model/useSyncedUsers.ts

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 
 import { useUserStore, type User } from "./userStore";
-import { usePageStore } from "@/features/pageSidebar";
+import { usePageStore } from "@/entities/page";
 
 export const useSyncedUsers = () => {
   const { currentPage } = usePageStore();

apps/frontend/src/features/canvas/model/useCanvas.ts

@@ -15,7 +15,7 @@ import { SocketIOProvider } from "y-socket.io";
 
 import { calculateBestHandles } from "./calculateHandles";
 import { useCollaborativeCursors } from "./useCollaborativeCursors";
-import { usePageStore } from "@/features/pageSidebar";
+import { usePageStore } from "@/entities/page";
 import { createSocketIOProvider } from "@/shared/api";
 import { useWorkspace } from "@/shared/lib";
 import { useYDocStore } from "@/shared/model";
@@ -38,7 +38,8 @@ export const useCanvas = () => {
   const provider = useRef<SocketIOProvider>();
   const holdingNodeRef = useRef<string | null>(null);
 
-  const currentPage = usePageStore((state) => state.currentPage);
+  const { currentPage, setCurrentPage } = usePageStore();
+
   const { fitView } = useReactFlow();
 
   useEffect(() => {
@@ -145,7 +146,7 @@ export const useCanvas = () => {
           const currentPageValue = usePageStore.getState().currentPage;
 
           if (currentPageValue === deletedNodeId) {
-            usePageStore.setState({ currentPage: null, isPanelOpen: false });
+            setCurrentPage(null);
           }
 
           setNodes((nds) => nds.filter((n) => n.id !== nodeId));

apps/frontend/src/features/canvas/ui/Node/NoteNode/index.tsx

@@ -2,9 +2,9 @@ import { useEffect, useState } from "react";
 import { FileText } from "lucide-react";
 import { Handle, NodeProps, Position, type Node } from "@xyflow/react";
 
-import { ActiveUser, Emoji } from "@/shared/ui";
-import { usePageStore } from "@/features/pageSidebar";
 import { useUserStore } from "@/entities/user";
+import { usePageStore } from "@/entities/page";
+import { ActiveUser, Emoji } from "@/shared/ui";
 
 export type NoteNodeData = { title: string; id: number; emoji: string };
 export type NoteNodeType = Node<NoteNodeData, "note">;

apps/frontend/src/features/canvasTools/ui/NewNodePanel/index.tsx

@@ -1,4 +1,5 @@
-import { useCreatePage, usePageStore } from "@/features/pageSidebar";
+import { usePageStore } from "@/entities/page";
+import { useCreatePage } from "@/features/pageSidebar";
 import { initializeYText, usePopover, useYDocStore } from "@/shared/model";
 
 export function NewNodePanel() {

apps/frontend/src/features/editor/index.ts

@@ -1,5 +1,8 @@
 export { onUpload } from "./api/imageUpload";
 
+export { useEditorStore } from "./model/editorStore";
+
+// TODO: 정리
 export { Editor } from "@/features/editor/ui/Editor";
 export { EditorTitle } from "@/features/editor/ui/EditorTitle";
 export { EditorActionPanel } from "@/features/editor/ui/EditorActionPanel";

…/features/pageSidebar/model/pageStore.ts …src/features/editor/model/editorStore.tsapps/frontend/src/features/pageSidebar/model/pageStore.ts renamed to apps/frontend/src/features/editor/model/editorStore.ts apps/frontend/src/features/pageSidebar/model/pageStore.ts renamed to apps/frontend/src/features/editor/model/editorStore.ts

@@ -1,27 +1,16 @@
 import { create } from "zustand";
 
-interface PageStore {
-  currentPage: number | null;
+interface EditorStore {
   isPanelOpen: boolean;
   isMaximized: boolean;
-  setCurrentPage: (currentPage: number | null) => void;
   togglePanel: () => void;
   toggleMaximized: () => void;
   setIsPanelOpen: (isOpen: boolean) => void;
 }
 
-export const usePageStore = create<PageStore>((set) => ({
-  currentPage: null,
+export const useEditorStore = create<EditorStore>((set) => ({
   isPanelOpen: true,
   isMaximized: false,
-  setCurrentPage: (currentPage: number | null) =>
-    set((state) => ({
-      currentPage,
-      isPanelOpen:
-        currentPage === state.currentPage
-          ? !state.isPanelOpen
-          : currentPage !== null,
-    })),
   togglePanel: () => set((state) => ({ isPanelOpen: !state.isPanelOpen })),
   toggleMaximized: () => set((state) => ({ isMaximized: !state.isMaximized })),
   setIsPanelOpen: (isPanelOpen: boolean) => set({ isPanelOpen }),

apps/frontend/src/features/editor/ui/EditorActionPanel/index.tsx

@@ -5,17 +5,17 @@ import {
   PanelRightClose,
 } from "lucide-react";
 
+import { useEditorStore } from "../../model/editorStore";
 import SaveStatus from "../SaveStatus";
 import { cn } from "@/shared/lib";
-import { usePageStore } from "@/features/pageSidebar";
 
 interface EditorActionPanelProps {
   saveStatus: "saved" | "unsaved";
 }
 
 export function EditorActionPanel({ saveStatus }: EditorActionPanelProps) {
   const { isPanelOpen, togglePanel, isMaximized, toggleMaximized } =
-    usePageStore();
+    useEditorStore();
 
   return (
     <div className="w-full px-4 py-2">

apps/frontend/src/features/pageSidebar/index.ts

@@ -1,7 +1,5 @@
 export { usePage, useCreatePage } from "./api/usePages";
 
-export { usePageStore } from "./model/pageStore";
-
 export { LogoBtn } from "./ui/LogoBtn";
 export { NoteList } from "./ui/NoteList";
 export { Tools } from "./ui/Tools";