diff --git a/src/App.js b/src/App.js index a828a64bb0c3720147274f844a798dc0b4858e03..1dd15cff6ac057a210849ad10084702b7752d946 100644 --- a/src/App.js +++ b/src/App.js @@ -11,7 +11,8 @@ export default function App () { const [likes, setLikes] = React.useState({});//좋아요결과 const [snackState, setSnackState] = React.useState({open: false, msg:''})//스낵바열림결과 - + const [favorites, setFavorites] = React.useState([]);//재검색해도 Favorites목록이 리셋되는 것을 막기 위해 Favorites 모아놓은 상태변수 만듦 + const handleTabChange = (event, newValue) => {//탭 setCurrentTab(newValue); } @@ -19,6 +20,15 @@ export default function App () { const toggleFavorite = (id, name) => {//좋아요와 스낵바 상태 업데이트 setLikes(prevLikes => ({...prevLikes, [id]: !prevLikes[id]}));//기존의 모든 키-값 쌍을 복사한다음 뒤에 써져있는대로 업데이트함 setSnackState({open: true, msg: `${name} is clicked`}) + if (likes[id]) {//이미 좋아요를 한 item이라면 + setFavorites(prevFavorites => prevFavorites.filter(item => item.collectionId !== id)); + } + else {//그게 아니라서 굳이 신경쓸 필요 없으면 + const selectedItem = searchResult.find(item => item.collectionId === id); + if (selectedItem) { + setFavorites(prevFavorites => [...prevFavorites, selectedItem]); + } + } } const handleSnackbarClose = (event, reason)=> {//스낵바 닫기 @@ -51,7 +61,7 @@ export default function App () { {currentTab == 1 && <> <Typography align = "center" variant = "h5"> Favorites </Typography> - <Favorites list = {searchResult} likes = {likes} toggleFavorite = {toggleFavorite}/> + <Favorites list = {favorites} likes = {likes} toggleFavorite = {toggleFavorite}/> </>} {currentTab == 2 && <Typography align = "center" variant = "h5"> More Contents </Typography>} <SnackMsg open = {snackState.open} message = {snackState.msg} onClose = {handleSnackbarClose}/>