Merge pull request #188 from boostcamp-2020/refactor/message-editor-s…

…tyle Refactor: modify message editor style to include images
boostcamp-2020 · Dec 17, 2020 · e25cc6b · e25cc6b
2 parents 2c69079 + 1774b0e
commit e25cc6b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 21 deletions.
diff --git a/frontend/src/container/ChatRoom/ChatRoom.js b/frontend/src/container/ChatRoom/ChatRoom.js
@@ -48,7 +48,6 @@ const ChatRoom = ({ width }) => {
     [messages],
   )
 
-
   useEffect(() => {
     setMessages([])
     isLoading.current = false

diff --git a/frontend/src/container/MessageEditor/MessageEditor.js b/frontend/src/container/MessageEditor/MessageEditor.js
@@ -56,13 +56,16 @@ function MessageEditor({ sendMessage, placeholder }) {
 
   return (
     <MessageEditorContainer>
-      <Input
-        placeholder={placeholder}
-        handleChange={handleInput}
-        handleKey={handleKey}
-        value={message}
-      />
-      {isRender && renderPreview()}
+      <EditorArea>
+        <Input
+          placeholder={placeholder}
+          handleChange={handleInput}
+          handleKey={handleKey}
+          value={message}
+          type="messageEditor"
+        />
+        {isRender && renderPreview()}
+      </EditorArea>
       <StyledDiv>
         <FileUploader file={file} setFile={setFile} />
         <Button handleClick={sendMessageHanle} disabled={!isSend}>
@@ -83,4 +86,17 @@ const StyledDiv = styled.div`
   float: right;
   margin-top: 5px;
 `
+const EditorArea = styled.div`
+  &:focus-within {
+    box-shadow: 0 0 0 1px rgba(18, 100, 163, 1),
+      0 0 0 5px rgba(29, 155, 209, 0.3);
+    border-radius: 4px;
+    border-color: transparent;
+  }
+  &:focus-within > div {
+    display: block;
+  }
+  border: 1px solid ${COLOR.TRANSPARENT_GRAY};
+  border-radius: 4px;
+`
 export default MessageEditor
diff --git a/frontend/src/presenter/Input/Input.js b/frontend/src/presenter/Input/Input.js
@@ -8,9 +8,10 @@ function Input({
   handleKey,
   value,
   maxLength,
+  type = 'default',
 }) {
   return (
-    <StyledInputWrapper tabIndex="-1">
+    <StyledInputWrapper tabIndex="-1" type={type}>
       {children}
       <StyledInput
         placeholder={placeholder}
@@ -26,18 +27,23 @@ function Input({
   )
 }
 const StyledInputWrapper = styled.div`
-  &:focus-within {
-    outline: none;
-    box-shadow: 0 0 0 1px rgba(18, 100, 163, 1),
-      0 0 0 5px rgba(29, 155, 209, 0.3);
-    border-radius: 4px;
-    border-color: transparent;
-  }
-  &:focus-within > div {
-    display: block;
-  }
-  border: 1px solid ${COLOR.TRANSPARENT_GRAY};
-  border-radius: 4px;
+  ${({ type }) => {
+    if (type === 'default')
+      return `
+      &:focus-within {
+        box-shadow: 0 0 0 1px rgba(18, 100, 163, 1),
+          0 0 0 5px rgba(29, 155, 209, 0.3);
+        border-radius: 4px;
+        border-color: transparent;
+      }
+      &:focus-within > div {
+        display: block;
+      }
+      border: 1px solid ${COLOR.TRANSPARENT_GRAY};
+      border-radius: 4px;
+    `
+  }}
+  outline: none;
   justify-content: space-between;
   display: flex;
   padding: 5px;
@@ -57,6 +63,7 @@ const StyledInput = styled.input`
   width: 100%;
   border: none;
   outline: none;
+  background-color: inherit;
 `
 
 export default Input