diff --git a/packages/frontend/src/api/note.ts b/packages/frontend/src/api/note.ts
new file mode 100644
index 00000000..850aea86
--- /dev/null
+++ 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/space/SpaceView.tsx b/packages/frontend/src/components/space/SpaceView.tsx
index 8cd40615..2e981350 100644
--- 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";
@@ -37,18 +38,23 @@ 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) => {
+          const [urlPath] = res.urlPath;
+          defineNode(
+            {
+              type,
+              x: position.x,
+              y: position.y,
+              name,
+              src: urlPath,
+            },
+            parentNode.id,
+          );
+        });
 
         return;
       }