From 336041241e59b59bf306f2d985e280d6da3b2395 Mon Sep 17 00:00:00 2001 From: Hyunjin <noh0605@ajou.ac.kr> Date: Sat, 15 Jul 2023 16:30:31 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9D=BC=EB=8B=A8=20Favorite=20=EC=9E=98=20?= =?UTF-8?q?=EC=9E=91=EB=8F=99=20=EC=95=88=20=EB=90=98=EB=8A=94=20=EC=83=81?= =?UTF-8?q?=ED=83=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 +- src/Favorites.js | 14 ++++++++++++++ src/MusicList.js | 13 +++++++++---- src/SearchPage.js | 35 ++++++++++++++++++++++++++++++++++- 4 files changed, 58 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index b8ec493..2368b38 100644 --- a/src/App.js +++ b/src/App.js @@ -27,7 +27,7 @@ export default function App () { </Box> {currentTab == 0 && <SearchPage list = {searchResult} onSearch = {setSearchResult}/>} - {currentTab == 1 && <Typography align = "center" variant = "h2"> Item Two </Typography>} + {currentTab == 1 && <Typography align = "center" variant = "h2"> 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 853188f..895797c 100644 --- a/src/Favorites.js +++ b/src/Favorites.js @@ -3,4 +3,18 @@ 2. SearchPage에서 가수 2~3명의 음악을 검색하고, 좋아요를 클릭하고, Favorites 페이지를 보았을 때, 여러 가수들의 노래들이 표시되어야 하고, Favorites에서 좋아요를 다시 클릭하면, 그 음악이 사라져야 합니다. +3. 상태변수 likes는 SearchPage와 Favorites에 공유되어야 한다. +4. 상태변수 likes를 어느 컴포넌트에 두어야 하며, MusicList, SearchPage, Favorites 컴포넌트의 props는 어떠한 형태로 전달되어야 하는가? */ +import React from 'react'; +import MusicList from './MusicList'; + +const Favorites = ({ list, likes, onToggleFavorite }) => { + return ( + <div> + <MusicList list={list} likes={likes} onToggleFavorite={onToggleFavorite} /> + </div> + ); +}; + +export default Favorites; diff --git a/src/MusicList.js b/src/MusicList.js index 672d581..377977f 100644 --- a/src/MusicList.js +++ b/src/MusicList.js @@ -1,7 +1,9 @@ import React from 'react'; +import SnackMsg from './SnackMsg'; import {Card, CardContent, CardActions, Typography, IconButton} from '@mui/material'; import {Favorite, FavoriteBorder} from '@mui/icons-material'; + const styles = { content: {}, layout: { @@ -16,19 +18,22 @@ const styles = { marginRight: 'auto', }, }; -export default function MusicList ({list}) { - const [likes, setLikes] = React.useState({}); +export default function MusicList ({list, likes, onToggleFavorite}) {//여기 + //const [likes, setLikes] = React.useState({});//SearchPage.js로 옮겨짐 let [snackState, setSnackState] = React.useState({open: false, msg:''}) - const toggleFavorite = (id, name) => () => { + /* + const toggleFavorite = (id, name) => () => {//SearchPage.js로 옮겨짐 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 ( <div> {list.map(item => { @@ -39,7 +44,7 @@ export default function MusicList ({list}) { <Typography variant = "subtitle2"> {item.colletcionCensoredName} </Typography> </CardContent> <CardActions> - <IconButton onClick = {toggleFavorite(item.collectionId, item.collectionCensoredName)}> + <IconButton onClick = {onToggleFavorite(item.collectionId, item.collectionCensoredName)}> {(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>} </IconButton> </CardActions> diff --git a/src/SearchPage.js b/src/SearchPage.js index 10dc1b3..c247f7d 100644 --- a/src/SearchPage.js +++ b/src/SearchPage.js @@ -1,9 +1,12 @@ import React from 'react'; import MusicList from './MusicList.js'; +import Favorites from './Favorites.js';//여기 import {Button, TextField} from '@mui/material'; export default function SearchPage ({list, onSearch}) { const [searchWord, setSearchWord] = React.useState(''); + const [likes, setLikes] = React.useState({});//여기 + let [snackState, setSnackState] = React.useState({open: false, msg:''});//여기 const handleSearch = (event) => { event.preventDefault(); @@ -20,6 +23,34 @@ export default function SearchPage ({list, onSearch}) { const handleSearchTextChange = (event) => { 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}}> @@ -28,7 +59,9 @@ 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}></MusicList> + <MusicList list = {list} likes = {likes} onToggleFavorite = {toggleFavorite}></MusicList> + <Favorites list = {list} likes = {likes} onToggleFavorite = {toggleFavorite}></Favorites> </React.Fragment> ) + //MusicList랑 Favorites 수정함 } \ No newline at end of file -- GitLab