Merge pull request #74 from ShipFriend0516/feature/clipboard-image-paste

ShipFriend0516 · web-flow · commit c6942240bd7c · 2026-02-06T23:09:18.000+09:00
feat: 글 에디터에서 이미지 붙여넣기시 즉시 업로드하는 기능 추가
diff --git a/app/entities/post/write/BlogForm.tsx b/app/entities/post/write/BlogForm.tsx
@@ -16,6 +16,7 @@ import useOverlay from '@/app/hooks/common/useOverlay';
 import useAutoSync from '@/app/hooks/post/useAutoSync';
 import useCloudDraft from '@/app/hooks/post/useCloudDraft';
 import useDraft from '@/app/hooks/post/useDraft';
+import { usePasteImageUpload } from '@/app/hooks/post/usePasteImageUpload';
 import usePost from '@/app/hooks/post/usePost';
 import useTheme from '@/app/hooks/useTheme';
 import useToast from '@/app/hooks/useToast';
@@ -78,6 +79,13 @@ const BlogForm = () => {
   );
   const { isOpen: openImageBox, setIsOpen: setOpenImageBox } = useOverlay();
 
+  const { containerRef } = usePasteImageUpload({
+    content: formData.content || '',
+    setFormData,
+    setUploadedImages,
+    toast,
+  });
+
   // 클라우드 임시저장본 조회
   useEffect(() => {
     fetchCloudDrafts().catch((error) => {
@@ -269,29 +277,35 @@ const BlogForm = () => {
         />
       </Overlay>
 
-      <MDEditor
-        value={formData.content}
-        onChange={(value) => setFormData({ content: value })}
-        height={500}
-        minHeight={500}
-        visibleDragbar={false}
-        data-color-mode={theme}
-        previewOptions={{
-          wrapperElement: {
-            'data-color-mode': theme,
-          },
-          rehypeRewrite: (node, index?, parent?) => {
-            asideStyleRewrite(node);
-            renderYoutubeEmbed(node, index || 0, parent as Element | undefined);
-            addImageClickHandler(node);
-            addDescriptionUnderImage(
-              node,
-              index,
-              parent as Element | undefined
-            );
-          },
-        }}
-      />
+      <div ref={containerRef}>
+        <MDEditor
+          value={formData.content}
+          onChange={(value) => setFormData({ content: value })}
+          height={500}
+          minHeight={500}
+          visibleDragbar={false}
+          data-color-mode={theme}
+          previewOptions={{
+            wrapperElement: {
+              'data-color-mode': theme,
+            },
+            rehypeRewrite: (node, index?, parent?) => {
+              asideStyleRewrite(node);
+              renderYoutubeEmbed(
+                node,
+                index || 0,
+                parent as Element | undefined
+              );
+              addImageClickHandler(node);
+              addDescriptionUnderImage(
+                node,
+                index,
+                parent as Element | undefined
+              );
+            },
+          }}
+        />
+      </div>
       <UploadImageContainer
         uploadedImages={uploadedImages}
         setUploadedImages={setUploadedImages}
diff --git a/app/entities/post/write/UploadImageContainer.tsx b/app/entities/post/write/UploadImageContainer.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react';
 import { FaImage } from 'react-icons/fa';
 import UploadedImage from '@/app/entities/post/write/UploadedImage';
+import { uploadImageFile } from '@/app/lib/utils/imageUpload';
 
 interface UploadImageContainerProps {
   onClick: (link: string) => void;
@@ -43,24 +44,8 @@ const UploadImageContainer = ({
 
         setUploadProgress({ current: i + 1, total: files.length });
 
-        const formData = new FormData();
-        formData.append('file', file);
-
-        const response = await fetch('/api/upload', {
-          method: 'POST',
-          body: formData,
-        });
-
-        if (!response.ok) {
-          const error = await response.json();
-          throw new Error(error.error || '업로드 실패');
-        }
-
-        const data = await response.json();
-
-        if (data.success && data.url) {
-          setUploadedImages((prev) => [...prev, data.url]);
-        }
+        const url = await uploadImageFile(file);
+        setUploadedImages((prev) => [...prev, url]);
       }
 
       return;
@@ -130,7 +115,9 @@ const UploadImageContainer = ({
               업로드 중... ({uploadProgress.current}/{uploadProgress.total})
             </p>
           ) : (
-            <p className={'text-gray-600 dark:text-gray-400'}>클릭하여 링크 복사</p>
+            <p className={'text-gray-600 dark:text-gray-400'}>
+              클릭하여 링크 복사
+            </p>
           )}
         </div>
         <div
diff --git a/app/hooks/post/usePasteImageUpload.ts b/app/hooks/post/usePasteImageUpload.ts
@@ -0,0 +1,110 @@
+import { useEffect, useRef, useState } from 'react';
+import { uploadImageFile } from '@/app/lib/utils/imageUpload';
+
+interface UsePasteImageUploadProps {
+  content: string;
+  setFormData: (updates: { content?: string }) => void;
+  setUploadedImages: React.Dispatch<React.SetStateAction<string[]>>;
+  toast: {
+    success: (message: string) => void;
+    error: (message: string) => void;
+  };
+}
+
+interface UploadProgress {
+  current: number;
+  total: number;
+}
+
+export function usePasteImageUpload({
+  content,
+  setFormData,
+  setUploadedImages,
+  toast,
+}: UsePasteImageUploadProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<UploadProgress>({
+    current: 0,
+    total: 0,
+  });
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handlePaste = async (e: ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+
+      // 이미지가 복사되었는지 확인
+      const imageItems = Array.from(items).filter((item) =>
+        item.type.startsWith('image/')
+      );
+
+      if (imageItems.length === 0) return;
+
+      e.preventDefault();
+
+      const textarea = container.querySelector('textarea');
+      const cursorPosition = textarea?.selectionStart ?? content.length;
+
+      setIsUploading(true);
+      setUploadProgress({ current: 0, total: imageItems.length });
+
+      const uploadedUrls: string[] = [];
+
+      // 이미지 업로드
+      for (let i = 0; i < imageItems.length; i++) {
+        try {
+          const file = imageItems[i].getAsFile();
+          if (!file) continue;
+
+          toast.success(
+            `이미지를 업로드하는 중입니다... (${i + 1}/${imageItems.length})`
+          );
+
+          const url = await uploadImageFile(file);
+          uploadedUrls.push(url);
+
+          setUploadProgress({ current: i + 1, total: imageItems.length });
+        } catch (error) {
+          const errorMessage =
+            error instanceof Error ? error.message : '알 수 없는 오류';
+          toast.error(`이미지 업로드 실패: ${errorMessage}`);
+        }
+      }
+
+      // 업로드된 이미지 마크다운에 추가
+      if (uploadedUrls.length > 0) {
+        const markdownImages = uploadedUrls
+          .map((url) => `![이미지](${url})`)
+          .join('\n');
+
+        const beforeCursor = content.slice(0, cursorPosition);
+        const afterCursor = content.slice(cursorPosition);
+        const newContent = beforeCursor + markdownImages + afterCursor;
+
+        setFormData({ content: newContent });
+        setUploadedImages((prev) => [...prev, ...uploadedUrls]);
+
+        toast.success('이미지가 성공적으로 삽입되었습니다.');
+      }
+
+      setIsUploading(false);
+      setUploadProgress({ current: 0, total: 0 });
+    };
+
+    container.addEventListener('paste', handlePaste);
+
+    return () => {
+      container.removeEventListener('paste', handlePaste);
+    };
+  }, [content, setFormData, setUploadedImages, toast]);
+
+  return {
+    containerRef,
+    isUploading,
+    uploadProgress,
+  };
+}
diff --git a/app/lib/utils/imageUpload.ts b/app/lib/utils/imageUpload.ts
@@ -0,0 +1,38 @@
+/**
+ * 이미지를 서버에 업로드합니다
+ * @param file - 업로드할 이미지 파일
+ * @returns 업로드된 이미지 URL을 반환하는 Promise
+ * @throws 파일이 이미지가 아니거나 업로드 실패, 응답이 유효하지 않은 경우 에러 발생
+ */
+export async function uploadImageFile(file: File): Promise<string> {
+  // 검증
+  if (!file.type.startsWith('image/')) {
+    throw new Error('이미지 파일만 업로드할 수 있습니다.');
+  }
+
+  // formData 생성
+  const formData = new FormData();
+  formData.append('file', file);
+
+  // 이미지 업로드 요청
+  const response = await fetch('/api/upload', {
+    method: 'POST',
+    body: formData,
+  });
+
+  // 응답 검증
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || '업로드 실패');
+  }
+
+  // 응답 파싱
+  const data = await response.json();
+
+  // 응답 데이터 검증
+  if (!data.success || !data.url) {
+    throw new Error('업로드 URL을 받지 못했습니다.');
+  }
+
+  return data.url;
+}
