feat : TUI Editor 이미지 업로드 사이즈 제한

- #454
KEEPER31337 · May 18, 2024 · 66e328f · 66e328f
1 parent 4faf78a
commit 66e328f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/components/Editor/StandardEditor.tsx b/src/components/Editor/StandardEditor.tsx
@@ -4,7 +4,7 @@ import { useMediaQuery, useTheme } from '@mui/material';
 import { HookMap } from '@toast-ui/editor';
 import { Editor, EditorProps } from '@toast-ui/react-editor';
 import { useUploadPostImageMutation } from '@api/postApi';
-import { FILE } from '@constants/apiResponseMessage';
+import { FILE, MAX_FILE_SIZE } from '@constants/apiResponseMessage';
 import { getServerImgUrl } from '@utils/converter';
 
 import '@toast-ui/editor/dist/toastui-editor.css';
@@ -21,7 +21,14 @@ const StandardEditor = ({ forwardedRef, ...props }: StandardEditorProps) => {
   const { mutate: uploadPostImageMutation } = useUploadPostImageMutation();
 
   const handleImageUpload: HookMap['addImageBlobHook'] = (blob) => {
-    // TODO: 이미지 크기가 30MB 넘어가면 에러 처리
+    if (blob.size > MAX_FILE_SIZE) {
+      toast.error(FILE.error.exceedFileSize, {
+        style: {
+          maxWidth: 1500,
+        },
+      });
+      return;
+    }
 
     const editor = forwardedRef?.current.getInstance();
     if (!editor) return;

diff --git a/src/constants/apiResponseMessage.ts b/src/constants/apiResponseMessage.ts
@@ -1,3 +1,5 @@
+import { formatFileSize } from '@utils/converter';
+
 export const COMMON = {} as const;
 
 export const PASSWORD = {
@@ -56,9 +58,11 @@ export const STUDENT_ID = {
   },
 } as const;
 
+export const MAX_FILE_SIZE = 30000000; // Byte
 export const FILE = {
   success: {},
   error: {
     uploadFail: '업로드가 실패하였습니다.',
+    exceedFileSize: `파일이 제한된 크기(${formatFileSize(MAX_FILE_SIZE)})를 초과하였습니다.`,
   },
 } as const;