배포

package.json

@@ -24,12 +24,14 @@
     "@radix-ui/react-toast": "^1.2.5",
     "@tanstack/react-query": "^5.64.1",
     "@tanstack/react-virtual": "^3.13.0",
+    "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "ky": "^1.7.4",
     "lucide-react": "^0.469.0",
     "motion": "^11.15.0",
     "next": "15.1.3",
+    "npm": "^11.1.0",
     "react": "^19.0.0",
     "react-daum-postcode": "^3.2.0",
     "react-dom": "^19.0.0",

src/app/reviews/_components/ReviewEditorModal.tsx

@@ -14,7 +14,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
-
+import imageCompression from 'browser-image-compression'
 interface ReviewEditorModalProps {
   storeId: WritableReviewType['storeId']
   storeName: WritableReviewType['storeName']
@@ -54,7 +54,9 @@ const ReviewEditorModal = ({
       content: prevData?.clientReviewContent || '',
       deliveryQuality: prevData?.deliveryQuality || '',
       image: null,
-      imagePreview: prevData?.representativeImageUri,
+      imagePreview: prevData?.representativeImageUri
+        ? prevData.representativeImageUri + `?v=${Date.now()}`
+        : null,
       isImageChanged: false,
     },
   })
@@ -87,12 +89,32 @@ const ReviewEditorModal = ({
   const handleFocusContent = () => {
     setIsContentValid(true)
   }
-  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
-    setValue('image', file)
-    setValue('imagePreview', URL.createObjectURL(file))
-    setValue('isImageChanged', true)
+    // 압축 옵션 설정
+    const options = {
+      maxSizeMB: 10, // 최대 파일 크기 (MB 단위)
+      maxWidthOrHeight: 1024, // 최대 가로/세로 크기 (px 단위)
+      useWebWorker: true, // 웹 워커 사용으로 성능 향상
+    }
+
+    try {
+      // 이미지 압축
+      const compressedFile = await imageCompression(file, options)
+
+      // 압축된 파일을 File 객체로 변환
+      const convertedFile = new File([compressedFile], file.name, {
+        type: file.type,
+        lastModified: Date.now(),
+      })
+
+      setValue('image', convertedFile)
+      setValue('imagePreview', URL.createObjectURL(convertedFile))
+      setValue('isImageChanged', true)
+    } catch (error) {
+      console.error('이미지 압축 중 오류 발생:', error)
+    }
   }
 
   const handleImageDelete = () => {