update chat presenter

-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 import styled from "styled-components";
-import Header from "../../Components/Header";
 import Input from "../../Components/Input";
 import Input from "../../Components/Input";
-import Button from "../../Components/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAddressBook } from "@fortawesome/free-solid-svg-icons";
-import { Link } from "react-router-dom";
-import Category from "../Category/CategoryContainer";
-import Message from "../../Components/Message";
+import { faPlusSquare } from "@fortawesome/free-solid-svg-icons";
 
 
 const Wrapper = styled.div`
 const Wrapper = styled.div`
-  display: grid;
+  display: block;
   width: 100%;
   width: 100%;
-  height: 100%;
-  grid-template-rows: 80px auto min-content;
-  grid-template-areas:
-    "Header"
-    "Workspace";
-  .Header {
-    box-shadow: none;
-  }
+  height: 100vh;
+  background-color: #2f3136;
+`;
+
+const ServerListBox = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 72px;
+  background-color: #202225;
+  color: white;
 `;
 `;
 
 
-const ChatWrapper = styled.div`
+const ServerNav = styled.nav`
   display: flex;
   display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
-  grid-template-columns: 200px auto;
-  grid-area: "Workspace";
+  flex-direction: column;
 `;
 `;
 
 
-const ChatMenuContainer = styled.div`
-  display: grid;
-  width: 200px;
-  height: 100%;
-  background-color: #667aff;
-  color: white;
-  grid-template-rows: 80px 80px 1fr;
+const ServerBox = styled.div``;
+
+const MainContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 72px;
+  right: 0;
+  bottom: 0;
 `;
 `;
 
 
-const TitleContainer = styled.div`
+const MainContentBox = styled.div`
+  width: 100%;
+  height: 100%;
   display: flex;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 20px;
-  border-top: 1px solid rgba(255, 255, 255, 0.5);
+  flex: 1 1 auto;
 `;
 `;
 
 
-const Title = styled.span`
-  font-family: "Chelsea Market", cursive;
+const MainSideBar = styled.div`
+  background-color: #2f3136;
+  color: white;
 `;
 `;
 
 
-const ItemText = styled.span`
-  font-family: "Ubuntu", sans-serif;
+const MainBox = styled.div`
+  width: 100%;
 `;
 `;
 
 
-const PeopleContainer = styled.div`
+const HeaderSection = styled.section`
+  background-color: #36393f;
+  color: white;
+  padding: 15px;
+`;
+
+const SectionContainer = styled.div`
   display: flex;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  svg {
-    font-size: 20px;
-  }
-  span {
-    margin-left: 10px;
-    font-size: 20px;
-  }
-  border-top: 1px solid rgba(255, 255, 255, 0.5);
+  flex-direction: row;
+  height: auto;
 `;
 `;
 
 
-const ChatScreenContainer = styled.div`
-  display: grid;
-  width: 100%;
-  height: 100%;
-  grid-template-rows: 70px 1fr;
+const ChatSection = styled.section`
+  background-color: #36393f;
+  color: white;
+  flex: 1 1 auto;
 `;
 `;
 
 
-const ChatScreenHeader = styled.div`
+const MessageWrapper = styled.div`
+  position: relative;
   display: flex;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 10px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  flex: 1 1 auto;
 `;
 `;
 
 
-const ChatScreenBox = styled.div`
+const ScrollWrapper = styled.div`
+  overflow-y: scroll;
   display: flex;
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
   &::-webkit-scrollbar {
   &::-webkit-scrollbar {
-    width: 10px;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
+    width: 16px;
+    height: 16px;
   }
   }
   &::-webkit-scrollbar-thumb {
   &::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    background-color: gray;
+    background-color: #202225;
+    border-color: #36393f;
   }
   }
-  &::-webkit-scrollbar-button {
-    width: 0;
-    height: 0;
+  &::-webkit-scrollbar-thumb,
+  &::-webkit-scrollbar-track {
+    border-width: 4px;
+    border-radius: 8px;
   }
   }
 `;
 `;
 
 
-const InputWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-`;
+const ScrollInner = styled.div``;
 
 
-const InputContainer = styled.div`
-  position: fixed;
-  bottom: 0;
-  justify-content: center;
-  align-items: center;
-  width: 50%;
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: row;
-  background-color: #b2bec3;
-  border: none;
-  form {
-    width: 100%;
-    button {
-      background-color: #27ae60;
-      width: 20%;
-      color: white;
-      border-radius: 10px;
-    }
-    input {
-      background-color: #b2bec3;
-      width: 70%;
+const ScrollInnerTitle = styled.div`
+  padding: 10px;
+  p {
+    text-align: center;
   }
   }
+`;
+
+const CardWrapper = styled.div`
+  padding: 5px;
+  text-align: center;
+  &:last-child {
+    margin-bottom: 10px;
   }
   }
-  border-radius: 10px;
 `;
 `;
 
 
-const StyledLink = styled(Link)`
-  width: 100%;
+const StyleForm = styled.form``;
+
+const InputArea = styled.div`
   display: flex;
   display: flex;
   flex-direction: row;
   flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-decoration: none;
-  color: white;
-  cursor: pointer;
-  &:hover {
-    background-color: white;
-    color: #667aff;
-  }
 `;
 `;
 
 
-export default ({
-  location,
-  message,
-  onSubmit,
-  messageArray,
-  subscribeToNewMessage,
-}) => {
-  const { pathname } = location;
-  const roomName = pathname.slice(1, pathname.length);
-  useEffect(() => subscribeToNewMessage(), []);
+const AttachArea = styled.div``;
+
+const TextArea = styled.div``;
+
+const ButtonArea = styled.div``;
+
+const PeopleSection = styled.section`
+  background-color: #2f3136;
+  color: white;
+  flex: 0 1 30%;
+  min-width: 360px;
+  max-width: 420px;
+`;
 
 
+export default () => {
   return (
   return (
     <Wrapper>
     <Wrapper>
-      <Header text={"KhuChat"} />
-      <ChatWrapper className="ChatWrapper">
-        <ChatMenuContainer>
-          <TitleContainer>
-            <Title>{roomName} Room</Title>
-          </TitleContainer>
-          <PeopleContainer>
-            <StyledLink to={`/${roomName}/People`}>
-              <FontAwesomeIcon icon={faAddressBook} />
-              <ItemText>People</ItemText>
-            </StyledLink>
-          </PeopleContainer>
-          <Category />
-        </ChatMenuContainer>
-        <ChatScreenContainer>
-          <ChatScreenHeader>
-            <Title>{roomName}</Title>
-          </ChatScreenHeader>
-          <ChatScreenBox>
-            {messageArray &&
-              messageArray.seeAllMessage.map((e) => (
-                <Message
-                  text={e.text}
-                  time={e.createdAt}
-                  key={e.id}
-                  avatar={e.sender.avatarUrl}
-                />
-              ))}
-            <InputWrapper>
-              <InputContainer className="InputContainer">
-                <form onSubmit={onSubmit}>
-                  <Input
-                    placeholder={"Enter any words"}
-                    type="text"
-                    {...message}
-                  />
-                  <Button text={"Submit"} />
-                </form>
-              </InputContainer>
-            </InputWrapper>
-          </ChatScreenBox>
-        </ChatScreenContainer>
-      </ChatWrapper>
+      <ServerListBox>
+        <ServerNav>
+          <ServerBox>Test</ServerBox>
+        </ServerNav>
+      </ServerListBox>
+      <MainContainer>
+        <MainContentBox>
+          <MainSideBar>채널 및 DM 목록</MainSideBar>
+          <MainBox>
+            <HeaderSection>상태 표시바</HeaderSection>
+            <SectionContainer>
+              <ChatSection>
+                <MessageWrapper>
+                  <ScrollWrapper>
+                    <ScrollInner>
+                      <ScrollInnerTitle>
+                        <p>.. Server 에 오신 것을 환영합니다.</p>
+                        <p>We Introduce some guides below.</p>
+                      </ScrollInnerTitle>
+                      <CardWrapper>초대하기</CardWrapper>
+                      <CardWrapper>데스크톱 앱 다운로드</CardWrapper>
+                      <CardWrapper>아이콘</CardWrapper>
+                    </ScrollInner>
+                  </ScrollWrapper>
+                </MessageWrapper>
+                <StyleForm>
+                  <InputArea>
+                    <AttachArea>
+                      <FontAwesomeIcon icon={faPlusSquare} />
+                    </AttachArea>
+                    <TextArea>
+                      <Input placeholder="# 보낼 메시지 입력" />
+                    </TextArea>
+                    <ButtonArea></ButtonArea>
+                  </InputArea>
+                </StyleForm>
+              </ChatSection>
+              <PeopleSection>활동중인 친구 리스트</PeopleSection>
+            </SectionContainer>
+          </MainBox>
+        </MainContentBox>
+      </MainContainer>
     </Wrapper>
     </Wrapper>
   );
   );
 };
 };