feat: 8 방향에 리사이징 기능 구현

#178
boostcampwm-2024 · Nov 23, 2024 · bd7d1b6 · bd7d1b6
1 parent 0604428
commit bd7d1b6
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 27 deletions.
diff --git a/client/src/features/page/Page.tsx b/client/src/features/page/Page.tsx
@@ -2,12 +2,10 @@ import { serializedEditorDataProps } from "@noctaCrdt/Interfaces";
 import { motion, AnimatePresence } from "framer-motion";
 import { Editor } from "@features/editor/Editor";
 import { Page as PageType } from "@src/types/page";
-import { pageAnimation, resizeHandleAnimation } from "./Page.animation";
-import { pageContainer, pageHeader, resizeHandle } from "./Page.style";
-
+import { pageContainer, pageHeader, resizeHandles } from "./Page.style";
 import { PageControlButton } from "./components/PageControlButton/PageControlButton";
 import { PageTitle } from "./components/PageTitle/PageTitle";
-import { usePage } from "./hooks/usePage";
+import { DIRECTIONS, usePage } from "./hooks/usePage";
 
 interface PageProps extends PageType {
   handlePageSelect: ({ pageId, isSidebar }: { pageId: string; isSidebar?: boolean }) => void;
@@ -45,17 +43,12 @@ export const Page = ({
 
   return (
     <AnimatePresence>
-      <motion.div
+      <div
         className={pageContainer}
-        initial={pageAnimation.initial}
-        animate={pageAnimation.animate({
-          x: position.x,
-          y: position.y,
-          isActive,
-        })}
         style={{
           width: `${size.width}px`,
           height: `${size.height}px`,
+          transform: `translate(${position.x}px, ${position.y}px)`,
           zIndex,
         }}
         onPointerDown={handlePageClick}
@@ -73,12 +66,14 @@ export const Page = ({
           pageId={id}
           serializedEditorData={serializedEditorData}
         />
-        <motion.div
-          className={resizeHandle}
-          onMouseDown={pageResize}
-          whileHover={resizeHandleAnimation.whileHover}
-        />
-      </motion.div>
+        {DIRECTIONS.map((direction) => (
+          <motion.div
+            key={direction}
+            className={resizeHandles[direction]}
+            onMouseDown={(e) => pageResize(e, direction)}
+          />
+        ))}
+      </div>
     </AnimatePresence>
   );
 };
diff --git a/client/src/features/page/hooks/usePage.ts b/client/src/features/page/hooks/usePage.ts
@@ -5,6 +5,18 @@ import { useIsSidebarOpen } from "@stores/useSidebarStore";
 import { Position, Size } from "@src/types/page";
 
 const PADDING = SPACING.MEDIUM * 2;
+export const DIRECTIONS = [
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "topLeft",
+  "topRight",
+  "bottomLeft",
+  "bottomRight",
+] as const;
+
+type Direction = (typeof DIRECTIONS)[number];
 
 export const usePage = ({ x, y }: Position) => {
   const [position, setPosition] = useState<Position>({ x, y });
@@ -68,28 +80,118 @@ export const usePage = ({ x, y }: Position) => {
     document.addEventListener("pointerup", handleDragEnd);
   };
 
-  const pageResize = (e: React.MouseEvent) => {
+  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;
 
-      const newWidth = Math.max(
-        PAGE.MIN_WIDTH,
-        Math.min(startWidth + deltaX, window.innerWidth - position.x - getSidebarWidth() - PADDING),
-      );
-
-      const newHeight = Math.max(
-        PAGE.MIN_HEIGHT,
-        Math.min(startHeight + deltaY, window.innerHeight - position.y - PADDING),
-      );
+      let newWidth = startWidth;
+      let newHeight = startHeight;
+      let newX = startPosition.x;
+      let newY = startPosition.y;
+
+      switch (direction) {
+        case "right": {
+          // startWidth + deltaX 가 계속해서 변하는 값. 사용자가 마우스를 움직이면서 계속해서 변함
+          newWidth = Math.min(
+            window.innerWidth - startPosition.x - getSidebarWidth() - PADDING, // 최대 넓이를 지정하고 싶을때 Math.min
+            Math.max(PAGE.MIN_WIDTH, startWidth + deltaX), //최소 넓이를 지정하고 싶을때 Math.max
+          );
+          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 = () => {