Merge pull request #373 from boostcampwm-2024/feature-be-#372

노드 색상 변경 이벤트 감지 및 처리
boostcampwm-2024 · Dec 3, 2024 · e321c3b · e321c3b
2 parents 58fb5c3 + 306a89b
commit e321c3b
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 17 deletions.
diff --git a/apps/backend/src/edge/edge.controller.spec.ts b/apps/backend/src/edge/edge.controller.spec.ts
@@ -81,6 +81,7 @@ describe('EdgeController', () => {
         id: 3,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         title: 'Node Title',
         page: null,
         outgoingEdges: [],
@@ -91,6 +92,7 @@ describe('EdgeController', () => {
         id: 4,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         title: 'Node Title',
         page: null,
         outgoingEdges: [],
@@ -101,6 +103,7 @@ describe('EdgeController', () => {
         id: 5,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         title: 'Node Title',
         page: null,
         outgoingEdges: [],

diff --git a/apps/backend/src/edge/edge.service.spec.ts b/apps/backend/src/edge/edge.service.spec.ts
@@ -64,6 +64,7 @@ describe('EdgeService', () => {
         id: 3,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         title: 'Node Title',
         page: null,
         outgoingEdges: [],
@@ -74,6 +75,7 @@ describe('EdgeService', () => {
         id: 5,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         title: 'Node Title',
         page: null,
         outgoingEdges: [],
@@ -143,6 +145,7 @@ describe('EdgeService', () => {
         id: 3,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         title: 'Node Title',
         page: null,
         outgoingEdges: [],
@@ -153,6 +156,7 @@ describe('EdgeService', () => {
         id: 4,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         title: 'Node Title',
         page: null,
         outgoingEdges: [],
@@ -163,6 +167,7 @@ describe('EdgeService', () => {
         id: 5,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         title: 'Node Title',
         page: null,
         outgoingEdges: [],
@@ -173,6 +178,7 @@ describe('EdgeService', () => {
         id: 7,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         title: 'Node Title',
         page: null,
         outgoingEdges: [],

diff --git a/apps/backend/src/node/node.entity.ts b/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',

diff --git a/apps/backend/src/node/node.service.spec.ts b/apps/backend/src/node/node.service.spec.ts
@@ -70,6 +70,7 @@ describe('NodeService', () => {
         id: 1,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         title: 'Node Title',
         page: null,
         outgoingEdges: [],
@@ -185,6 +186,7 @@ describe('NodeService', () => {
         id: 1,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         title: 'Node Title',
         page: null,
         outgoingEdges: [],

diff --git a/apps/backend/src/page/page.service.spec.ts b/apps/backend/src/page/page.service.spec.ts
@@ -120,6 +120,7 @@ describe('PageService', () => {
         id: 1,
         x: 0,
         y: 0,
+        color: '#FFFFFF',
         page: null,
         outgoingEdges: [],
         incomingEdges: [],

diff --git a/apps/backend/src/redis/redis.service.ts b/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 = {

diff --git a/apps/backend/src/tasks/tasks.service.ts b/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;

diff --git a/apps/websocket/src/yjs/types/node.entity.ts b/apps/websocket/src/yjs/types/node.entity.ts
@@ -8,6 +8,8 @@ export class Node {
 
   y: number;
 
+  color: string;
+
   page: Page;
 
   outgoingEdges: Edge[];

diff --git a/apps/websocket/src/yjs/yjs.service.ts b/apps/websocket/src/yjs/yjs.service.ts
@@ -187,6 +187,7 @@ export class YjsService
           x: node.x,
           y: node.y,
         },
+        color: node.color ?? '#FFFFFF',
         selected: false, // 기본적으로 선택되지 않음
         dragging: true,
         isHolding: false,
@@ -266,21 +267,21 @@ export class YjsService
       const { id } = node.data;
       const { x, y } = node.position;
       const isHolding = node.isHolding;
+      const color = node.color ?? '#FFFFFF';
       if (isHolding) continue;
 
-      // TODO : node의 경우 key 값을 page id가 아닌 node id로 변경
-      // const findPage = await this.pageService.findPageById(id);
-      // await this.nodeService.updateNode(findPage.node.id, {
-      //   title,
-      //   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,
+      );
     }
   }
 

diff --git a/apps/websocket/src/yjs/yjs.type.ts b/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;
 };