Fix/#383-B: 처음 입장 시 Default MOM이 깜빡거리는 현상 해결 (#385)

* chore: LOADED 이벤트 상수 추가

Resolve: #379

* fix: 처음 입장 시 회의록 디폴트 UI 깜빡거리는 현상 해결

Resolve: #379

* chore: console 제거

* refactor: REQUEST_LOADED off 제거

Author: dohun31

@wabinar/constants/socket-message.ts

@@ -23,6 +23,8 @@ export const MOM_EVENT = {
   INSERT_BLOCK: 'insert-block',
   DELETE_BLOCK: 'delete-block',
   UPDATED: 'updated-mom',
+  LOADED: 'loaded-mom',
+  REQUEST_LOADED: 'request-loaded',
 };
 
 export const BLOCK_EVENT = {

client/src/components/Mom/index.tsx

@@ -14,12 +14,6 @@ import style from './style.module.scss';
 function Mom() {
   const { selectedMom } = useSelectedMomContext();
   const { momSocket: socket } = useSocketContext();
-
-  const initMom = () => {
-    if (!selectedMom) return;
-    socket.emit(MOM_EVENT.INIT, selectedMom._id);
-  };
-
   const {
     syncCRDT,
     spreadCRDT,
@@ -30,6 +24,17 @@ function Mom() {
   } = useCRDT();
 
   const titleRef = useRef<HTMLHeadingElement>(null);
+  const blockRefs = useRef<React.RefObject<HTMLElement>[]>([]);
+  const focusIndex = useRef<number>();
+
+  const [blocks, setBlocks] = useState<string[]>([]);
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
+  const [isMomsEmpty, setIsMomsEmpty] = useState(false);
+
+  const initMom = () => {
+    if (!selectedMom) return;
+    socket.emit(MOM_EVENT.INIT, selectedMom._id);
+  };
 
   const onTitleUpdate: React.FormEventHandler<HTMLHeadingElement> = useDebounce(
     () => {
@@ -43,11 +48,6 @@ function Mom() {
     500,
   );
 
-  const [blocks, setBlocks] = useState<string[]>([]);
-
-  const blockRefs = useRef<React.RefObject<HTMLElement>[]>([]);
-  const focusIndex = useRef<number>();
-
   const updateBlockFocus = (idx: number | undefined) => {
     focusIndex.current = idx;
   };
@@ -216,43 +216,63 @@ function Mom() {
     };
   }, [selectedMom]);
 
+  useEffect(() => {
+    ee.on(MOM_EVENT.LOADED, (momsLength: number) => {
+      setIsLoaded(true);
+      setIsMomsEmpty(momsLength === 0);
+    });
+
+    ee.emit(MOM_EVENT.REQUEST_LOADED);
+
+    return () => {
+      ee.off(MOM_EVENT.LOADED);
+    };
+  }, [socket]);
+
   const registerRef =
     (index: number) => (ref: React.RefObject<HTMLElement>) => {
       blockRefs.current[index] = ref;
       setBlockFocus(index);
     };
 
-  return selectedMom ? (
-    <div className={style['mom-container']}>
-      <div className={style['mom']}>
-        <div className={style['mom-header']}>
-          <h1
-            ref={titleRef}
-            contentEditable={true}
-            suppressContentEditableWarning={true}
-            onInput={onTitleUpdate}
-          >
-            {selectedMom.title}
-          </h1>
-          <span>{new Date(selectedMom.createdAt).toLocaleString()}</span>
-        </div>
+  if (!isLoaded) {
+    return <div className={style['mom-container']}></div>;
+  }
+
+  if (isMomsEmpty) {
+    return <DefaultMom />;
+  }
 
-        <div className={style['mom-body']}>
-          {blocks.map((id, index) => (
-            <Block
-              key={id}
-              id={id}
-              index={index}
-              createBlock={createBlock}
-              onHandleBlocks={onHandleBlocks}
-              registerRef={registerRef(index)}
-            />
-          ))}
+  return (
+    <div className={style['mom-container']}>
+      {selectedMom && (
+        <div className={style['mom']}>
+          <div className={style['mom-header']}>
+            <h1
+              ref={titleRef}
+              contentEditable={true}
+              suppressContentEditableWarning={true}
+              onInput={onTitleUpdate}
+            >
+              {selectedMom.title}
+            </h1>
+            <span>{new Date(selectedMom.createdAt).toLocaleString()}</span>
+          </div>
+          <div className={style['mom-body']}>
+            {blocks.map((id, index) => (
+              <Block
+                key={id}
+                id={id}
+                index={index}
+                createBlock={createBlock}
+                onHandleBlocks={onHandleBlocks}
+                registerRef={registerRef(index)}
+              />
+            ))}
+          </div>
         </div>
-      </div>
+      )}
     </div>
-  ) : (
-    <DefaultMom />
   );
 }
 

client/src/components/Sidebar/MomList.tsx

@@ -32,6 +32,10 @@ function MomList({ moms, selectedMom, setSelectedMom }: MomListProps) {
 
     setMomList(moms);
 
+    ee.on(MOM_EVENT.REQUEST_LOADED, () => {
+      ee.emit(MOM_EVENT.LOADED, moms ? moms.length : 0);
+    });
+
     socket.on(MOM_EVENT.CREATE, (mom) => setMomList((prev) => [...prev, mom]));
 
     socket.on(MOM_EVENT.SELECT, (mom) => {
@@ -41,6 +45,7 @@ function MomList({ moms, selectedMom, setSelectedMom }: MomListProps) {
     return () => {
       socket.off(MOM_EVENT.CREATE);
       socket.off(MOM_EVENT.SELECT);
+      ee.off(MOM_EVENT.REQUEST_LOADED);
     };
   }, [moms]);