재검색해도 좋아요 목록 유지까지 다 완료

src/App.js

@@ -11,6 +11,7 @@ export default function App () {
     
     const [likes, setLikes] = React.useState({});//좋아요결과
     const [snackState, setSnackState] = React.useState({open: false, msg:''})//스낵바열림결과
+    const [favorites, setFavorites] = React.useState([]);//재검색해도 Favorites목록이 리셋되는 것을 막기 위해 Favorites 모아놓은 상태변수 만듦
 
     const handleTabChange = (event, newValue) => {//탭
         setCurrentTab(newValue);
@@ -19,6 +20,15 @@ export default function App () {
     const toggleFavorite = (id, name) => {//좋아요와 스낵바 상태 업데이트
         setLikes(prevLikes => ({...prevLikes, [id]: !prevLikes[id]}));//기존의 모든 키-값 쌍을 복사한다음 뒤에 써져있는대로 업데이트함
         setSnackState({open: true, msg: `${name} is clicked`})
+        if (likes[id]) {//이미 좋아요를 한 item이라면
+            setFavorites(prevFavorites => prevFavorites.filter(item => item.collectionId !== id));
+        } 
+        else {//그게 아니라서 굳이 신경쓸 필요 없으면
+            const selectedItem = searchResult.find(item => item.collectionId === id);
+            if (selectedItem) {
+              setFavorites(prevFavorites => [...prevFavorites, selectedItem]);
+            }
+        }
     }
 
     const handleSnackbarClose = (event, reason)=> {//스낵바 닫기
@@ -51,7 +61,7 @@ export default function App () {
             {currentTab == 1 && 
             <>
             <Typography align = "center" variant = "h5"> Favorites </Typography>
-            <Favorites list = {searchResult} likes = {likes} toggleFavorite = {toggleFavorite}/>
+            <Favorites list = {favorites} likes = {likes} toggleFavorite = {toggleFavorite}/>
             </>}
             {currentTab == 2 && <Typography align = "center" variant = "h5"> More Contents </Typography>}
             <SnackMsg open = {snackState.open} message = {snackState.msg} onClose = {handleSnackbarClose}/>