diff --git a/src/App.js b/src/App.js index 2368b385df5dc21b1c79d57c13cc39a353d3e1f2..df088f8c9494e98618914fbd2c13a8fe840eddc4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,14 @@ 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> ) diff --git a/src/Favorites.js b/src/Favorites.js index 895797c59c35b9c08154ca973b8fa76dd30d70d5..f473c66508f6c195721e5768c081a2be59f76470 100644 --- a/src/Favorites.js +++ b/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; diff --git a/src/MusicList.js b/src/MusicList.js index 377977f6bb89df7277a2ae142f2f7c32a4748cb7..92614b3692b7b5b5d545da9303d74c2a0af4bd8b 100644 --- a/src/MusicList.js +++ b/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> diff --git a/src/SearchPage.js b/src/SearchPage.js index c247f7de417a2096e683db63070518e58a2dad56..445f7f258502bd28e7d00130bdab46c8cf28e7df 100644 --- a/src/SearchPage.js +++ b/src/SearchPage.js @@ -1,12 +1,10 @@ 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