diff --git a/package.json b/package.json index ef8f85095f0ff71ce609b0c4f487e8e5760d8498..9b76b799a3677f93fe4094a4642cdc6ed23a2ab0 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "dependencies": { "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", + "@mui/icons-material": "^5.13.7", "@mui/material": "^5.8.6" }, "devDependencies": { diff --git a/src/App.js b/src/App.js index dcecf08c89ea2c3139aa9a484d0e8cefc7f6bc1b..1d44570a2a77fcae1d7177ca6dbaee1cb0aa79e4 100644 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,7 @@ export default function App () { return ( <React.Fragment> <AppBar positions = "fixed"> - <Typography align = "center" variant = "h3" color = "inherit">Favorite Music</Typography> + <Typography align = "center" variant = "h3" color = "inherit">Hyunjin's Favorite Music</Typography> </AppBar> <div style = {{height: 60, width: '100%'}}></div> diff --git a/src/MusicList.js b/src/MusicList.js index 157eb0b26357937e05acfa549b46294af08ff12e..18372d8a1387c2ab113402464da908e9964a8b67 100644 --- a/src/MusicList.js +++ b/src/MusicList.js @@ -1,16 +1,42 @@ import React from 'react'; -import {Card, CardContent, Typography} from '@mui/material'; +import {Card, CardContent, CardActions, Typography, IconButton} from '@mui/material'; +import {Favorite, FavoriteBorder} from '@mui/icons-material'; + +const styles = { + content: {}, + layout: { + display: 'flex', + justifyContent: 'center' + }, + card: { + minWidth: 275, + maxWidth: 600, + marginBottom: '20pt', + marginLeft: 'auto', + marginRight: 'auto', + }, +}; +export default function MusicList ({list}) { + const [likes, setLikes] = React.useState({}); + + const toggleFavorite = (id) => () => { + setLikes({...likes, [id]: !likes[id]}); + } -export default function ({list}) { return ( <div> {list.results.map(item => { return ( - <Card> + <Card sx={styles.card} key={(item.collectionId)}> <CardContent> <Typography varient = "subtitle1"> {item.artistName} </Typography> <Typography variant = "subtitle2"> {item.colletcionCensoredName} </Typography> </CardContent> + <CardActions> + <IconButton onClick = {toggleFavorite(item.collectionId)}> + {(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>} + </IconButton> + </CardActions> </Card> ) })}