Merge pull request #154 from boostcampwm-2022/dev

Deploy: 4주차 중간

Author: wcho21

@wabinar-crdt/convergence.test.ts

@@ -7,12 +7,12 @@ import { Node } from './node';
  * 바로 전달하면 같은 인스턴스를 가리키게 되어 remote operation 의미가 사라짐
  */
 const deepCopyRemoteInsertion = (op: RemoteInsertOperation) => {
-  const { prevId, node } = op;
+  const { node } = op;
 
   const copy = { ...node };
   Object.setPrototypeOf(copy, Node.prototype);
 
-  return { prevId, node: copy as Node };
+  return { node: copy as Node };
 };
 
 const remoteInsertThroughSocket = (crdt: CRDT, op: RemoteInsertOperation) => {

@wabinar-crdt/index.ts

@@ -39,8 +39,8 @@ class CRDT {
     return { targetId, clock: this.clock };
   }
 
-  remoteInsert({ prevId, node }: RemoteInsertOperation) {
-    const prevIndex = this.structure.insertById(prevId, node);
+  remoteInsert({ node }: RemoteInsertOperation) {
+    const prevIndex = this.structure.insertById(node);
 
     if (++this.clock < node.id.clock) {
       this.clock = node.id.clock + 1;

@wabinar-crdt/linked-list.ts

@@ -5,7 +5,6 @@ type RemoteIdentifier = Identifier | null;
 type ModifiedIndex = number | null;
 
 export interface RemoteInsertOperation {
-  prevId: Identifier | null;
   node: Node;
 }
 
@@ -14,37 +13,48 @@ export interface RemoteDeleteOperation {
   clock: number;
 }
 
+interface NodeMap {
+  [index: string]: Node;
+}
+
 export default class LinkedList {
-  head?: Node;
+  head: Identifier | null;
+  nodeMap: NodeMap;
+
+  constructor() {
+    this.head = null;
+    this.nodeMap = {};
+  }
 
   insertByIndex(
     index: number,
     letter: string,
     id: Identifier,
   ): RemoteInsertOperation {
-    const node = new Node(letter, id);
-
     try {
+      const node = new Node(letter, id);
+      this.setNode(id, node);
+
       // insertion to head
       if (!this.head || index === -1) {
         node.next = this.head;
         node.prev = null;
 
-        this.head = node;
+        this.head = id;
 
-        return { prevId: null, node };
+        return { node };
       }
 
       const prevNode = this.findByIndex(index);
 
       node.next = prevNode.next;
-      prevNode.next = node;
+      prevNode.next = node.id;
 
       const { id: prevId } = prevNode;
 
       node.prev = prevId;
 
-      return { prevId, node };
+      return { node };
     } catch (e) {
       throw new Error(`insertByIndex 실패 ^^\n${e}`);
     }
@@ -54,65 +64,84 @@ export default class LinkedList {
     try {
       // head deleted
       if (index === 0) {
-        if (!this.head) throw new Error('head가 없는데 어떻게 삭제하셨나요 ^^');
+        const head = this.getHeadNode();
+
+        if (!head) throw new Error('head가 없는데 어떻게 삭제하셨나요 ^^');
+
+        const nextNode = this.getNode(head.next);
+
+        if (!nextNode) {
+          this.head = null;
 
-        if (!this.head.next) {
-          this.head = undefined;
           return null;
         }
 
-        this.head.next.prev = null;
-        this.head = this.head.next;
+        nextNode.prev = null;
+
+        this.deleteNode(head.id);
+        this.head = head.next;
 
         return null;
       }
 
       const prevNode = this.findByIndex(index - 1);
 
-      const targetNode = prevNode.next;
+      if (!prevNode.next) return null;
 
-      prevNode.next = targetNode?.next;
+      const targetNode = this.getNode(prevNode.next);
 
-      if (!targetNode || !targetNode.id) return null;
+      if (!targetNode) return null;
+
+      this.deleteNode(targetNode.id);
+      prevNode.next = targetNode.next;
 
       return targetNode.id;
     } catch (e) {
       throw new Error(`deleteByIndex 실패 ^^\n${e}`);
     }
   }
 
-  insertById(id: RemoteIdentifier, node: Node): ModifiedIndex {
+  insertById(node: Node): ModifiedIndex {
     try {
+      this.setNode(node.id, node);
+
       let prevNode, prevIndex;
 
       // insertion to head
-      if (id === null) {
+      if (!node.prev) {
+        const head = this.getHeadNode();
+
         // 기존 head가 없거나 현재 node가 선행하는 경우
-        if (!this.head || node.precedes(this.head)) {
+        if (!head || node.precedes(head)) {
           node.next = this.head;
-          this.head = node;
+          this.head = node.id;
 
           return null;
         }
 
-        prevNode = this.head;
+        prevNode = head;
         prevIndex = 0;
       } else {
-        let { node: targetNode, index: targetIndex } = this.findById(id);
+        let { node: targetNode, index: targetIndex } = this.findById(node.prev);
 
         prevNode = targetNode;
         prevIndex = targetIndex;
       }
 
+      if (!prevNode) return null;
+
       // prevNode에 연결된 노드가 현재 node에 선행하는 경우
-      while (prevNode.next && prevNode.next.precedes(node)) {
-        prevNode = prevNode.next;
+      while (prevNode.next && this.getNode(prevNode.next)?.precedes(node)) {
+        prevNode = this.getNode(prevNode.next);
         prevIndex++;
+
+        if (!prevNode) return null;
       }
 
       node.next = prevNode.next;
+      prevNode.next = node.id;
+
       node.prev = prevNode.id;
-      prevNode.next = node;
 
       return prevIndex + 1;
     } catch (e) {
@@ -125,9 +154,11 @@ export default class LinkedList {
   deleteById(id: RemoteIdentifier): ModifiedIndex {
     try {
       if (!id) {
-        if (!this.head) throw new Error('일어날 수 없는 일이 발생했어요 ^^');
+        const head = this.getHeadNode();
+
+        if (!head) throw new Error('일어날 수 없는 일이 발생했어요 ^^');
 
-        this.head = this.head.next;
+        this.head = head.next;
 
         return null;
       }
@@ -146,23 +177,23 @@ export default class LinkedList {
   }
 
   stringify(): string {
-    let node: Node | undefined = this.head;
+    let node: Node | null = this.getHeadNode();
     let result = '';
 
     while (node) {
       result += node.value;
-      node = node.next;
+      node = this.getNode(node.next);
     }
 
     return result;
   }
 
   private findByIndex(index: number): Node {
     let count = 0;
-    let currentNode: Node | undefined = this.head;
+    let currentNode: Node | null = this.getHeadNode();
 
     while (count < index && currentNode) {
-      currentNode = currentNode.next;
+      currentNode = this.getNode(currentNode.next);
       count++;
     }
 
@@ -173,17 +204,37 @@ export default class LinkedList {
 
   private findById(id: Identifier) {
     let count = 0;
-    let currentNode: Node | undefined = this.head;
+    let currentNode: Node | null = this.getHeadNode();
 
     while (currentNode) {
       if (JSON.stringify(currentNode.id) === JSON.stringify(id)) {
         return { node: currentNode, index: count };
       }
 
-      currentNode = currentNode.next;
+      currentNode = this.getNode(currentNode.next);
       count++;
     }
 
     throw new Error('없는 노드인데요 ^^');
   }
+
+  private getNode(id: Identifier | null): Node | null {
+    if (!id) return null;
+
+    return this.nodeMap[JSON.stringify(id)];
+  }
+
+  private getHeadNode() {
+    if (!this.head) return null;
+
+    return this.getNode(this.head);
+  }
+
+  private setNode(id: Identifier, node: Node) {
+    this.nodeMap[JSON.stringify(id)] = node;
+  }
+
+  private deleteNode(id: Identifier) {
+    delete this.nodeMap[JSON.stringify(id)];
+  }
 }

@wabinar-crdt/node.ts

@@ -10,13 +10,15 @@ export class Identifier {
 
 export class Node {
   id: Identifier;
-  value?: string;
-  next?: Node;
-  prev?: Identifier | null;
+  value: string;
+  next: Identifier | null;
+  prev: Identifier | null;
 
   constructor(value: string, id: Identifier) {
     this.id = id;
     this.value = value;
+    this.next = null;
+    this.prev = null;
   }
 
   precedes(node: Node) {

client/src/components/ConfMediaBar/ConfMedia/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { memo, useEffect, useRef } from 'react';
 
 import style from './style.module.scss';
 
@@ -17,4 +17,4 @@ function ConfMedia({ stream }: MediaProps) {
   return <video className={style.video} ref={ref} autoPlay />;
 }
 
-export default ConfMedia;
+export default memo(ConfMedia);

client/src/components/ConfMediaBar/StreamButton/CamButton/index.tsx

@@ -0,0 +1,27 @@
+import { MdVideocam } from '@react-icons/all-files/md/MdVideocam';
+import { MdVideocamOff } from '@react-icons/all-files/md/MdVideocamOff';
+import { Dispatch, SetStateAction } from 'react';
+import color from 'styles/color.module.scss';
+
+interface CamButtonProps {
+  isOn: boolean;
+  setIsCamOn?: Dispatch<SetStateAction<boolean>>;
+}
+
+function CamButton({ isOn, setIsCamOn }: CamButtonProps) {
+  const onClick = () => {
+    if (setIsCamOn) setIsCamOn(!isOn);
+  };
+
+  return (
+    <button onClick={onClick}>
+      {isOn ? (
+        <MdVideocamOff color={color.red} size={20} />
+      ) : (
+        <MdVideocam color={color.green} size={20} />
+      )}
+    </button>
+  );
+}
+
+export default CamButton;

client/src/components/ConfMediaBar/StreamButton/MicButton/index.tsx

@@ -0,0 +1,27 @@
+import { MdMic } from '@react-icons/all-files/md/MdMic';
+import { MdMicOff } from '@react-icons/all-files/md/MdMicOff';
+import { Dispatch, SetStateAction } from 'react';
+import color from 'styles/color.module.scss';
+
+interface MicButtonProps {
+  isOn: boolean;
+  setIsMicOn?: Dispatch<SetStateAction<boolean>>;
+}
+
+function MicButton({ isOn, setIsMicOn }: MicButtonProps) {
+  const onClick = () => {
+    if (setIsMicOn) setIsMicOn(!isOn);
+  };
+
+  return (
+    <button onClick={onClick}>
+      {isOn ? (
+        <MdMicOff color={color.red} size={20} />
+      ) : (
+        <MdMic color={color.green} size={20} />
+      )}
+    </button>
+  );
+}
+
+export default MicButton;

client/src/components/ConfMediaBar/StreamButton/index.tsx

@@ -0,0 +1,28 @@
+import { Dispatch, memo, SetStateAction } from 'react';
+
+import CamButton from './CamButton';
+import MicButton from './MicButton';
+import style from './style.module.scss';
+
+interface StreamButtonProps {
+  isMicOn: boolean;
+  isCamOn: boolean;
+  setIsMicOn?: Dispatch<SetStateAction<boolean>>;
+  setIsCamOn?: Dispatch<SetStateAction<boolean>>;
+}
+
+function StreamButton({
+  isMicOn,
+  isCamOn,
+  setIsMicOn,
+  setIsCamOn,
+}: StreamButtonProps) {
+  return (
+    <div className={style['stream-button']}>
+      <MicButton isOn={isMicOn} setIsMicOn={setIsMicOn} />
+      <CamButton isOn={isCamOn} setIsCamOn={setIsCamOn} />
+    </div>
+  );
+}
+
+export default memo(StreamButton);