fix: 보조 레이어가 스크롤을 안따라가는 현상 (#63)

* chore: scroll-area

* fix: root hight

* feat: apply ScrollArea

* fix: position follow while scroll

* cleanup

* chore: bun.lockb

* fix image layout

* fix: history action

* fix: history action

package.json

@@ -33,6 +33,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.0",

src/app/globals.css

@@ -82,4 +82,9 @@
     -webkit-appearance: none;
     margin: 0;
   }
+
+  /* radix ui */
+  [data-radix-scroll-area-viewport] > div {
+    height: 100%;
+  }
 }

src/components/editor/action.ts

@@ -77,7 +77,7 @@ const updateEditorHistory = (
     ...editor.history,
     list: [
       ...editor.history.list.slice(0, editor.history.currentIndex + 1),
-      { ...newData },
+      [...newData],
     ],
     currentIndex: editor.history.currentIndex + 1,
   },
@@ -365,7 +365,7 @@ const actionHandlers: {
       const nextIndex = editor.history.currentIndex + 1;
       return {
         ...editor,
-        data: { ...editor.history.list[nextIndex] },
+        data: [...editor.history.list[nextIndex]],
         history: {
           ...editor.history,
           currentIndex: nextIndex,
@@ -380,7 +380,7 @@ const actionHandlers: {
       const prevIndex = editor.history.currentIndex - 1;
       return {
         ...editor,
-        data: { ...editor.history.list[prevIndex] },
+        data: [...editor.history.list[prevIndex]],
         history: {
           ...editor.history,
           currentIndex: prevIndex,

src/components/editor/elements/container.tsx

@@ -208,7 +208,7 @@ export default function Container({ element }: Props) {
       element={element}
       className={cn(
         "h-fit w-full max-w-full",
-        isRoot && "h-full overflow-y-auto",
+        isRoot && "min-h-full",
         !isRoot &&
           !editor.state.isPreviewMode &&
           "ring-1 ring-muted hover:ring-border",

src/components/editor/elements/element-helper.tsx

@@ -7,7 +7,7 @@ import {
   GripVerticalIcon,
   Trash2Icon,
 } from "lucide-react";
-import { useCallback, useLayoutEffect, useState } from "react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useEditor } from "~/components/editor/provider";
 import { isValidSelectEditorElement } from "~/components/editor/util";
@@ -24,6 +24,7 @@ export default function ElementHelper() {
     width: number;
     height: number;
   }>();
+  const rafRef = useRef<number | null>(null);
 
   const updateLayerStyle = useCallback((id: string) => {
     const el = document.querySelector(`[data-element-id="${id}"]`);
@@ -32,14 +33,27 @@ export default function ElementHelper() {
       return;
     }
 
-    const resizeObserver = new ResizeObserver(() => {
+    const updateStyle = () => {
       const { top, left, width, height } = el.getBoundingClientRect();
       setLayerStyle({ top, left, width, height });
-    });
+      rafRef.current = requestAnimationFrame(updateStyle);
+    };
+
+    const handleScroll = () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      rafRef.current = requestAnimationFrame(updateStyle);
+    };
+
+    window.addEventListener("scroll", handleScroll, true);
+    rafRef.current = requestAnimationFrame(updateStyle);
 
-    resizeObserver.observe(el, { box: "border-box" });
     return () => {
-      resizeObserver.unobserve(el);
+      window.removeEventListener("scroll", handleScroll, true);
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
     };
   }, []);
 
@@ -91,7 +105,7 @@ export default function ElementHelper() {
               width: layerStyle.width,
               height: 0,
             }}
-            className="fixed z-50"
+            className="fixed z-20"
           >
             <div className="absolute left-0 right-0 top-0 z-10 h-[1px] bg-primary" />
             <div

src/components/editor/elements/image-element.tsx

@@ -18,7 +18,7 @@ export default function ImageElement({ element }: Props) {
           alt={element.content.alt ?? "이미지"}
         />
       ) : (
-        <div className="absolute inset-0 flex h-full w-full items-center justify-center bg-secondary text-muted-foreground">
+        <div className="flex h-full w-full items-center justify-center bg-secondary p-5 text-muted-foreground">
           <ImageIcon />
         </div>
       )}

src/components/editor/index.tsx

@@ -6,7 +6,7 @@ import EditorSidebar from "~/components/editor/sidebar";
 export default function Editor(props: EditorProps) {
   return (
     <EditorProvider {...props}>
-      <div className="fixed bottom-0 left-0 right-0 top-0 z-[20] flex flex-col overflow-hidden bg-secondary">
+      <div className="fixed bottom-0 left-0 right-0 top-0 z-20 flex flex-col overflow-hidden bg-secondary">
         <EditorNavigation />
         <EditorMain />
         <EditorSidebar />

src/components/editor/main.tsx

@@ -5,6 +5,7 @@ import ElementHelper from "~/components/editor/elements/element-helper";
 import Recursive from "~/components/editor/elements/recursive";
 import { useEditor } from "~/components/editor/provider";
 import { Button } from "~/components/ui/button";
+import { ScrollArea } from "~/components/ui/scroll-area";
 import { cn } from "~/lib/utils";
 
 export default function EditorMain() {
@@ -26,7 +27,7 @@ export default function EditorMain() {
       className="flex flex-1 items-center justify-center"
       onClick={handleClick}
     >
-      <div
+      <ScrollArea
         id="editor-main"
         className={cn(
           "ml-[10px] mr-[392px] animate-zoom-in bg-background transition-all",
@@ -46,12 +47,11 @@ export default function EditorMain() {
             <EyeOff />
           </Button>
         )}
-
         {Array.isArray(editor.data) &&
           editor.data.map((childElement) => (
             <Recursive key={childElement.id} element={childElement} />
           ))}
-      </div>
+      </ScrollArea>
       <ElementHelper />
     </div>
   );

src/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };