diff --git a/.pnp.cjs b/.pnp.cjs index 1bb2e4a2..efcc20fd 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -34,6 +34,11 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "packageLocation": "./",\ "packageDependencies": [\ ["@babel/core", "npm:7.16.12"],\ + ["@editorjs/editorjs", "npm:2.26.5"],\ + ["@editorjs/header", "npm:2.7.0"],\ + ["@editorjs/list", "npm:1.8.0"],\ + ["@editorjs/paragraph", "npm:2.9.0"],\ + ["@editorjs/underline", "npm:1.1.0"],\ ["@emotion/css", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:11.7.1"],\ ["@emotion/react", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:11.7.1"],\ ["@emotion/styled", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:11.6.0"],\ @@ -50,6 +55,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["@testing-library/react", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:12.1.2"],\ ["@testing-library/react-hooks", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:7.0.2"],\ ["@testing-library/user-event", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:13.5.0"],\ + ["@types/editorjs__header", "npm:2.6.0"],\ ["@types/jest", "npm:27.4.0"],\ ["@types/lodash-es", "npm:4.17.6"],\ ["@types/node", "npm:17.0.13"],\ @@ -66,6 +72,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["copy-webpack-plugin", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:10.2.4"],\ ["dayjs", "npm:1.10.7"],\ ["dotenv-webpack", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:7.1.0"],\ + ["editorjs-drag-drop", "npm:1.1.13"],\ ["emotion-ts-plugin", "npm:1.1.0"],\ ["eslint", "npm:8.8.0"],\ ["eslint-config-airbnb", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:19.0.4"],\ @@ -3037,6 +3044,36 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["@codexteam/icons", [\ + ["npm:0.0.4", {\ + "packageLocation": "./.yarn/cache/@codexteam-icons-npm-0.0.4-7e26576f5a-ead8fc8ad3.zip/node_modules/@codexteam/icons/",\ + "packageDependencies": [\ + ["@codexteam/icons", "npm:0.0.4"]\ + ],\ + "linkType": "HARD"\ + }],\ + ["npm:0.0.5", {\ + "packageLocation": "./.yarn/cache/@codexteam-icons-npm-0.0.5-6e551884d3-7a27857f76.zip/node_modules/@codexteam/icons/",\ + "packageDependencies": [\ + ["@codexteam/icons", "npm:0.0.5"]\ + ],\ + "linkType": "HARD"\ + }],\ + ["npm:0.0.6", {\ + "packageLocation": "./.yarn/cache/@codexteam-icons-npm-0.0.6-d7aa834264-b2d4aa71d2.zip/node_modules/@codexteam/icons/",\ + "packageDependencies": [\ + ["@codexteam/icons", "npm:0.0.6"]\ + ],\ + "linkType": "HARD"\ + }],\ + ["npm:0.1.0", {\ + "packageLocation": "./.yarn/cache/@codexteam-icons-npm-0.1.0-0b2e6467a8-df50a6606a.zip/node_modules/@codexteam/icons/",\ + "packageDependencies": [\ + ["@codexteam/icons", "npm:0.1.0"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@discoveryjs/json-ext", [\ ["npm:0.5.6", {\ "packageLocation": "./.yarn/cache/@discoveryjs-json-ext-npm-0.5.6-95d4b518e8-e97df61851.zip/node_modules/@discoveryjs/json-ext/",\ @@ -3046,6 +3083,60 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["@editorjs/editorjs", [\ + ["npm:2.26.5", {\ + "packageLocation": "./.yarn/cache/@editorjs-editorjs-npm-2.26.5-3affcf4351-899741482b.zip/node_modules/@editorjs/editorjs/",\ + "packageDependencies": [\ + ["@editorjs/editorjs", "npm:2.26.5"],\ + ["@codexteam/icons", "npm:0.1.0"],\ + ["codex-notifier", "npm:1.1.2"],\ + ["codex-tooltip", "npm:1.0.5"],\ + ["html-janitor", "npm:2.0.4"],\ + ["nanoid", "npm:3.3.6"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ + ["@editorjs/header", [\ + ["npm:2.7.0", {\ + "packageLocation": "./.yarn/cache/@editorjs-header-npm-2.7.0-573fbb5bc8-9b26ed4435.zip/node_modules/@editorjs/header/",\ + "packageDependencies": [\ + ["@editorjs/header", "npm:2.7.0"],\ + ["@codexteam/icons", "npm:0.0.5"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ + ["@editorjs/list", [\ + ["npm:1.8.0", {\ + "packageLocation": "./.yarn/cache/@editorjs-list-npm-1.8.0-80277d5e8c-fb62db17e9.zip/node_modules/@editorjs/list/",\ + "packageDependencies": [\ + ["@editorjs/list", "npm:1.8.0"],\ + ["@codexteam/icons", "npm:0.0.4"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ + ["@editorjs/paragraph", [\ + ["npm:2.9.0", {\ + "packageLocation": "./.yarn/cache/@editorjs-paragraph-npm-2.9.0-1df54d17fb-f91acaee6d.zip/node_modules/@editorjs/paragraph/",\ + "packageDependencies": [\ + ["@editorjs/paragraph", "npm:2.9.0"],\ + ["@codexteam/icons", "npm:0.0.4"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ + ["@editorjs/underline", [\ + ["npm:1.1.0", {\ + "packageLocation": "./.yarn/cache/@editorjs-underline-npm-1.1.0-5184f0c31d-5611b76bea.zip/node_modules/@editorjs/underline/",\ + "packageDependencies": [\ + ["@editorjs/underline", "npm:1.1.0"],\ + ["@codexteam/icons", "npm:0.0.6"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@emotion/babel-plugin", [\ ["npm:11.7.2", {\ "packageLocation": "./.yarn/cache/@emotion-babel-plugin-npm-11.7.2-f8c1ee2381-eb96073566.zip/node_modules/@emotion/babel-plugin/",\ @@ -6562,6 +6653,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["@types/editorjs__header", [\ + ["npm:2.6.0", {\ + "packageLocation": "./.yarn/cache/@types-editorjs__header-npm-2.6.0-041ea9dc55-4f0b76c9bb.zip/node_modules/@types/editorjs__header/",\ + "packageDependencies": [\ + ["@types/editorjs__header", "npm:2.6.0"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@types/eslint", [\ ["npm:8.4.1", {\ "packageLocation": "./.yarn/cache/@types-eslint-npm-8.4.1-014f0ae240-b5790997ee.zip/node_modules/@types/eslint/",\ @@ -10237,6 +10337,24 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["codex-notifier", [\ + ["npm:1.1.2", {\ + "packageLocation": "./.yarn/cache/codex-notifier-npm-1.1.2-893faf9b49-2130f5b1ff.zip/node_modules/codex-notifier/",\ + "packageDependencies": [\ + ["codex-notifier", "npm:1.1.2"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ + ["codex-tooltip", [\ + ["npm:1.0.5", {\ + "packageLocation": "./.yarn/cache/codex-tooltip-npm-1.0.5-b69f9284fd-8ea91ce698.zip/node_modules/codex-tooltip/",\ + "packageDependencies": [\ + ["codex-tooltip", "npm:1.0.5"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["collapse-white-space", [\ ["npm:1.0.6", {\ "packageLocation": "./.yarn/cache/collapse-white-space-npm-1.0.6-6fdbf5906f-9673fb7979.zip/node_modules/collapse-white-space/",\ @@ -11739,6 +11857,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["editorjs-drag-drop", [\ + ["npm:1.1.13", {\ + "packageLocation": "./.yarn/cache/editorjs-drag-drop-npm-1.1.13-9e798741ed-fa4dfa23c8.zip/node_modules/editorjs-drag-drop/",\ + "packageDependencies": [\ + ["editorjs-drag-drop", "npm:1.1.13"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["ee-first", [\ ["npm:1.1.1", {\ "packageLocation": "./.yarn/cache/ee-first-npm-1.1.1-33f8535b39-1b4cac778d.zip/node_modules/ee-first/",\ @@ -14510,6 +14637,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["html-janitor", [\ + ["npm:2.0.4", {\ + "packageLocation": "./.yarn/cache/html-janitor-npm-2.0.4-c37abe5f0d-e571c8d753.zip/node_modules/html-janitor/",\ + "packageDependencies": [\ + ["html-janitor", "npm:2.0.4"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["html-minifier-terser", [\ ["npm:5.1.1", {\ "packageLocation": "./.yarn/cache/html-minifier-terser-npm-5.1.1-641a136031-75ff3ff886.zip/node_modules/html-minifier-terser/",\ @@ -17333,6 +17469,11 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "packageDependencies": [\ ["mashup-admin-fe", "workspace:."],\ ["@babel/core", "npm:7.16.12"],\ + ["@editorjs/editorjs", "npm:2.26.5"],\ + ["@editorjs/header", "npm:2.7.0"],\ + ["@editorjs/list", "npm:1.8.0"],\ + ["@editorjs/paragraph", "npm:2.9.0"],\ + ["@editorjs/underline", "npm:1.1.0"],\ ["@emotion/css", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:11.7.1"],\ ["@emotion/react", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:11.7.1"],\ ["@emotion/styled", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:11.6.0"],\ @@ -17349,6 +17490,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["@testing-library/react", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:12.1.2"],\ ["@testing-library/react-hooks", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:7.0.2"],\ ["@testing-library/user-event", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:13.5.0"],\ + ["@types/editorjs__header", "npm:2.6.0"],\ ["@types/jest", "npm:27.4.0"],\ ["@types/lodash-es", "npm:4.17.6"],\ ["@types/node", "npm:17.0.13"],\ @@ -17365,6 +17507,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["copy-webpack-plugin", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:10.2.4"],\ ["dayjs", "npm:1.10.7"],\ ["dotenv-webpack", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:7.1.0"],\ + ["editorjs-drag-drop", "npm:1.1.13"],\ ["emotion-ts-plugin", "npm:1.1.0"],\ ["eslint", "npm:8.8.0"],\ ["eslint-config-airbnb", "virtual:749e5bbf5a36f23b3cf0fe3d04bee14b6518c1a723e8b01df428ddb8189c2ccc0edc216f830d01f6c6953a0ff06606bd469c60fb4212fe27940b27d64078f32d#npm:19.0.4"],\ @@ -18015,6 +18158,13 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["nanoid", "npm:3.2.0"]\ ],\ "linkType": "HARD"\ + }],\ + ["npm:3.3.6", {\ + "packageLocation": "./.yarn/cache/nanoid-npm-3.3.6-e6d6ae7e71-7d0eda6570.zip/node_modules/nanoid/",\ + "packageDependencies": [\ + ["nanoid", "npm:3.3.6"]\ + ],\ + "linkType": "HARD"\ }]\ ]],\ ["nanomatch", [\ diff --git a/.yarn/cache/@codexteam-icons-npm-0.0.4-7e26576f5a-ead8fc8ad3.zip b/.yarn/cache/@codexteam-icons-npm-0.0.4-7e26576f5a-ead8fc8ad3.zip new file mode 100644 index 00000000..c4fa2cfa Binary files /dev/null and b/.yarn/cache/@codexteam-icons-npm-0.0.4-7e26576f5a-ead8fc8ad3.zip differ diff --git a/.yarn/cache/@codexteam-icons-npm-0.0.5-6e551884d3-7a27857f76.zip b/.yarn/cache/@codexteam-icons-npm-0.0.5-6e551884d3-7a27857f76.zip new file mode 100644 index 00000000..7efe6a03 Binary files /dev/null and b/.yarn/cache/@codexteam-icons-npm-0.0.5-6e551884d3-7a27857f76.zip differ diff --git a/.yarn/cache/@codexteam-icons-npm-0.0.6-d7aa834264-b2d4aa71d2.zip b/.yarn/cache/@codexteam-icons-npm-0.0.6-d7aa834264-b2d4aa71d2.zip new file mode 100644 index 00000000..8cf943c1 Binary files /dev/null and b/.yarn/cache/@codexteam-icons-npm-0.0.6-d7aa834264-b2d4aa71d2.zip differ diff --git a/.yarn/cache/@codexteam-icons-npm-0.1.0-0b2e6467a8-df50a6606a.zip b/.yarn/cache/@codexteam-icons-npm-0.1.0-0b2e6467a8-df50a6606a.zip new file mode 100644 index 00000000..786891a1 Binary files /dev/null and b/.yarn/cache/@codexteam-icons-npm-0.1.0-0b2e6467a8-df50a6606a.zip differ diff --git a/.yarn/cache/@editorjs-editorjs-npm-2.26.5-3affcf4351-899741482b.zip b/.yarn/cache/@editorjs-editorjs-npm-2.26.5-3affcf4351-899741482b.zip new file mode 100644 index 00000000..56891cbe Binary files /dev/null and b/.yarn/cache/@editorjs-editorjs-npm-2.26.5-3affcf4351-899741482b.zip differ diff --git a/.yarn/cache/@editorjs-header-npm-2.7.0-573fbb5bc8-9b26ed4435.zip b/.yarn/cache/@editorjs-header-npm-2.7.0-573fbb5bc8-9b26ed4435.zip new file mode 100644 index 00000000..c2ccf955 Binary files /dev/null and b/.yarn/cache/@editorjs-header-npm-2.7.0-573fbb5bc8-9b26ed4435.zip differ diff --git a/.yarn/cache/@editorjs-list-npm-1.8.0-80277d5e8c-fb62db17e9.zip b/.yarn/cache/@editorjs-list-npm-1.8.0-80277d5e8c-fb62db17e9.zip new file mode 100644 index 00000000..6cba60f9 Binary files /dev/null and b/.yarn/cache/@editorjs-list-npm-1.8.0-80277d5e8c-fb62db17e9.zip differ diff --git a/.yarn/cache/@editorjs-paragraph-npm-2.9.0-1df54d17fb-f91acaee6d.zip b/.yarn/cache/@editorjs-paragraph-npm-2.9.0-1df54d17fb-f91acaee6d.zip new file mode 100644 index 00000000..0c8c29cb Binary files /dev/null and b/.yarn/cache/@editorjs-paragraph-npm-2.9.0-1df54d17fb-f91acaee6d.zip differ diff --git a/.yarn/cache/@editorjs-underline-npm-1.1.0-5184f0c31d-5611b76bea.zip b/.yarn/cache/@editorjs-underline-npm-1.1.0-5184f0c31d-5611b76bea.zip new file mode 100644 index 00000000..e4716867 Binary files /dev/null and b/.yarn/cache/@editorjs-underline-npm-1.1.0-5184f0c31d-5611b76bea.zip differ diff --git a/.yarn/cache/@types-editorjs__header-npm-2.6.0-041ea9dc55-4f0b76c9bb.zip b/.yarn/cache/@types-editorjs__header-npm-2.6.0-041ea9dc55-4f0b76c9bb.zip new file mode 100644 index 00000000..81049d8b Binary files /dev/null and b/.yarn/cache/@types-editorjs__header-npm-2.6.0-041ea9dc55-4f0b76c9bb.zip differ diff --git a/.yarn/cache/codex-notifier-npm-1.1.2-893faf9b49-2130f5b1ff.zip b/.yarn/cache/codex-notifier-npm-1.1.2-893faf9b49-2130f5b1ff.zip new file mode 100644 index 00000000..aec61c56 Binary files /dev/null and b/.yarn/cache/codex-notifier-npm-1.1.2-893faf9b49-2130f5b1ff.zip differ diff --git a/.yarn/cache/codex-tooltip-npm-1.0.5-b69f9284fd-8ea91ce698.zip b/.yarn/cache/codex-tooltip-npm-1.0.5-b69f9284fd-8ea91ce698.zip new file mode 100644 index 00000000..fd28fe00 Binary files /dev/null and b/.yarn/cache/codex-tooltip-npm-1.0.5-b69f9284fd-8ea91ce698.zip differ diff --git a/.yarn/cache/editorjs-drag-drop-npm-1.1.13-9e798741ed-fa4dfa23c8.zip b/.yarn/cache/editorjs-drag-drop-npm-1.1.13-9e798741ed-fa4dfa23c8.zip new file mode 100644 index 00000000..bb5d2a68 Binary files /dev/null and b/.yarn/cache/editorjs-drag-drop-npm-1.1.13-9e798741ed-fa4dfa23c8.zip differ diff --git a/.yarn/cache/html-janitor-npm-2.0.4-c37abe5f0d-e571c8d753.zip b/.yarn/cache/html-janitor-npm-2.0.4-c37abe5f0d-e571c8d753.zip new file mode 100644 index 00000000..517e190b Binary files /dev/null and b/.yarn/cache/html-janitor-npm-2.0.4-c37abe5f0d-e571c8d753.zip differ diff --git a/.yarn/cache/nanoid-npm-3.3.6-e6d6ae7e71-7d0eda6570.zip b/.yarn/cache/nanoid-npm-3.3.6-e6d6ae7e71-7d0eda6570.zip new file mode 100644 index 00000000..8526acad Binary files /dev/null and b/.yarn/cache/nanoid-npm-3.3.6-e6d6ae7e71-7d0eda6570.zip differ diff --git a/@types/custom-types/editorjs.d.ts b/@types/custom-types/editorjs.d.ts new file mode 100644 index 00000000..3deec71d --- /dev/null +++ b/@types/custom-types/editorjs.d.ts @@ -0,0 +1,9 @@ +declare module '@editorjs/list'; +declare module '@editorjs/checklist'; +declare module '@editorjs/table'; +declare module '@editorjs/marker'; +declare module '@editorjs/underline'; +declare module '@editorjs/underline'; +declare module '@editorjs/text-variant-tune'; +declare module 'editorjs-drag-drop'; +declare module '@editorjs/paragraph'; diff --git a/package.json b/package.json index bee8b71f..53b35a70 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@testing-library/react": "^12.1.2", "@testing-library/react-hooks": "^7.0.2", "@testing-library/user-event": "^13.5.0", + "@types/editorjs__header": "^2.6.0", "@types/jest": "^27.4.0", "@types/lodash-es": "^4.17.6", "@types/node": "^17.0.10", @@ -99,11 +100,17 @@ "webpack-merge": "^5.8.0" }, "dependencies": { + "@editorjs/editorjs": "^2.26.5", + "@editorjs/header": "^2.7.0", + "@editorjs/list": "^1.8.0", + "@editorjs/paragraph": "^2.9.0", + "@editorjs/underline": "^1.1.0", "@emotion/css": "^11.7.1", "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "axios": "^0.26.0", "dayjs": "^1.10.7", + "editorjs-drag-drop": "^1.1.13", "history": "^5.3.0", "lodash-es": "^4.17.21", "react": "^17.0.2", diff --git a/src/App.tsx b/src/App.tsx index 3ec5a3b8..8b55a17b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,6 +26,7 @@ import { CreateSchedule, ScheduleDetail, UpdateSchedule, + UpdatePlatformRecruit, } from './pages'; interface RequiredAuthProps extends Partial { @@ -198,6 +199,15 @@ const App = () => { } /> + + + + } + /> + } /> > => { + return http.get({ url: `/storage/key/${key}` }); +}; + +export const postStorage = async (data: StorageRequest): Promise> => { + return http.post({ + url: '/storage', + data, + }); +}; diff --git a/src/assets/svg/activity-score.svg b/src/assets/svg/activity-score.svg new file mode 100644 index 00000000..ded7d1de --- /dev/null +++ b/src/assets/svg/activity-score.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/admin-members.svg b/src/assets/svg/admin-members.svg new file mode 100644 index 00000000..53d41e6a --- /dev/null +++ b/src/assets/svg/admin-members.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/application-form.svg b/src/assets/svg/application-form.svg new file mode 100644 index 00000000..ea1f9fb0 --- /dev/null +++ b/src/assets/svg/application-form.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svg/application.svg b/src/assets/svg/application.svg new file mode 100644 index 00000000..5d91a1e2 --- /dev/null +++ b/src/assets/svg/application.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/email.svg b/src/assets/svg/email.svg new file mode 100644 index 00000000..6a1cd3df --- /dev/null +++ b/src/assets/svg/email.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/logo-admin-133.svg b/src/assets/svg/logo-admin-133.svg new file mode 100644 index 00000000..337d6862 --- /dev/null +++ b/src/assets/svg/logo-admin-133.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/logout-24.svg b/src/assets/svg/logout-24.svg new file mode 100644 index 00000000..ac93e32e --- /dev/null +++ b/src/assets/svg/logout-24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/logout.svg b/src/assets/svg/logout.svg new file mode 100644 index 00000000..97e68fe1 --- /dev/null +++ b/src/assets/svg/logout.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/my-page.svg b/src/assets/svg/my-page.svg new file mode 100644 index 00000000..1b7eda8a --- /dev/null +++ b/src/assets/svg/my-page.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svg/recruit.svg b/src/assets/svg/recruit.svg new file mode 100644 index 00000000..316170bf --- /dev/null +++ b/src/assets/svg/recruit.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/svg/schedule.svg b/src/assets/svg/schedule.svg new file mode 100644 index 00000000..3181bc44 --- /dev/null +++ b/src/assets/svg/schedule.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/signup-code.svg b/src/assets/svg/signup-code.svg new file mode 100644 index 00000000..c15cf24a --- /dev/null +++ b/src/assets/svg/signup-code.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/common/Editor/Editor.component.tsx b/src/components/common/Editor/Editor.component.tsx new file mode 100644 index 00000000..44abe8de --- /dev/null +++ b/src/components/common/Editor/Editor.component.tsx @@ -0,0 +1,81 @@ +import React, { useState, useEffect, useRef } from 'react'; +import EditorJS, { OutputData } from '@editorjs/editorjs'; +import DragDrop from 'editorjs-drag-drop'; +import { Blocker } from '@/components'; +import i18n from './i18n'; +import { getDefaultEditorData } from '@/utils'; +import tools from './tools'; + +interface EditorProps { + id: string; + savedData: OutputData; +} + +const Editor = ({ id, savedData }: EditorProps) => { + const editorRef = useRef(); + const [editorData, setEditorData] = useState(savedData); + const [editorReady, setEditorReady] = useState(false); + + const initEditor = () => { + const editor = new EditorJS({ + holder: id, + data: editorData, + onReady: () => { + editorRef.current = editor; + // eslint-disable-next-line no-new + new DragDrop(editor); + setEditorReady(true); + }, + onChange: async () => { + const content = (await editorRef.current?.saver.save()) as OutputData; + localStorage.setItem(id, JSON.stringify(content)); + setEditorData(content); + }, + autofocus: true, + // @ts-expect-error: third party plugin + tools, + i18n, + }); + }; + + useEffect(() => { + 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 () => { + window.removeEventListener('keydown', handleKeyDown); + }; + }, []); + + return ( + <> +
; + + + ); +}; + +export default Editor; diff --git a/src/components/common/Editor/i18n.ts b/src/components/common/Editor/i18n.ts new file mode 100644 index 00000000..5d83c70e --- /dev/null +++ b/src/components/common/Editor/i18n.ts @@ -0,0 +1,77 @@ +export default { + /** + * @type {I18nDictionary} + */ + messages: { + ui: { + blockTunes: { + toggler: { + 'Click to tune': '클릭해서 메뉴 열기 또는 드래그 해서 옮기기', + 'or drag to move': '드래그해서 옮기기', + }, + }, + inlineToolbar: { + converter: { + 'Convert to': '블록 변환', + }, + }, + toolbar: { + toolbox: { + Add: '블록 추가하기', + }, + }, + }, + + toolNames: { + Text: '텍스트', + Heading: '제목', + List: '리스트', + Warning: '콜아웃', + Checklist: '체크리스트', + Quote: '인용', + Table: '표', + Link: '링크', + Marker: '마커', + Bold: '굵게', + Italic: '기울임', + Underline: '밑줄', + }, + + 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': '위로 이동', + }, + moveDown: { + 'Move down': '아래로 이동', + }, + }, + }, +}; diff --git a/src/components/common/Editor/tools.ts b/src/components/common/Editor/tools.ts new file mode 100644 index 00000000..645a4942 --- /dev/null +++ b/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, +}; diff --git a/src/components/common/EditorAside/EditorAside.component.tsx b/src/components/common/EditorAside/EditorAside.component.tsx new file mode 100644 index 00000000..5c5a2a8b --- /dev/null +++ b/src/components/common/EditorAside/EditorAside.component.tsx @@ -0,0 +1,45 @@ +import React, { ReactNode } from 'react'; +import { Button } from '@/components'; +import * as Styled from './EditorAside.styled'; +import { ButtonShape, ButtonSize } from '@/components/common/Button/Button.component'; +import { formatDate } from '@/utils'; + +interface ActionButton { + text: string; + type?: 'submit' | 'reset' | 'button'; + disabled?: boolean; + onClick?: () => void; + isLoading?: boolean; +} + +export interface EditorAsideProps { + platform: ReactNode; + rightActionButton?: ActionButton; +} + +const EditorAside = ({ platform, rightActionButton }: EditorAsideProps) => { + return ( + + 수정 정보 확인 + + 플랫폼 + {platform} + + + 작성일시 + {formatDate(new Date(), 'YYYY년 M월 D일 A h시 m분')} + + + +