Merge pull request #73 from DoTheZ-Team/GLUE-378-이미지-첨부-API-연결

GLUE 378 이미지 첨부 api 연결

src/api/api.ts

@@ -1,16 +1,18 @@
 import http from './core';
 
+interface PostImageResponse {
+  imageUrl: string;
+}
+
 export const postImage = (file: File) => {
   const formData = new FormData();
   formData.append('multipartFile', file);
 
-  return http.post<{ imageUrl: string }>({
+  return http.post<PostImageResponse>({
     url: '/blogs/images',
     data: formData,
     headers: {
       'Content-Type': 'multipart/form-data',
     },
   });
 };
-
-export default postImage;

src/api/index.ts

@@ -1,3 +1,3 @@
 export { default as http } from './core';
-export { default as postImage } from './api';
+export * from './api';
 export * from './types';

src/components/Common/Editor/hooks/index.tsx

@@ -5,7 +5,9 @@ import '@blocknote/core/fonts/inter.css';
 import '@blocknote/react/style.css';
 import { Block, BlockNoteEditor, PartialBlock } from '@blocknote/core';
 import { safeSeesionStorage } from '@/utils';
+import { postImage } from '@/api';
 import { EDITOR_KEY, LOADING } from '../constants';
+import { useToastContext } from '../../Toast/ToastProvider';
 
 interface EditorOptions {
   initialData?: PartialBlock[];
@@ -15,28 +17,18 @@ export default function useEditor(options?: EditorOptions) {
   const [initialContent, setInitialContent] = useState<
     PartialBlock[] | undefined | typeof LOADING
   >(options?.initialData);
+  const { handleError } = useToastContext();
 
   const safeSessionStorage = useMemo(() => safeSeesionStorage, []);
 
   const uploadFile = useCallback(async (file: File) => {
-    const body = new FormData();
-
     if (!file.type.startsWith('image')) {
-      // FIXME: refactor modal alert
-      // eslint-disable-next-line no-alert
-      alert('이미지만 업로드할 수 있습니다.');
-      return null;
+      handleError('이미지만 업로드할 수 있습니다.');
+      return '';
     }
 
-    body.append('file', file);
-
-    // FIXME: refactor 데이터 페치
-    const ret = await fetch('https://tmpfiles.org/api/v1/upload', {
-      method: 'POST',
-      body,
-    });
-    const result = (await ret.json()).data.url;
-    return result;
+    return (await postImage(file)).result.imageUrl;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const editor = useMemo(() => {

src/components/Common/FileEdit/index.tsx

@@ -30,7 +30,7 @@ export default function FileEdit({
         onChange={handleFileSelect}
       />
       <Button
-        onClick={() => inputRef.current?.click()}
+        onClick={inputRef.current?.click}
         className="w-70 m-5 p-4 bg-primary/30 text-primary"
       >
         edit