0727 ver1

src/App.js

-import React from 'react';
+import React, { useEffect } from 'react';
 import SearchPage from './SearchPage';
 import Favorites from './Favorites';
 import MusicList from './MusicList';
 import SnackMsg from './SnackMsg';
 import {Box, Tabs, Tab, Typography, AppBar} from '@mui/material';
+import { LineAxisOutlined } from '@mui/icons-material';
 
 export default function App () {
     const [currentTab, setCurrentTab] = React.useState(0);//탭
@@ -14,23 +15,58 @@ export default function App () {
     const [favorites, setFavorites] = React.useState([]);//재검색해도 Favorites목록이 리셋되는 것을 막기 위해 Favorites 모아놓은 상태변수 만듦
 
     //여기에 useEffect로 favorites랑 likes관리  
-    //useEffect 안에 console.log(~~, []) 이런 식으로 useEffect가 1번만 작동하게 만들기
+    //사이트 처음 들어갈 때 좋아요 목록이랑 좋아요 표시가 잘 나타나도록
+    useEffect(() => {
+        
+            
+    }, []);  
+
     const handleTabChange = (event, newValue) => {//탭
         setCurrentTab(newValue);
     }
 
     const toggleFavorite = (id, name) => {//좋아요와 스낵바 상태 업데이트
-        setLikes(prevLikes => ({...prevLikes, [id]: !prevLikes[id]}));//기존의 모든 키-값 쌍을 복사한다음 뒤에 써져있는대로 업데이트함
         setSnackState({open: true, msg: `${name} is clicked`})
+        
         if (likes[id]) {//이미 좋아요를 한 item이라면
+            fetch(`/likes/${collectionId}`, {method: "DELETE"})
+                .then((r)=>r.json())
+                .then((r)=>{
+                    console.log(r);
+                    console.log("DELETE");
+                    setLikes(prevLikes => ({...prevLikes, [id]: !prevLikes[id]}));//기존의 모든 키-값 쌍을 복사한다음 뒤에 써져있는대로 업데이트함
                     setFavorites(prevFavorites => prevFavorites.filter(item => item.collectionId !== id));
-            //여기에 DELETE 연결
+                })
+                .catch((error) => {
+                    console.error('Error deleting likes:', error);
+                });
         }
+        //참고 코드
+        /*
+        fetch(`/musicSearch/${searchWord}`)//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
+        .then(r => r.json()).then(r => {
+            console.log(r);
+            onSearch(r.results);
+            setSearchWord('');//searchWord 변수 값을 다시 빈 문자열로 초기화
+        }).catch(e => console.log('error when search musician));
+        */
         else {//그게 아니라서 굳이 신경쓸 필요 없으면
             const selectedItem = searchResult.find(item => item.collectionId === id);
             if (selectedItem) {
-              setFavorites(prevFavorites => [...prevFavorites, selectedItem]);
+              
               //여기에 POST 연결
+              fetch(`/likes`)
+                .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);
+                });
             }
 
         }

src/SearchPage.js

@@ -6,14 +6,13 @@ export default function SearchPage ({onSearch}) {
 
     const handleSearch = (event) => {
         event.preventDefault();
-        console.log(searchWord);
-        setSearchWord('');
-        fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
-        // fetch(`/musicSearch/${searchWord}`)로 바꾸기
+        console.log(searchWord);//searchWord 변수의 값을 콘솔에 기록
+        setSearchWord('');//searchWord 변수 빈 문자열로 초기화
+        fetch(`/musicSearch/${searchWord}`)//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
         .then(r => r.json()).then(r => {
-            console.log(r);
+            console.log(r);//
             onSearch(r.results);
-            setSearchWord('');
+            setSearchWord('');//searchWord 변수 값을 다시 빈 문자열로 초기화
         }).catch(e => console.log('error when search musician'));
     }