feat: API 연결하여 노트 생성 및 이동 (#161)

* feat: subspace node 추가 * refactor: autofit 로직 별도 훅으로 분리 * feat: 노드 생성 시 노트 생성 기능 구현 * feat: 노트 노드 클릭 시 해당 노트로 이동 기능 구현 * fix: 누락된 prop 전달 값 추가 --------- Co-authored-by: Hogyun Jeon <[email protected]>
boostcampwm-2024 · Nov 28, 2024 · b6e586f · b6e586f
1 parent 31d870b
commit b6e586f
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 17 deletions.
diff --git a/packages/frontend/src/api/note.ts b/packages/frontend/src/api/note.ts
@@ -0,0 +1,19 @@
+import { API_V1_URL } from "./constants";
+import http from "./http";
+
+type CreateNoteRequestBody = {
+  userId: string;
+  noteName: string;
+};
+
+type CreateNoteResponseBody = {
+  urlPath: [string];
+};
+
+export async function createNote(body: CreateNoteRequestBody) {
+  const response = await http.post<CreateNoteResponseBody>(
+    `${API_V1_URL}/note`,
+    { body: JSON.stringify(body) },
+  );
+  return response.data;
+}
diff --git a/packages/frontend/src/components/Node.tsx b/packages/frontend/src/components/Node.tsx
@@ -109,11 +109,12 @@ export type NoteNodeProps = {
   name: string;
 } & NodeHandlers;
 
-export function NoteNode({ x, y, name, ...rest }: NoteNodeProps) {
+export function NoteNode({ x, y, name, src, ...rest }: NoteNodeProps) {
   // TODO: src 적용 필요
+  const navigate = useNavigate();
   const radius = 64;
   return (
-    <Node x={x} y={y} {...rest}>
+    <Node x={x} y={y} onClick={() => navigate(`/note/${src}`)} {...rest}>
       <Node.Circle radius={radius} fill="#FFF2CB" />
       <Node.Text fontSize={16} content={name} />
     </Node>

diff --git a/packages/frontend/src/components/space/SpaceView.tsx b/packages/frontend/src/components/space/SpaceView.tsx
@@ -5,6 +5,7 @@ import { Html } from "react-konva-utils";
 import Konva from "konva";
 import type { Node } from "shared/types";
 
+import { createNote } from "@/api/note";
 import { createSpace } from "@/api/space";
 import Edge from "@/components/Edge";
 import { HeadNode, NoteNode, SubspaceNode } from "@/components/Node";
@@ -38,18 +39,21 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) {
   const { drag, dropPosition, handlePaletteSelect } = useDragNode(nodesArray, {
     createNode: (type, parentNode, position, name = "New Note") => {
       if (type === "note") {
-        let src = "";
-        // FIXME: note 생성 후 id 입력
-        defineNode(
-          {
-            type,
-            x: position.x,
-            y: position.y,
-            name,
-            src,
-          },
-          parentNode.id,
-        );
+        createNote({
+          userId: "honeyflow",
+          noteName: name,
+        }).then((res) => {
+          defineNode(
+            {
+              type,
+              x: position.x,
+              y: position.y,
+              name,
+              src: res.urlPath.toString(),
+            },
+            parentNode.id,
+          );
+        });
 
         return;
       }
@@ -87,7 +91,6 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) {
         parentNode.id,
       );
     },
-
     createEdge: (fromNode, toNode) => {
       defineEdge(fromNode.id, toNode.id);
     },
@@ -113,7 +116,7 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) {
         x={node.x}
         y={node.y}
         name={node.name}
-        src=""
+        src={node.src}
         onDragStart={() => handlers.onDragStart(node)}
         onDragMove={handlers.onDragMove}
         onDragEnd={handlers.onDragEnd}

diff --git a/packages/frontend/src/components/space/YjsSpaceView.tsx b/packages/frontend/src/components/space/YjsSpaceView.tsx
@@ -0,0 +1,24 @@
+import { RefObject } from "react";
+
+import useYjsConnection from "@/hooks/yjs/useYjsConnection";
+import { YjsStoreProvider } from "@/store/yjs";
+
+import SpaceView from "./SpaceView";
+
+type YjsSpaceViewProps = {
+  spaceId: string;
+  autofitTo?: Element | RefObject<Element>;
+};
+
+export default function YjsSpaceView({
+  spaceId,
+  autofitTo,
+}: YjsSpaceViewProps) {
+  const { yDoc, yProvider, setYDoc, setYProvider } = useYjsConnection(spaceId);
+
+  return (
+    <YjsStoreProvider value={{ yDoc, yProvider, setYDoc, setYProvider }}>
+      <SpaceView spaceId={spaceId} autofitTo={autofitTo} />
+    </YjsStoreProvider>
+  );
+}
diff --git a/packages/frontend/src/pages/Space.tsx b/packages/frontend/src/pages/Space.tsx
@@ -23,7 +23,7 @@ export default function SpacePage() {
   return (
     <YjsStoreProvider value={{ yDoc, yProvider, setYDoc, setYProvider }}>
       <div className="w-full h-full" ref={containerRef}>
-        <SpaceView autofitTo={containerRef} />
+        <SpaceView spaceId={spaceId} autofitTo={containerRef} />
         <SpacePageHeader />
       </div>
     </YjsStoreProvider>