Feat: README.md 파일 다운도르 기능 추가 및 EditSection 주석 처리 해제

src/components/Common/Tabs.tsx

@@ -13,7 +13,7 @@ interface TabProps extends TabsProps {
 
 export const Tabs = ({ children, onClick, value }: TabsProps) => {
   return (
-    <div className="w-full min-h-[30px] flex flex-row gap-[40px] mx-[5px]">
+    <div className="w-full min-h-[35px] flex flex-row items-center gap-[40px] mx-[5px]">
       {Children.toArray(children).map((child, idx) => (
         <Tab
           key={idx}
@@ -34,7 +34,7 @@ export const Tab = ({ value, selectedTab, onClick }: TabProps) => {
 
   return (
     <>
-      <div onClick={handleClick} className="h-full w-auto cursor-pointer flex items-center">
+      <div onClick={handleClick} className="h-full w-auto cursor-pointer">
         <p
           className={clsx("mb-0", {
             "text-textBlue": boolean,

src/components/Editor/Components/EditSection.tsx

@@ -1,100 +1,63 @@
-import React, { useEffect, useState } from "react";
-import EditSection from "./EditSection";
-import {
-  DndContext,
-  closestCenter,
-  useSensor,
-  useSensors,
-  KeyboardSensor,
-  MouseSensor,
-  TouchSensor,
-  DragEndEvent,
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  verticalListSortingStrategy,
-  arrayMove,
-  sortableKeyboardCoordinates,
-} from "@dnd-kit/sortable";
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { useSection } from "context/SectionContext";
-import { KeyNameType, SectionsType } from "../types";
-
-const EditSections = ({ keyName }: KeyNameType) => {
-  const { value, setValue } = useSection();
-  const [sections, setSections] = useState<SectionsType[]>([]);
-
-  const getIndex = (id: number) => sections.findIndex(el => el.id === id);
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (active.id === over?.id) return;
-    setSections(sections => {
-      const oldIndex = getIndex(active.id as number);
-      const newIndex = getIndex(over?.id as number);
-
-      return arrayMove(sections, oldIndex, newIndex);
-    });
-  };
-
-  const sensors = useSensors(
-    useSensor(TouchSensor),
-    useSensor(MouseSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  const onDeleteSection = (e: React.MouseEvent<HTMLElement, MouseEvent>, targetId: number) => {
-    e.stopPropagation();
-    setSections(prev => prev.filter(el => el.id !== targetId));
-  };
-
-  const onResetSection = (e: React.MouseEvent<HTMLElement, MouseEvent>, targetId: number) => {
-    e.stopPropagation();
+import React, { useState } from "react";
+import { List, Reset, TrashCan } from "@carbon/icons-react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import clsx from "clsx";
+
+interface Props {
+  id: number;
+  title: string | undefined;
+  markdown: string | undefined;
+  onDeleteSection: (e: React.MouseEvent<HTMLElement, MouseEvent>, targetId: number) => void;
+}
+
+const EditSection = ({ id, title, markdown, onDeleteSection }: Props) => {
+  const [hover, setHover] = useState<boolean>(false);
+  const onMouseEnter = () => setHover(true);
+  const onMouseLeave = () => setHover(false);
+
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform),
   };
 
-  useEffect(() => {
-    const sectionsList = JSON.parse(localStorage.getItem(`${keyName}`) || "[]");
-    if (sectionsList.length > 0) {
-      setSections(sectionsList);
-    }
-  }, []);
-
-  useEffect(() => {
-    localStorage.setItem(`${keyName}`, JSON.stringify(sections));
-    const sectionsList = JSON.parse(localStorage.getItem(`${keyName}`) || "[]");
-    const markdownList = sectionsList.map((el: SectionsType) => el.markdown).join("");
-    setValue(markdownList);
-  }, [sections]);
-
   return (
-    <div className="flex flex-col gap-[10px] px-[10px]">
-      <div className="flex-Center flex-row justify-between min-h-[30px]">
-        <p className="text-textPrimary ml-[5px] mb-0 text-sm">Edit Section</p>
-      </div>
-      <div className="flex flex-col gap-[10px] h-full">
-        <DndContext
-          sensors={sensors}
-          onDragEnd={handleDragEnd}
-          collisionDetection={closestCenter}
-          modifiers={[restrictToVerticalAxis]}
-        >
-          <SortableContext items={sections} strategy={verticalListSortingStrategy}>
-            {/* {sections.map(section => (
-              <EditSection
-                key={section.id}
-                title={section.title}
-                id={section.id}
-                markdown={section.markdown}
-                onDeleteSection={onDeleteSection}
-              />
-            ))} */}
-          </SortableContext>
-        </DndContext>
-      </div>
+    <div
+      ref={setNodeRef}
+      {...attributes}
+      style={style}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      className={clsx(
+        "w-full h-[45px] py-[8px] px-[12px]",
+        "flex flex-row gap-[10px] items-center",
+        "rounded-[8px] border-solid border bg-white border-[#F1F3F5] drop-shadow-[0_1px_1px_rgba(173,181,189,0.25)]",
+        "cursor-pointer",
+        {
+          "focus:outline-none focus:ring-2 focus:ring-textBlue": true,
+        },
+      )}
+    >
+      <List {...listeners} size={25} className="fill-textSecondary min-w-[25px]" />
+      <p className="text-textPrimary mb-0 truncate">{title}</p>
+      {hover && (
+        <div className="flex flex-row gap-[10px] ml-auto">
+          <button>
+            <Reset size={20} className="fill-[#ADB5BD]" onClick={() => alert("rest")} />
+          </button>
+          <button
+            onClick={e => {
+              onDeleteSection(e, id);
+            }}
+          >
+            <TrashCan size={20} className="fill-textPrimary" />
+          </button>
+        </div>
+      )}
     </div>
   );
 };
 
-export default EditSections;
+export default EditSection;

src/components/Editor/Components/EditSections.tsx

@@ -81,15 +81,15 @@ const EditSections = ({ keyName }: KeyNameType) => {
           modifiers={[restrictToVerticalAxis]}
         >
           <SortableContext items={sections} strategy={verticalListSortingStrategy}>
-            {/* {sections.map(section => (
+            {sections.map(section => (
               <EditSection
                 key={section.id}
                 title={section.title}
                 id={section.id}
                 markdown={section.markdown}
                 onDeleteSection={onDeleteSection}
               />
-            ))} */}
+            ))}
           </SortableContext>
         </DndContext>
       </div>

src/components/Editor/Components/Raw.tsx

@@ -5,10 +5,10 @@ import { ValueType } from "../types";
 const Raw = ({ value }: ValueType) => {
   const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
 
-  const handleCopyClick = async (textToCopy: string) => {
+  const onCopyMarkdown = async () => {
     textAreaRef.current?.select();
     try {
-      await navigator.clipboard.writeText(textToCopy);
+      await navigator.clipboard.writeText(value!);
       alert("Copying is complete.");
     } catch (e) {
       alert("Copying failed.");
@@ -18,13 +18,17 @@ const Raw = ({ value }: ValueType) => {
   return (
     <div className="w-full h-full p-[20px] rounded-[8px] border-solid border border-textTertiary relative">
       {value!.length > 0 && (
-        <div className="h-auto absolute right-[20px]" onClick={() => handleCopyClick(value!)}>
+        <div className="h-auto absolute right-[20px]" onClick={onCopyMarkdown}>
           <Copy size={18} className="cursor-pointer" />
         </div>
       )}
-      <textarea ref={textAreaRef} key={value} readOnly className="h-full w-full resize-none focus:outline-none p-0">
-        {value}
-      </textarea>
+      <textarea
+        defaultValue={value}
+        ref={textAreaRef}
+        key={value}
+        readOnly
+        className="h-full w-full resize-none focus:outline-none p-0"
+      />
     </div>
   );
 };

src/components/Editor/EditorPreviewContainer.tsx

@@ -4,6 +4,8 @@ import Raw from "./Components/Raw";
 import { Tab, Tabs } from "../Common/Tabs";
 import { useSection } from "../../context/SectionContext";
 import Editor from "./Components/Editor";
+import { Download } from "@carbon/icons-react";
+import clsx from "clsx";
 
 const EditorPreviewContainer = () => {
   const { value } = useSection();
@@ -13,22 +15,61 @@ const EditorPreviewContainer = () => {
     setSelectedTab(value);
   };
 
+  const onDownloadMarkdown = () => {
+    try {
+      const element = document.createElement("a");
+      const file = new Blob([value], { type: "text/plain" });
+      element.href = URL.createObjectURL(file);
+      element.download = "README.md";
+      document.body.appendChild(element);
+      element.click();
+      alert("Download is complete");
+    } catch (error) {
+      alert("Download failed.");
+    }
+  };
+
   return (
     <>
       <div className="w-1/2">
         <div className="w-full h-full flex flex-col gap-[10px]">
-          <div className="min-h-[30px] mx-[5px] flex items-center">
+          <div className="min-h-[35px] mx-[5px] flex items-center">
             <p className="text-textBlue font-semibold mb-0">Editor</p>
           </div>
           <Editor />
         </div>
       </div>
       <div className="w-1/2">
         <div className="w-full h-full flex flex-col gap-[10px]">
-          <Tabs value={selectedTab} onClick={handleTabClick}>
-            <Tab value="Preview">Preview</Tab>
-            <Tab value="Raw">Raw</Tab>
-          </Tabs>
+          <div className="min-h-[35px] flex flex-row mx-[5px]">
+            <div className="w-full h-full">
+              <Tabs value={selectedTab} onClick={handleTabClick}>
+                <Tab value="Preview">Preview</Tab>
+                <Tab value="Raw">Raw</Tab>
+              </Tabs>
+            </div>
+            <button
+              onClick={onDownloadMarkdown}
+              className={clsx(
+                "w-auto h-full",
+                "flex flex-row gap-[8px] items-center",
+                "px-[12px]",
+                "bg-textBlue text-white ",
+                "rounded-[8px]",
+                {
+                  "hover:bg-[#6E9EFF]": value.length > 0,
+                  "cursor-pointer": value.length > 0,
+                },
+                {
+                  "bg-textTertiary": value.length === 0,
+                },
+              )}
+              disabled={value.length > 0 ? false : true}
+            >
+              <Download size={16} />
+              <p className="mb-0 text-sm">Download</p>
+            </button>
+          </div>
           {selectedTab === "Preview" && <Preview value={value} />}
           {selectedTab === "Raw" && <Raw value={value} />}
         </div>

src/components/Editor/SectionsContainer.tsx

@@ -12,10 +12,12 @@ const SectionsContainer = () => {
 
   return (
     <div className="w-full h-full flex flex-col gap-[10px]">
-      <Tabs value={selectedTab} onClick={handleTabClick}>
-        <Tab value="Builder">Builder</Tab>
-        <Tab value="Auto">Auto</Tab>
-      </Tabs>
+      <div className="w-full">
+        <Tabs value={selectedTab} onClick={handleTabClick}>
+          <Tab value="Builder">Builder</Tab>
+          <Tab value="Auto">Auto</Tab>
+        </Tabs>
+      </div>
       <div className="w-full h-full flex flex-col gap-[10px] overflow-y-scroll">
         {selectedTab === "Builder" && <Builder />}
         {selectedTab === "Auto" && <Auto />}

src/components/Editor/types.ts

@@ -6,7 +6,6 @@ export interface SectionsType {
   id: number;
   title: string | undefined;
   markdown: string | undefined;
-  onDeleteSection: (e: React.MouseEvent<HTMLElement, MouseEvent>, targetId: number) => void;
 }
 
 export interface KeyNameType {