correct?

src/App.js

@@ -8,10 +8,30 @@ import Favorites from './favorites';
 export default function App () {
     const [currentTab, setCurrentTab] = React.useState(0);
     const [searchResult, setSearchResult] = React.useState([]);
+    const [favorites, setFavorites] = React.useState([]);
 
     const handleTabChange = (event, newValue) => {
        setCurrentTab(newValue);
    }
+//수정
+   const handleOnLike = (item) => {
+        let value = favorites.find(it => it.collectionId == item.collectionId)
+        if (value) {
+            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);
+        } else {
+            let i = searchResult.find(it => it.collectionId == item.collectionId)
+            if (i) {
+            item.like = true;
+            }
+            setFavorites([...favorites, item]);
+        }
+    };
+
     return (
         <React.Fragment>
             <AppBar position="fixed">
@@ -31,8 +51,7 @@ export default function App () {
             </Box>
 
             {currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult}/>}
-            {currentTab == 1 &&
-               <Favorites/> }
+            {currentTab == 1 && <Favorites list={favorites} onLike={handleOnLike}/> }
             {currentTab == 2 &&
                 <Typography align="center" variant="h2">Item Three</Typography>}
         </React.Fragment>

src/MusicList.js

@@ -17,18 +17,19 @@ const styles = {
     },
 };
 
-export default function MusicList ({list}) {
+export default function MusicList ({list, onLike}) {
     let [snackState, setSnackState] = React.useState({open : false, msg : ''})
     const [likes, setLikes] = React.useState({});
 
     const toggleFavorite = (id) => () => {
         //React Hooks useState() with Object
         //https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object
-        setLikes({...likes, [id] : !likes[id]});
+        //setLikes({...likes, [id] : !likes[id]});
         //let temp = likes;
         //temp[id] = !temp[id]
         //setlikes(temp) => 좋아요 이미 눌려져 있는거 다시 누르면 좋아요 취소
-        setSnackState({...snackState, open : true, msg : `${id} is clicked` })
+        //setSnackState({...snackState, open : true, msg : `${id} is clicked` })
+        onLike(id);
     }
 
     const handleSnackbarClose = (event, reason) => {
@@ -41,6 +42,7 @@ export default function MusicList ({list}) {
     }   
     
     
+
     return (
         <div>
             {list.map(item => {
@@ -51,9 +53,8 @@ export default function MusicList ({list}) {
                         <Typography variant="subtitle2"> {item.collectionCensoredName}</Typography>
                     </CardContent>
                     <CardActions>
-                        <IconButton onClick = {toggleFavorite(item.collectionName)}>
-                            {(likes[item.collectionName] === true) ? 
-                                <Favorite /> : <FavoriteBorder />}
+                    <IconButton onClick={toggleFavorite(item)}>
+                            {item.like  ? <Favorite /> : <FavoriteBorder />}
                     </IconButton>
                     </CardActions>
                 </Card>)

src/SearchPage.js

@@ -12,7 +12,12 @@ export default function SearchPage({list, onSearch}){
         fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
         .then(r => r.json()).then(r => {
             console.log(r);
-            onSearch(r.results);
+            const updatedList = r.results.map(item => ({
+             ...item,
+            show: true,
+            liked: false
+        }));
+        onSearch(updatedList);
         setSearchWord('');
         }).catch(e => console.log('error when search musician'))
     }
@@ -21,6 +26,19 @@ export default function SearchPage({list, onSearch}){
         setSearchWord(event.target.value);
     }
 
+    const handleLike = (collectionName, liked) => {
+        const updatedList = list.map(item => {
+          if (item.collectionName === collectionName) {
+            return {
+              ...item,
+              liked
+            };
+          }
+          return item;
+        });
+        onSearch(updatedList);
+    };
+    
     return(
         <React.Fragment>
 
@@ -37,9 +55,7 @@ export default function SearchPage({list, onSearch}){
                 </div>
             </form>
 
-            <MusicList list={list}>
-
-            </MusicList>
+            <MusicList list={list} onLike={handleLike} />
         </React.Fragment>
     )
 }
\ No newline at end of file

src/favorites.js

 import React from 'react';
 import { Typography } from '@mui/material';
+import MusicList from './MusicList';
 
-const Favorites = (props) => {
-    return <Typography align="center" variant="h2">IFavoriteo</Typography>
-}
+const Favorites = ({list, onLike}) => {
+  return (
+    <div>
+      <MusicList list={list} onLike={onLike}/>
+    </div>
+  );
+};
 
 export default Favorites;
\ No newline at end of file