diff --git a/packages/web/src/common/components/Markdown/index.tsx b/packages/web/src/common/components/Markdown/index.tsx
index 4d380d3a0..da262d0a2 100644
--- a/packages/web/src/common/components/Markdown/index.tsx
+++ b/packages/web/src/common/components/Markdown/index.tsx
@@ -42,6 +42,8 @@ import FlexWrapper from "@sparcs-clubs/web/common/components/FlexWrapper";
 
 interface MarkdownProps {
   placeholder?: string;
+  initialValue?: string;
+  onChange?: (content: string) => void;
 }
 
 const ButtonWrapper = styled.div`
@@ -68,7 +70,11 @@ const ProtectedParagraph = Node.create({
   },
 });
 
-const Markdown = ({ placeholder = "" }: MarkdownProps) => {
+const Markdown = ({
+  placeholder = "",
+  initialValue = "",
+  onChange = () => {},
+}: MarkdownProps) => {
   const editor = useEditor({
     extensions: [
       Document,
@@ -105,7 +111,13 @@ const Markdown = ({ placeholder = "" }: MarkdownProps) => {
       TableHeader,
       Text,
     ],
-    content: ``,
+    content: initialValue,
+    onUpdate: () => {
+      const content = editor?.getHTML();
+      if (content) {
+        onChange(content); // 부모로 HTML 전달
+      }
+    },
   });
 
   // 테이블 삽입, 이후 삭제 방지된 텍스트 노드 삽입
diff --git a/packages/web/src/features/meeting/agenda/create/components/AgendaBlock.tsx b/packages/web/src/features/meeting/agenda/create/components/AgendaBlock.tsx
index 13526437c..1aa52ecd3 100644
--- a/packages/web/src/features/meeting/agenda/create/components/AgendaBlock.tsx
+++ b/packages/web/src/features/meeting/agenda/create/components/AgendaBlock.tsx
@@ -87,10 +87,12 @@ const AgendaBlock = forwardRef<HTMLDivElement, AgendaBlockProps>(
             (isEditMode ? (
               <AgendaEditor
                 agendaContent={agenda}
-                onDelete={deleteAgenda}
-                onSave={() => setEditMode(false)}
-                onChange={(newContent: AgendaContent) => {
-                  editAgenda(newContent);
+                onCancel={() => {
+                  setEditMode(false);
+                }}
+                onSave={(agendaContent: AgendaContent) => {
+                  editAgenda(agendaContent);
+                  setEditMode(false);
                 }}
               />
             ) : (
diff --git a/packages/web/src/features/meeting/agenda/create/components/AgendaEditor.tsx b/packages/web/src/features/meeting/agenda/create/components/AgendaEditor.tsx
index 49e629e84..e66dbc1ce 100644
--- a/packages/web/src/features/meeting/agenda/create/components/AgendaEditor.tsx
+++ b/packages/web/src/features/meeting/agenda/create/components/AgendaEditor.tsx
@@ -1,10 +1,10 @@
-import isPropValid from "@emotion/is-prop-valid";
-import styled from "styled-components";
+import { useState } from "react";
 
 import Button from "@sparcs-clubs/web/common/components/Button";
 import Card from "@sparcs-clubs/web/common/components/Card";
 import FlexWrapper from "@sparcs-clubs/web/common/components/FlexWrapper";
 import TextInput from "@sparcs-clubs/web/common/components/Forms/TextInput";
+import Markdown from "@sparcs-clubs/web/common/components/Markdown";
 import Select from "@sparcs-clubs/web/common/components/Select";
 import Typography from "@sparcs-clubs/web/common/components/Typography";
 import AgendaContent from "@sparcs-clubs/web/features/meeting/agenda/constants/agendaContent";
@@ -16,82 +16,76 @@ import {
 
 interface AgendaEditorProps {
   agendaContent: AgendaContent;
-  onDelete: () => void;
-  onSave: () => void;
-  onChange: (agendaContent: AgendaContent) => void;
+  onCancel: () => void;
+  onSave: (agendaContent: AgendaContent) => void;
 }
 
 // TODO: Impl TextArea
-const TextEditor = styled.input.withConfig({
-  shouldForwardProp: prop => isPropValid(prop),
-})`
-  border: 1px solid ${({ theme }) => theme.colors.PRIMARY};
-  padding: 32px;
-`;
+// const TextEditor = styled.input.withConfig({
+//   shouldForwardProp: prop => isPropValid(prop),
+// })`
+//   border: 1px solid ${({ theme }) => theme.colors.PRIMARY};
+//   padding: 32px;
+// `;
 
 const AgendaEditor: React.FC<AgendaEditorProps> = ({
   agendaContent,
-  onDelete,
+  onCancel,
   onSave,
-  onChange,
-}: AgendaEditorProps) => (
-  <Card outline gap={32}>
-    <FlexWrapper gap={4} direction="column">
-      <Typography fs={16} lh={20} fw="MEDIUM">
-        안건 종류
-      </Typography>
-      <Select
-        items={(
-          Object.values(AgendaTypeEnum).filter(
-            value => typeof value === "number",
-          ) as Array<AgendaTypeEnum>
-        ).map((value: AgendaTypeEnum) => ({
-          label: AgendaTypeName[value],
-          value,
-        }))}
-        value={agendaContent.type}
-        onChange={(value: AgendaTypeEnum) => {
-          onChange({
-            ...agendaContent,
-            type: value,
-          });
-        }}
-      />
-    </FlexWrapper>
-    <FlexWrapper gap={4} direction="column">
-      <Typography fs={16} lh={20} fw="MEDIUM">
-        안건 제목
-      </Typography>
-      <TextInput
-        placeholder="안건 제목을 입력해주세요"
-        value={agendaContent.title}
-        handleChange={(title: string) =>
-          onChange({
-            ...agendaContent,
-            title,
-          })
-        }
-      />
-    </FlexWrapper>
-    <FlexWrapper gap={4} direction="column">
-      <Typography fs={16} lh={20} fw="MEDIUM">
-        안건 내용
-      </Typography>
-      <TextEditor
-        value={agendaContent.content}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-          onChange({
-            ...agendaContent,
-            content: event.target.value,
-          });
-        }}
-      />
-    </FlexWrapper>
-    <FlexWrapper gap={10} direction="row" style={{ marginLeft: "auto" }}>
-      <Button onClick={onDelete}>삭제</Button>
-      <Button onClick={onSave}>저장</Button>
-    </FlexWrapper>
-  </Card>
-);
+}: AgendaEditorProps) => {
+  const [currentAgenda, setCurrentAgenda] = useState(agendaContent);
+
+  return (
+    <Card outline gap={32}>
+      <FlexWrapper gap={4} direction="column">
+        <Typography fs={16} lh={20} fw="MEDIUM">
+          안건 종류
+        </Typography>
+        <Select
+          items={(
+            Object.values(AgendaTypeEnum).filter(
+              value => typeof value === "number",
+            ) as Array<AgendaTypeEnum>
+          ).map((value: AgendaTypeEnum) => ({
+            label: AgendaTypeName[value],
+            value,
+          }))}
+          value={currentAgenda.type}
+          onChange={(value: AgendaTypeEnum) => {
+            setCurrentAgenda({ ...currentAgenda, type: value });
+          }}
+        />
+      </FlexWrapper>
+      <FlexWrapper gap={4} direction="column">
+        <Typography fs={16} lh={20} fw="MEDIUM">
+          안건 제목
+        </Typography>
+        <TextInput
+          placeholder="안건 제목을 입력해주세요"
+          value={currentAgenda.title}
+          handleChange={(title: string) => {
+            setCurrentAgenda({ ...currentAgenda, title });
+          }}
+        />
+      </FlexWrapper>
+      <FlexWrapper gap={4} direction="column">
+        <Typography fs={16} lh={20} fw="MEDIUM">
+          안건 내용
+        </Typography>
+        <Markdown
+          placeholder="안건 내용을 입력해주세요"
+          initialValue={currentAgenda.content}
+          onChange={(content: string) => {
+            setCurrentAgenda({ ...currentAgenda, content });
+          }}
+        />
+      </FlexWrapper>
+      <FlexWrapper gap={10} direction="row" style={{ marginLeft: "auto" }}>
+        <Button onClick={onCancel}>취소</Button>
+        <Button onClick={() => onSave(currentAgenda)}>저장</Button>
+      </FlexWrapper>
+    </Card>
+  );
+};
 
 export default AgendaEditor;