From c763680ff45ceaef9b3ec23573e0c078efbed91d Mon Sep 17 00:00:00 2001
From: hwanheejung <hwanheejung117@gmail.com>
Date: Fri, 6 Sep 2024 20:38:58 +0900
Subject: [PATCH] #111 fix: kakao share upload image error

---
 src/app/board/[boardId]/_hooks/useSnsShare.ts | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/app/board/[boardId]/_hooks/useSnsShare.ts b/src/app/board/[boardId]/_hooks/useSnsShare.ts
index bc90a44..a968dc4 100644
--- a/src/app/board/[boardId]/_hooks/useSnsShare.ts
+++ b/src/app/board/[boardId]/_hooks/useSnsShare.ts
@@ -1,9 +1,9 @@
 'use client'
 
-import { useEffect, useState } from 'react'
 import { isDevMode } from '@/lib/utils/env'
-import { isIOS, isAndroid } from 'react-device-detect'
 import { useSession } from 'next-auth/react'
+import { useEffect } from 'react'
+import { isAndroid, isIOS } from 'react-device-detect'
 
 const useSnsShare = () => {
   const { data: session, status } = useSession()
@@ -22,8 +22,6 @@ const useSnsShare = () => {
     }
   }, [])
 
-  const [imageUrl, setImageUrl] = useState('')
-
   const shareToKakao = async (boardName: string) => {
     const { Kakao, location } = window
     if (Kakao === undefined) {
@@ -44,11 +42,20 @@ const useSnsShare = () => {
     }
 
     try {
+      // 이미지 파일을 Blob으로 처리하여 File 객체 생성
+      const response = await fetch(OPTIONS.localImage)
+      const blob = await response.blob()
+      const file = new File([blob], 'opengraph-image-v2.png', {
+        type: 'image/png',
+      })
+
       // upload image (로컬 사진은 사용할 수 없으므로 서버에 업로드 후 사용)
-      const res = await Kakao.Share.uploadImage({
-        file: OPTIONS.localImage,
+      const uploadRes = await Kakao.Share.uploadImage({
+        file: [file],
       })
-      setImageUrl(res.infos.original.url)
+
+      const imageUrl = uploadRes.infos.original.url
+
       Kakao.Share.sendDefault({
         objectType: 'feed',
         content: {