Merge pull request #320 from boostcampwm-2022/dev

Deploy: 5주차 주말 작업 배포

Author: dohun31

.github/workflows/ci.yml

@@ -3,47 +3,58 @@ name: ci
 on:
   workflow_dispatch:
   pull_request:
-    branches: [ dev ]
+    branches: [dev]
 
 jobs:
   build:
     name: Build and test
     strategy:
       matrix:
-        os: [ ubuntu-latest, windows-latest, macos-latest ]
-        node-version: [ 16, 18 ]
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        node-version: [16, 18]
 
     runs-on: ${{ matrix.os }}
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Use node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    
-    - name: For client directory
-      run: |
-        cd client
-        npm run build --if-present
-        npm test --if-present
-        
-    - name: Install coreutils for macOS
-      shell: bash
-      if: runner.os == 'macOS'
-      run: |
-        brew install coreutils
-        alias timeout=gtimeout
-        
-    - name: For server directory
-      shell: bash
-      env:
-        BACKEND_LOGIN_KEY: ${{ secrets.DOTENV_VAULT_BACKEND_CI_LOGIN_KEY }}
-      run: |
-        cd server
-        npm run build --if-present
-        npm test --if-present
-        npx dotenv-vault login "$BACKEND_LOGIN_KEY" > /dev/null
-        npx dotenv-vault pull ci .env
-        timeout --verbose 10 npx ts-node index.ts || { if [ $? -eq 124 ]; then (exit 0); else (exit $?); fi }
+      - uses: actions/checkout@v3
+      - name: Use node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Cache dependencies
+        id: cache
+        uses: actions/cache@v3
+        if: runner.os != 'Windows'
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install Dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: For client directory
+        run: |
+          cd client
+          npm run build --if-present
+          npm test --if-present
+
+      - name: Install coreutils for macOS
+        shell: bash
+        if: runner.os == 'macOS'
+        run: |
+          brew install coreutils
+          alias timeout=gtimeout
+
+      - name: For server directory
+        shell: bash
+        env:
+          BACKEND_LOGIN_KEY: ${{ secrets.DOTENV_VAULT_BACKEND_CI_LOGIN_KEY }}
+        run: |
+          cd server
+          npm run build --if-present
+          npm test --if-present
+          npx dotenv-vault login "$BACKEND_LOGIN_KEY" > /dev/null
+          npx dotenv-vault pull ci .env
+          timeout --verbose 10 npx ts-node index.ts || { if [ $? -eq 124 ]; then (exit 0); else (exit $?); fi }

@wabinar/constants/socket-message.ts

@@ -23,13 +23,13 @@ export const MOM_EVENT = {
 };
 
 export const BLOCK_EVENT = {
-  INIT: 'init-block',
   LOAD_TYPE: 'load-type',
   UPDATE_TYPE: 'update-type',
+  INIT_TEXT: 'init-text',
   INSERT_TEXT: 'insert-text',
   DELETE_TEXT: 'delete-text',
   UPDATE_TEXT: 'update-text',
-  CREATE_VOTE: 'create-vote',
+  REGISTER_VOTE: 'register-vote',
   UPDATE_VOTE: 'update-vote',
   END_VOTE: 'end-vote',
   FETCH_QUESTIONS: 'fetch-questions',

client/src/components/Block/TextBlock.tsx

@@ -15,22 +15,23 @@ import ee from '../Mom/EventEmitter';
 interface BlockProps {
   id: string;
   index: number;
-  onKeyDown: React.KeyboardEventHandler;
+  onHandleBlock: React.KeyboardEventHandler;
   type: BlockType;
   setType: (arg: BlockType) => void;
+  isLocalTypeUpdate: boolean;
   registerRef: (arg: React.RefObject<HTMLElement>) => void;
 }
 
 function TextBlock({
   id,
   index,
-  onKeyDown,
+  onHandleBlock,
   type,
   setType,
+  isLocalTypeUpdate,
   registerRef,
 }: BlockProps) {
   const { momSocket: socket } = useSocketContext();
-  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const {
     syncCRDT,
@@ -43,9 +44,12 @@ function TextBlock({
 
   const blockRef = useRef<HTMLParagraphElement>(null);
 
-  const { offsetRef, setOffset, clearOffset, offsetHandlers } =
+  const { offsetRef, setOffset, clearOffset, onArrowKeyDown, offsetHandlers } =
     useOffset(blockRef);
 
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const onClose = () => setIsOpen(false);
+
   // 리모트 연산 수행결과로 innerText 변경 시 커서의 위치 조정
   const updateCaretPosition = (updateOffset = 0) => {
     if (!blockRef.current || offsetRef.current === null) return;
@@ -110,27 +114,41 @@ function TextBlock({
 
   // crdt의 초기화와 소켓을 통해 전달받는 리모트 연산 처리
   useEffect(() => {
-    registerRef(blockRef);
+    socket.emit(BLOCK_EVENT.INIT_TEXT, id);
 
-    socket.emit(BLOCK_EVENT.INIT, id);
-
-    ee.on(`${BLOCK_EVENT.INIT}-${id}`, onInitialize);
+    ee.on(`${BLOCK_EVENT.INIT_TEXT}-${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(`${BLOCK_EVENT.INIT}-${id}`, onInitialize);
+      ee.off(`${BLOCK_EVENT.INIT_TEXT}-${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(() => {
+    registerRef(blockRef);
+  }, [index]);
+
   useEffect(() => {
     updateCaretPosition();
   }, [isOpen]);
 
+  useEffect(() => {
+    if (isLocalTypeUpdate && readCRDT().length) {
+      const remoteDeletion = localDeleteCRDT(0);
+      socket.emit(BLOCK_EVENT.DELETE_TEXT, id, remoteDeletion);
+
+      if (!blockRef.current) return;
+
+      blockRef.current.innerText = readCRDT();
+      blockRef.current.focus();
+    }
+  }, [type]);
+
   // 로컬에서 일어나는 작성 - 삽입과 삭제 연산
   const onInput: React.FormEventHandler = (e) => {
     setOffset();
@@ -205,18 +223,16 @@ function TextBlock({
     updateCaretPosition(pastedText.length);
   };
 
-  const onKeyDownComposite: React.KeyboardEventHandler<HTMLParagraphElement> = (
-    e,
-  ) => {
-    offsetHandlers.onKeyDown(e);
-    onKeyDown(e);
+  const onKeyDown: React.KeyboardEventHandler<HTMLParagraphElement> = (e) => {
+    onArrowKeyDown(e);
+    onHandleBlock(e);
   };
 
   const commonHandlers = {
     onInput,
     onCompositionEnd,
     ...offsetHandlers,
-    onKeyDown: onKeyDownComposite,
+    onKeyDown,
     onPaste,
   };
 
@@ -236,14 +252,14 @@ function TextBlock({
         {
           ref: blockRef,
           'data-id': id,
-          'date-index': index,
+          'data-index': index,
           ...commonHandlers,
           contentEditable: true,
           suppressContentEditableWarning: true,
         },
         readCRDT(),
       )}
-      {isOpen && <BlockSelector onSelect={onSelect} />}
+      {isOpen && <BlockSelector onClose={onClose} onSelect={onSelect} />}
     </>
   );
 }