add scroll style

@@ -90,17 +90,32 @@ const ChatScreenBox = styled.div`
   flex-direction: column;
   width: 100%;
   height: 100%;
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background-color: gray;
+  }
+  &::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+  }
 `;
 
 const InputContainer = styled.div`
   position: fixed;
   bottom: 0;
-  justify-self: center;
-  padding: 10px;
-  margin-bottom: 20px;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+  margin: 10px;
   display: flex;
   flex-direction: row;
-  width: 70%;
   form {
     width: 100%;
     button {
@@ -132,20 +147,10 @@ const StyledLink = styled(Link)`
   }
 `;
 
-export default ({
-  location,
-  message,
-  onSubmit,
-  messageText,
-  messageTime,
-  newMsgObj,
-  messageArray,
-}) => {
+export default ({ location, message, onSubmit, messageArray }) => {
   const { pathname } = location;
   const roomName = pathname.slice(1, pathname.length);
 
-  console.log(messageArray);
-
   return (
     <Wrapper>
       <Header text={"KhuChat"} />
@@ -169,10 +174,14 @@ export default ({
           <ChatScreenBox>
             {messageArray &&
               messageArray.seeAllMessage.map((e) => (
-                <Message text={e.text} time={e.createdAt} key={e.id} />
+                <Message
+                  text={e.text}
+                  time={e.createdAt}
+                  key={e.id}
+                  avatar={e.sender.avatarUrl}
+                />
               ))}
-            {newMsgObj && <Message text={messageText} time={messageTime} />}
-            <InputContainer>
+            <InputContainer className="InputContainer">
               <form onSubmit={onSubmit}>
                 <Input
                   placeholder={"Enter any words"}