일단 Favorite 잘 작동 안 되는 상태

src/App.js

@@ -27,7 +27,7 @@ export default function App () {
             </Box>
 
             {currentTab == 0 && <SearchPage list = {searchResult} onSearch = {setSearchResult}/>}
-            {currentTab == 1 && <Typography align = "center" variant = "h2"> Item Two </Typography>}
+            {currentTab == 1 && <Typography align = "center" variant = "h2"> Favorites </Typography>}
             {currentTab == 2 && <Typography align = "center" variant = "h2"> Item Three </Typography>}
         </React.Fragment>
     )    

src/Favorites.js

@@ -3,4 +3,18 @@
 2. SearchPage에서 가수 2~3명의 음악을 검색하고, 좋아요를 클릭하고, 
 Favorites 페이지를 보았을 때, 여러 가수들의 노래들이 표시되어야 하고, 
 Favorites에서 좋아요를 다시 클릭하면, 그 음악이 사라져야 합니다.
+3. 상태변수 likes는 SearchPage와 Favorites에 공유되어야 한다.
+4. 상태변수 likes를 어느 컴포넌트에 두어야 하며, MusicList, SearchPage, Favorites 컴포넌트의 props는 어떠한 형태로 전달되어야 하는가?
 */
+import React from 'react';
+import MusicList from './MusicList';
+
+const Favorites = ({ list, likes, onToggleFavorite }) => {
+  return (
+    <div>
+      <MusicList list={list} likes={likes} onToggleFavorite={onToggleFavorite} />
+    </div>
+  );
+};
+
+export default Favorites;

src/MusicList.js

 import React from 'react';
+import SnackMsg from './SnackMsg';
 import {Card, CardContent, CardActions, Typography, IconButton} from '@mui/material';
 import {Favorite, FavoriteBorder} from '@mui/icons-material';
 
+
 const styles = {
     content: {},
     layout: {
@@ -16,19 +18,22 @@ const styles = {
         marginRight: 'auto',
     },
 };
-export default function MusicList ({list}) {
-    const [likes, setLikes] = React.useState({});
+export default function MusicList ({list, likes, onToggleFavorite}) {//여기
+    //const [likes, setLikes] = React.useState({});//SearchPage.js로 옮겨짐
     let [snackState, setSnackState] = React.useState({open: false, msg:''})
-    const toggleFavorite = (id, name) => () => {
+    /*
+    const toggleFavorite = (id, name) => () => {//SearchPage.js로 옮겨짐
         setLikes({...likes, [id]: !likes[id]});
         setSnackState({...snackState, open: true, msg: `${name} is clicked`})
     }
+    */
     const handleSnackbarClose = (event, reason)=> {
         if(reason === 'clickaway'){
             return;
         }
         setSnackState({open: false, msg: ''});
     }
+
     return (
         <div>
             {list.map(item => {
@@ -39,7 +44,7 @@ export default function MusicList ({list}) {
                             <Typography variant = "subtitle2"> {item.colletcionCensoredName} </Typography>
                         </CardContent>
                         <CardActions>
-                            <IconButton onClick = {toggleFavorite(item.collectionId, item.collectionCensoredName)}>
+                            <IconButton onClick = {onToggleFavorite(item.collectionId, item.collectionCensoredName)}>
                                 {(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>}
                             </IconButton>
                         </CardActions>

src/SearchPage.js

 import React from 'react';
 import MusicList from './MusicList.js';
+import Favorites from './Favorites.js';//여기
 import {Button, TextField} from '@mui/material';
 
 export default function SearchPage ({list, onSearch}) {
     const [searchWord, setSearchWord] = React.useState('');
+    const [likes, setLikes] = React.useState({});//여기
+    let [snackState, setSnackState] = React.useState({open: false, msg:''});//여기
 
     const handleSearch = (event) => {
         event.preventDefault();
@@ -20,6 +23,34 @@ export default function SearchPage ({list, onSearch}) {
     const handleSearchTextChange = (event) => {
         setSearchWord(event.target.value);
     }
+
+    const toggleFavorite = (id, name) => () => {
+        setLikes({...likes, [id]: !likes[id]});
+        setSnackState({...snackState, open: true, msg: `${name} is clicked`})
+    }
+
+    /*
+    let [snackState, setSnackState] = React.useState({open: false, msg:''})
+    const toggleFavorite = (id, name) => () => {
+        setLikes({...likes, [id]: !likes[id]});
+        setSnackState({...snackState, open: true, msg: `${name} is clicked`})
+    }
+    */
+
+    /*
+    const handleToggleFavorite = (id, name) => () => {//여기
+        setLikes((prevLikes) => {
+          const updatedLikes = { ...prevLikes };
+          if (updatedLikes[id]) {
+            delete updatedLikes[id];
+          } else {
+            updatedLikes[id] = true;
+          }
+          return updatedLikes;
+        });
+      };
+    */
+
     return (
         <React.Fragment>
             <form style = {{display:'flex', marginTop: 20, marginBottom: 15}}>
@@ -28,7 +59,9 @@ export default function SearchPage ({list, onSearch}) {
                     <Button varient = "contained" collor = "primary" type = "submit" onClick = {handleSearch} style = {{marginLeft: 20}}>Search</Button>
                 </div>
             </form>
-            <MusicList list = {list}></MusicList>
+            <MusicList list = {list} likes = {likes} onToggleFavorite = {toggleFavorite}></MusicList>
+            <Favorites list = {list} likes = {likes} onToggleFavorite = {toggleFavorite}></Favorites>
         </React.Fragment>
     )
+    //MusicList랑 Favorites 수정함
  }
\ No newline at end of file