middle

src/App.js

-//import React from 'react';
-import React, { useEffect } from 'react';
+import React from 'react';
+//import React, { useEffect } from 'react';
 
 import MusicList from './MusicList';
 import music_list from './data';
@@ -14,27 +14,14 @@ export default function App() {
     const [favorites, setFavorites] = React.useState([]);
     //const [like, setLike] = React.useState([]);
 
-    const fetchfunc = () => {
-        axios.get('http://localhost:8888/likes')
-            .then((response) => {
-                const data = response.data;
-                data.map(item => {
-                    console.log(item);
-                    handleOnLike(item);
-                })
-                //onLike(data);
-                //setFavorites(data);
-                console.log(data);
-            })
-            .catch((error) => {
-                console.error('Error:', error);
-            });
-    }
-
-    useEffect(() => {
+    // const fetchfunc = () => {
     //     axios.get('http://localhost:8888/likes')
     //         .then((response) => {
     //             const data = response.data;
+    //             data.map(item => {
+    //                 console.log(item);
+    //                 handleOnLike(item);
+    //             })
     //             //onLike(data);
     //             //setFavorites(data);
     //             console.log(data);
@@ -42,8 +29,21 @@ export default function App() {
     //         .catch((error) => {
     //             console.error('Error:', error);
     //         });
-        fetchfunc();
-    }, []);
+    // }
+
+    // useEffect(() => {
+    //     // axios.get('http://localhost:8888/likes')
+    //     //     .then((response) => {
+    //     //         const data = response.data;
+    //     //         //onLike(data);
+    //     //         //setFavorites(data);
+    //     //         console.log(data);
+    //     //     })
+    //     //     .catch((error) => {
+    //     //         console.error('Error:', error);
+    //     //     });
+    //     fetchfunc();
+    // }, []);
 
     const handleTabChange = (event, newValue) => {
         setCurrentTab(newValue);
@@ -117,7 +117,7 @@ export default function App() {
     //             });
     //     }
 
-    //버전3 - 연결시키기 위해 노력
+    //버전3 - 연결시키기 위해 노력 - 최종
     const handleOnLike = (item) => {
         let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
 
@@ -131,7 +131,7 @@ export default function App() {
             let b = favorites.filter((it) => it.collectionId !== item.collectionId);
             setFavorites(b);
 
-            axios.delete(`http://localhost:8888/likes/${item.collectionId}`)
+            axios.delete(`/likes/${item.collectionId}`)
                 .then((response) => {
                     console.log(response.data);
                 })
@@ -150,7 +150,7 @@ export default function App() {
             //setFavorites([...favorites, { ...item, like: true }]);
 
             //좋아요 아이템 spring 서버로 보내기
-            axios.post('http://localhost:8888/likes', {
+            axios.post('/likes', {
                 collectionId: item.collectionId,
                 collectionType: item.collectionType,
                 artistId: item.artistId,
@@ -220,6 +220,22 @@ export default function App() {
         //     it.collectionId === item.collectionId ? { ...it, like: !favoriteItem } : it
         // );
         // setSearchResult(updatedSearchResult);
+
+        //고쳐보자..
+        // const handOnLike = (item) => {
+        //     let favoriteitem = favorite.find(it => it.collectionId == item.collectionId)
+
+        //     if (favoriteitem) { 
+        //         fetch(`/likes/${item.collectionId}`, {
+        //             method: "Delete",
+        //             headers: {},
+        //         }).then((response) => {
+        //             if(response.ok){
+        //                 let 
+        //             }
+        //         })
+        //     }
+        // }
     };
 
     return (
@@ -240,7 +256,7 @@ export default function App() {
             </Box>
 
             {currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult} onLike={handleOnLike} />}
-            {currentTab == 1 && <Favorites list={favorites} onFavorite={setFavorites} onLike={handleOnLike} />}
+            {currentTab == 1 && <Favorites list={favorites} onLike={handleOnLike} />}
             {currentTab == 2 &&
                 <Typography align="center" variant="h2">Item Three</Typography>}
         </React.Fragment>

src/favorites.js

-//import React from 'react';
+import React from 'react';
 import { Typography } from '@mui/material';
 import MusicList from './MusicList';
 import axios from 'axios';
-import React, { useEffect } from 'react';
+//import React, { useEffect } from 'react';
 import App from './App';
 
-const Favorites = ({ list, onSearch, onLike }) => {
-  //const [Favorites, setFavorites] = React.useState([]);
+const Favorites = ({ list, onLike }) => {
+  const [Favorites, setFavorites] = React.useState([]);
 
   // useEffect(() => {
   //   axios.get('http://localhost:8888/likes')
@@ -21,6 +21,16 @@ const Favorites = ({ list, onSearch, onLike }) => {
   //     });
   // }, []);
 
+  React.useEffect(() => {
+    fetch(`/likes`, {
+      method: 'GET',
+      headers: {},
+    }).then((response) => response.json())
+      .then((data) => {
+        setFavorites(data);
+      }).catch((e) => console.log("Error fetching favorites: ", e));
+  }, []);
+
   return (
     <React.Fragment>
       <MusicList list={list} onLike={onLike} />