feat: 섹션 검색 기능 추가

src/components/Editor/Components/EditSection.tsx

@@ -11,7 +11,7 @@ interface Props extends SectionsType {
   onResetSection: (e: React.MouseEvent<HTMLElement, MouseEvent>, section: SectionsType) => void;
 }
 
-const EditSection = ({ id, title, markdown, onDeleteSection, onResetSection }: Props) => {
+const EditSection = ({ id, title, markdown, name, onDeleteSection, onResetSection }: Props) => {
   const { state, actions } = useSection();
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
 
@@ -20,6 +20,13 @@ const EditSection = ({ id, title, markdown, onDeleteSection, onResetSection }: P
     transform: CSS.Transform.toString(transform),
   };
 
+  const section = {
+    id,
+    name,
+    title,
+    markdown,
+  };
+
   const onClickSection = (e: React.MouseEvent<HTMLElement, MouseEvent>, section: SectionsType) => {
     e.stopPropagation();
     actions.setEditorMarkDown(prev => ({ ...prev, ...section }));
@@ -35,7 +42,7 @@ const EditSection = ({ id, title, markdown, onDeleteSection, onResetSection }: P
       ref={setNodeRef}
       {...attributes}
       style={style}
-      onClick={e => onClickSection(e, { id, title, markdown })}
+      onClick={e => onClickSection(e, section)}
       className={clsx(
         "w-full h-[45px] py-[8px] px-[12px]",
         "flex flex-row gap-[10px] items-center",
@@ -50,10 +57,10 @@ const EditSection = ({ id, title, markdown, onDeleteSection, onResetSection }: P
       <p className="text-textPrimary mb-0 truncate">{title}</p>
       {state.focusSection === id && (
         <div className="flex flex-row gap-[10px] ml-auto">
-          <button onClick={e => onResetSection(e, { id, title, markdown })}>
+          <button onClick={e => onResetSection(e, section)}>
             <Reset size={20} className="fill-[#ADB5BD]" />
           </button>
-          <button onClick={e => onDeleteSection(e, { id, title, markdown })}>
+          <button onClick={e => onDeleteSection(e, section)}>
             <TrashCan size={20} className="fill-textPrimary" />
           </button>
         </div>

src/components/Editor/Components/EditSections.tsx

@@ -128,6 +128,7 @@ const EditSections = () => {
             {sections.map(section => (
               <EditSection
                 key={section.id}
+                name={section.name}
                 title={section.title}
                 id={section.id}
                 markdown={section.markdown}

src/components/Editor/Components/SearchSection.tsx

@@ -1,23 +1,29 @@
 import React from "react";
 import { Search } from "@carbon/icons-react";
+import { SectionsType } from "../types";
 
-const SearchSection = () => {
+interface Props {
+  search: string;
+  setSearch: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const SearchSection = ({ search, setSearch }: Props) => {
   return (
-    <form action="">
-      <div className="w-full h-[45px] flex items-center relative">
-        <Search size={20} className="absolute z-1 fill-[#495057] ml-[12px] pointer-events-none" />
-        <input
-          type="text"
-          className="
+    <div className="w-full h-[45px] flex items-center relative">
+      <Search size={20} className="absolute z-1 fill-[#495057] ml-[12px] pointer-events-none" />
+      <input
+        value={search}
+        onChange={e => setSearch(e.target.value)}
+        type="text"
+        className="
             w-full h-[45px] p-[10px] pl-[40px]
             rounded-[8px] drop-shadow-[0_1px_1px_rgba(173,181,189,0.25)] border border-[#F1F3F5]
             focus:outline-none focus:ring-2 focus:ring-textBlue
             placeholder-[#ADB5BD] placeholder:text-[14px]
           "
-          placeholder="Search for a section"
-        />
-      </div>
-    </form>
+        placeholder="Search for a section"
+      />
+    </div>
   );
 };
 

src/components/Editor/Components/SelectSection.tsx

@@ -7,10 +7,17 @@ interface Props extends SectionsType {
   onClickSection: (e: React.MouseEvent<HTMLElement, MouseEvent>, section: SectionsType) => void;
 }
 
-const SelectSection = ({ id, title, markdown, onClickSection }: Props) => {
+const SelectSection = ({ id, name, title, markdown, onClickSection }: Props) => {
+  const section = {
+    id,
+    name,
+    title,
+    markdown,
+  };
+
   return (
     <div
-      onClick={e => onClickSection(e, { id, title, markdown })}
+      onClick={e => onClickSection(e, section)}
       className="
       w-full h-[45px] py-[8px] px-[12px]
       flex items-center

src/components/Editor/Components/SelectSections.tsx

@@ -12,9 +12,11 @@ const SelectSections = () => {
     const localData = JSON.parse(localStorage.getItem("select-sections-list") || "[]");
     return localData.length > 0 ? localData : state.selectSections;
   });
-
+  const [search, setSearch] = useState("");
+  const [searchSection, setSerchSection] = useState<SectionsType[]>([]);
   const [openModal, setOpenModal] = useState(false);
   const modalRef = useRef<HTMLDivElement | null>(null);
+  const sectionList = search.length > 0 ? searchSection : sections;
 
   const modalOutSideClick = (e: any) => {
     if (modalRef.current === e.target) {
@@ -42,6 +44,18 @@ const SelectSections = () => {
   }, []);
 
   useEffect(() => {
+    if (search.length > 0) {
+      const searchSection = sections.filter(s => {
+        return s.name.toLowerCase().includes(search.toLowerCase());
+      });
+      setSerchSection(searchSection);
+    } else {
+      setSections(state.selectSections);
+    }
+  }, [search]);
+
+  useEffect(() => {
+    setSearch("");
     setSections(state.selectSections);
   }, [state.selectSections]);
 
@@ -56,11 +70,12 @@ const SelectSections = () => {
         <Add size={30} className="fill-textBlue cursor-pointer" onClick={openModalAlert} />
       </div>
       <div className="h-full max-h-auto flex flex-col gap-[10px]">
-        <SearchSection />
-        {sections.map(section => (
+        <SearchSection search={search} setSearch={setSearch} />
+        {sectionList.map(section => (
           <SelectSection
             key={section.id}
             id={section.id}
+            name={section.name}
             title={section.title}
             markdown={section.markdown}
             onClickSection={onClickSection}

src/components/Editor/Modal/AddSectionModal.tsx

@@ -23,7 +23,8 @@ const AddSectionModal = ({ modalRef, modalOutSideClick, onClose, openModal }: Pr
     const createId = state.selectSections.length + state.editSections.length + 1;
     const newValue: SectionsType = {
       id: createId,
-      title: inputRef.current?.value,
+      name: title,
+      title: title,
       markdown: `## ${title}
 
 `,

src/components/Editor/types.ts

@@ -1,6 +1,7 @@
 export interface SectionsType {
   id: number;
-  title: string | undefined;
+  name: string;
+  title: string;
   markdown: string | undefined;
 }
 export interface ValueType {

src/context/SectionContext.tsx

@@ -36,7 +36,8 @@ export const SectionProvider = ({ children }: SectionContextProviderProps) => {
   const [editSections, setEditSections] = useState<SectionsType[]>([]);
   const [editorMarkDown, setEditorMarkDown] = useState<SectionsType>({
     id: 0,
-    title: "",
+    name: "Welcome",
+    title: "Welcome",
     markdown: "# Welcome To README-MONSTER",
   });
   const [focusSection, setFocusSection] = useState<number | undefined>(undefined);

src/data/index.ts

@@ -3,61 +3,66 @@ import { SectionsType } from "components/Editor/types";
 export const sections: SectionsType[] = [
   {
     id: 1,
+    name: "Project Title",
     title: "Project Title",
     markdown: `## Project Title
 
-  A brief description of what this project does and who it's for
+A brief description of what this project does and who it's for
 
 `,
   },
   {
     id: 2,
+    name: "Installation",
     title: "Installation",
     markdown: `## Installation
 
-  Install my-project with npm
+Install my-project with npm
 
-  \`\`\`bash
-    npm install my-project
-    cd my-project
-  \`\`\`
+\`\`\`bash
+  npm install my-project
+  cd my-project
+\`\`\`
 
 `,
   },
   {
     id: 3,
+    name: "Running Tests",
     title: "Running Tests",
     markdown: `## Running Tests
 
-  To run tests, run the following command
+To run tests, run the following command
 
-  \`\`\`bash
-    npm run test
-  \`\`\`
+\`\`\`bash
+  npm run test
+\`\`\`
 
 `,
   },
   {
     id: 4,
+    name: "Tech Stack",
     title: "Tech Stack",
     markdown: `## 🛠️ Tech Stack
-  - [React](https://reactjs.org/)
-  - [Next.js](https://nextjs.org/)
-  - [TypeScript](https://www.typescriptlang.org/)
-  - [Tailwind CSS](https://tailwindcss.com/)
+- [React](https://reactjs.org/)
+- [Next.js](https://nextjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
 
 `,
   },
   {
     id: 5,
+    name: "Add Table",
     title: "Add Table",
     markdown: `## Add Table
 
-  | Column 1 | Column 2 | Column 3 |
-  | -------- | -------- | -------- |
-  | Row 1    | Row 1    | Row 1    |
-  | Row 2    | Row 2    | Row 2    |
-  | Row 3    | Row 3    | Row 3    |
+| Column 1 | Column 2 | Column 3 |
+| -------- | -------- | -------- |
+| Row 1    | Row 1    | Row 1    |
+| Row 2    | Row 2    | Row 2    |
+| Row 3    | Row 3    | Row 3    |
 
 `,
   },