Merge pull request #273 from mash-up-kr/feature/recruit-editor

모집공고 에디터 추가 작업

package.json

@@ -100,14 +100,10 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@editorjs/checklist": "^1.5.0",
     "@editorjs/editorjs": "^2.26.5",
     "@editorjs/header": "^2.7.0",
     "@editorjs/list": "^1.8.0",
-    "@editorjs/marker": "^1.3.0",
     "@editorjs/paragraph": "^2.9.0",
-    "@editorjs/table": "^2.2.1",
-    "@editorjs/text-variant-tune": "^1.0.1",
     "@editorjs/underline": "^1.1.0",
     "@emotion/css": "^11.7.1",
     "@emotion/react": "^11.7.1",

src/api/index.ts

@@ -7,3 +7,4 @@ export * from './generation';
 export * from './member';
 export * from './scoreHistory';
 export * from './schedule';
+export * from './storage';

src/components/common/Editor/Editor.component.tsx

@@ -1,110 +1,79 @@
 import React, { useState, useEffect, useRef } from 'react';
 import EditorJS, { OutputData } from '@editorjs/editorjs';
-import Header from '@editorjs/header';
-import List from '@editorjs/list';
-import Checklist from '@editorjs/checklist';
-import Table from '@editorjs/table';
-import Marker from '@editorjs/marker';
-import Underline from '@editorjs/underline';
-import TextVariantTune from '@editorjs/text-variant-tune';
 import DragDrop from 'editorjs-drag-drop';
-import Paragraph from '@editorjs/paragraph';
 import { Blocker } from '@/components';
 import i18n from './i18n';
-
-const DEFAULT_INITIAL_DATA = {
-  time: new Date().getTime(),
-  blocks: [],
-};
+import { getDefaultEditorData } from '@/utils';
+import tools from './tools';
 
 interface EditorProps {
   id: string;
+  savedData: OutputData;
 }
 
-const Editor = ({ id }: EditorProps) => {
-  const savedData = localStorage.getItem(id)
-    ? JSON.parse(localStorage.getItem(id) ?? '{}')
-    : DEFAULT_INITIAL_DATA;
-
-  const ejInstance = useRef<EditorJS>();
+const Editor = ({ id, savedData }: EditorProps) => {
+  const editorRef = useRef<EditorJS>();
   const [editorData, setEditorData] = useState<OutputData>(savedData);
+  const [editorReady, setEditorReady] = useState(false);
 
   const initEditor = () => {
     const editor = new EditorJS({
       holder: id,
       data: editorData,
       onReady: () => {
-        ejInstance.current = editor;
+        editorRef.current = editor;
         // eslint-disable-next-line no-new
         new DragDrop(editor);
+        setEditorReady(true);
       },
       onChange: async () => {
-        const content = (await ejInstance.current?.saver.save()) as OutputData;
+        const content = (await editorRef.current?.saver.save()) as OutputData;
         localStorage.setItem(id, JSON.stringify(content));
         setEditorData(content);
       },
       autofocus: true,
-      tools: {
-        header: {
-          // @ts-ignore
-          class: Header,
-          config: {
-            placeholder: `Tab 으로 크기를 변경하세요.`,
-            levels: [1, 2, 3, 4],
-            defaultLevel: 3,
-          },
-        },
-        paragraph: {
-          class: Paragraph,
-          inlineToolbar: true,
-          config: {
-            placeholder: `Tab 으로 새로운 블록을 추가하세요.`,
-          },
-        },
-        list: {
-          class: List,
-          inlineToolbar: true,
-          config: {
-            defaultStyle: 'unordered',
-          },
-        },
-        checklist: {
-          class: Checklist,
-          inlineToolbar: true,
-        },
-        table: {
-          class: Table,
-          inlineToolbar: true,
-          config: {
-            rows: 2,
-            cols: 3,
-          },
-        },
-
-        Marker: {
-          class: Marker,
-          shortcut: 'CMD+SHIFT+M',
-        },
-        underline: Underline,
-        textVariant: TextVariantTune,
-      },
-      tunes: ['textVariant'],
+      // @ts-expect-error: third party plugin
+      tools,
       i18n,
     });
   };
 
   useEffect(() => {
-    if (!ejInstance.current) initEditor();
+    if (!editorRef.current) initEditor();
+
+    return () => {
+      editorRef.current?.destroy();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+    const newEditorData = savedData?.blocks ? savedData : getDefaultEditorData();
+    setEditorData(newEditorData);
+    editorRef.current.render(newEditorData);
+  }, [editorReady, savedData]);
+
+  /** Tab을 입력했을 때 에디터 밖으로 TabIndex가 변경되는 것을 방지 */
+  useEffect(() => {
+    const isEditorFocused = editorRef.current?.blocks?.getCurrentBlockIndex() !== -1;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isEditorFocused && event.key === 'Tab') {
+        event.preventDefault();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      ejInstance.current?.destroy();
+      window.removeEventListener('keydown', handleKeyDown);
     };
   }, []);
 
   return (
     <>
       <div id={id} />;
-      <Blocker isBlocking={editorData.blocks.length !== 0} />
+      <Blocker isBlocking={editorData.blocks?.length !== 0} />
     </>
   );
 };

src/components/common/Editor/i18n.ts

@@ -37,11 +37,34 @@ export default {
       Underline: '밑줄',
     },
 
-    tools: {},
+    tools: {
+      table: {
+        'With headings': '제목 추가',
+        'Without headings': '제목 제거',
+        'Add column to left': '왼쪽에 열 삽입',
+        'Add column to right': '오른쪽에 열 삽입',
+        'Delete column': '열 삭제',
+        'Add row above': '위에 행 삽입',
+        'Add row below': '아래에 행 삽입',
+        'Delete row': '행 삭제',
+        Heading: '제목',
+      },
+      header: {
+        'Heading 1': '제목 1',
+        'Heading 2': '제목 2',
+        'Heading 3': '제목 3',
+        'Heading 4': '제목 4',
+      },
+      list: {
+        Unordered: '글머리 목록',
+        Ordered: '번호 목록',
+      },
+    },
 
     blockTunes: {
       delete: {
         Delete: '삭제',
+        'Click to delete': '확인',
       },
       moveUp: {
         'Move up': '위로 이동',

src/components/common/Editor/tools.ts

@@ -0,0 +1,34 @@
+import Header from '@editorjs/header';
+import List from '@editorjs/list';
+import Underline from '@editorjs/underline';
+import Paragraph from '@editorjs/paragraph';
+
+export default {
+  /**
+   * @type {EditorConfig.tools}
+   */
+  header: {
+    class: Header,
+    config: {
+      placeholder: `Tab 으로 크기를 변경하세요.`,
+      levels: [1, 2, 3, 4],
+      defaultLevel: 3,
+    },
+  },
+  paragraph: {
+    class: Paragraph,
+    inlineToolbar: true,
+    config: {
+      placeholder: `Tab 으로 새로운 블록을 추가하세요.`,
+      preserveBlank: true,
+    },
+  },
+  list: {
+    class: List,
+    inlineToolbar: true,
+    config: {
+      defaultStyle: 'unordered',
+    },
+  },
+  underline: Underline,
+};

src/components/common/LNB/LNB.component.tsx

@@ -13,8 +13,8 @@ import ApplicationFormIcon from '@/assets/svg/application-form.svg';
 import EmailIcon from '@/assets/svg/email.svg';
 import ActivityScoreIcon from '@/assets/svg/activity-score.svg';
 import ScheduleIcon from '@/assets/svg/schedule.svg';
+import RecruitIcon from '@/assets/svg/recruit.svg';
 // import SignupCodeIcon from "@/assets/svg/signup-code.svg"
-// import RecruitIcon from "@/assets/svg/recruit.svg"
 // import AdminMembersIcon from '@/assets/svg/admin-members.svg';
 // import MyPageIcon from "@/assets/svg/my-page.svg"
 
@@ -60,15 +60,16 @@ const navigationItems: NavigationItem[] = [
     ],
   },
   // TODO: 추가 예정 메뉴
-  // {
-  //   title: '콘텐츠 관리',
-  //   menus: [
-  //     {
-  //       label: '모집 공고',
-  //       to: PATH.RECRUIT,
-  //     },
-  //   ],
-  // },
+  {
+    title: '콘텐츠 관리',
+    menus: [
+      {
+        label: '모집 공고',
+        to: PATH.RECRUIT,
+        icon: <RecruitIcon />,
+      },
+    ],
+  },
   // {
   //   title: '계정 관리',
   //   menus: [
@@ -77,10 +78,10 @@ const navigationItems: NavigationItem[] = [
   //       to: PATH.ADMIN_MEMBERS,
   //       icon: <AdminMembersIcon />,
   //     },
-  // {
-  //   label: '내 정보',
-  //   to: PATH.MY_PAGE,
-  // },
+  //     {
+  //       label: '내 정보',
+  //       to: PATH.MY_PAGE,
+  //     },
   //   ],
   // },
 ];