msg commit

src/App.js

 import React from 'react';
-import MusicList from './MusicList.js';
-import music_list from './data.js';
+import music_list from './data';
 import SearchPage from './SearchPage';
+import Favorites from './Favorites';
 import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
 
 export default function App () {
     const [currentTab, setCurrentTab] = React.useState(0);
     const [searchResult, setSearchResult] = React.useState([]);
+    const [likes, setLikes] = React.useState({});
+    
     const handleTabChange = (event, newValue) => {
         setCurrentTab(newValue);
     }
@@ -26,8 +28,8 @@ export default function App () {
                 </Tabs>
             </Box>
 
-            {currentTab == 0 && <SearchPage list = {searchResult} onSearch = {setSearchResult}/>}
-            {currentTab == 1 && <Typography align = "center" variant = "h2"> Favorites </Typography>}
+            {currentTab == 0 && <SearchPage list = {searchResult} onSearch = {setSearchResult} likes = {likes} setLikes = {setLikes}/>}
+            {currentTab == 1 && <Typography align = "center" variant = "h2" likes = {likes} setLikes = {setLikes}> Favorites </Typography>}
             {currentTab == 2 && <Typography align = "center" variant = "h2"> Item Three </Typography>}
         </React.Fragment>
     )    

src/Favorites.js

@@ -6,9 +6,20 @@ Favorites에서 좋아요를 다시 클릭하면, 그 음악이 사라져야 합
 3. 상태변수 likes는 SearchPage와 Favorites에 공유되어야 한다.
 4. 상태변수 likes를 어느 컴포넌트에 두어야 하며, MusicList, SearchPage, Favorites 컴포넌트의 props는 어떠한 형태로 전달되어야 하는가?
 */
+
 import React from 'react';
 import MusicList from './MusicList';
 
+const Favorites = ({likes, setLikes}) => {
+    const list = Object.entries(likes)
+        .filter(([_, value]) => value)
+        .map(([key]) => key);
+    return (
+        <MusicList list={list} likes={likes} setLikes={setLikes}></MusicList>
+    );
+}
+
+/*
 const Favorites = ({ list, likes, onToggleFavorite }) => {
   return (
     <div>
@@ -16,5 +27,6 @@ const Favorites = ({ list, likes, onToggleFavorite }) => {
     </div>
   );
 };
+*/
 
 export default Favorites;

src/MusicList.js

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

src/SearchPage.js

 import React from 'react';
+//import music_list from './data';
 import MusicList from './MusicList.js';
-import Favorites from './Favorites.js';//여기
 import {Button, TextField} from '@mui/material';
 
-export default function SearchPage ({list, onSearch}) {
+export default function SearchPage ({list, onSearch, likes, setLikes}) {
     const [searchWord, setSearchWord] = React.useState('');
-    const [likes, setLikes] = React.useState({});//여기
-    let [snackState, setSnackState] = React.useState({open: false, msg:''});//여기
 
     const handleSearch = (event) => {
         event.preventDefault();
@@ -24,33 +22,6 @@ export default function SearchPage ({list, onSearch}) {
         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}}>
@@ -59,9 +30,7 @@ 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} likes = {likes} onToggleFavorite = {toggleFavorite}></MusicList>
-            <Favorites list = {list} likes = {likes} onToggleFavorite = {toggleFavorite}></Favorites>
+            <MusicList list = {list} likes = {likes} setLikes={setLikes}></MusicList>      
         </React.Fragment>
     )
-    //MusicList랑 Favorites 수정함
  }
\ No newline at end of file