App.js

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 [snackState, setSnackState] = React.useState({open: false, msg:''})//스낵바열림결과
    const [favorites, setFavorites] = React.useState([]);//재검색해도 Favorites목록이 리셋되는 것을 막기 위해 Favorites 모아놓은 상태변수 만듦

    const handleTabChange = (event, newValue) => {//탭
        setCurrentTab(newValue);
    }

    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)=> {//스낵바 닫기
        if(reason === 'clickaway'){
            return;
        }
        setSnackState({open: false, msg: ''});
    }
    
    return (
        <React.Fragment>
            <AppBar positions = "fixed">
                <Typography align = "center" variant = "h3" color = "inherit">Hyunjin's Favorite Music</Typography>
            </AppBar>

            <div style = {{height: 60, width: '100%'}}></div>
            <Box sx = {{borderBottom: 1, borderColor: 'divider'}}>
                <Tabs value = {currentTab} onChange = {handleTabChange} aria-label = "basic tabs" centered>
                    <Tab label = "Search Music" value = {0}/>
                    <Tab label = "Favorites" value = {1}/>
                    <Tab label = "More Contents" value = {2}/>
                </Tabs>
            </Box>
            {currentTab == 0 && 
            <>
            <SearchPage onSearch = {setSearchResult}/> 
            <MusicList list = {searchResult} likes = {likes} toggleFavorite = {toggleFavorite}/>
            </>
            }
            {currentTab == 1 && 
            <>
            <Typography align = "center" variant = "h5"> Favorites </Typography>
            <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}/>
        </React.Fragment>
    )    
}