From 0f3d80ccb1b9af916202e8ee213b54a0940c67bc Mon Sep 17 00:00:00 2001
From: Danjjinbibbang <hyjmex@gmail.com>
Date: Fri, 11 Oct 2024 00:25:16 +0900
Subject: [PATCH] =?UTF-8?q?blob=20->=20file=20=EA=B0=9D=EC=B2=B4=20?=
 =?UTF-8?q?=EB=B3=80=ED=99=98=20=EC=8B=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EC=86=90=EC=83=81=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Draw/InputPicture.jsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/Draw/InputPicture.jsx b/src/components/Draw/InputPicture.jsx
index e3259b0..34b3bf6 100644
--- a/src/components/Draw/InputPicture.jsx
+++ b/src/components/Draw/InputPicture.jsx
@@ -41,16 +41,35 @@ function InputPicture() {
     setModalOpen(false);
     // setModalContent(null); // 모달을 닫을 때 내용 초기화
   };
+ // Base64 데이터를 Blob으로 변환하는 함수
+  const base64ToBlob = (base64Data, contentType = "image/png") => {
+    const byteCharacters = atob(base64Data);
+    const byteArrays = [];
+    for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+      const slice = byteCharacters.slice(offset, offset + 512);
+      const byteNumbers = new Array(slice.length);
+      for (let i = 0; i < slice.length; i++) {
+        byteNumbers[i] = slice.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      byteArrays.push(byteArray);
+    }
+    return new Blob(byteArrays, { type: contentType });
+  };
 
   // Recognition에서 받은 파일 데이터를 저장하는 함수
   // const handleRecognitionResponse = (data, pictureType, base64Images) => {
   const handleRecognitionResponse = (data, pictureType, base64Images) => {
     console.log("콘솔에 base64 이미지 출력:", base64Images);
+    console.log("blob 데이터: ", data);
 
-    const imageBlob = data.file; // 서버 응답에서 파일이 포함된 부분
+    const base64Data = base64Images.split(",")[1]; // "data:image/png;base64," 부분 제거
+    const imageBlob = base64ToBlob(base64Data); // Base64 데이터를 Blob으로 변환
+    //const imageBlob = base64ToBlob(data); // 서버 응답에서 파일이 포함된 부분
     const file = new File([imageBlob], `${pictureType}.png`, {
       type: "image/png",
     });
+    console.log("blob 파일 객체로 변환: ", file);
 
     setImageFiles((prevFiles) => ({
       ...prevFiles,
@@ -61,7 +80,7 @@ function InputPicture() {
     const fileUrl = URL.createObjectURL(file);
     setPreviewUrls((prev) => ({
       ...prev,
-      [pictureType]: base64Images,
+      [pictureType]: fileUrl,
     }));
 
     setImagePreviews((prev) => ({