Merge pull request #15 from WebCreatorX/feat/canvas-rendering

feat: 캔버스 렌더링 및 에디터 스토어 핵심 기능 구현

Author: y-minion

apps/editor/db.json

@@ -3,6 +3,14 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   output: "standalone", // 배포에 필요한 파일만 모아줍니다
   transpilePackages: ["@repo/ui"],
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**", // 개발 편의를 위해 모든 도메인 허용 (운영 배포시에는 특정 도메인으로 제한)
+      },
+    ],
+  },
 };
 
 export default nextConfig;

apps/editor/next.config.ts

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
+    "db": "json-server db.json --port 4000",
     "build": "next build --turbopack",
     "start": "next start",
     "lint": "next lint",

apps/editor/package.json

@@ -0,0 +1,26 @@
+"use server";
+
+import { WcxNode } from "types";
+
+const BASE_URL = process.env.NEXT_PUBLIC_JSON_SERVER_URL;
+
+export default async function getNodesFromDB(
+  pageId: number,
+): Promise<WcxNode[]> {
+  try {
+    const res = await fetch(`${BASE_URL}/nodes?page_id=${pageId}`, {
+      cache: "no-store", //FIXME-캐시 설정을 Tag기반으로 수정해야함!!
+    });
+
+    if (!res.ok) {
+      throw new Error(`Failed to fetch nodes from JSON-Server:${res.status}`);
+    }
+
+    const data = await res.json();
+
+    return data as WcxNode[];
+  } catch (error) {
+    console.error("❌ Error fetching nodes:", error);
+    return [];
+  }
+}

apps/editor/src/actions/editor/getNodesFromDB.ts

@@ -0,0 +1,24 @@
+import getNodesFromDB from "@/actions/editor/getNodesFromDB";
+import Canvas from "@/components/editor/Canvas";
+import EditorStoreInitializer from "@/components/editor/EditorStoreInitializer";
+import { RuntimeProvider } from "@repo/ui/context/runtimeContext";
+
+export default async function EditorPage() {
+  const pageId = 201; //목데이터입니다.
+  //서버 액션 함수(nodes데이터 패칭함수)
+  const nodes = await getNodesFromDB(pageId);
+
+  return (
+    <div className="flex h-screen w-screen flex-col gap-10">
+      <h1 className="text-3xl text-amber-700">에디터 페이지 입니다.</h1>
+      <EditorStoreInitializer initialNodes={nodes}>
+        {/* 다른 에디터 관련 컴포넌트들은 이곳에서 렌더링 됩니다!(사이드바,매니패스트 수정 컴포넌트 등등...) */}
+        <RuntimeProvider>
+          <div className="relative h-full w-full border-2">
+            <Canvas />
+          </div>
+        </RuntimeProvider>
+      </EditorStoreInitializer>
+    </div>
+  );
+}

apps/editor/src/app/editor/page.tsx

@@ -1,3 +1,4 @@
+import "../styles.css";
 import QueryProvider from "src/providers/queryProvider";
 
 export default function RootLayout({

apps/editor/src/app/layout.tsx

@@ -5,6 +5,8 @@ export default function Home() {
     <div>
       <h1>환경합니다</h1>
       <Link href="test_click_to_edit">테스트 환경</Link>
+      <br />
+      <Link href="/editor">에디터 페이지</Link>
     </div>
   );
 }

apps/editor/src/app/page.tsx

@@ -1,21 +1,34 @@
+"use client";
+
 import {
   useCanvas,
   useCurNodes,
   useSelectedNodeId,
   useSelectNode,
-  useUpdateNode,
+  useSetCanvas,
+  useUpdateNodeLayout,
 } from "@/stores/useEditorStore";
-import EditorNodeWrapper from "@repo/ui/core/EditorNodeWrapper.jsx";
-import NodeRenderer from "@repo/ui/core/NodeRenderer.jsx";
-import { WcxNode } from "@repo/ui/types/nodes.js";
-import React from "react";
+import {
+  handleMouseDown,
+  handleMouseMove,
+  handleMouseUp,
+} from "@/utils/editor/canvasMouseHandler";
+import handleWheel from "@/utils/editor/handleWheel";
+import EditorNodeWrapper from "@repo/ui/core/EditorNodeWrapper";
+import NodeRenderer from "@repo/ui/core/NodeRenderer";
+import { WcxNode } from "@repo/ui/types/nodes";
+import React, { useRef } from "react";
 
 export default function Canvas() {
   const nodes = useCurNodes();
   const selectedNodeId = useSelectedNodeId();
   const selectNode = useSelectNode();
-  const updateNode = useUpdateNode();
+  const updateNode = useUpdateNodeLayout();
   const canvasState = useCanvas();
+  const setCanvas = useSetCanvas();
+
+  const isPanning = useRef(false);
+  const lastMousePos = useRef({ x: 0, y: 0 });
 
   //FIXME-각 노드들에 key속성 추가해주기. -> 리액트 경고 발생
   //FIXME-nodes가 비어있는 상황에서 에러발생. -> Base Condition에 Root가 들어간다.(Root는 단지 더미 노드일뿐 로직에 들어가면 안된다.)
@@ -74,5 +87,34 @@ export default function Canvas() {
     );
   }
 
-  return <div className="canvas-root relative">{renderTree({ id: null })}</div>;
+  return (
+    <div
+      className="relative h-full w-full flex-1 cursor-grab overflow-hidden bg-white active:cursor-grabbing"
+      onWheel={(e) => handleWheel({ canvas: canvasState, e, setCanvas })}
+      onMouseDown={(e) =>
+        handleMouseDown({ e, isPanning, lastMousePos, selectNode })
+      }
+      onMouseMove={(e) =>
+        handleMouseMove({ e, isPanning, lastMousePos, setCanvas, canvasState })
+      }
+      onMouseUp={() => handleMouseUp({ isPanning })}
+      onMouseLeave={() => handleMouseUp({ isPanning })}
+    >
+      <div
+        style={{
+          transform: `translate(${canvasState.dx}px, ${canvasState.dy}px) scale(${canvasState.scale})`,
+          transformOrigin: "0 0",
+          width: "100%",
+          height: "100%",
+        }}
+        className="relative h-full w-full"
+      >
+        {/* 배경 격자 (Helper Grid) */}
+        <div className="bg-grid-pattern pointer-events-none absolute inset-[-1000%] z-0 h-[3000%] w-[3000%]" />
+        <div className="relative z-10 h-full w-full">
+          {renderTree({ id: null })}
+        </div>
+      </div>
+    </div>
+  );
 }

apps/editor/src/components/Canvas.tsx …/editor/src/components/editor/Canvas.tsxapps/editor/src/components/Canvas.tsx renamed to apps/editor/src/components/editor/Canvas.tsx apps/editor/src/components/Canvas.tsx renamed to apps/editor/src/components/editor/Canvas.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useSetNode } from "@/stores/useEditorStore";
+import { useEffect, useRef } from "react";
+import { WcxNode } from "types";
+
+interface EditorStoreInitializer {
+  children: React.ReactNode;
+  initialNodes: WcxNode[];
+}
+
+//TODO-일단 DB와 연동하지 말자. 서버액션의 사용이유는 초기 렌더링 속도 향상임. 이후에는 클라이언트에서 스토어 업데이트를 할 예정.
+export default function EditorStoreInitializer({
+  children,
+  initialNodes,
+}: EditorStoreInitializer) {
+  const initialized = useRef(false);
+  const setNode = useSetNode();
+  useEffect(() => {
+    if (initialized.current) return;
+    setNode(initialNodes);
+    initialized.current = true;
+  }, [initialNodes, setNode]);
+
+  return <>{children}</>;
+}

apps/editor/src/components/editor/EditorStoreInitializer.tsx

@@ -6,7 +6,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 const mockUseCurNodes = vi.fn();
 const mockUseSelectedNodeId = vi.fn();
 const mockUseSelectNode = vi.fn();
-const mockUseUpdateNode = vi.fn();
+const mockUseUpdateNodeLayout = vi.fn();
 const mockUseCanvas = vi.fn();
 const mockUseSetCanvas = vi.fn();
 
@@ -15,7 +15,7 @@ vi.mock("@/stores/useEditorStore", () => ({
   useCurNodes: () => mockUseCurNodes(), //지연 실행 -> 이렇게 되면 다른 테스트에서 목함수의 반환값을 바꿔도 언제나 새롭게 해당 함수가 호출 되므로 다른 테스트의 영향을 받지 않는다.
   useSelectedNodeId: () => mockUseSelectedNodeId(),
   useSelectNode: () => mockUseSelectNode(),
-  useUpdateNode: () => mockUseUpdateNode(),
+  useUpdateNodeLayout: () => mockUseUpdateNodeLayout(),
   useCanvas: () => mockUseCanvas(),
   useSetCanvas: () => mockUseSetCanvas(),
 }));