refactor: change SPA to MPA

src/embed.tsx

@@ -0,0 +1,15 @@
+import ReactDOM from "react-dom/client";
+import { Reset } from "styled-reset";
+import Embed from "./embed/index";
+import "./assets/base.css";
+import MarkdownStyleOverride from "./common/component/MarkdownStyleOverride";
+
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+
+root.render(
+  <>
+    <Reset />
+    <Embed />
+    <MarkdownStyleOverride />
+  </>
+);

src/embed/Chat.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+const Styled = styled.section`
+  width: 800px;
+  height: 800px;
+`;
+type Props = {};
+
+const Chat = (props: Props) => {
+  return <Styled>Chat</Styled>;
+};
+
+export default Chat;

src/embed/index.tsx

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import styled from "styled-components";
+const Styled = styled.aside`
+  pointer-events: all;
+`;
+import Chat from "./Chat";
+type Props = {};
+
+function Embed({}: Props) {
+  const [visible, setVisible] = useState(false);
+  const toggleVisible = () => {
+    setVisible((prev) => !prev);
+  };
+  return (
+    <Styled>
+      <button onClick={toggleVisible}>{visible ? "close" : "open"}</button>
+      {visible && <Chat />}
+    </Styled>
+  );
+}
+
+export default Embed;