create FE main

+/* import fonts */
+@import url('https://fonts.googleapis.com/css?family=Red+Hat+Display:400,500,900&display=swap');
+
+/* variables */
+:root {
+    --text-1: #333;
+    --text-2: #666;
+    --text-3: #999;
+    --line: #CCC;
+    --time-bg: #EEE;
+    --background: #F7F7F7;
+    --link: #3c90ff;
+}
+
+body, html {
+    font-family: "Red hat Display", sans-serif;
+    font-weight: 400;
+    line-height: 1.25em;
+    letter-spacing: 0.025em;
+    color: var(--text-1);
+    background: var(--background);
+}
+
+/* contents background */
+.container {
+    position: absolute;
+    top: 50%;
+    left: calc(40% + 12rem);
+    transform: translate(-50%, -50%);
+}
+
+/* picture */
+.pic {
+    width: 3rem;
+    height: 3rem;
+    background-size: cover;
+    background-position: center;
+    border-radius: 50%;
+    margin-right: 1rem;
+}
+
+.pic.menu-icon {
+    background-image: url("./img/menu-icon.svg");
+}
+
+.pic.bot {
+    width: 4rem;
+    height: 4rem;
+    background-image: url("./img/chatbot.svg");
+}
+
+.pic.call {
+    background-image: url("./img/phone-call.svg");
+}
+
+.pic.mask {
+    background-image: url("./img/mask.svg");
+}
+
+.pic.bar {
+    background-image: url("./img/bars.svg");
+}
+
+.pic.vaccine {
+    background-image: url("./img/injection.svg");
+}
+
+/* quick menu box */
+.menu-box {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translate(-6rem, -50%);
+
+    width: 24rem;
+    height: 32rem;
+    padding: 1rem 2rem 1rem 1rem;
+    box-sizing: border-box;
+    border-radius: 1rem 0 0 1rem;
+
+    cursor: pointer;
+    background-color: white;
+    box-shadow: 0 0 8rem 0 rgba(0, 0, 0, 0.1), 2rem 2rem 4rem -3rem rgba(0, 0, 0, 0.5);
+
+    transition: transform 500ms;
+}
+
+.menu-box:hover{
+    transform: translate(-23rem, -50%);
+}
+
+/* quick menu header */
+.menu-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+/* quick menu item */
+.menu-item {
+    position: relative;
+    margin-bottom: 1rem;
+    padding-left: 5rem;
+    height: 4.5rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.menu-item .pic {
+    position: absolute;
+    left: 0;
+}
+
+.menu-item a {
+    font-weight: 500;
+    margin-bottom: 0.125rem;
+    color: var(--link);
+}
+
+/* chats */
+.chat {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    width: 24rem;
+    height: 38rem;
+    z-index: 2;
+    box-sizing: border-box;
+    border-radius: 1rem;
+
+    background-color: white;
+    box-shadow: 0 0 8rem 0 rgba(0, 0, 0, 0.1), 0 2rem 4rem -3rem rgba(0, 0, 0, 0.5);
+}
+
+.chat-header {
+    flex-basis: 3.5rem;
+    flex-shrink: 0;
+    margin: 1rem;
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.historyContainer {
+    height: 100%;
+    padding: 1rem;
+    background: var(--background);
+    flex-shrink: 2;
+    overflow-y: auto;
+
+    box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.05), inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.05);
+}
+
+.historyContainer .msg {
+    box-sizing: border-box;
+    padding: 0.5rem 1rem;
+    margin: 1rem;
+    background: #FFF;
+    border-radius: 1.125rem 1.125rem 1.125rem 0;
+    min-height: 2.25rem;
+    width: fit-content;
+    max-width: 66%;
+
+    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0 1rem 1rem -1rem rgba(0, 0, 0, 0.1);
+}
+
+.historyContainer .msg.user {
+    margin: 1rem 1rem 1rem auto;
+    border-radius: 1.125rem 1.125rem 0 1.125rem;
+    background: var(--text-1);
+    color: white;
+}
+
+.historyContainer .msg.label {
+    color: var(--link);
+}
+
+.historyContainer .bot-image-box .bot-image {
+
+}
+
+/* input tag */
+.chat .input {
+    box-sizing: border-box;
+    flex-basis: 4rem;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    padding: 0 0.5rem 0 1.5rem;
+}
+
+.chat .input input {
+    border: none;
+    background-image: none;
+    background-color: white;
+    padding: 0.5rem 1rem;
+    margin-right: 1rem;
+    border-radius: 1.125rem;
+    flex-grow: 2;
+    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1), 0 1rem 1rem -1rem rgba(0, 0, 0, 0.2);
+
+    font-family: "Red hat Display", sans-serif;
+    font-weight: 400;
+    letter-spacing: 0.025em;
+}
+
+.chat .input input::placeholder {
+    color: var(--text-3);
+}

+import React from "react";
+import "./App.css";
+
+import { Provider } from "react-redux";
+import store from "./store";
+
+import Chat from "./components/chat/Chat";
+import Menu from "./components/menu/Menu";
+
+const App = () => {
+    return (
+        <Provider store={store}>
+            <div className="container">
+                <Chat />
+                <Menu />
+            </div>
+        </Provider>
+    );
+};
+
+export default App;

+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+    document.getElementById("root")
+);