rename folder's name from "Main" to "ChatMain"

+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;
+  box-shadow: 1px 1px 7px #8395a7;
+`;
+
+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 IncomingMsg from "./IncomingMsg";
+import OutcomingMsg from "./OutcomingMsg";
+
+const ChatScreen = styled.div``;
+
+export default () => {
+  return (
+    <ChatScreen>
+      <IncomingMsg />
+      <OutcomingMsg />
+    </ChatScreen>
+  );
+};

+import React from "react";
+import styled from "styled-components";
+import ImgIconBox from "../SubMenuList/ImgIconBox";
+
+const IncomingBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 20px 10px;
+  margin-top: 20px;
+  margin-left: 10px;
+`;
+
+const MsgContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 10px;
+`;
+
+const MsgBox = styled.div`
+  background-color: #20bf6b;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  margin-bottom: 10px;
+`;
+
+const Msg = styled.span`
+  font-size: 20px;
+  padding: 20px 10px;
+`;
+
+const TimeBox = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  opacity: 0.7;
+`;
+
+const Time = styled.span`
+  font-size: 15px;
+`;
+
+export default () => {
+  return (
+    <IncomingBox>
+      <ImgIconBox />
+      <MsgContainer>
+        <MsgBox>
+          <Msg /> Incoming Message
+        </MsgBox>
+        <TimeBox>
+          <Time /> Monday 00:00
+        </TimeBox>
+      </MsgContainer>
+    </IncomingBox>
+  );
+};

+import React from "react";
+import styled from "styled-components";
+import ChatHeader from "./ChatHeader";
+import ChatScreen from "./ChatScreen";
+import ChatFooter from "./ChatFooter";
+
+const MainScreen = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 55%;
+`;
+
+export default () => {
+  return (
+    <MainScreen>
+      <ChatHeader />
+      <ChatScreen />
+      <ChatFooter />
+    </MainScreen>
+  );
+};

+import React from "react";
+import styled from "styled-components";
+
+const OutcomingBox = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 20px 10px;
+  margin-top: 20px;
+  margin-right: 10px;
+`;
+
+const MsgContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const MsgBox = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #54a0ff;
+  color: white;
+  border-radius: 20px;
+  margin-bottom: 10px;
+`;
+
+const Msg = styled.span`
+  font-size: 20px;
+  padding: 20px 10px;
+`;
+
+const TimeBox = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  opacity: 0.8;
+`;
+
+const Time = styled.span`
+  font-size: 15px;
+`;
+
+export default () => {
+  return (
+    <OutcomingBox>
+      <MsgContainer>
+        <MsgBox>
+          <Msg /> Outcoming Message
+        </MsgBox>
+        <TimeBox>
+          <Time /> Monday 00:00
+        </TimeBox>
+      </MsgContainer>
+    </OutcomingBox>
+  );
+};