From 325099aa6596b0ab9227b3783676c0611cefa464 Mon Sep 17 00:00:00 2001
From: Hogyun Jeon <akzm9999@gmail.com>
Date: Thu, 7 Nov 2024 20:54:57 +0900
Subject: [PATCH] =?UTF-8?q?test:=20storybook=EC=97=90=EC=84=9C=20konva=20n?=
 =?UTF-8?q?ode=EB=A5=BC=20=EA=B0=90=EC=8B=B8=EB=8A=94=20Stage=20=ED=81=AC?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B0=98=EC=9D=91=ED=98=95=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/space/SpaceNode.stories.tsx    | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/space/SpaceNode.stories.tsx b/packages/frontend/src/components/space/SpaceNode.stories.tsx
index 44827b7c..1f563ad2 100644
--- a/packages/frontend/src/components/space/SpaceNode.stories.tsx
+++ b/packages/frontend/src/components/space/SpaceNode.stories.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { Layer, Stage } from "react-konva";
 
 import type { Meta, StoryObj } from "@storybook/react";
@@ -8,10 +9,26 @@ export default {
   component: SpaceNode,
   tags: ["autodocs"],
   decorators: [
-    (Story) => {
-      // TODO: Konva를 위한 decorator 별도로 분리 작성 必
-      const width = 1000;
-      const height = 1000;
+    (Story, { canvasElement }) => {
+      // TODO: Konva Node를 위한 decorator 별도로 분리 必
+      const [size, setSize] = useState(() => ({
+        width: Math.max(canvasElement.clientWidth, 256),
+        height: Math.max(canvasElement.clientHeight, 256),
+      }));
+
+      const { width, height } = size;
+
+      useEffect(() => {
+        const observer = new ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            const { width, height } = entry.contentRect;
+            setSize({ width, height });
+          });
+        });
+
+        observer.observe(canvasElement);
+        return () => observer.unobserve(canvasElement);
+      }, [canvasElement]);
 
       return (
         <Stage width={width} height={height} draggable>