Feat/apply markdown (#130)

frontend/package.json

@@ -13,6 +13,11 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.0",
+    "draft": "^0.2.3",
+    "draft-js": "^0.11.7",
+    "draft-js-markdown-plugin": "^3.0.5",
+    "draft-js-markdown-shortcuts-plugin": "^0.6.1",
+    "draft-js-plugins-editor": "^3.0.0",
     "emoji-mart": "^3.0.0",
     "qs": "^6.9.4",
     "react": "^17.0.1",

frontend/src/container/ChannelHeader/ChannelHeader.js

@@ -66,7 +66,7 @@ function ChannelHeader() {
 const ChannelHeaderStyle = styled.div`
   width: 100%;
   height: auto;
-  margin: auto 20px;
+  margin: 0 20px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;

frontend/src/container/ChatRoom/ChatRoom.js

@@ -180,6 +180,7 @@ const ChatHeader = styled.div`
   height: 60px;
   background: ${COLOR.BACKGROUND_CONTENTS};
   border: 1px solid rgba(255, 255, 255, 0.1);
+  box-sizing: border-box;
 `
 
 const ChatContents = styled.div`

frontend/src/container/MessageEditor/MessageEditor.js

@@ -1,29 +1,62 @@
-import React, { useState } from 'react'
-
-import Input from '../../presenter/Input'
+import React, { useState, useRef } from 'react'
+import Editor from 'draft-js-plugins-editor'
+import createMarkdownShortcutsPlugin from 'draft-js-markdown-shortcuts-plugin'
+import {
+  ContentState,
+  EditorState,
+  getDefaultKeyBinding,
+  convertToRaw,
+} from 'draft-js'
+import styled from 'styled-components'
+import 'draft-js/dist/Draft.css'
+import { COLOR } from '../../constant/style'
 
 function MessageEditor({ channelTitle, sendMessage }) {
-  const [message, setMessage] = useState('')
-  const handleInput = e => {
-    setMessage(e.target.value)
+  const plugins = useRef([createMarkdownShortcutsPlugin()])
+  const [message, setMessage] = useState(EditorState.createEmpty())
+
+  const keyBindingFn = e => {
+    if (e.key === 'Enter') return 'send-message'
+    return getDefaultKeyBinding(e)
   }
-  const handleKey = e => {
-    if (e.key === 'Enter' && e.target.value) {
-      sendMessage(message)
-      setMessage('')
+  const handleKey = command => {
+    if (command === 'send-message' && message.getCurrentContent().hasText()) {
+      sendMessage(JSON.stringify(convertToRaw(message.getCurrentContent())))
+      setMessage(
+        EditorState.moveFocusToEnd(
+          EditorState.push(
+            message,
+            ContentState.createFromText(''),
+            'remove-range',
+          ),
+        ),
+      )
     }
   }
   return (
-    <div>
-      <Input
-        placeholder={`Send a message to #${channelTitle}`}
-        handleChange={handleInput}
-        handleKey={handleKey}
-        value={message}
-      />
-      {/* TODO markdown, chat action 적용 필요 */}
-    </div>
+    <MessageEditorContainer>
+      <MessageEditorArea>
+        <Editor
+          placeholder={`Send a message to #${channelTitle}`}
+          editorState={message}
+          onChange={setMessage}
+          plugins={plugins.current}
+          handleKeyCommand={handleKey}
+          keyBindingFn={keyBindingFn}
+        />
+
+        {/* TODO markdown, chat action 적용 필요 */}
+      </MessageEditorArea>
+    </MessageEditorContainer>
   )
 }
-
+const MessageEditorContainer = styled.div`
+  padding: 20px;
+  background-color: ${COLOR.WHITE};
+`
+const MessageEditorArea = styled.div`
+  border: 1px solid ${COLOR.LIGHT_GRAY};
+  padding: 10px;
+  border-radius: 5px;
+`
 export default MessageEditor

frontend/src/container/SideThreadBar/SideThreadBar.js

@@ -103,9 +103,9 @@ function SideThreadBar() {
 
 const SideThreadBarStyle = styled.div`
   width: auto;
-  height: calc(100% - 1px);
-  background: ${COLOR.BACKGROUND_CONTENTS};
+  height: 100%;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  box-sizing: border-box;
 `
 
 const SideBarHeader = styled.div`
@@ -121,7 +121,9 @@ const SideBarHeader = styled.div`
   justify-content: flex-start;
   align-items: center;
   border: 1px solid rgba(255, 255, 255, 0.1);
+  box-sizing: border-box;
   border-right: 0;
+  background-color: ${COLOR.BACKGROUND_CONTENTS};
 `
 
 const CloseBtn = styled.div`
@@ -132,33 +134,25 @@ const CloseBtn = styled.div`
 
 const SideBarContents = styled.div`
   width: auto;
-  height: calc(100% - 63px);
-  color: ${COLOR.LABEL_SELECT_TEXT};
+  height: calc(100% - 60px);
+  overflow-y: auto;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-right: 0;
+  box-sizing: border-box;
 `
 
 const ChatContent = styled.div`
   width: auto;
-  max-height: 30%;
   min-height: 20%;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-right: 0;
   overflow-y: auto;
 `
 
-const ReplyContents = styled.div`
-  height: 60%;
-  overflow-x: auto;
-  overflow-y: auto;
-`
+const ReplyContents = styled.div``
 
 const MessageEditorArea = styled.div`
-  height: calc(10% - 3px);
-
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
+  /* height: calc(10% - 3px); */
 `
 
 export default SideThreadBar

frontend/src/index.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { createGlobalStyle } from 'styled-components'
 import './index.css'
 import WorkspacePage from './page/WorkspacePage'
-import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import { BrowserRouter, Route } from 'react-router-dom'
 import reportWebVitals from './reportWebVitals'
 import LoginPage from './page/login/Login'
 import CreateWorkspace from './page/createWorkspace/CreateWorkspace'
 import SelectWorkspace from './page/selectWorkspace/SelectWorkspace'
+import GlobalStyle from './presenter/GlobalStyle'
 import Auth from './hooks/Auth'
 import GithubOAuth from './hooks/GithubOAuth'
 import { RecoilRoot } from 'recoil'
@@ -42,15 +42,6 @@ const App = () => {
   )
 }
 
-const GlobalStyle = createGlobalStyle`
-  body {
-    padding: 0px;
-    margin: 0px;
-    height: 100%;
-    width: 100%;
-	}
-`
-
 ReactDOM.render(<App />, document.getElementById('root'))
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

frontend/src/page/WorkspacePage/WorkspacePage.js

@@ -97,8 +97,7 @@ const ConstructionPage = SideBarWidth => {
 }
 
 const PageStyle = styled.div`
-  width: 100vw;
-  height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: column;
 `
@@ -129,6 +128,7 @@ const ChannelListHeaderArea = styled.div`
   background: ${COLOR.BACKGROUND_CHANNEL_LIST};
   color: ${COLOR.LABEL_DEFAULT_TEXT};
   border: 1px solid rgba(255, 255, 255, 0.1);
+  box-sizing: border-box;
 `
 
 const ChannelListArea = styled.div`

frontend/src/presenter/ChatContent/ChatContent.js

@@ -1,24 +1,30 @@
-import React from 'react'
+import React, { memo } from 'react'
 import styled from 'styled-components'
+import { convertFromRaw, Editor, EditorState } from 'draft-js'
 import { COLOR } from '../../constant/style'
-const ChatContent = ({
-  displayName,
-  createdAt,
-  contents,
-  handleProfileModal,
-}) => {
-  return (
-    <StyledChatContent>
-      <ChatHeader>
-        <StyledUserName onClick={handleProfileModal}>
-          {displayName}
-        </StyledUserName>
-        <StyledDate>{createdAt}</StyledDate>
-      </ChatHeader>
-      <ChatContentArea>{contents}</ChatContentArea>
-    </StyledChatContent>
-  )
-}
+
+const ChatContent = memo(
+  ({ displayName, createdAt, contents, handleProfileModal }) => {
+    return (
+      <StyledChatContent>
+        <ChatHeader>
+          <StyledUserName onClick={handleProfileModal}>
+            {displayName}
+          </StyledUserName>
+          <StyledDate>{createdAt}</StyledDate>
+        </ChatHeader>
+        <ChatContentArea>
+          <Editor
+            editorState={EditorState.createWithContent(
+              convertFromRaw(JSON.parse(contents)),
+            )}
+            readOnly={true}
+          />
+        </ChatContentArea>
+      </StyledChatContent>
+    )
+  },
+)
 const StyledChatContent = styled.div`
   width: 100%;
   display: flex;

frontend/src/presenter/GlobalStyle/GlobalStyle.js

@@ -1,12 +1,18 @@
 import { createGlobalStyle } from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
+  html{
+    height: 100%;
+  }
   body {
     padding: 0px;
     margin: 0px;
     height: 100%;
     width: 100%;
-	}
+  }
+  #root{
+    height:100%;
+  }
 `
 
 export default GlobalStyle