diff --git a/src/App.js b/src/App.js index b8ec4933ffaa9c571949dc64c18f3c117bcb4e28..2368b385df5dc21b1c79d57c13cc39a353d3e1f2 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 853188f32e5379a6585433c4a69552c87278dab9..895797c59c35b9c08154ca973b8fa76dd30d70d5 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 672d581d903f6cf6ab67ea63268779658867f4d6..377977f6bb89df7277a2ae142f2f7c32a4748cb7 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 10dc1b36348c875486cf05c2026f2a6903be94f0..c247f7de417a2096e683db63070518e58a2dad56 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