Skip to content
Snippets Groups Projects
Commit ae1f6dd8 authored by HyunjinNoh's avatar HyunjinNoh
Browse files

0727 ver1

parent 8c9c94c8
Branches
No related tags found
No related merge requests found
Pipeline #8486 passed
import React from 'react'; import React, { useEffect } from 'react';
import SearchPage from './SearchPage'; import SearchPage from './SearchPage';
import Favorites from './Favorites'; import Favorites from './Favorites';
import MusicList from './MusicList'; import MusicList from './MusicList';
import SnackMsg from './SnackMsg'; import SnackMsg from './SnackMsg';
import {Box, Tabs, Tab, Typography, AppBar} from '@mui/material'; import {Box, Tabs, Tab, Typography, AppBar} from '@mui/material';
import { LineAxisOutlined } from '@mui/icons-material';
export default function App () { export default function App () {
const [currentTab, setCurrentTab] = React.useState(0);//탭 const [currentTab, setCurrentTab] = React.useState(0);//탭
...@@ -14,23 +15,58 @@ export default function App () { ...@@ -14,23 +15,58 @@ export default function App () {
const [favorites, setFavorites] = React.useState([]);//재검색해도 Favorites목록이 리셋되는 것을 막기 위해 Favorites 모아놓은 상태변수 만듦 const [favorites, setFavorites] = React.useState([]);//재검색해도 Favorites목록이 리셋되는 것을 막기 위해 Favorites 모아놓은 상태변수 만듦
//여기에 useEffect로 favorites랑 likes관리 //여기에 useEffect로 favorites랑 likes관리
//useEffect 안에 console.log(~~, []) 이런 식으로 useEffect가 1번만 작동하게 만들기 //사이트 처음 들어갈 때 좋아요 목록이랑 좋아요 표시가 잘 나타나도록
useEffect(() => {
}, []);
const handleTabChange = (event, newValue) => {//탭 const handleTabChange = (event, newValue) => {//탭
setCurrentTab(newValue); setCurrentTab(newValue);
} }
const toggleFavorite = (id, name) => {//좋아요와 스낵바 상태 업데이트 const toggleFavorite = (id, name) => {//좋아요와 스낵바 상태 업데이트
setLikes(prevLikes => ({...prevLikes, [id]: !prevLikes[id]}));//기존의 모든 키-값 쌍을 복사한다음 뒤에 써져있는대로 업데이트함
setSnackState({open: true, msg: `${name} is clicked`}) setSnackState({open: true, msg: `${name} is clicked`})
if (likes[id]) {//이미 좋아요를 한 item이라면 if (likes[id]) {//이미 좋아요를 한 item이라면
fetch(`/likes/${collectionId}`, {method: "DELETE"})
.then((r)=>r.json())
.then((r)=>{
console.log(r);
console.log("DELETE");
setLikes(prevLikes => ({...prevLikes, [id]: !prevLikes[id]}));//기존의 모든 키-값 쌍을 복사한다음 뒤에 써져있는대로 업데이트함
setFavorites(prevFavorites => prevFavorites.filter(item => item.collectionId !== id)); setFavorites(prevFavorites => prevFavorites.filter(item => item.collectionId !== id));
//여기에 DELETE 연결 })
.catch((error) => {
console.error('Error deleting likes:', error);
});
} }
//참고 코드
/*
fetch(`/musicSearch/${searchWord}`)//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
.then(r => r.json()).then(r => {
console.log(r);
onSearch(r.results);
setSearchWord('');//searchWord 변수 값을 다시 빈 문자열로 초기화
}).catch(e => console.log('error when search musician));
*/
else {//그게 아니라서 굳이 신경쓸 필요 없으면 else {//그게 아니라서 굳이 신경쓸 필요 없으면
const selectedItem = searchResult.find(item => item.collectionId === id); const selectedItem = searchResult.find(item => item.collectionId === id);
if (selectedItem) { if (selectedItem) {
setFavorites(prevFavorites => [...prevFavorites, selectedItem]);
//여기에 POST 연결 //여기에 POST 연결
fetch(`/likes`)
.then((r)=>r.json())
.then((r)=>{
console.log(r);
console.log("POST");
setLikes(prevLikes => ({ ...prevLikes, [id]: !prevLikes[id] }));
setFavorites(prevFavorites => [...prevFavorites, selectedItem]);
//이제 myspringweb의 controller로 가서 postLikes함수를 호출해야 함
})
.catch((error) => {
console.error('Error deleting likes:', error);
});
} }
} }
......
...@@ -6,14 +6,13 @@ export default function SearchPage ({onSearch}) { ...@@ -6,14 +6,13 @@ export default function SearchPage ({onSearch}) {
const handleSearch = (event) => { const handleSearch = (event) => {
event.preventDefault(); event.preventDefault();
console.log(searchWord); console.log(searchWord);//searchWord 변수의 값을 콘솔에 기록
setSearchWord(''); setSearchWord('');//searchWord 변수 빈 문자열로 초기화
fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`) fetch(`/musicSearch/${searchWord}`)//fetch 기능을 사용하여 서버에 대한 네트워크 요청을 보냄
// fetch(`/musicSearch/${searchWord}`)로 바꾸기
.then(r => r.json()).then(r => { .then(r => r.json()).then(r => {
console.log(r); console.log(r);//
onSearch(r.results); onSearch(r.results);
setSearchWord(''); setSearchWord('');//searchWord 변수 값을 다시 빈 문자열로 초기화
}).catch(e => console.log('error when search musician')); }).catch(e => console.log('error when search musician'));
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment