Merge pull request #455 from boostcamp-2020/dev

[Release] v1.0.0

README.md

@@ -8,9 +8,8 @@
 ![Swift](https://img.shields.io/badge/swift-v5.x-orange?logo=swift)
 ![Xcode](https://img.shields.io/badge/xcode-v12.x-blue?logo=xcode)
 ![Typescript](https://img.shields.io/badge/typescript-v4.0.2-yellow?logo=typescript)
-![react](https://img.shields.io/badge/react-16.13-1cf?logo=react)
-![NodeJS](https://img.shields.io/badge/node.js-v12.18.3-green?logo=node.js)
-![MySQL](https://img.shields.io/badge/mysql-v5.7.32-blue?logo=mysql)
+![react](https://img.shields.io/badge/react-17.0.1-1cf?logo=react)
+![NodeJS](https://img.shields.io/badge/node.js-v12.20.0-green?logo=node.js)
 
 [![GitHub Open Issues](https://img.shields.io/github/issues-raw/boostcamp-2020/Project02-A-RealTime-Translation-Messenger?color=green)](https://github.com/boostcamp-2020/Project02-A-RealTime-Translation-Messenger/issues)
 [![GitHub Closed Issues](https://img.shields.io/github/issues-closed-raw/boostcamp-2020/Project02-A-RealTime-Translation-Messenger?color=red)](https://github.com/boostcamp-2020/Project02-A-RealTime-Translation-Messenger/issues)
@@ -24,11 +23,8 @@
 
 ## 📌 프로젝트 소개
 
-<div align="center">
-<img width="25%" src="https://i.imgur.com/AXo1AoR.png">
-
-</div>
-</br>
+<img width="100%" src="https://i.imgur.com/qOulV1k.png">
+<p></p>
 
 <div align="center">
 
@@ -42,51 +38,56 @@
 
 </br>
 
-## 🎨 Color Scheme
-|#5CA7E4|#60C0A4|#FADD68|
-| :--: | :--: | :--: |
-|![](https://i.imgur.com/F0kjHIW.jpg)|![](https://i.imgur.com/VJ4ezUK.jpg)|![](https://i.imgur.com/AkApNNT.jpg)|
-
-</br>
 
 ## 👨‍🍳 팀 소개
-|J002 |J077 | J138 | S006 | S012|
+| [J002](https://github.com/moaikang) |[J077](https://github.com/pje1740) | [J138](https://github.com/kas136) | [S006](https://github.com/kgs19970120) | [S012](https://github.com/rile1036)|
 | :--:| :--:|  :--:  | :--:  | :--:  |
 | ![](https://i.imgur.com/zmCKLZz.jpg) | ![](https://i.imgur.com/L6YXjBe.jpg)| ![](https://i.imgur.com/r0KdRs2.jpg) |   ![](https://i.imgur.com/cucP2S4.jpg) | ![](https://i.imgur.com/tX8mqPg.jpg) |
 | **강근우 🧇** | **박소현 🥐** | **이민환 🌭** | **김근수 🍩** | **김영렬 🥯** |
 |**Web 🌐**|**Web 🌐**|**Web 🌐**|**iOS 🍎**|**iOS 🍎**|
 
+> **강근우** 🧇 : 이유 있는 코드를 짜려고 노력하고, 개발을 즐기는 프론트엔드 개발자입니다.
+
+> **박소현** 🥐 : 사용자 경험과 디자인 시스템에 진심이고 싶은 프론트 엔드 개발자입니다.
+
+> **이민환** 🌭 : 개발이 재밌고 도전이 즐거운 웹 풀스택 개발자입니다.
+
+> **김근수** 🍩 : 항상 새로운 도전거리를 찾아 해매는 iOS🍎 Lover 입니다
+
+> **김영렬 🥯** : 배움에 굶주려 있는 애플러 입니다.
+
 </br>
 
 ## 💻 기술 소개
 
 ### API
-| API | Link |
-| :--: | :--: |
-| <img width= 50 src="https://i.imgur.com/2pLrZzB.png"> | [파파고 번역 API](https://www.ncloud.com/product/aiService/papagoNmt) |
+| API | <img width= 50 src="https://i.imgur.com/2pLrZzB.png"> | <img width = 50 src="https://i.imgur.com/MJrv2aB.png">|
+| :--: | :--: | :--: |
+| **Link** | [파파고 번역 API](https://www.ncloud.com/product/aiService/papagoNmt) | [Clova API](https://www.ncloud.com/product/aiService/ocr) |
 
 </br>
 
-### FE
 
-| Spec | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566913457/noticon/eh4d0dnic4n1neth3fui.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566557331/noticon/d5hqar2idkoefh6fjtpu.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567749614/noticon/zgdaxpaif5ojeduonygb.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1568851518/noticon/lwj3hr9v1yoheimtwc1w.png"> |
-| :--: | :--: | :--: | :--: | :--: |
-| **Description** | TypeScript | React | Redux | Styled-Components |
+### Front-End
+
+| Spec | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566913457/noticon/eh4d0dnic4n1neth3fui.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566557331/noticon/d5hqar2idkoefh6fjtpu.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567749614/noticon/zgdaxpaif5ojeduonygb.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1568851518/noticon/lwj3hr9v1yoheimtwc1w.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566952480/noticon/fyec5eye4l6hyxlpfxze.png"> | <img width= 50 src="https://i.imgur.com/pfnOdTD.png"> |
+| :--: | :--: | :--: | :--: | :--: | :--: | :--: |
+| **Description** | TypeScript | React | Redux | Styled-Components | Storybook | SocketIO |
 
 </br>
 
-### BE
-| Spec | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566913457/noticon/eh4d0dnic4n1neth3fui.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1597622806/noticon/avedhz3pvaij65k3ztar.png"> | <img width= 50 src="https://i.imgur.com/pfnOdTD.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1581824691/noticon/hmvqgvug8zl7etwmabuq.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1603423163/noticon/az0cvs28lm7gxoowlsva.png"> | <img width= 50 src="https://i.imgur.com/1lgBkrb.png"> |
-| :--: | :--: | :--: | :--: | :--: | :--: | :--: |
-| **Description** | TypeScript | Express | SocketIO | MongoDB | MySQL | PM2 |
+### Back-End
+| Spec | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566913457/noticon/eh4d0dnic4n1neth3fui.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1597622806/noticon/avedhz3pvaij65k3ztar.png"> | <img width= 50 src="https://i.imgur.com/pfnOdTD.png"> | <img width= 50 src="https://cdn4.iconfinder.com/data/icons/redis-2/1451/Untitled-2-512.png"> |<img width= 50 src="https://i.imgur.com/1lgBkrb.png"> |
+| :--: | :--: | :--: | :--: | :--: | :--: |
+| **Description** | TypeScript | Express | SocketIO | Redis | PM2 |
 
 </br>
 
 
-### Infra
-| Spec | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566778391/noticon/l0uiouhpeiq31huqu7ft.jpg"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566798146/noticon/lku5cppzh8r7awwsmmko.png"> | <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1568175385/noticon/iodu1jssf0kwe4oie2dt.png">|
-| :--: | :--: | :--: | :--: |
-| **Description** | Jenkins | Nginx | Docker |
+### Infrastructure
+| Spec |   <img width= 50 src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566798146/noticon/lku5cppzh8r7awwsmmko.png"> | <img width= 50 src="https://cdn-images-1.medium.com/max/1200/1*r5KdIfHXaz7UQM4FmZ0D5A.png">|
+| :--: | :--: | :--: |
+| **Description** | Nginx | NCP |
 
 <br/>
 
@@ -96,3 +97,13 @@
 | :--: | :--: | :--: | :--: |
 | **Description** | Swift | RxSwift | SocketIO | 
 
+
+<br/>
+
+## 🎨 Color Scheme
+
+|#5CA7E4|#60C0A4|#FADD68|
+| :--: | :--: | :--: |
+|![](https://i.imgur.com/F0kjHIW.jpg)|![](https://i.imgur.com/VJ4ezUK.jpg)|![](https://i.imgur.com/AkApNNT.jpg)|
+
+</br>

client/.babelrc

@@ -3,5 +3,8 @@
       "@babel/preset-env",
       "@babel/preset-react",
       "@babel/preset-typescript"
+    ],
+  "plugins": [
+    "@babel/plugin-transform-runtime"
     ]
 }

client/.storybook/preview.js

@@ -1,4 +1,13 @@
+import { addDecorator } from '@storybook/react';
+import { GlobalStyle } from '../src/App';
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};
+
+addDecorator((story) => (
+  <>
+    <GlobalStyle />
+    {story()}
+  </>
+));