교수님 피드백 반영 ver1

src/App.js

@@ -18,10 +18,10 @@ export default function App () {
     //사이트 처음 들어갈 때 좋아요 목록이랑 좋아요 표시가 잘 나타나도록
     useEffect(() => {
         fetch(`/likes`, {method:'GET'})
-        .then((r) => Response.json())
+        .then((r) => r.json())
         .then((r) => {setFavorites(r), setLikes(r);})
         .catch((error) => {
-            console.error("Error fetching favorites:", e);
+            console.error("Error fetching favorites:", error);
         });         
   }, []);  
             
@@ -33,7 +33,7 @@ export default function App () {
         setSnackState({open: true, msg: `${name} is clicked`})
         
         if (likes[id]) {//이미 좋아요를 한 item이라면
-            fetch(`/likes/${collectionId}`, {method: "DELETE"})//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
+            fetch(`/likes/${id}`, {method: "DELETE"})//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
                 .then((r)=>r.json())
                 .then((r)=>{
                     console.log(r);

src/Favorites.js

@@ -11,11 +11,10 @@ import React from 'react';
 import MusicList from './MusicList';
 
 const Favorites = ({list, likes, toggleFavorite}) => {
-
-  const favList = list.filter(item => likes[item.collectionId])//filter함수를 이용하여 좋아요 한 노래들만 필터링해서 favList에 집어넣기
+  //이미 좋아요 리스트를 서버에서 넘겨받고 있기 때문에 favList 삭제
 
   return (
-      <MusicList list={favList} likes={likes} toggleFavorite={toggleFavorite}/>
+      <MusicList list={list} likes={likes} toggleFavorite={toggleFavorite}/>
   );
 }
 

src/MusicList.js

@@ -25,10 +25,10 @@ export default function MusicList ({list, likes, toggleFavorite}) {
                     <Card sx={styles.card} key={item.collectionId}>
                         <CardContent>
                             <Typography varient = "subtitle1"> {item.artistName} </Typography>
-                            <Typography variant = "subtitle2"> {item.collectionCensoredName} </Typography>
+                            <Typography variant = "subtitle2"> {item.collectionName} </Typography>
                         </CardContent>
                         <CardActions>
-                            <IconButton onClick = {() => toggleFavorite(item.collectionId, item.collectionCensoredName)}>
+                            <IconButton onClick = {() => toggleFavorite(item.collectionId, item.collectionName)}>
                                 {(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>}
                             </IconButton>
                         </CardActions>

src/SnackMsg.js

@@ -6,7 +6,7 @@ const SnackMsg = (props) => {
     return (
         <Snackbar
             open = {props.open}
-            anchorOrigin = {{vertical: 'Bottom', horizontal: 'right'}}
+            anchorOrigin = {{vertical: 'bottom', horizontal: 'right'}}
             autoHideDuration = {3000}
             onClose = {props.onClose}
             message = {props.message}>