diff --git a/src/App.js b/src/App.js
index 9d4a4dcc6adf19c6c170f1ccb054003d5910ef37..8d0a57e9f872ca7d19f14c0715fcb62fc2341a5d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -34,7 +34,45 @@ export default function App() {
     // }
     // };
 
-    //버전2
+    //버전2 - 돌아가긴 함. (최종 버전 spring 병합이 안됌)
+    // const handleOnLike = (item) => {
+    //     let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
+
+    //     if (favoriteItem) {
+    //         // item.like = false;
+    //         //favorite & search 둘다 삭제
+    //         let a = searchResult.find((it) => it.collectionId === item.collectionId);
+    //         if (a) {
+    //             item.like = false;
+    //         }
+    //         let b = favorites.filter((it) => it.collectionId !== item.collectionId);
+    //         setFavorites(b);
+    //     }
+    //     else {
+    //         let a = searchResult.find((it) => it.collectionId === item.collectionId);
+    //         if (a) {
+    //             item.like = true;
+    //         }
+    //         setFavorites([...favorites, item]);
+
+    //         //setFavorites([...favorites, { ...item, like: true }]);
+
+    //         //좋아요 아이템 spring 서버로 보내기
+    //         axios.post('/likes', {
+    //             collectionId: item.collectionId,
+    //             collectionType: item.collectionType,
+    //             artistId: item.artistId
+    //         }
+    //         )
+    //             .then((response) => {
+    //                 console.log(response.data);
+    //             })
+    //             .catch((error) => {
+    //                 console.error('Error:', error);
+    //             });
+    //     }
+
+    //버전3 - 연결시키기 위해 노력
     const handleOnLike = (item) => {
         let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
 
@@ -47,9 +85,18 @@ export default function App() {
             }
             let b = favorites.filter((it) => it.collectionId !== item.collectionId);
             setFavorites(b);
+
+            axios.delete(`/likes/${item.collectionId}`)
+                .then((response) => {
+                    console.log(response.data);
+                })
+                .catch((error) => {
+                    console.error('Error: ', error);
+                })
         }
+
         else {
-            let a = searchResult.find((it) => it.collectionId === item.collectionId);
+            let a = searchResult.find((it) => it.collectionId !== item.collectionId);
             if (a) {
                 item.like = true;
             }
@@ -58,9 +105,15 @@ export default function App() {
             //setFavorites([...favorites, { ...item, like: true }]);
 
             //좋아요 아이템 spring 서버로 보내기
-            axios.post('/likes', { collectionId: item.collectionId },
-                { collectionType: item.collectionType },
-                { artistId: item.artistId }
+            axios.post('/likes', {
+                collectionId: item.collectionId,
+                collectionType: item.collectionType,
+                artistId: item.artistId,
+                artistName: item.artistName,
+                artistViewUrl: item.artistViewUrl,
+                collectionName: item.collectionName,
+                collectionViewUrl: item.collectionViewUrl
+            }
             )
                 .then((response) => {
                     console.log(response.data);
@@ -70,6 +123,52 @@ export default function App() {
                 });
         }
 
+        // const handleOnLike = (item) => {
+        //     let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
+
+        //     if (favoriteItem) {
+        //         let a = searchResult.find((it) => it.collectionId === item.collectionId);
+        //         if (a) {
+        //             item.like = false;
+        //         }
+        //         let updatedFavorites = favorites.filter((it) => it.collectionId !== item.collectionId);
+        //         setFavorites(updatedFavorites);
+
+        //         // 좋아요 아이템 spring 서버로 보내기
+        //         axios.post('/likes', {
+        //             collectionId: item.collectionId,
+        //             collectionType: item.collectionType,
+        //             artistId: item.artistId
+        //         })
+        //             .then((response) => {
+        //                 console.log(response.data);
+        //             })
+        //             .catch((error) => {
+        //                 console.error('Error:', error);
+        //             });
+        //     } else {
+        //         let a = searchResult.find((it) => it.collectionId === item.collectionId);
+        //         if (a) {
+        //             item.like = true;
+        //         }
+        //         setFavorites([...favorites, item]);
+
+        //         // 좋아요 아이템 spring 서버로 보내기
+        //         axios.post('/likes', {
+        //             collectionId: item.collectionId,
+        //             collectionType: item.collectionType,
+        //             artistId: item.artistId
+        //         })
+        //             .then((response) => {
+        //                 console.log(response.data);
+        //             })
+        //             .catch((error) => {
+        //                 console.error('Error:', error);
+        //             });
+        //     }
+        // };
+
+
         // const updatedSearchResult = searchResult.map((it) =>
         //     it.collectionId === item.collectionId ? { ...it, like: !favoriteItem } : it
         // );
diff --git a/src/SearchPage.js b/src/SearchPage.js
index 9dfa97fc969910aadf9c0a985f5212be5b0ede30..92a6d69fd64bf24a7bcda519aac2655d121bd201 100644
--- a/src/SearchPage.js
+++ b/src/SearchPage.js
@@ -33,7 +33,7 @@ export default function SearchPage({ list, onSearch, onLike }) {
         //         console.error('Error:', error);
         //     });
 
-        fetch(`/musicSearch/${encodeURIComponent(searchWord)}`, {
+        fetch(`/musicSearch/${(searchWord)}`, {
             method: 'GET', // HTTP 메서드는 GET입니다.
             headers: {},
         })
diff --git a/src/snackbar.js b/src/snackbar.js
index ff04dad33c73aabc8ab0e55363dad1d235f3c6f8..baf024e7008f7e0ccf7c22c3d1751329ef367378 100644
--- a/src/snackbar.js
+++ b/src/snackbar.js
@@ -1,19 +1,19 @@
 import React from 'react';
 
-import {Snackbar} from '@mui/material';
+import { Snackbar } from '@mui/material';
 
 const SnackMsg = (props) => {
     return (
         <Snackbar
-            open = {props.open}
-            anchorOrigin={{vertical : 'bottom', horizontal : 'right'}}
+            open={props.open}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
             autoHideDuration={3000}
-            onClose = {props.onClose}
+            onClose={props.onClose}
             message={props.message}>
-            <Alert onClose={props.onClose} severity="success" sx={{width: '100%'}}>
+            <Alert onClose={props.onClose} severity="success" sx={{ width: '100%' }}>
                 {props.message}
             </Alert>
-            </Snackbar>
+        </Snackbar>
     );
 }