From d7d85d91a1f075a633bddb3607c2a4faeebf33a3 Mon Sep 17 00:00:00 2001
From: Hyunjin <noh0605@ajou.ac.kr>
Date: Mon, 10 Jul 2023 16:06:28 +0900
Subject: [PATCH] Toggle
---
package.json | 1 +
src/App.js | 2 +-
src/MusicList.js | 32 +++++++++++++++++++++++++++++---
3 files changed, 31 insertions(+), 4 deletions(-)
diff --git a/package.json b/package.json
index ef8f850..9b76b79 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 dcecf08..1d44570 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 157eb0b..18372d8 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>
)
})}
--
GitLab