?

src/App.js

@@ -118,57 +118,57 @@ export default function App() {
     //     }
 
     //버전3 - 연결시키기 위해 노력 - 최종
-    const handleOnLike = (item) => {
-        let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
+    // const handleOnLike = (item) => {
+    //     let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
 
-        if (favoriteItem) {
+    //     if (favoriteItem) {
+    //         // item.like = false;
+    //         //favorite & search 둘다 삭제
+    //         let a = searchResult.find((it) => it.collectionId === item.collectionId);
+    //         if (a) {
     //             item.like = false;
-            //favorite & search 둘다 삭제
-            let a = searchResult.find((it) => it.collectionId === item.collectionId);
-            if (a) {
-                item.like = false;
-            }
-            let b = favorites.filter((it) => it.collectionId !== item.collectionId);
-            setFavorites(b);
+    //         }
+    //         let b = favorites.filter((it) => it.collectionId !== item.collectionId);
+    //         setFavorites(b);
 
-            axios.delete(`/likes/${item.collectionId}`)
-                .then((response) => {
-                    console.log(response.data);
-                })
-                .catch((error) => {
-                    console.error('Error: ', error);
-                })
-        }
+    //         axios.delete(`/likes/${item.collectionId}`)
+    //             .then((response) => {
+    //                 console.log(response.data);
+    //             })
+    //             .catch((error) => {
+    //                 console.error('Error: ', error);
+    //             })
+    //     }
 
-        else {
-            let a = searchResult.find((it) => it.collectionId !== item.collectionId);
-            if (a) {
-                item.like = true;
-            }
-            setFavorites([...favorites, item]);
+    //     else {
+    //         let a = searchResult.find((it) => it.collectionId !== item.collectionId);
+    //         if (a) {
+    //             item.like = true;
+    //         }
+    //         setFavorites([...favorites, item]);
 
-            //setFavorites([...favorites, { ...item, like: true }]);
-
-            //좋아요 아이템 spring 서버로 보내기
-            axios.post('/likes', {
-                collectionId: item.collectionId,
-                collectionType: item.collectionType,
-                artistId: item.artistId,
-                artistName: item.artistName,
-                artistViewUrl: item.artistViewUrl,
-                collectionName: item.collectionName,
-                collectionViewUrl: item.collectionViewUrl
-            }
+    //         //setFavorites([...favorites, { ...item, like: true }]);
 
+    //         //좋아요 아이템 spring 서버로 보내기
+    //         axios.post('/likes', {
+    //             collectionId: item.collectionId,
+    //             collectionType: item.collectionType,
+    //             artistId: item.artistId,
+    //             artistName: item.artistName,
+    //             artistViewUrl: item.artistViewUrl,
+    //             collectionName: item.collectionName,
+    //             collectionViewUrl: item.collectionViewUrl
+    //         }
 
-            )
-                .then((response) => {
-                    console.log(response.data);
-                })
-                .catch((error) => {
-                    console.error('Error:', error);
-                });
-        }
+
+    //         )
+    //             .then((response) => {
+    //                 console.log(response.data);
+    //             })
+    //             .catch((error) => {
+    //                 console.error('Error:', error);
+    //             });
+    //     }
 
     // const handleOnLike = (item) => {
     //     let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
@@ -236,6 +236,40 @@ export default function App() {
     //         })
     //     }
     // }
+
+    const handleOnLike = (item) => {
+        let favoriteItem = favorites.find(it => it.collectionId == item.collectionId)
+        if (favoriteItem) {
+            fetch(`/likes/${item.collectionId}`, {
+                method: 'DELETE',
+                headers: {},
+            })
+                .then(r => {
+                    let i = searchResult.find(it => it.collectionId == item.collectionId)
+                    if (i) {
+                        item.like = false;
+                    }
+                    let remains = favorites.filter((it) => it.collectionId !== item.collectionId);
+                    setFavorites(remains);
+                })
+                .catch(e => console.log('error when delete method >', e));
+        }
+        else {
+            fetch(`/likes`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(item)
+            })
+                .then(r => r.json())
+                .then(r => {
+                    let i = searchResult.find(it => it.collectionId == item.collectionId)
+                    if (i) {
+                        item.like = true;
+                    }
+                    setFavorites([...favorites, item]);
+                })
+                .catch(e => console.log('error when post >', e));
+        }
     };
 
     return (