feat: 노트 노드 클릭 시 해당 노트로 이동 기능 구현

boostcampwm-2024 · Nov 27, 2024 · 095c3d0 · 095c3d0
1 parent 15c9a88
commit 095c3d0
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
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
@@ -38,19 +38,17 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) {
   const { drag, dropPosition, handlePaletteSelect } = useDragNode(nodesArray, {
     createNode: (type, parentNode, position, name = "New Note") => {
       if (type === "note") {
-        // FIXME: note 생성 후 id 입력
         createNote({
           userId: "honeyflow",
           noteName: name,
         }).then((res) => {
-          const [urlPath] = res.urlPath;
           defineNode(
             {
               type,
               x: position.x,
               y: position.y,
               name,
-              src: urlPath,
+              src: res.urlPath.toString(),
             },
             parentNode.id,
           );
@@ -118,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}