refactor: 페이지 리사이징할때 스켈레톤 ui 제거

pipisebastian · pipisebastian · commit d50e7e84fec3 · 2025-02-19T14:27:42.000+09:00
#36
diff --git a/client/src/features/editor/Editor.tsx b/client/src/features/editor/Editor.tsx
@@ -25,7 +25,6 @@ export interface EditorStateProps {
 
 interface EditorProps {
   testKey: string;
-  isResizing: boolean;
   onTitleChange: (title: string, syncWithServer: boolean) => void;
   pageId: string;
   serializedEditorData: serializedEditorDataProps;
@@ -148,21 +147,6 @@ export const Editor = memo(
       isLocalChange,
     });
 
-    const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newTitle = e.target.value;
-      setDisplayTitle(newTitle); // 로컬 상태 업데이트
-      onTitleChange(newTitle, false); // 낙관적 업데이트
-    };
-
-    const handleBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newTitle = e.target.value;
-      if (newTitle === "") {
-        setDisplayTitle(""); // 입력이 비어있으면 로컬상태는 빈 문자열로
-      } else {
-        onTitleChange(newTitle, true);
-      }
-    };
-
     const handleCompositionStart = (
       e: React.CompositionEvent<HTMLDivElement>,
       block: CRDTBlock,
@@ -284,7 +268,7 @@ export const Editor = memo(
       count: editorState.linkedList.spread().length,
       getScrollElement: () => editorRef.current,
       estimateSize: () => 24,
-      overscan: 5,
+      overscan: 3,
     });
 
     useEffect(() => {
@@ -376,16 +360,6 @@ export const Editor = memo(
     }
     return (
       <div data-testid={`editor-${testKey}`} className={editorContainer} ref={editorRef}>
-        <input
-          data-testid={`editorTitle-${testKey}`}
-          type="text"
-          placeholder="제목을 입력하세요..."
-          onChange={handleTitleChange}
-          onBlur={handleBlur}
-          value={displayTitle}
-          className={editorTitle}
-        />
-        <div style={{ height: "36px" }}></div>
         <div
           style={{
             height: virtualizer.getTotalSize(),
@@ -454,13 +428,6 @@ export const Editor = memo(
       </div>
     );
   },
-  (prev, next) => {
-    // 리사이징 중에는 항상 리렌더링을 방지
-    if (prev.isResizing) return true;
-
-    // 일반적인 상황에서는 serializedEditorData가 변경될 때만 리렌더링
-    return false;
-  },
 );
 
 Editor.displayName = "Editor";
diff --git a/client/src/features/page/Page.tsx b/client/src/features/page/Page.tsx
@@ -2,11 +2,9 @@ import { PageIconType, serializedEditorDataProps } from "@noctaCrdt/types/Interf
 import { motion, AnimatePresence } from "framer-motion";
 import { useEffect, useState } from "react";
 import { Editor } from "@features/editor/Editor";
-import { Page as PageType, DIRECTIONS, Direction } from "@src/types/page";
+import { Page as PageType, DIRECTIONS } from "@src/types/page";
 import { pageContainer, pageHeader, resizeHandles } from "./Page.style";
 import { PageControlButton } from "./components/PageControlButton/PageControlButton";
-import { PageSkeletonUI } from "./components/PageSkeletonUI/PageSkeletonUI";
-import { useSkeletonPage } from "./components/PageSkeletonUI/useSkeletonPage";
 import { PageTitle } from "./components/PageTitle/PageTitle";
 import { usePage } from "./hooks/usePage";
 
@@ -36,24 +34,8 @@ export const Page = ({
   handleTitleChange,
   serializedEditorData,
 }: PageProps) => {
-  const {
-    position,
-    size,
-    isMaximized,
-    pageDrag,
-    pageMinimize,
-    pageMaximize,
-    isSidebarOpen,
-    handleResizeComplete,
-  } = usePage({ x, y });
-
-  const { isResizing, skeletonPosition, skeletonSize, handleSkeletonResizeStart } = useSkeletonPage(
-    {
-      initialPosition: position,
-      initialSize: size,
-      isSidebarOpen,
-      onApply: handleResizeComplete,
-    },
+  const { position, size, isMaximized, pageResize, pageDrag, pageMinimize, pageMaximize } = usePage(
+    { x, y },
   );
 
   const [serializedEditorDatas, setSerializedEditorDatas] =
@@ -73,11 +55,6 @@ export const Page = ({
     }
   };
 
-  const handleResizeStart = (e: React.MouseEvent, direction: Direction) => {
-    e.preventDefault();
-    // 스켈레톤 UI의 리사이징을 시작
-    handleSkeletonResizeStart(e, direction);
-  };
   // serializedEditorData prop이 변경되면 local state도 업데이트
   useEffect(() => {
     setSerializedEditorDatas(serializedEditorData);
@@ -96,16 +73,18 @@ export const Page = ({
           style={{
             width: `${size.width}px`,
             height: `${size.height}px`,
-            transform: isResizing
-              ? "scale(0)"
-              : `scale(1) translate(${position.x}px, ${position.y}px)`,
+            transform: `translate(${position.x}px, ${position.y}px)`,
             zIndex,
-            visibility: isResizing ? "hidden" : "visible",
           }}
           onPointerDown={handlePageClick}
         >
           <div className={pageHeader} onPointerDown={pageDrag} onClick={handlePageClick}>
-            <PageTitle testKey={testKey.split("-")[1]} title={title} icon={icon} />
+            <PageTitle
+              testKey={testKey.split("-")[1]}
+              title={title}
+              icon={icon}
+              onTitleChange={onTitleChange}
+            />
             <PageControlButton
               testKey={testKey.split("-")[1]}
               isMaximized={isMaximized}
@@ -115,7 +94,6 @@ export const Page = ({
             />
           </div>
           <Editor
-            isResizing={isResizing}
             testKey={`${testKey.split("-")[1]}`}
             onTitleChange={onTitleChange}
             pageId={id}
@@ -126,26 +104,11 @@ export const Page = ({
             <motion.div
               key={direction}
               className={resizeHandles[direction]}
-              onMouseDown={(e) => handleResizeStart(e, direction)}
+              onMouseDown={(e) => pageResize(e, direction)}
             />
           ))}
         </div>
       </motion.div>
-      {isResizing && (
-        <motion.div key={`skeleton-${id}`}>
-          <PageSkeletonUI
-            id={`${id}-skeleton`}
-            title={title}
-            icon={icon}
-            testKey={`${testKey}-skeleton`}
-            position={skeletonPosition}
-            size={skeletonSize}
-            zIndex={zIndex}
-            onDragStart={pageDrag}
-            onResizeStart={handleSkeletonResizeStart}
-          />
-        </motion.div>
-      )}
     </AnimatePresence>
   );
 };
diff --git a/client/src/features/page/hooks/usePage.ts b/client/src/features/page/hooks/usePage.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { PAGE, SIDE_BAR } from "@constants/size";
 import { SPACING } from "@constants/spacing";
-import { Position, Size } from "@src/types/page";
+import { Position, Size, Direction } from "@src/types/page";
 import { useIsSidebarOpen } from "@stores/useSidebarStore";
 
 const PADDING = SPACING.MEDIUM * 2;
@@ -50,6 +50,128 @@ export const usePage = ({ x, y }: Position) => {
     document.addEventListener("pointerup", handleDragEnd);
   };
 
+  const pageResize = (e: React.MouseEvent, direction: Direction) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startWidth = size.width;
+    const startHeight = size.height;
+    const startPosition = { x: position.x, y: position.y };
+
+    const resize = (e: MouseEvent) => {
+      const deltaX = e.clientX - startX;
+      const deltaY = e.clientY - startY;
+
+      let newWidth = startWidth;
+      let newHeight = startHeight;
+      let newX = startPosition.x;
+      let newY = startPosition.y;
+
+      switch (direction) {
+        case "right": {
+          newWidth = Math.min(
+            window.innerWidth - startPosition.x - getSidebarWidth() - PADDING,
+            Math.max(PAGE.MIN_WIDTH, startWidth + deltaX),
+          );
+          break;
+        }
+
+        case "left": {
+          newWidth = Math.min(
+            startPosition.x + startWidth,
+            Math.max(PAGE.MIN_WIDTH, startWidth - deltaX),
+          );
+          newX = Math.max(0, startPosition.x + startWidth - newWidth);
+          break;
+        }
+
+        case "bottom": {
+          newHeight = Math.min(
+            window.innerHeight - startPosition.y - PADDING,
+            Math.max(PAGE.MIN_HEIGHT, startHeight + deltaY),
+          );
+          break;
+        }
+
+        case "top": {
+          newHeight = Math.min(
+            startPosition.y + startHeight,
+            Math.max(PAGE.MIN_HEIGHT, startHeight - deltaY),
+          );
+          newY = Math.max(0, startPosition.y + startHeight - newHeight);
+          break;
+        }
+
+        case "topLeft": {
+          newHeight = Math.min(
+            startPosition.y + startHeight,
+            Math.max(PAGE.MIN_HEIGHT, startHeight - deltaY),
+          );
+          newY = Math.max(0, startPosition.y + startHeight - newHeight);
+
+          newWidth = Math.min(
+            startPosition.x + startWidth,
+            Math.max(PAGE.MIN_WIDTH, startWidth - deltaX),
+          );
+          newX = Math.max(0, startPosition.x + startWidth - newWidth);
+          break;
+        }
+
+        case "topRight": {
+          newHeight = Math.min(
+            startPosition.y + startHeight,
+            Math.max(PAGE.MIN_HEIGHT, startHeight - deltaY),
+          );
+          newY = Math.max(0, startPosition.y + startHeight - newHeight);
+
+          newWidth = Math.min(
+            window.innerWidth - startPosition.x - getSidebarWidth() - PADDING,
+            Math.max(PAGE.MIN_WIDTH, startWidth + deltaX),
+          );
+          break;
+        }
+
+        case "bottomLeft": {
+          newHeight = Math.min(
+            window.innerHeight - startPosition.y - PADDING,
+            Math.max(PAGE.MIN_HEIGHT, startHeight + deltaY),
+          );
+
+          newWidth = Math.min(
+            startPosition.x + startWidth,
+            Math.max(PAGE.MIN_WIDTH, startWidth - deltaX),
+          );
+          newX = Math.max(0, startPosition.x + startWidth - newWidth);
+          break;
+        }
+
+        case "bottomRight": {
+          newHeight = Math.min(
+            window.innerHeight - startPosition.y - PADDING,
+            Math.max(PAGE.MIN_HEIGHT, startHeight + deltaY),
+          );
+
+          newWidth = Math.min(
+            window.innerWidth - startPosition.x - getSidebarWidth() - PADDING,
+            Math.max(PAGE.MIN_WIDTH, startWidth + deltaX),
+          );
+          break;
+        }
+      }
+
+      setSize({ width: newWidth, height: newHeight });
+      setPosition({ x: newX, y: newY });
+    };
+
+    const stopResize = () => {
+      document.removeEventListener("mousemove", resize);
+      document.removeEventListener("mouseup", stopResize);
+    };
+
+    document.addEventListener("mousemove", resize);
+    document.addEventListener("mouseup", stopResize);
+  };
+
   const pageMinimize = () => {
     setSize({
       width: PAGE.MIN_WIDTH,
@@ -149,11 +271,6 @@ export const usePage = ({ x, y }: Position) => {
     };
   }, [isMaximized, isSidebarOpen]); // maximize 상태와 sidebar 상태만 의존성
 
-  const handleResizeComplete = (newSize: Size, newPosition: Position) => {
-    setSize(newSize);
-    setPosition(newPosition);
-  };
-
   // 일반 상태일 때의 resize 처리
   useEffect(() => {
     if (isMaximized) return;
@@ -178,11 +295,10 @@ export const usePage = ({ x, y }: Position) => {
   return {
     position,
     size,
+    pageResize,
     pageDrag,
     pageMinimize,
     pageMaximize,
     isMaximized,
-    isSidebarOpen,
-    handleResizeComplete,
   };
 };
