Feat/#197-K: 회의록 제목 수정 기능 (#198)

Author: se030

client/src/components/Mom/index.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import SOCKET_MESSAGE from 'src/constants/socket-message';
 import { useCRDT } from 'src/hooks/useCRDT';
+import useDebounce from 'src/hooks/useDebounce';
 import useSelectedMom from 'src/hooks/useSelectedMom';
 import useSocketContext from 'src/hooks/useSocketContext';
 import { v4 as uuid } from 'uuid';
@@ -22,16 +23,18 @@ function Mom() {
     remoteDeleteCRDT,
   } = useCRDT();
 
-  const onTitleChange: React.FormEventHandler<HTMLHeadingElement> = (e) => {
-    /*
-      제목 변경하는 요청
-      const title = e.target as HTMLHeadingElement;
-      title.innerText
-      OR
-      titleRef.current.innerText
-    */
-    const title = e.target as HTMLHeadingElement;
-  };
+  const titleRef = useRef<HTMLHeadingElement>(null);
+
+  const onTitleUpdate: React.FormEventHandler<HTMLHeadingElement> = useDebounce(
+    (e) => {
+      if (!titleRef.current) return;
+
+      const title = titleRef.current.innerText;
+
+      socket.emit(SOCKET_MESSAGE.MOM.UPDATE_TITLE, title);
+    },
+    500,
+  );
 
   const [blocks, setBlocks] = useState<string[]>([]);
 
@@ -80,6 +83,12 @@ function Mom() {
   }, [selectedMom]);
 
   useEffect(() => {
+    socket.on(SOCKET_MESSAGE.MOM.UPDATE_TITLE, (title) => {
+      if (!titleRef.current) return;
+
+      titleRef.current.innerText = title;
+    });
+
     socket.on(SOCKET_MESSAGE.MOM.UPDATED, () => setBlocks(spreadCRDT()));
 
     socket.on(SOCKET_MESSAGE.MOM.INSERT_BLOCK, (op) => {
@@ -106,6 +115,7 @@ function Mom() {
 
     return () => {
       [
+        SOCKET_MESSAGE.MOM.UPDATE_TITLE,
         SOCKET_MESSAGE.MOM.UPDATED,
         SOCKET_MESSAGE.MOM.INSERT_BLOCK,
         SOCKET_MESSAGE.MOM.DELETE_BLOCK,
@@ -123,11 +133,12 @@ function Mom() {
           <>
             <div className={style['mom-header']}>
               <h1
+                ref={titleRef}
                 contentEditable={true}
                 suppressContentEditableWarning={true}
-                onInput={onTitleChange}
+                onInput={onTitleUpdate}
               >
-                {selectedMom.name}
+                {selectedMom.title}
               </h1>
               <span>{new Date(selectedMom.createdAt).toLocaleString()}</span>
             </div>

client/src/components/Sidebar/MomList.tsx

@@ -47,9 +47,9 @@ function MomList({ moms, setSelectedMom }: MomListProps) {
     <div className={style['mom-list-container']}>
       <h2>회의록</h2>
       <ul className={style['mom-list']}>
-        {momList.map(({ _id: id, name }) => (
+        {momList.map(({ _id: id, title }) => (
           <li key={id} onClick={() => onSelect(id)}>
-            {name}
+            {title}
           </li>
         ))}
       </ul>

client/src/constants/socket-message.ts

@@ -2,6 +2,7 @@ const SOCKET_MESSAGE = {
   MOM: {
     CREATE: 'create',
     SELECT: 'select',
+    UPDATE_TITLE: 'update-mom-title',
     INIT: 'init-mom',
     INSERT_BLOCK: 'insert-block',
     DELETE_BLOCK: 'delete-block',

client/src/hooks/useDebounce.ts

@@ -0,0 +1,18 @@
+import { useRef } from 'react';
+
+function useDebounce<T extends unknown[]>(
+  callback: (...params: T) => void,
+  time: number,
+) {
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  return (...params: T) => {
+    if (timer.current) clearTimeout(timer.current);
+
+    timer.current = setTimeout(() => {
+      callback(...params);
+      timer.current = null;
+    }, time);
+  };
+}
+
+export default useDebounce;

client/src/types/mom.d.ts

@@ -1,5 +1,5 @@
 export type TMom = {
   _id: string;
-  name: string;
+  title: string;
   createdAt: Date;
 };

server/apis/mom/model.ts

@@ -5,13 +5,13 @@ import autoIncrement from 'mongoose-auto-increment';
 
 export interface Mom extends LinkedList {
   id: number;
-  name: string;
+  title: string;
   createdAt: Date;
 }
 
 const momSchema = new Schema<Mom>({
   id: { type: Number, required: true },
-  name: { type: String, default: '제목 없음' },
+  title: { type: String, default: '제목 없음' },
   createdAt: { type: Date, default: new Date() },
   head: { type: Object, default: null },
   nodeMap: { type: Object, default: {} },

server/apis/mom/service.ts

@@ -32,6 +32,10 @@ export const createMom = async (workspaceId: string) => {
   return mom;
 };
 
+export const putMomTitle = async (id: string, title: string) => {
+  await momModel.updateOne({ _id: id }, { title });
+};
+
 export const putMom = async (id: string, data: LinkedList) => {
   await momModel.updateOne(
     { _id: id },

server/apis/workspace/service.ts

@@ -60,7 +60,7 @@ export const info = async (workspaceId: number) => {
     )) || [];
 
   const moms: string[] = momsIds.length
-    ? await momModel.find({ id: { $in: momsIds } }, { name: 1 })
+    ? await momModel.find({ id: { $in: momsIds } }, { title: 1 })
     : [];
 
   return { name, members, moms };

server/constants/socket-message.ts

@@ -2,6 +2,7 @@ const SOCKET_MESSAGE = {
   MOM: {
     CREATE: 'create',
     SELECT: 'select',
+    UPDATE_TITLE: 'update-mom-title',
     INIT: 'init-mom',
     INSERT_BLOCK: 'insert-block',
     DELETE_BLOCK: 'delete-block',

server/socket/mom.ts

@@ -1,4 +1,5 @@
 import * as Questions from '@apis/mom/questions/service';
+import { putMomTitle } from '@apis/mom/service';
 import { createVote, endVote, updateVote } from '@apis/mom/vote/service';
 import SOCKET_MESSAGE from '@constants/socket-message';
 import CrdtManager from '@utils/crdt-manager';
@@ -44,6 +45,14 @@ async function momSocketServer(io: Server) {
       socket.emit(SOCKET_MESSAGE.MOM.SELECT, mom);
     });
 
+    socket.on(SOCKET_MESSAGE.MOM.UPDATE_TITLE, async (title: string) => {
+      const momId = socket.data.momId;
+
+      await putMomTitle(momId, title);
+
+      socket.to(momId).emit(SOCKET_MESSAGE.MOM.UPDATE_TITLE, title);
+    });
+
     /* crdt for Mom */
     socket.on(SOCKET_MESSAGE.MOM.INIT, async () => {
       const momId = socket.data.momId;