Feat/#372-K: 회의록 제목 변경 MomList에 반영 (#373)

* feat: UPDATE_TITLE 이벤트에 사이드바 momList 업데이트

* fix: dependency array 추가 및 optional chaining 제거

Author: se030

client/src/components/Mom/index.tsx

@@ -38,6 +38,7 @@ function Mom() {
       const title = titleRef.current.innerText;
 
       socket.emit(MOM_EVENT.UPDATE_TITLE, title);
+      ee.emit(MOM_EVENT.UPDATE_TITLE, title);
     },
     500,
   );
@@ -149,6 +150,7 @@ function Mom() {
       if (!titleRef.current) return;
 
       titleRef.current.innerText = title;
+      ee.emit(MOM_EVENT.UPDATE_TITLE, title);
     });
 
     socket.on(MOM_EVENT.UPDATED, () => {

client/src/components/Sidebar/MomList.tsx

@@ -4,14 +4,16 @@ import { memo, useEffect, useState } from 'react';
 import useSocketContext from 'src/hooks/context/useSocketContext';
 import { TMom } from 'src/types/mom';
 
+import ee from '../Mom/EventEmitter';
 import style from './style.module.scss';
 
 interface MomListProps {
   moms: TMom[];
+  selectedMom: TMom | null;
   setSelectedMom: React.Dispatch<React.SetStateAction<TMom | null>>;
 }
 
-function MomList({ moms, setSelectedMom }: MomListProps) {
+function MomList({ moms, selectedMom, setSelectedMom }: MomListProps) {
   const { momSocket: socket } = useSocketContext();
   const [momList, setMomList] = useState<TMom[]>(moms);
 
@@ -42,6 +44,25 @@ function MomList({ moms, setSelectedMom }: MomListProps) {
     };
   }, [moms]);
 
+  useEffect(() => {
+    ee.on(MOM_EVENT.UPDATE_TITLE, (title) => {
+      if (!selectedMom) return;
+
+      const updatedMomList = momList.map((mom) => {
+        if (mom._id === selectedMom._id) {
+          return { ...mom, title };
+        }
+        return mom;
+      });
+
+      setMomList(updatedMomList);
+    });
+
+    return () => {
+      ee.off(MOM_EVENT.UPDATE_TITLE);
+    };
+  }, []);
+
   return (
     <div className={style['mom-list-container']}>
       <div className={style['mom-list-header']}>

client/src/components/Sidebar/index.tsx

@@ -12,14 +12,18 @@ interface SidebarProps {
 }
 
 function Sidebar({ workspace }: SidebarProps) {
-  const { setSelectedMom } = useSelectedMomContext();
+  const { selectedMom, setSelectedMom } = useSelectedMomContext();
 
   return (
     <div className={style['sidebar-container']}>
       <Header name={workspace.name} />
       <div className={style['sidebar-container__scrollable']}>
         <MemberList members={workspace.members} />
-        <MomList moms={workspace.moms} setSelectedMom={setSelectedMom} />
+        <MomList
+          moms={workspace.moms}
+          selectedMom={selectedMom}
+          setSelectedMom={setSelectedMom}
+        />
       </div>
       <MeetingButton />
     </div>