feat: reset 기능 추가

src/components/Editor/Components/EditSection.tsx

@@ -20,8 +20,9 @@ const EditSection = ({ id, title, markdown, onDeleteSection, onResetSection }: P
     transform: CSS.Transform.toString(transform),
   };
 
-  const onClickSection = () => {
-    actions.setEditorMarkDown(prev => ({ ...prev, id, title, markdown }));
+  const onClickSection = (e: React.MouseEvent<HTMLElement, MouseEvent>, section: SectionsType) => {
+    e.stopPropagation();
+    actions.setEditorMarkDown(prev => ({ ...prev, ...section }));
     actions.setFocusSection(id);
   };
 
@@ -34,7 +35,7 @@ const EditSection = ({ id, title, markdown, onDeleteSection, onResetSection }: P
       ref={setNodeRef}
       {...attributes}
       style={style}
-      onClick={onClickSection}
+      onClick={e => onClickSection(e, { id, title, markdown })}
       className={clsx(
         "w-full h-[45px] py-[8px] px-[12px]",
         "flex flex-row gap-[10px] items-center",

src/components/Editor/Components/EditSections.tsx

@@ -19,6 +19,7 @@ import {
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { useSection } from "context/SectionContext";
 import { SectionsType } from "../types";
+import { sections as originData } from "data";
 
 const EditSections = () => {
   const { state, actions } = useSection();
@@ -72,9 +73,25 @@ const EditSections = () => {
 
   const onResetSection = (e: React.MouseEvent<HTMLElement, MouseEvent>, section: SectionsType) => {
     e.stopPropagation();
-    console.log(state.editorMarkDown);
-    console.log(section.markdown);
-    // actions.setEditorMarkDown(prev => ({ ...prev, markdown: "" }));
+    let originalMarkdown: string;
+    if (originData.some(el => el.id === section.id)) {
+      originalMarkdown = originData.find(s => s.id === section.id)?.markdown as string;
+    } else {
+      const sectionTitle = section.title;
+      originalMarkdown = `## ${sectionTitle}
+
+`;
+    }
+    actions.setEditorMarkDown(prev => ({ ...prev, markdown: `${originalMarkdown}` }));
+    actions.setEditSections(prev =>
+      prev.map(s => {
+        if (s.id === section.id) {
+          return { ...s, markdown: `${originalMarkdown}` };
+        } else {
+          return s;
+        }
+      }),
+    );
   };
 
   useEffect(() => {

src/components/Editor/Components/SelectSections.tsx

@@ -27,6 +27,7 @@ const SelectSections = () => {
   };
 
   const onClickSection = (e: React.MouseEvent<HTMLElement, MouseEvent>, section: SectionsType) => {
+    e.stopPropagation();
     setSections(prev => prev.filter(el => el.id !== section.id));
     actions.setSelectSections(prev => prev.filter(el => el.id !== section.id));
     actions.setEditSections(prev => [...prev, section]);

src/components/Editor/Modal/AddSectionModal.tsx

@@ -25,6 +25,7 @@ const AddSectionModal = ({ modalRef, modalOutSideClick, onClose, openModal }: Pr
       id: createId,
       title: inputRef.current?.value,
       markdown: `## ${title}
+
 `,
     };
     actions.setEditSections(prev => [...prev, newValue]);

src/data/index.ts

@@ -7,7 +7,8 @@ export const sections: SectionsType[] = [
     markdown: `## Project Title
   
   A brief description of what this project does and who it's for
-  `,
+
+`,
   },
   {
     id: 2,
@@ -20,7 +21,8 @@ export const sections: SectionsType[] = [
     npm install my-project
     cd my-project
   \`\`\`
-  `,
+
+`,
   },
   {
     id: 3,
@@ -32,7 +34,8 @@ export const sections: SectionsType[] = [
   \`\`\`bash
     npm run test
   \`\`\`
-  `,
+
+`,
   },
   {
     id: 4,
@@ -42,7 +45,8 @@ export const sections: SectionsType[] = [
   - [Next.js](https://nextjs.org/)
   - [TypeScript](https://www.typescriptlang.org/)
   - [Tailwind CSS](https://tailwindcss.com/)
-  `,
+  
+`,
   },
   {
     id: 5,
@@ -54,6 +58,7 @@ export const sections: SectionsType[] = [
   | Row 1    | Row 1    | Row 1    |
   | Row 2    | Row 2    | Row 2    |
   | Row 3    | Row 3    | Row 3    |
-  `,
+
+`,
   },
 ];