create components related to chat screen

+import React from "react";
+import styled from "styled-components";
+
+const BubbleBox = styled.div``;
+
+export default () => {
+  return <BubbleBox />;
+};

+import React from "react";
+import styled from "styled-components";
+
+const ChatFooter = styled.div`
+  display: flex;
+`;
+
+export default () => {
+  return <ChatFooter></ChatFooter>;
+};

+import React from "react";
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPhone, faEllipsisH } from "@fortawesome/free-solid-svg-icons";
+
+const ChatHeader = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-bottom: 1px solid;
+`;
+
+const NickNameBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  opacity: 0.8;
+`;
+
+const NickName = styled.span`
+  font-size: 20px;
+`;
+
+const IconBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  opacity: 0.8;
+`;
+
+export default () => {
+  return (
+    <ChatHeader>
+      <NickNameBox>
+        <NickName /> NickName
+      </NickNameBox>
+      <IconBox>
+        <FontAwesomeIcon icon={faPhone} />
+        <FontAwesomeIcon icon={faEllipsisH} />
+      </IconBox>
+    </ChatHeader>
+  );
+};

+import React from "react";
+import styled from "styled-components";
+import ChatListBox from "../SubMenuList/ChatListBox";
+
+const ChatScreen = styled.div``;
+
+export default () => {
+  return (
+    <ChatScreen>
+      <ChatListBox />
+    </ChatScreen>
+  );
+};