diff --git a/src/App.js b/src/App.js
index 834f3f8dd0505496e789dbe7760dd02d29880780..5bf3b37d046224b4294accd9e360071e4bb69c43 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 f473c66508f6c195721e5768c081a2be59f76470..c489f085bb3dae866818934992fd8eff5b5b63cc 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 92614b3692b7b5b5d545da9303d74c2a0af4bd8b..32f6d744799299347f15b22258598f6e37308e0c 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 445f7f258502bd28e7d00130bdab46c8cf28e7df..2c54009f2d49ad733749c4ef3df58b7893a699e6 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 e3766f2d31fb9a6be3c2b55c50a9bf182431721b..dc94f63db66fbcb0fc1278bbe6a30230ee78fcc9 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