diff --git a/src/App.js b/src/App.js
index c2d70e5dd7b26d04734c72d828a6f400323f470e..b8ec4933ffaa9c571949dc64c18f3c117bcb4e28 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MusicList from './MusicList';
-import music_list from './data';
-import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
+import MusicList from './MusicList.js';
+import music_list from './data.js';
 import SearchPage from './SearchPage';
+import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
 
 export default function App () {
     const [currentTab, setCurrentTab] = React.useState(0);
-    const [searchResul, setSearchResult] = React.useState([]);
+    const [searchResult, setSearchResult] = React.useState([]);
     const handleTabChange = (event, newValue) => {
         setCurrentTab(newValue);
     }
diff --git a/src/Favorites.js b/src/Favorites.js
new file mode 100644
index 0000000000000000000000000000000000000000..853188f32e5379a6585433c4a69552c87278dab9
--- /dev/null
+++ b/src/Favorites.js
@@ -0,0 +1,6 @@
+/*
+1. 전역변수 사용하지 말것
+2. SearchPage에서 가수 2~3명의 음악을 검색하고, 좋아요를 클릭하고, 
+Favorites 페이지를 보았을 때, 여러 가수들의 노래들이 표시되어야 하고, 
+Favorites에서 좋아요를 다시 클릭하면, 그 음악이 사라져야 합니다.
+*/
diff --git a/src/MusicList.js b/src/MusicList.js
index 72565a43f22b8f417f2b09c574d6c906f828c819..672d581d903f6cf6ab67ea63268779658867f4d6 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -19,9 +19,9 @@ const styles = {
 export default function MusicList ({list}) {
     const [likes, setLikes] = React.useState({});
     let [snackState, setSnackState] = React.useState({open: false, msg:''})
-    const toggleFavorite = (id) => () => {
+    const toggleFavorite = (id, name) => () => {
         setLikes({...likes, [id]: !likes[id]});
-        setSnackState({...snackState, open: true, msg: `${id} is clicked`})
+        setSnackState({...snackState, open: true, msg: `${name} is clicked`})
     }
     const handleSnackbarClose = (event, reason)=> {
         if(reason === 'clickaway'){
@@ -33,13 +33,13 @@ export default function MusicList ({list}) {
         <div>
             {list.map(item => {
                 return (
-                    <Card sx={styles.card} key={(item.collectionId)}>
+                    <Card sx={styles.card} key={item.collectionId}>
                         <CardContent>
                             <Typography varient = "subtitle1"> {item.artistName} </Typography>
                             <Typography variant = "subtitle2"> {item.colletcionCensoredName} </Typography>
                         </CardContent>
                         <CardActions>
-                            <IconButton onClick = {toggleFavorite(item.collectionName)}>
+                            <IconButton onClick = {toggleFavorite(item.collectionId, item.collectionCensoredName)}>
                                 {(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>}
                             </IconButton>
                         </CardActions>
diff --git a/src/SearchPage.js b/src/SearchPage.js
index 2c4ab19e092dd34d4a78b71604b8fc84cc757c95..10dc1b36348c875486cf05c2026f2a6903be94f0 100644
--- a/src/SearchPage.js
+++ b/src/SearchPage.js
@@ -1,6 +1,6 @@
 import React from 'react';
+import MusicList from './MusicList.js';
 import {Button, TextField} from '@mui/material';
-import MusicList from './MusicList';
 
 export default function SearchPage ({list, onSearch}) {
     const [searchWord, setSearchWord] = React.useState('');