노드 색상 변경 이벤트 감지 및 처리

apps/backend/src/node/node.entity.ts

@@ -23,6 +23,9 @@ export class Node {
   @Column('float')
   y: number;
 
+  @Column({ default: '#FFFFFF' })
+  color: string;
+
   @OneToOne(() => Page, (page) => page.node, {
     cascade: true,
     onDelete: 'CASCADE',

apps/backend/src/redis/redis.service.ts

@@ -12,8 +12,9 @@ export type RedisPage = {
 };
 
 export type RedisNode = {
-  x: number;
-  y: number;
+  x?: number;
+  y?: number;
+  color?: string;
 };
 
 export type RedisEdge = {

apps/backend/src/tasks/tasks.service.ts

@@ -113,10 +113,12 @@ export class TasksService {
       throw new Error(`redis에 ${key}에 해당하는 데이터가 없습니다.`);
     }
 
-    const updateData: Partial<Node> = {
-      x: Number(redisData.x),
-      y: Number(redisData.y),
-    };
+    const { x, y, color } = redisData;
+    const updateData: Partial<Node> = {};
+
+    if (x) updateData.x = Number(x);
+    if (y) updateData.y = Number(y);
+    if (color) updateData.color = color;
 
     // 쿼리 대상이 없다면 리턴
     if (Object.keys(updateData).length === 0) return;
@@ -142,8 +144,12 @@ export class TasksService {
       // 실패하면 postgres는 roll back하고 redis의 값을 살린다.
       this.logger.error(err.stack);
       await queryRunner.rollbackTransaction();
-      await this.redisService.setField(key, 'x', updateData.x.toString());
-      await this.redisService.setField(key, 'y', updateData.y.toString());
+      updateData.x &&
+        (await this.redisService.setField(key, 'x', updateData.x.toString()));
+      updateData.y &&
+        (await this.redisService.setField(key, 'y', updateData.y.toString()));
+      updateData.color &&
+        (await this.redisService.setField(key, 'color', updateData.color));
 
       // Promise.all에서 실패를 인식하기 위해 에러를 던진다.
       throw err;

apps/websocket/src/yjs/types/node.entity.ts

@@ -8,6 +8,8 @@ export class Node {
 
   y: number;
 
+  color: string;
+
   page: Page;
 
   outgoingEdges: Edge[];

apps/websocket/src/yjs/yjs.service.ts

@@ -187,6 +187,7 @@ export class YjsService
           x: node.x,
           y: node.y,
         },
+        color: node.color ?? '#FFFFFFF',
         selected: false, // 기본적으로 선택되지 않음
         dragging: true,
         isHolding: false,
@@ -266,6 +267,7 @@ export class YjsService
       const { id } = node.data;
       const { x, y } = node.position;
       const isHolding = node.isHolding;
+      const color = node.color ?? 'main';
       if (isHolding) continue;
 
       // TODO : node의 경우 key 값을 page id가 아닌 node id로 변경
@@ -275,12 +277,19 @@ export class YjsService
       //   x,
       //   y,
       // });
+
       const pageResponse = await axios.get(
         `http://backend:3000/api/page/${id}`,
       );
       const findPage = pageResponse.data.page;
-      this.redisService.setField(`node:${findPage.node.id}`, 'x', x);
-      this.redisService.setField(`node:${findPage.node.id}`, 'y', y);
+
+      await this.redisService.setField(`node:${findPage.node.id}`, 'x', x);
+      await this.redisService.setField(`node:${findPage.node.id}`, 'y', y);
+      await this.redisService.setField(
+        `node:${findPage.node.id}`,
+        'color',
+        color,
+      );
     }
   }
 

apps/websocket/src/yjs/yjs.type.ts

@@ -11,6 +11,7 @@ export type YMapNode = {
     x: number; // X 좌표
     y: number; // Y 좌표
   };
+  color: string; // 색상
   selected: boolean;
   isHolding: boolean;
 };