diff --git a/src/App.js b/src/App.js
index 178fa4c742c07a155f392ac0114cccac04ebea75..1895e5ce02b89c13038934683b0ddf698cde05a6 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/MusicList.js b/src/MusicList.js
index dcb2b65dffce8ba044318f2533a0b7fbb5ca32f0..2da44d0b14b9daa2ec7692ab5baea315a8a0e58f 100644
--- a/src/MusicList.js
+++ b/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) => {
@@ -39,7 +40,8 @@ export default function MusicList ({list}) {
         <SnackMsg open = {snackState.open} message={snackState.msg} 
             onClose={handleSnackbarClose}/>
     }   
-      
+    
+    
 
     return (
         <div>
@@ -51,10 +53,9 @@ 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>
+                    <IconButton onClick={toggleFavorite(item)}>
+                            {item.like  ? <Favorite /> : <FavoriteBorder />}
+                    </IconButton>
                     </CardActions>
                 </Card>)
             })}
diff --git a/src/SearchPage.js b/src/SearchPage.js
index 0023fdca6bb24531dca5144c0fb7d8693a10337c..00890308086245a0300154b46969ed6f8cb33209 100644
--- a/src/SearchPage.js
+++ b/src/SearchPage.js
@@ -12,8 +12,13 @@ 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);
-            setSearchWord('');
+            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
diff --git a/src/favorites.js b/src/favorites.js
index 82765776af372c8ad43c5d2a035a4fb8efaef2d3..6c28a0067e96625904cd8aceb2d7609227aec902 100644
--- a/src/favorites.js
+++ b/src/favorites.js
@@ -1,8 +1,13 @@
 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