favorites 불러오기 실패

src/App.js

@@ -14,11 +14,15 @@ export default function App () {
     const [snackState, setSnackState] = React.useState({open: false, msg:''})//스낵바열림결과
     const [favorites, setFavorites] = React.useState([]);//재검색해도 Favorites목록이 리셋되는 것을 막기 위해 Favorites 모아놓은 상태변수 만듦
 
-    //여기에 useEffect로 favorites랑 likes관리  
+    //여기에 useEffect로 favorites랑 likes관리?  
     //사이트 처음 들어갈 때 좋아요 목록이랑 좋아요 표시가 잘 나타나도록
     useEffect(() => {
-        
-            
+        fetch(`/likes`, {method:'GET'})
+        .then((r) => Response.json())
+        .then((r) => {setFavorites(r), setLikes(r);})
+        .catch((error) => {
+            console.error("Error fetching favorites:", e);
+        });         
   }, []);  
             
     const handleTabChange = (event, newValue) => {//탭
@@ -29,7 +33,7 @@ export default function App () {
         setSnackState({open: true, msg: `${name} is clicked`})
         
         if (likes[id]) {//이미 좋아요를 한 item이라면
-            fetch(`/likes/${collectionId}`, {method: "DELETE"})
+            fetch(`/likes/${collectionId}`, {method: "DELETE"})//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
                 .then((r)=>r.json())
                 .then((r)=>{
                     console.log(r);
@@ -43,6 +47,22 @@ export default function App () {
         }
         //참고 코드
         /*
+        @GetMapping(value="/likes")
+        public List<FavoriteMusic> getLikes() {
+            return service.getLikes();
+        }
+
+        @PostMapping(value="/likes")
+        public int postLikes(@RequestBody FavoriteMusicRequestDto favorite) {
+            return service.saveFavorite(favorite);
+        } 
+
+        @DeleteMapping(value="/likes/{id}")
+        public int deleteLikes(@PathVariable String id) {
+            return service.deleteFavorite(id);
+        }
+        */
+        /*
         fetch(`/musicSearch/${searchWord}`)//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
         .then(r => r.json()).then(r => {
             console.log(r);
@@ -50,22 +70,19 @@ export default function App () {
             setSearchWord('');//searchWord 변수 값을 다시 빈 문자열로 초기화
         }).catch(e => console.log('error when search musician));
         */
-        else {//그게 아니라서 굳이 신경쓸 필요 없으면
+        else {//좋아요가 아직 안 되어있는 item이라면
             const selectedItem = searchResult.find(item => item.collectionId === id);
             if (selectedItem) {
-              
-              //여기에 POST 연결
-              fetch(`/likes`)
+                fetch(`/likes`, {method: "POST", headers: {'Content-Type': 'application/json'}, body: JSON.stringify(item)})//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
                     .then((r)=>r.json())
                     .then((r)=>{
                         console.log(r);
                         console.log("POST");
                         setLikes(prevLikes => ({ ...prevLikes, [id]: !prevLikes[id] }));
                         setFavorites(prevFavorites => [...prevFavorites, selectedItem]);
-                    //이제 myspringweb의 controller로 가서 postLikes함수를 호출해야 함
                     })
                     .catch((error) => {
-                    console.error('Error deleting likes:', error);
+                        console.error('Error posting likes:', error);
                     });
             }