From 18665aff393d2a3b5bba64d203b18bbc2e06925a Mon Sep 17 00:00:00 2001
From: djk01281 <djk01281@gmail.com>
Date: Thu, 14 Nov 2024 21:09:09 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94?=
 =?UTF-8?q?=EC=97=90=20ScrollWrapper=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                             | 5 ++++-
 frontend/src/components/layout/ScrollWrapper.tsx | 8 +++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f64444ed..86eca9a4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import HoverTrigger from "./components/HoverTrigger";
 import EditorView from "./components/EditorView";
 import SideWrapper from "./components/layout/SideWrapper";
 import Canvas from "./components/canvas";
+import ScrollWrapper from "./components/layout/ScrollWrapper";
 
 const queryClient = new QueryClient();
 
@@ -17,7 +18,9 @@ function App() {
         </SideWrapper>
         <Canvas className="z-0 h-full w-full" />
         <HoverTrigger className="absolute inset-0 z-20 w-64">
-          <Sidebar />
+          <ScrollWrapper height={"h-[720px]"} className="overflow-x-clip">
+            <Sidebar />
+          </ScrollWrapper>
         </HoverTrigger>
       </div>
     </QueryClientProvider>
diff --git a/frontend/src/components/layout/ScrollWrapper.tsx b/frontend/src/components/layout/ScrollWrapper.tsx
index 5be0d81e..57610760 100644
--- a/frontend/src/components/layout/ScrollWrapper.tsx
+++ b/frontend/src/components/layout/ScrollWrapper.tsx
@@ -5,12 +5,18 @@ type ScrollWrapperProps = {
   width?: Tailwindest["width"];
   height?: Tailwindest["height"];
   children: React.ReactNode;
+  className?: string;
 };
 
 export default function ScrollWrapper({
   width,
   height,
   children,
+  className,
 }: ScrollWrapperProps) {
-  return <div className={cn("overflow-auto", width, height)}>{children}</div>;
+  return (
+    <div className={cn("overflow-auto", width, height, className)}>
+      {children}
+    </div>
+  );
 }