Merge pull request #299 from boostcampwm-2022/dev

Deploy: 5주차 데모 전 배포

Author: se030

@wabinar/constants/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@wabinar/constants",
+  "version": "1.0.0",
+  "description": "CRDT for wabinar",
+  "license": "MIT",
+  "scripts": {
+    "test": "jest"
+  },
+  "devDependencies": {
+    "jest": "^29.3.1"
+  }
+}

@wabinar/constants/socket-message.ts

@@ -0,0 +1,38 @@
+export const WORKSPACE_EVENT = {
+  START_MEETING: 'start-meeting',
+  END_MEETING: 'end-meeting',
+  SEND_HELLO: 'send-hello',
+  RECEIVE_HELLO: 'receive-hello',
+  SEND_OFFER: 'send-offer',
+  RECEIVE_OFFER: 'receive-offer',
+  SEND_ANSWER: 'send-answer',
+  RECEIVE_ANSWER: 'receive-answer',
+  SEND_ICE: 'send-ice',
+  RECEIVE_ICE: 'receive-ice',
+  RECEIVE_BYE: 'receive_bye',
+};
+
+export const MOM_EVENT = {
+  CREATE: 'create',
+  SELECT: 'select',
+  UPDATE_TITLE: 'update-mom-title',
+  INIT: 'init-mom',
+  INSERT_BLOCK: 'insert-block',
+  DELETE_BLOCK: 'delete-block',
+  UPDATED: 'updated-mom',
+};
+
+export const BLOCK_EVENT = {
+  INIT: 'init-block',
+  LOAD_TYPE: 'load-type',
+  UPDATE_TYPE: 'update-type',
+  INSERT_TEXT: 'insert-text',
+  DELETE_TEXT: 'delete-text',
+  UPDATE_TEXT: 'update-text',
+  CREATE_VOTE: 'create-vote',
+  UPDATE_VOTE: 'update-vote',
+  END_VOTE: 'end-vote',
+  FETCH_QUESTIONS: 'fetch-questions',
+  ADD_QUESTIONS: 'add-questions',
+  RESOLVE_QUESTIONS: 'resolve-questions',
+};

client/src/components/QuestionBlock/index.tsx renamed to client/src/components/Block/QuestionBlock/index.tsx

@@ -1,5 +1,6 @@
 import { BiCheckbox } from '@react-icons/all-files/bi/BiCheckbox';
 import { BiCheckboxChecked } from '@react-icons/all-files/bi/BiCheckboxChecked';
+import { BLOCK_EVENT } from '@wabinar/constants/socket-message';
 import classNames from 'classnames/bind';
 import React, { useEffect, useState } from 'react';
 import useSocketContext from 'src/hooks/useSocketContext';
@@ -14,7 +15,11 @@ interface Question {
   text: string;
 }
 
-function QuestionBlock() {
+interface QuestionBlockProps {
+  id: string;
+}
+
+function QuestionBlock({ id }: QuestionBlockProps) {
   const [questions, setQuestions] = useState<Question[]>([]);
   const { momSocket: socket } = useSocketContext();
 
@@ -27,27 +32,40 @@ function QuestionBlock() {
       isResolved: false,
       text: questionText,
     };
-    socket.emit('question-block__add-question', question);
+
+    socket.emit(BLOCK_EVENT.ADD_QUESTIONS, id, question);
   };
 
   useEffect(() => {
-    socket.on('question-block__questions-fetched', fetchedQuestions => {
-      setQuestions([...fetchedQuestions]);
+    socket.on(`${BLOCK_EVENT.FETCH_QUESTIONS}-${id}`, (fetchedQuestions) => {
+      setQuestions(fetchedQuestions ? [...fetchedQuestions] : []);
     });
 
-    socket.on('question-block__question-added', (questionToAdd) => {
-      setQuestions(prev => [...prev, questionToAdd]);
+    socket.on(`${BLOCK_EVENT.ADD_QUESTIONS}-${id}`, (questionToAdd) => {
+      setQuestions((prev) => [...prev, questionToAdd]);
     });
 
-    socket.emit('question-block__fetch-questions');
+    socket.emit(BLOCK_EVENT.FETCH_QUESTIONS, id);
+
+    return () => {
+      socket.off(`${BLOCK_EVENT.FETCH_QUESTIONS}-${id}`);
+      socket.off(`${BLOCK_EVENT.ADD_QUESTIONS}-${id}`);
+    };
   }, []);
 
   const onClick: React.MouseEventHandler<HTMLLIElement> = (e) => {
     const targetId = Number(e.currentTarget.id);
-    const clickedQuestion = questions.filter(q => q.id === targetId)[0];
-    const toggledResolved = !clickedQuestion.isResolved;
 
-    socket.emit('question-block__toggle-resolved', targetId, toggledResolved);
+    const toggledQuestions = questions.map((q) => {
+      if (q.id === targetId) {
+        q.isResolved = !q.isResolved;
+      }
+      return q;
+    });
+
+    setQuestions(toggledQuestions);
+
+    socket.emit(BLOCK_EVENT.RESOLVE_QUESTIONS, id, toggledQuestions);
   };
 
   const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
@@ -80,7 +98,9 @@ function QuestionBlock() {
             ) : (
               <BiCheckbox className={style['check-box']} />
             )}
-            <p className={cx(questionText, { check: isResolved })}>{questionText}</p>
+            <p className={cx(questionText, { check: isResolved })}>
+              {questionText}
+            </p>
           </li>
         ))}
       </ul>

client/src/components/QuestionBlock/style.module.scss renamed to client/src/components/Block/QuestionBlock/style.module.scss

@@ -1,16 +1,16 @@
 import { BlockType } from '@wabinar/api-types/block';
+import { BLOCK_EVENT } from '@wabinar/constants/socket-message';
 import {
-  RemoteInsertOperation,
   RemoteDeleteOperation,
+  RemoteInsertOperation,
 } from '@wabinar/crdt/linked-list';
-import React, { useEffect, useRef, memo, useState } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 import BlockSelector from 'src/components/BlockSelector';
-import SOCKET_MESSAGE from 'src/constants/socket-message';
 import { useCRDT } from 'src/hooks/useCRDT';
 import { useOffset } from 'src/hooks/useOffset';
 import useSocketContext from 'src/hooks/useSocketContext';
 
-import ee from '../EventEmitter';
+import ee from '../Mom/EventEmitter';
 
 interface BlockProps {
   id: string;
@@ -112,25 +112,37 @@ function TextBlock({
   useEffect(() => {
     registerRef(blockRef);
 
-    socket.emit(SOCKET_MESSAGE.BLOCK.INIT, id);
+    socket.emit(BLOCK_EVENT.INIT, id);
 
-    ee.on(`${SOCKET_MESSAGE.BLOCK.INIT}-${id}`, onInitialize);
-    ee.on(`${SOCKET_MESSAGE.BLOCK.UPDATE_TEXT}-${id}`, onInitialize);
-    ee.on(`${SOCKET_MESSAGE.BLOCK.INSERT_TEXT}-${id}`, onInsert);
-    ee.on(`${SOCKET_MESSAGE.BLOCK.DELETE_TEXT}-${id}`, onDelete);
+    ee.on(`${BLOCK_EVENT.INIT}-${id}`, onInitialize);
+    ee.on(`${BLOCK_EVENT.UPDATE_TEXT}-${id}`, onInitialize);
+    ee.on(`${BLOCK_EVENT.INSERT_TEXT}-${id}`, onInsert);
+    ee.on(`${BLOCK_EVENT.DELETE_TEXT}-${id}`, onDelete);
 
     return () => {
-      ee.off(`${SOCKET_MESSAGE.BLOCK.INIT}-${id}`, onInitialize);
-      ee.off(`${SOCKET_MESSAGE.BLOCK.UPDATE_TEXT}-${id}`, onInitialize);
-      ee.off(`${SOCKET_MESSAGE.BLOCK.INSERT_TEXT}-${id}`, onInsert);
-      ee.off(`${SOCKET_MESSAGE.BLOCK.DELETE_TEXT}-${id}`, onDelete);
+      ee.off(`${BLOCK_EVENT.INIT}-${id}`, onInitialize);
+      ee.off(`${BLOCK_EVENT.UPDATE_TEXT}-${id}`, onInitialize);
+      ee.off(`${BLOCK_EVENT.INSERT_TEXT}-${id}`, onInsert);
+      ee.off(`${BLOCK_EVENT.DELETE_TEXT}-${id}`, onDelete);
     };
   }, []);
 
+  useEffect(() => {
+    updateCaretPosition();
+  }, [isOpen]);
+
   // 로컬에서 일어나는 작성 - 삽입과 삭제 연산
   const onInput: React.FormEventHandler = (e) => {
     setOffset();
 
+    if (!blockRef.current) return;
+
+    if (blockRef.current.innerText === '/') {
+      setIsOpen(true);
+    } else if (isOpen) {
+      setIsOpen(false);
+    }
+
     if (offsetRef.current === null) return;
 
     const event = e.nativeEvent as InputEvent;
@@ -139,15 +151,15 @@ function TextBlock({
 
     if (event.inputType === 'deleteContentBackward') {
       const remoteDeletion = localDeleteCRDT(offsetRef.current);
-      socket.emit(SOCKET_MESSAGE.BLOCK.DELETE_TEXT, id, remoteDeletion);
+      socket.emit(BLOCK_EVENT.DELETE_TEXT, id, remoteDeletion);
       return;
     }
 
     const letter = event.data as string;
     const previousLetterIndex = offsetRef.current - 2;
     const remoteInsertion = localInsertCRDT(previousLetterIndex, letter);
 
-    socket.emit(SOCKET_MESSAGE.BLOCK.INSERT_TEXT, id, remoteInsertion);
+    socket.emit(BLOCK_EVENT.INSERT_TEXT, id, remoteInsertion);
   };
 
   // 한글 입력 핸들링
@@ -165,7 +177,7 @@ function TextBlock({
 
       const remoteInsertion = localInsertCRDT(previousLetterIndex, letter);
 
-      socket.emit(SOCKET_MESSAGE.BLOCK.INSERT_TEXT, id, remoteInsertion);
+      socket.emit(BLOCK_EVENT.INSERT_TEXT, id, remoteInsertion);
     });
   };
 
@@ -187,7 +199,7 @@ function TextBlock({
       .split('')
       .map((letter) => localInsertCRDT(previousLetterIndex++, letter));
 
-    socket.emit(SOCKET_MESSAGE.BLOCK.UPDATE_TEXT, id, remoteInsertions);
+    socket.emit(BLOCK_EVENT.UPDATE_TEXT, id, remoteInsertions);
 
     blockRef.current.innerText = previousText + pastedText + nextText;
     updateCaretPosition(pastedText.length);

client/src/components/Mom/Block/TextBlock.tsx renamed to client/src/components/Block/TextBlock.tsx

@@ -0,0 +1,37 @@
+import { BLOCK_EVENT } from '@wabinar/constants/socket-message';
+import { useState, useEffect } from 'react';
+import VoteBlockTemplate from 'src/components/common/Templates/VoteBlock';
+import { VoteMode } from 'src/constants/block';
+import useSocketContext from 'src/hooks/useSocketContext';
+import { Option } from 'src/types/block';
+
+interface VoteBlockProps {
+  id: string;
+}
+
+function VoteBlock({ id }: VoteBlockProps) {
+  const { momSocket: socket } = useSocketContext();
+
+  const [voteMode, setVoteMode] = useState<VoteMode>(VoteMode.CREATE);
+  const initialOption: Option[] = [{ id: 1, text: '', count: 0 }];
+  const [options, setOptions] = useState<Option[]>(initialOption);
+
+  useEffect(() => {
+    socket.on(BLOCK_EVENT.CREATE_VOTE, (options) => {
+      setVoteMode(VoteMode.REGISTERED as VoteMode);
+      setOptions(options);
+    });
+  }, []);
+
+  return (
+    <VoteBlockTemplate
+      id={id}
+      mode={voteMode}
+      setVoteMode={setVoteMode}
+      options={options}
+      setOptions={setOptions}
+    />
+  );
+}
+
+export default VoteBlock;

client/src/components/Block/VoteBlock.tsx

@@ -1,9 +1,11 @@
-import { useState, useEffect, memo, useRef } from 'react';
-import SOCKET_MESSAGE from 'src/constants/socket-message';
+import { BLOCK_EVENT } from '@wabinar/constants/socket-message';
+import ee from 'components/Mom/EventEmitter';
+import { memo, useEffect, useRef, useState } from 'react';
 import useSocketContext from 'src/hooks/useSocketContext';
 
-import ee from '../EventEmitter';
+import QuestionBlock from './QuestionBlock';
 import TextBlock from './TextBlock';
+import VoteBlock from './VoteBlock';
 
 export enum BlockType {
   H1,
@@ -28,25 +30,23 @@ function Block({ id, index, onKeyDown, registerRef }: BlockProps) {
   const localUpdateFlagRef = useRef<boolean>(false);
 
   useEffect(() => {
-    socket.emit(SOCKET_MESSAGE.BLOCK.LOAD_TYPE, id, (type: BlockType) =>
-      setType(type),
-    );
+    socket.emit(BLOCK_EVENT.LOAD_TYPE, id, (type: BlockType) => setType(type));
 
-    ee.on(`${SOCKET_MESSAGE.BLOCK.UPDATE_TYPE}-${id}`, (type) => {
+    ee.on(`${BLOCK_EVENT.UPDATE_TYPE}-${id}`, (type) => {
       setType(type);
       localUpdateFlagRef.current = false;
     });
   }, []);
 
   useEffect(() => {
     if (localUpdateFlagRef.current) {
-      socket.emit(SOCKET_MESSAGE.BLOCK.UPDATE_TYPE, id, type);
+      socket.emit(BLOCK_EVENT.UPDATE_TYPE, id, type);
     }
   }, [type]);
 
-  const setBlockType = (id: BlockType) => {
+  const setBlockType = (type: BlockType) => {
     localUpdateFlagRef.current = true;
-    setType(id);
+    setType(type);
   };
 
   switch (type) {
@@ -64,6 +64,10 @@ function Block({ id, index, onKeyDown, registerRef }: BlockProps) {
           registerRef={registerRef}
         />
       );
+    case BlockType.VOTE:
+      return <VoteBlock id={id} />;
+    case BlockType.QUESTION:
+      return <QuestionBlock id={id} />;
     default:
       return <p />;
   }

client/src/components/Mom/Block/index.tsx renamed to client/src/components/Block/index.tsx

@@ -7,7 +7,7 @@ interface MediaProps {
   muted: boolean;
 }
 
-function ConfMedia({ stream, muted }: MediaProps) {
+function MeetingMedia({ stream, muted }: MediaProps) {
   const ref = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
@@ -18,4 +18,4 @@ function ConfMedia({ stream, muted }: MediaProps) {
   return <video className={style.video} ref={ref} muted={muted} autoPlay />;
 }
 
-export default memo(ConfMedia);
+export default memo(MeetingMedia);