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> ); }