Deploy: 4주차 결과 (#188)

Author: wcho21

@wabinar-crdt/convergence.test.ts

@@ -32,10 +32,10 @@ const convergenceCheck = () => {
 /**
  * 테스트용 site들
  */
-const 원희 = new CRDT(1, 1, new LinkedList());
-const 주영 = new CRDT(1, 2, new LinkedList());
-const 도훈 = new CRDT(1, 3, new LinkedList());
-const 세영 = new CRDT(1, 4, new LinkedList());
+const 원희 = new CRDT(1, new LinkedList());
+const 주영 = new CRDT(2, new LinkedList());
+const 도훈 = new CRDT(3, new LinkedList());
+const 세영 = new CRDT(4, new LinkedList());
 
 describe('Convergence', () => {
   it('하나의 site에서 삽입', () => {

@wabinar-crdt/crdt.test.ts

@@ -4,7 +4,7 @@ import LinkedList from './linked-list';
 describe('Local operation', () => {
   const initialStructure = new LinkedList();
 
-  const 나 = new CRDT(1, 1, initialStructure);
+  const 나 = new CRDT(1, initialStructure);
 
   it('head에 삽입', () => {
     let innerText = 나.read();

@wabinar-crdt/index.ts

@@ -9,26 +9,44 @@ class CRDT {
   private client: number;
   private structure: LinkedList;
 
-  constructor(
-    initialclock: number = 1,
-    client: number = 0,
-    initialStructure: LinkedList,
-  ) {
-    this.clock = initialclock;
+  constructor(client: number = 0, initialStructure: LinkedList) {
     this.client = client;
 
-    Object.setPrototypeOf(initialStructure, LinkedList.prototype);
-    this.structure = initialStructure as LinkedList;
+    this.structure = new LinkedList(initialStructure);
+
+    const { nodeMap } = initialStructure;
+
+    if (!nodeMap || !Object.keys(nodeMap).length) {
+      this.clock = 1;
+      return this;
+    }
+
+    // logical clock 동기화를 위함
+    const maxClock = Object.keys(nodeMap)
+      .map((id) => Number(JSON.parse(id).clock))
+      .reduce((prev, cur) => Math.max(prev, cur), 0);
+
+    this.clock = maxClock + 1;
+  }
+
+  get timestamp() {
+    return this.clock;
   }
 
   get data() {
     return this.structure;
   }
 
-  localInsert(index: number, letter: string): RemoteInsertOperation {
-    const id = new Identifier(this.clock++, this.client);
+  get plainData() {
+    // DB에 저장할 때 ref 제거하기 위함
+    const stringifiedData = JSON.stringify(this.structure);
+
+    return JSON.parse(stringifiedData);
+  }
 
-    const remoteInsertion = this.structure.insertByIndex(index, letter, id);
+  localInsert(index: number, value: string): RemoteInsertOperation {
+    const id = new Identifier(this.clock++, this.client);
+    const remoteInsertion = this.structure.insertByIndex(index, value, id);
 
     return remoteInsertion;
   }
@@ -62,6 +80,10 @@ class CRDT {
   read() {
     return this.structure.stringify();
   }
+
+  spread() {
+    return this.structure.spread();
+  }
 }
 
 export default CRDT;

@wabinar-crdt/linked-list.ts

@@ -21,18 +21,43 @@ export default class LinkedList {
   head: Identifier | null;
   nodeMap: NodeMap;
 
-  constructor() {
-    this.head = null;
-    this.nodeMap = {};
+  constructor(initialStructure?: LinkedList) {
+    if (!initialStructure) {
+      this.head = null;
+      this.nodeMap = {};
+
+      return this;
+    }
+
+    const { head, nodeMap } = initialStructure;
+
+    this.head = head ?? null;
+
+    if (!nodeMap && !Object.keys(nodeMap).length) {
+      this.nodeMap = nodeMap ?? {};
+
+      return this;
+    }
+
+    const nodeMapWithPrototype = Object.entries(nodeMap).reduce<NodeMap>(
+      (prev, [id, node]) => {
+        Object.setPrototypeOf(node, Node.prototype);
+        prev[id] = node;
+
+        return prev;
+      },
+      {},
+    );
+    this.nodeMap = nodeMapWithPrototype;
   }
 
   insertByIndex(
     index: number,
-    letter: string,
+    value: string,
     id: Identifier,
   ): RemoteInsertOperation {
     try {
-      const node = new Node(letter, id);
+      const node = new Node(value, id);
       this.setNode(id, node);
 
       // insertion to head
@@ -103,6 +128,7 @@ export default class LinkedList {
 
   insertById(node: Node): ModifiedIndex {
     try {
+      Object.setPrototypeOf(node, Node.prototype);
       this.setNode(node.id, node);
 
       let prevNode, prevIndex;
@@ -167,6 +193,7 @@ export default class LinkedList {
       const prevNode = this.findByIndex(targetIndex - 1);
 
       prevNode.next = targetNode.next;
+      this.deleteNode(id);
 
       return targetIndex;
     } catch (e) {
@@ -188,6 +215,18 @@ export default class LinkedList {
     return result;
   }
 
+  spread(): string[] {
+    let node: Node | null = this.getHeadNode();
+    let result = [];
+
+    while (node) {
+      result.push(node.value);
+      node = this.getNode(node.next);
+    }
+
+    return result;
+  }
+
   private findByIndex(index: number): Node {
     let count = 0;
     let currentNode: Node | null = this.getHeadNode();

README.md

@@ -1 +1,137 @@
+<div align=center>
+  <img
+    align=center
+    src="https://user-images.githubusercontent.com/65100540/201074976-b7550af4-e2cf-4d40-aed2-d5213fe10f66.png"
+    width="500">
+</div>
 
+<h2 align=center style="text-align: center; font-size: 1.5em">💻 회의와 기록을 한번에 📝</h2>
+
+<p align=center>
+  <a href="https://www.minari.shop">배포 서버</a>
+  &nbsp; | &nbsp;
+  <a href="https://saber-ash-4ab.notion.site/Wabinar-57f67053ef2c48ababd1da317c63e7a7">노션</a>
+  &nbsp; | &nbsp; 
+  <a href="https://github.com/boostcampwm-2022/web27-Wabinar/wiki">위키</a>
+  &nbsp; | &nbsp; 
+  <a href="https://saber-ash-4ab.notion.site/f4e8ed8c594a4a8089404025a3692ca4?v=70e2fe5f08c94c998ea9c9846fc1aaaf">백로그</a>
+  &nbsp; | &nbsp;
+  <a href="https://www.figma.com/file/OxypldnsrmkTqX1LStgJPl/Wabinar?node-id=59%3A2014&t=eSUFpSn0pU3tpyjQ-0">기획서</a>
+</p>
+
+<hr>
+
+<br>
+
+<h2>프로젝트 소개</h2>
+
+비대면 화상 회의를 여러 차례 진행하면서 팀원들이 공통으로 느낀 문제점들이 있었어요.
+
+<br>
+
+> 💡 **하나의 플랫폼에서 말하고 또 기록할 수 있으면 편리하지 않을까**
+
+> 💡 **공유보드를 제공해서 오가는 이야기들을 기록하도록 유도할 수 있지 않을까**
+
+> 💡 **텍스트 기반 발제로 비디오/보이스 기반 소통의 진입장벽을 조금은 허물 수 있지 않을까**
+
+<br>
+
+**Wabinar** 는 비대면 회의 환경에 기록이라는 요소를 넣음으로써 더 좋은 회의를 진행할 수 있을 것으로 기대해요.
+
+<br>
+
+
+## 데모 영상
+
+(추후 업데이트)
+
+## 기능
+
+(추후 업데이트)
+
+## 기술 스택 (큐 아님)
+
+<div style="margin: 1em auto; text-align: center;">
+  <p>Common</p>
+  <img src="https://img.shields.io/badge/WebRTC-333333?logo=webrtc">
+  <img src="https://img.shields.io/badge/Socket.io-010101?logo=Socket.io">
+  <img src="https://img.shields.io/badge/Jest-341f0e?logo=jest&logoColor=FF0000&">
+  <img src="https://img.shields.io/badge/Prettier-F7B93E?logo=prettier&logoColor=ffffff">
+  <img src="https://img.shields.io/badge/ESLint-4B32C3?logo=Eslint">
+  <img src="https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=ffffff">
+  <img src="https://img.shields.io/badge/.ENV-ECD53F?logo=.ENV&logoColor=ffffff">
+</div>
+
+<div style="margin: 1em auto; text-align: center;">
+  <p>FE</p>
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=ffffff">
+  <img src="https://img.shields.io/badge/Vite-646CFF?logo=Vite&logoColor=ffffff">
+  <img src="https://img.shields.io/badge/React-61DAFB?logo=React&logoColor=ffffff">
+  <img src="https://img.shields.io/badge/Sass-CC6699?logo=Sass&logoColor=ffffff">
+</div>
+
+<div style="margin: 1em auto; text-align: center;">
+  <p>BE</p>
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=ffffff">
+  <img src="https://img.shields.io/badge/Node.js-114411?logo=node.js">
+  <img src="https://img.shields.io/badge/Express-17202C?logo=Express">
+  <img src="https://img.shields.io/badge/MongoDB-114411?logo=mongodb">
+  <img src="https://img.shields.io/badge/Mongoose-114411?logo=mongodb">
+</div>
+
+<div style="margin: 1em auto; text-align: center;">
+  <p>CI/CD</p>
+  <img src="https://img.shields.io/badge/GitHub Actions-000000?logo=github-actions">
+</div>
+
+<div style="margin: 1em auto; text-align: center;">
+  <p>Deployment</p>
+  <img src="https://img.shields.io/badge/nginx-014532?logo=Nginx&logoColor=009639&">
+  <img src="https://img.shields.io/badge/Naver Cloud Platform-03C75A?logo=naver&logoColor=ffffff">
+</div>
+
+<div style="margin: 1em auto; text-align: center;">
+<p>Collaboration</p>
+   <img src="https://img.shields.io/badge/Github-181717?logo=Github&logoColor=ffffff">
+  <img src="https://img.shields.io/badge/Notion-000000?logo=Notion">
+   <img src="https://img.shields.io/badge/Figma-F24E1E?logo=Figma&logoColor=ffffff">
+   <img src="https://img.shields.io/badge/Slack-4A154B?logo=Slack&logoColor=ffffff">
+</div>
+
+## 팀 소개
+
+### 왭^^
+
+<div align=center>
+    <img src="https://user-images.githubusercontent.com/89635107/204541553-3ea729a7-6b54-4e86-b7d3-7496e73ddf04.png" alt="Wab Logo" style="display: block; margin: 1em auto; height: 120px;">
+</div>
+
+저희는 **`왭^^`** 이에요.
+
+**`왜`** 를 잘 아는 **`웹`** 개발자가 되자는 의미예요.
+
+<table align=center>
+    <thead>
+        <tr >
+            <th style="text-align:center;" >김세영</th>
+            <th style="text-align:center;" >백도훈</th>
+            <th style="text-align:center;" >신주영</th>
+            <th style="text-align:center;" >조원희</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><img width="150" height="150" src="https://avatars.githubusercontent.com/u/63814960?v=4" /> </td>
+            <td><img width="150" height="150" src="https://user-images.githubusercontent.com/65100540/200451888-3c0bde8c-48d0-493b-aabd-58155aa1f7a6.jpg" /></td>
+            <td><img width="150" height="150" src="https://user-images.githubusercontent.com/63364990/200451372-9a7e7eef-a2f7-45b7-b572-803053e56329.jpeg" /></td>
+            <td><img width="150" height="150" src="https://user-images.githubusercontent.com/89635107/200794102-63897e78-0fe8-40cc-b1c8-5492a6eae5ea.jpg" /></td>
+        </tr>
+        <tr>
+            <td>퇴근도 좋지만..^^</td>
+            <td>원희님 천재아니에요?</td>
+            <td>🫵</td>
+            <td>늦는 사람이 있네요..^^</td>
+        </tr>
+    </tbody>
+</table>

client/package.json

@@ -12,11 +12,13 @@
     "@react-icons/all-files": "^4.1.0",
     "axios": "^1.1.3",
     "classnames": "^2.3.2",
+    "eventemitter3": "^5.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^5.3.4",
     "react-router-dom": "^6.4.3",
-    "socket.io-client": "^4.5.4"
+    "socket.io-client": "^4.5.4",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",

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

@@ -4,17 +4,18 @@ import style from './style.module.scss';
 
 interface MediaProps {
   stream: MediaStream;
+  muted: boolean;
 }
 
-function ConfMedia({ stream }: MediaProps) {
+function ConfMedia({ stream, muted }: MediaProps) {
   const ref = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
     if (!ref.current) return;
     ref.current.srcObject = stream;
   }, [stream]);
 
-  return <video className={style.video} ref={ref} autoPlay />;
+  return <video className={style.video} ref={ref} muted={muted} autoPlay />;
 }
 
 export default memo(ConfMedia);

client/src/components/ConfMediaBar/index.tsx

@@ -1,15 +1,13 @@
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
 import { useConfMediaStreams } from 'src/hooks/useConfMediaStreams';
-import useSocket from 'src/hooks/useSocket';
+import useSocketContext from 'src/hooks/useSocketContext';
 
 import ConfMedia from './ConfMedia';
 import StreamButton from './StreamButton';
 import style from './style.module.scss';
 
 function ConfMediaBar() {
-  const { id } = useParams();
-  const socket = useSocket(`/signaling/${id}`);
+  const { signalingSocket: socket } = useSocketContext();
   const streams = useConfMediaStreams(socket);
 
   const [isMicOn, setIsMicOn] = useState(false);
@@ -20,7 +18,7 @@ function ConfMediaBar() {
       <ul>
         {Array.from(streams).map(([id, stream]) => (
           <li key={id}>
-            <ConfMedia key={id} stream={stream} />
+            <ConfMedia key={id} stream={stream} muted={id === 'me' ? true : false} />
             <StreamButton
               isMicOn={false}
               isCamOn={true} // TODO: 임시로 지정