From 60fd9b8e1575cebfd00709875375234606b71e5e Mon Sep 17 00:00:00 2001
From: Hyunjin <noh0605@ajou.ac.kr>
Date: Sat, 15 Jul 2023 23:48:48 +0900
Subject: [PATCH] =?UTF-8?q?Favorites=EC=97=90=20=EB=AA=A9=EB=A1=9D=20?=
=?UTF-8?q?=EC=A0=95=EC=83=81=20=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C.?=
=?UTF-8?q?=20=EC=A2=8B=EC=95=84=EC=9A=94=20=EC=95=88=20=ED=95=9C=20?=
=?UTF-8?q?=EB=85=B8=EB=9E=98=EB=93=A4=EB=A7=8C=20=EC=A0=9C=EC=99=B8?=
=?UTF-8?q?=EC=8B=9C=ED=82=A4=EB=A9=B4=20=EB=90=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.js | 41 +++++++++++++++++++++++++++++++++--------
src/Favorites.js | 19 +++----------------
src/MusicList.js | 21 ++-------------------
src/SearchPage.js | 5 +----
src/SnackMsg.js | 2 +-
5 files changed, 40 insertions(+), 48 deletions(-)
diff --git a/src/App.js b/src/App.js
index 834f3f8..5bf3b37 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,32 @@
import React from 'react';
import SearchPage from './SearchPage';
import Favorites from './Favorites';
+import MusicList from './MusicList';
+import SnackMsg from './SnackMsg';
import {Box, Tabs, Tab, Typography, AppBar} from '@mui/material';
export default function App () {
- const [currentTab, setCurrentTab] = React.useState(0);
- const [searchResult, setSearchResult] = React.useState([]);
- const [likes, setLikes] = React.useState({});
+ const [currentTab, setCurrentTab] = React.useState(0);//탭
+ const [searchResult, setSearchResult] = React.useState([]);//서치결과
- const handleTabChange = (event, newValue) => {
+ const [likes, setLikes] = React.useState({});//좋아요결과
+ const [snackState, setSnackState] = React.useState({open: false, msg:''})//스낵바열림결과
+
+ const handleTabChange = (event, newValue) => {//탭
setCurrentTab(newValue);
}
+
+ const toggleFavorite = (id, name) => {//좋아요와 스낵바 상태 업데이트
+ setLikes({...likes, [id]: !likes[id]});//기존의 모든 키-값 쌍을 복사한다음 뒤에 써져있는대로 업데이트함
+ setSnackState({...snackState, open: true, msg: `${name} is clicked`})
+ }
+
+ const handleSnackbarClose = (event, reason)=> {//스낵바 닫기
+ if(reason === 'clickaway'){
+ return;
+ }
+ setSnackState({open: false, msg: ''});
+ }
return (
<React.Fragment>
@@ -26,10 +42,19 @@ export default function App () {
<Tab label = "More Contents" value = {2}/>
</Tabs>
</Box>
-
- {currentTab == 0 && <SearchPage list = {searchResult} onSearch = {setSearchResult} likes = {likes} setLikes = {setLikes}/>}
- {currentTab == 1 && <Favorites align = "center" variant = "h2" likes = {likes} setLikes = {setLikes}/>}
- {currentTab == 2 && <Typography align = "center" variant = "h2"> More Contents </Typography>}
+ {currentTab == 0 &&
+ <>
+ <SearchPage onSearch = {setSearchResult}/>
+ <MusicList list = {searchResult} likes = {likes} toggleFavorite = {toggleFavorite}/>
+ </>
+ }
+ {currentTab == 1 &&
+ <>
+ <Typography align = "center" variant = "h5"> Favorites </Typography>
+ <Favorites list = {searchResult} likes = {likes} toggleFavorite = {toggleFavorite}/>
+ </>}
+ {currentTab == 2 && <Typography align = "center" variant = "h5"> More Contents </Typography>}
+ <SnackMsg open = {snackState.open} message = {snackState.msg} onClose = {handleSnackbarClose}/>
</React.Fragment>
)
}
\ No newline at end of file
diff --git a/src/Favorites.js b/src/Favorites.js
index f473c66..c489f08 100644
--- a/src/Favorites.js
+++ b/src/Favorites.js
@@ -10,23 +10,10 @@ Favorites에서 좋아요를 다시 클릭하면, 그 음악이 사라져야 합
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 }) => {
+const Favorites = ({list, likes, toggleFavorite}) => {
return (
- <div>
- <MusicList list={list} likes={likes} onToggleFavorite={onToggleFavorite} />
- </div>
+ <MusicList list={list} likes={likes} toggleFavorite={toggleFavorite}/>
);
-};
-*/
+}
export default Favorites;
diff --git a/src/MusicList.js b/src/MusicList.js
index 92614b3..32f6d74 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -1,5 +1,4 @@
import React from 'react';
-import SnackMsg from './SnackMsg';
import {Card, CardContent, CardActions, Typography, IconButton} from '@mui/material';
import {Favorite, FavoriteBorder} from '@mui/icons-material';
@@ -18,22 +17,7 @@ const styles = {
},
};
-export default function MusicList ({list, likes, setLikes}) {
- 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`})
- console.log(likes)
- }
-
- const handleSnackbarClose = (event, reason)=> {
- if(reason === 'clickaway'){
- return;
- }
- setSnackState({open: false, msg: ''});
- }
-
+export default function MusicList ({list,likes, toggleFavorite}) {
return (
<div>
{list.map(item => {
@@ -44,14 +28,13 @@ export default function MusicList ({list, likes, setLikes}) {
<Typography variant = "subtitle2"> {item.colletcionCensoredName} </Typography>
</CardContent>
<CardActions>
- <IconButton onClick = {toggleFavorite(item.collectionId, item.collectionCensoredName)}>
+ <IconButton onClick = {() => toggleFavorite(item.collectionId, item.collectionCensoredName)}>
{(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>}
</IconButton>
</CardActions>
</Card>
)
})}
- <SnackMsg open = {snackState.open} message = {snackState.msg} onClose = {handleSnackbarClose}/>
</div>
);
}
\ No newline at end of file
diff --git a/src/SearchPage.js b/src/SearchPage.js
index 445f7f2..2c54009 100644
--- a/src/SearchPage.js
+++ b/src/SearchPage.js
@@ -1,9 +1,7 @@
import React from 'react';
-//import music_list from './data';
-import MusicList from './MusicList.js';
import {Button, TextField} from '@mui/material';
-export default function SearchPage ({list, onSearch, likes, setLikes}) {
+export default function SearchPage ({onSearch}) {
const [searchWord, setSearchWord] = React.useState('');
const handleSearch = (event) => {
@@ -30,7 +28,6 @@ export default function SearchPage ({list, onSearch, likes, setLikes}) {
<Button varient = "contained" collor = "primary" type = "submit" onClick = {handleSearch} style = {{marginLeft: 20}}>Search</Button>
</div>
</form>
- <MusicList list = {list} likes = {likes} setLikes={setLikes}></MusicList>
</React.Fragment>
)
}
\ No newline at end of file
diff --git a/src/SnackMsg.js b/src/SnackMsg.js
index e3766f2..dc94f63 100644
--- a/src/SnackMsg.js
+++ b/src/SnackMsg.js
@@ -11,7 +11,7 @@ const SnackMsg = (props) => {
onClose = {props.onClose}
message = {props.message}>
</Snackbar>
- );
+ )
}
export default SnackMsg;
\ No newline at end of file
--
GitLab