Docs: README 작성 (#310)

* Update README.md

* Update README.md

* docs: README 작성

* docs: 이미지 너비 수정

* docs: 팀원 소개 테이블 수정

* docs: 기술 스택 align center 적용

Co-authored-by: Won-hee Cho <[email protected]>

Author: se030

README.md

@@ -7,104 +7,215 @@
 
 <h2 align=center style="text-align: center; font-size: 1.5em">💻 회의와 기록을 한번에 📝</h2>
 
+<br>
+
 <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>
+<a href="https://www.wabinar.live">https://www.wabinar.live</a>
 </p>
 
-<hr>
-
-<br>
+<div align=center>
 
-<h2>프로젝트 소개</h2>
+<p><b>🤷 하나의 플랫폼에서 말하고 또 기록할 수 있으면 오가는 논의들이 더 잘 기록될 수 있지 않을까?</b></p>
 
+<p>
 비대면 화상 회의를 여러 차례 진행하면서 팀원들이 공통으로 느낀 문제점들이 있었어요.
 
+회의와 기록이 서로 다른 플랫폼에서 이루어지다보니 기록되지 못하고 휘발되는 이야기들이 많았어요.
+
+</p>
+
 <br>
 
-> 💡 **하나의 플랫폼에서 말하고 또 기록할 수 있으면 편리하지 않을까**
+**회의가 끝나도 생각은 남아있을 수 있게**
 
-> 💡 **공유보드를 제공해서 오가는 이야기들을 기록하도록 유도할 수 있지 않을까**
+**Wabinar는 비대면 회의에 기록이라는 요소를 추가했어요.**
 
-> 💡 **텍스트 기반 발제로 비디오/보이스 기반 소통의 진입장벽을 조금은 허물 수 있지 않을까**
+</div>
 
 <br>
 
-**Wabinar** 는 비대면 회의 환경에 기록이라는 요소를 넣음으로써 더 좋은 회의를 진행할 수 있을 것으로 기대해요.
+<p align=center>
+  <a href="https://saber-ash-4ab.notion.site/Wabinar-57f67053ef2c48ababd1da317c63e7a7">노션</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>
+  &nbsp; | &nbsp; 
+  <a href="https://github.com/boostcampwm-2022/web27-Wabinar/wiki">위키</a>
+</p>
 
-<br>
+<p align=center>
+  <a href="https://www.youtube.com/watch?v=dAA2TPJojxs">데모</a>
+  &nbsp; | &nbsp; 
+  <a href="https://www.youtube.com/watch?v=Tasa4bbhuPU">최종 발표</a>
+</p>
 
+<div align=center>
+    <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fboostcampwm-2022%2Fweb27-Wabinar&count_bg=%231264A3&title_bg=%23323845&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false"/></a>
+</div>
 
-## 데모 영상
+## 주요 기능
 
-(추후 업데이트)
+### 🧑‍🤝‍🧑 워크스페이스
 
-## 기능
+> 원하는 사람들과 워크스페이스를 만들어 **회의**하고 **회의 기록을 관리**해요.
 
-(추후 업데이트)
+### 🎥 화상 회의
 
-## 기술 스택 (큐 아님)
+> 워크스페이스 멤버들과 **화상 회의**를 진행할 수 있어요.
 
-<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>
+<table align=center>
+<tr>
+  <td>
+<img src="https://user-images.githubusercontent.com/65100540/207751155-288bc23a-4138-4252-b158-fd3578f29be7.gif" width=380 />
+  </td>
+  <td>
+ <img src="https://user-images.githubusercontent.com/65100540/207755392-7a929720-80cf-4160-9f3e-5bc71e463750.gif" width=380 />
+  </td>
+</tr>
+<tr>
+  <td>
+    <p align=center>워크스페이스 기능</p>
+  </td>
+  <td>
+    <p align=center>화상 회의 기능</p>
+  </td>
+</tr>
+</table>
 
-<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>
+<table align=center>
+<tr>
+  <td>
+<img src="https://user-images.githubusercontent.com/65100540/207757480-972d2c7c-beaa-4cc4-89d0-7b2fc09ea7df.gif" width=380 />
+  </td>
+  <td>
+  <img src="https://user-images.githubusercontent.com/65100540/207752111-071f1502-1b33-4d71-802f-8bf0c38c1b57.gif" width=380 />
+  </td>
+</tr>
+<tr>
+  <td>
+    <p align=center>실시간 공동 편집</p>
+  </td>
+  <td>
+    <p align=center>텍스트 블럭</p>
+  </td>
+</tr>
+
+<tr>
+  <td>
+    <img src="https://user-images.githubusercontent.com/65100540/207753449-87abbc72-e7bb-491a-be3f-80ed0fc7a014.gif" width=380 />
+  </td>
+  <td>
+    <img src="https://user-images.githubusercontent.com/65100540/207753490-30abfc59-3107-4444-ade9-825138ece00b.gif" width=380 />
+  </td>
+</tr>
+
+<tr>
+  <td>
+    <p align=center>질문 블럭</p>
+  </td>
+  <td>
+    <p align=center>투표 블럭</p>
+  </td>
+</tr>
 
-<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>
+</table>
+
+<br />
+
+## 기술 스택
 
-<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 align=center>
+  <img src="https://user-images.githubusercontent.com/65100540/207056909-bbd7bb03-7397-4ac9-a605-03d4054736f3.png" width="500"/>
 </div>
 
-## 팀 소개
+<table align=center>
+    <thead>
+        <tr>
+            <th>category</th>
+            <th>stack</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>
+                <p align=center>Common</p>
+            </td>
+            <td>
+                <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">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                  <p align=center>Frontend</p>
+            </td>
+            <td>
+                 <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">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <p align=center>Backend</p>
+            </td>
+            <td>
+                <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">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <p align=center>CI/CD</p>
+            </td>
+            <td>
+                 <img src="https://img.shields.io/badge/GitHub Actions-000000?logo=github-actions">
+            </td>
+        </tr>
+                <tr>
+            <td>
+                <p align=center>Deployment</p>
+            </td>
+            <td>
+                <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">  
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <p align=center>Collaboration</p>
+            </td>
+            <td>
+                <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">
+            </td>
+        </tr>
+    </tbody>
+</table>
 
-### 왭^^
+<br>
+
+## 왭^^ 소개
 
 <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;">
+    <img width="100" src="https://user-images.githubusercontent.com/89635107/204541553-3ea729a7-6b54-4e86-b7d3-7496e73ddf04.png" alt="Wab Logo" style="display: block; margin: 1em auto;">
 </div>
 
 저희는 **`왭^^`** 이에요.
@@ -122,16 +233,22 @@
     </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>
+            <td><img width="200" src="https://avatars.githubusercontent.com/u/63814960?v=4" /> </td>
+            <td><img width="200" src="https://user-images.githubusercontent.com/65100540/200451888-3c0bde8c-48d0-493b-aabd-58155aa1f7a6.jpg" /></td>
+            <td><img width="200" src="https://user-images.githubusercontent.com/63364990/200451372-9a7e7eef-a2f7-45b7-b572-803053e56329.jpeg" /></td>
+            <td><img width="200" src="https://user-images.githubusercontent.com/89635107/200794102-63897e78-0fe8-40cc-b1c8-5492a6eae5ea.jpg" /></td>
         </tr>
         <tr>
             <td>퇴근도 좋지만..^^</td>
-            <td>원희님 천재아니에요?</td>
+            <td>v2 만들거죠?</td>
             <td>🫵</td>
             <td>늦는 사람이 있네요..^^</td>
         </tr>
+        <tr>
+            <td width="200">협업을 즐기면서 결과물 완성하기<br/>커뮤니케이션, 지식 공유 열심히 하기<br/>
+            <td width="200">문제가 생겼을 때 겁먹지 않고 충분히 시도 후 트러블 슈팅 과정 잘 기록하기, 공유하기<br/>웃음가득한 팀 만들기</td>
+            <td width="200">사소한거라도 궁금해하기<br/>PR 리뷰 자세히 들여다보기</td>
+            <td width="200">다른 사람들과 협업하기에 좋은 사람 되기</td>
+        </tr>
     </tbody>
 </table>