[Feat/admin/#75] 에디터 패키지

apps/admin/package.json

@@ -18,6 +18,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^4.1.0",
     "@repo/pointer-design-system": "workspace:*",
+    "@repo/pointer-editor": "workspace:*",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@tanstack/react-router": "^1.98.4",
@@ -28,8 +29,8 @@
     "lodash": "^4.17.21",
     "openapi-fetch": "^0.13.4",
     "openapi-react-query": "^0.3.0",
-    "react": "^19",
-    "react-dom": "^19",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.5",
     "react-hook-form": "^7.54.2",
     "react-spinners": "^0.15.0",

apps/admin/src/hooks/index.ts

@@ -2,5 +2,6 @@ import useModal from './useModal';
 import useNavigation from './useNavigation';
 import useProblemEssentialInput from './useProblemEssentialInput';
 import useInvalidate from './useInvalidate';
+import useEditor from './useEditor';
 
-export { useModal, useNavigation, useProblemEssentialInput, useInvalidate };
+export { useModal, useNavigation, useProblemEssentialInput, useInvalidate, useEditor };

apps/admin/src/hooks/useEditor.ts

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+export type ProblemBlockType = 'TEXT' | 'IMAGE';
+
+export interface ProblemBlock {
+  id: number;
+  type: ProblemBlockType;
+  data: string;
+  style: string;
+  rank: number;
+}
+
+const useEditor = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [savedBlocks, setSavedBlocks] = useState<ProblemBlock[]>([]);
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleSave = (blocks: ProblemBlock[]) => {
+    setSavedBlocks(blocks);
+  };
+
+  return { isModalOpen, savedBlocks, handleOpenModal, handleCloseModal, handleSave };
+};
+
+export default useEditor;

apps/admin/src/types/pointer-editor.d.ts

@@ -0,0 +1,5 @@
+declare module '@repo/pointer-editor' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Component: any;
+  export default Component;
+}

apps/admin/tsconfig.app.json

@@ -43,5 +43,5 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src"]
+  "include": ["src", "./src/types/pointer-editor.d.ts"]
 }

apps/service/package.json

@@ -18,8 +18,8 @@
     "next": "15.1.4",
     "openapi-fetch": "^0.13.4",
     "openapi-react-query": "^0.3.0",
-    "react": "^19",
-    "react-dom": "^19",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-toastify": "^11.0.3",
     "swiper": "^11.2.5"

packages/pointer-editor/libs/api/fileUpload.js

@@ -0,0 +1,38 @@
+import axios from 'axios';
+
+const baseUrl = 'https://api.math-pointer.com';
+
+const axiosInstance = axios.create({
+  baseURL: baseUrl,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+const getFileUploadUrl = async ({ fileName }) => {
+  const response = await axiosInstance.post('/api/common/upload-file', { fileName });
+  return response.data;
+  // example response
+  /*
+    {
+        "file": {
+            "id": 0,
+            "fileName": "string",
+            "url": "string"
+        },
+        "contentDisposition": "string",
+        "uploadUrl": "string"
+    }
+    */
+};
+
+const uploadFileToS3 = async ({ uploadUrl, contentDisposition, file }) => {
+  const response = await axiosInstance.put(uploadUrl, file, {
+    headers: {
+      'Content-Disposition': contentDisposition,
+    },
+  });
+  return response.data;
+};
+
+export { getFileUploadUrl, uploadFileToS3 };

packages/pointer-editor/libs/assets/BoldIcon.jsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+const SvgBold = ({ title, titleId, ...props }) => (
+  <svg fill='none' xmlns='http://www.w3.org/2000/svg' aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d='M1 7.00033V12.3337H6.4C7.83594 12.3337 9 11.1398 9 9.66699C9 8.19423 7.83594 7.00033 6.4 7.00033H1ZM1 7.00033H5.6C7.03594 7.00033 8.2 5.80642 8.2 4.33366C8.2 2.8609 7.03594 1.66699 5.6 1.66699H1V7.00033Z'
+      stroke='#1E1E21'
+      strokeWidth={2}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+const Memo = memo(SvgBold);
+export default Memo;

packages/pointer-editor/libs/assets/BoxIcon.jsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+const SvgBox = ({ title, titleId, ...props }) => (
+  <svg fill='none' xmlns='http://www.w3.org/2000/svg' aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d='M10 4L4 4M10 6.25L4 6.25M1 3.25L1 10.75C1 11.9926 2.00736 13 3.25 13H10.75C11.9926 13 13 11.9926 13 10.75V3.25C13 2.00736 11.9926 1 10.75 1L3.25 1C2.00736 1 1 2.00736 1 3.25Z'
+      stroke='#1E1E21'
+      strokeWidth={1.33333}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+const Memo = memo(SvgBox);
+export default Memo;

packages/pointer-editor/libs/assets/ColorIcon.jsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+const SvgColor = ({ title, titleId, ...props }) => (
+  <svg fill='none' xmlns='http://www.w3.org/2000/svg' aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d='M8.00075 4.00059V4.02274M4.02274 8.00075H4.00059M10.8292 5.17228L10.8136 5.18795M5.18804 10.8135L5.17237 10.8291M5.18804 5.1877L5.17237 5.17203M8.00059 14.4006C4.46596 14.4006 1.60059 11.5352 1.60059 8.00059C1.60059 4.46596 4.46596 1.60059 8.00059 1.60059C11.5352 1.60059 14.4006 4.46596 14.4006 8.00059C14.4006 9.07663 13.4063 9.79258 12.3303 9.79258H11.9126C11.6969 9.79258 11.4841 9.8428 11.2912 9.93926C10.6049 10.2824 10.3268 11.1169 10.6699 11.8032C10.7664 11.9961 10.8166 12.2089 10.8166 12.4246V12.5507C10.8166 13.2844 10.4048 13.9792 9.69725 14.1733C9.15689 14.3215 8.58798 14.4006 8.00059 14.4006Z'
+      stroke='#1E1E21'
+      strokeWidth={1.33333}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+const Memo = memo(SvgColor);
+export default Memo;

packages/pointer-editor/libs/assets/ItalicIcon.jsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+const SvgItalic = ({ title, titleId, ...props }) => (
+  <svg fill='none' xmlns='http://www.w3.org/2000/svg' aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d='M4.03475 10.6663L6.63127 1.33301M4.03475 10.6663H1.33301M4.03475 10.6663H6.73649M6.63127 1.33301H3.92953M6.63127 1.33301H9.33301'
+      stroke='#1E1E21'
+      strokeWidth={1.33333}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+const Memo = memo(SvgItalic);
+export default Memo;

packages/pointer-editor/libs/assets/UnderlineIcon.jsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+const SvgUnderline = ({ title, titleId, ...props }) => (
+  <svg fill='none' xmlns='http://www.w3.org/2000/svg' aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d='M13.3337 13.3337H2.66699M11.8098 3.4289V7.23842C11.8098 9.34236 10.1043 11.0479 8.00033 11.0479C5.89638 11.0479 4.1908 9.34236 4.1908 7.23842V3.4289M3.04794 2.66699H5.33366M10.667 2.66699L12.9527 2.66699'
+      stroke='#1E1E21'
+      strokeWidth={1.33333}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+const Memo = memo(SvgUnderline);
+export default Memo;

packages/pointer-editor/libs/assets/index.js

@@ -0,0 +1,5 @@
+export { default as BoldIcon } from './BoldIcon';
+export { default as BoxIcon } from './BoxIcon';
+export { default as ColorIcon } from './ColorIcon';
+export { default as ItalicIcon } from './ItalicIcon';
+export { default as UnderlineIcon } from './UnderlineIcon';