add zustand

package.json

@@ -13,7 +13,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
-    "styled-components": "^6.0.2"
+    "styled-components": "^6.0.2",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

src/App.tsx

@@ -22,21 +22,16 @@ const GlobalStyles = createGlobalStyle`
 `;
 
 function App() {
-  const [markdown, setMarkdown] = useState(`# Hello World`);
   const [showGuide, setShowGuide] = useState(false);
 
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setMarkdown(e.target.value);
-  };
-
   return (
     <>
       <GlobalStyles />
       <Header onToggleGuide={() => setShowGuide(!showGuide)} />
       {showGuide && <MarkdownGuide />}
       <Container>
-        <MarkdownInput value={markdown} onChange={handleChange} />
-        <MarkdownOutput markdown={markdown} />
+        <MarkdownInput />
+        <MarkdownOutput />
       </Container>
     </>
   );

src/components/MarkdownInput.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { useMarkdownStore } from "../store/useMarkdownStore";
 
 const InputContainer = styled.div`
   width: 50%;
@@ -18,15 +19,15 @@ const StyledTextArea = styled.textarea`
   outline: none;
 `;
 
-interface MarkdownInputProps {
-  value: string;
-  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}
+const MarkdownInput = () => {
+  const { markdown, setMarkdown } = useMarkdownStore();
 
-const MarkdownInput: React.FC<MarkdownInputProps> = ({ value, onChange }) => {
   return (
     <InputContainer>
-      <StyledTextArea onChange={onChange} value={value} />
+      <StyledTextArea
+        onChange={(e: any) => setMarkdown(e.target.value)}
+        value={markdown}
+      />
     </InputContainer>
   );
 };

src/components/MarkdownOutput.tsx

@@ -1,5 +1,6 @@
-import ReactMarkdown from "react-markdown";
 import styled from "styled-components";
+import ReactMarkdownRender from "./ReactMarkdownRender";
+import { useMarkdownStore } from "../store/useMarkdownStore";
 
 const OutputContainer = styled.div`
   width: 50%;
@@ -11,14 +12,10 @@ const OutputContainer = styled.div`
   background-color: #f9f9f9;
 `;
 
-interface MarkdownOutputProps {
-  markdown: string;
-}
-
-const MarkdownOutput: React.FC<MarkdownOutputProps> = ({ markdown }) => {
+const MarkdownOutput = () => {
   return (
     <OutputContainer>
-      <ReactMarkdown>{markdown}</ReactMarkdown>
+      <ReactMarkdownRender />
     </OutputContainer>
   );
 };

src/components/ReactMarkdownRender.tsx

@@ -0,0 +1,9 @@
+import ReactMarkdown from "react-markdown";
+import { useMarkdownStore } from "../store/useMarkdownStore";
+
+const ReactMarkdownRender = () => {
+  const { markdown } = useMarkdownStore();
+  return <ReactMarkdown>{markdown}</ReactMarkdown>;
+};
+
+export default ReactMarkdownRender;

src/store/useMarkdownStore.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface MarkdownStore {
+  markdown: string;
+  setMarkdown: (markdown: string) => void;
+}
+
+// const [markdown, setMarkdown] = useState("Hello World");
+
+export const useMarkdownStore = create<MarkdownStore>((set: any) => ({
+  markdown: "Hello World",
+  setMarkdown: (markdown: string) => set({ markdown }),
+}));