From 39b1ee99f57827b7475ffbc208b8506b8942451f Mon Sep 17 00:00:00 2001
From: Hyunjin <noh0605@ajou.ac.kr>
Date: Sat, 15 Jul 2023 15:29:12 +0900
Subject: [PATCH] right before excercise
---
src/App.js | 8 ++++----
src/Favorites.js | 6 ++++++
src/MusicList.js | 8 ++++----
src/SearchPage.js | 2 +-
4 files changed, 15 insertions(+), 9 deletions(-)
create mode 100644 src/Favorites.js
diff --git a/src/App.js b/src/App.js
index c2d70e5..b8ec493 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,12 @@
import React from 'react';
-import MusicList from './MusicList';
-import music_list from './data';
-import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
+import MusicList from './MusicList.js';
+import music_list from './data.js';
import SearchPage from './SearchPage';
+import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
export default function App () {
const [currentTab, setCurrentTab] = React.useState(0);
- const [searchResul, setSearchResult] = React.useState([]);
+ const [searchResult, setSearchResult] = React.useState([]);
const handleTabChange = (event, newValue) => {
setCurrentTab(newValue);
}
diff --git a/src/Favorites.js b/src/Favorites.js
new file mode 100644
index 0000000..853188f
--- /dev/null
+++ b/src/Favorites.js
@@ -0,0 +1,6 @@
+/*
+1. 전역변수 사용하지 말것
+2. SearchPage에서 가수 2~3명의 음악을 검색하고, 좋아요를 클릭하고,
+Favorites 페이지를 보았을 때, 여러 가수들의 노래들이 표시되어야 하고,
+Favorites에서 좋아요를 다시 클릭하면, 그 음악이 사라져야 합니다.
+*/
diff --git a/src/MusicList.js b/src/MusicList.js
index 72565a4..672d581 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -19,9 +19,9 @@ const styles = {
export default function MusicList ({list}) {
const [likes, setLikes] = React.useState({});
let [snackState, setSnackState] = React.useState({open: false, msg:''})
- const toggleFavorite = (id) => () => {
+ const toggleFavorite = (id, name) => () => {
setLikes({...likes, [id]: !likes[id]});
- setSnackState({...snackState, open: true, msg: `${id} is clicked`})
+ setSnackState({...snackState, open: true, msg: `${name} is clicked`})
}
const handleSnackbarClose = (event, reason)=> {
if(reason === 'clickaway'){
@@ -33,13 +33,13 @@ export default function MusicList ({list}) {
<div>
{list.map(item => {
return (
- <Card sx={styles.card} key={(item.collectionId)}>
+ <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.collectionName)}>
+ <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 2c4ab19..10dc1b3 100644
--- a/src/SearchPage.js
+++ b/src/SearchPage.js
@@ -1,6 +1,6 @@
import React from 'react';
+import MusicList from './MusicList.js';
import {Button, TextField} from '@mui/material';
-import MusicList from './MusicList';
export default function SearchPage ({list, onSearch}) {
const [searchWord, setSearchWord] = React.useState('');
--
GitLab