diff --git a/public/index.html b/public/index.html
index 479621014dad5b3b6cf9250e8ed3ed4f3a92aae9..eb879c458b62c6dc17a2196fe2d1532589dd2cee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,9 @@
<title> muiBasic </title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+ <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+ <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="app"></div>
diff --git a/src/App.js b/src/App.js
index 1895e5ce02b89c13038934683b0ddf698cde05a6..a89d3299eb07e5372d133ca547c6ca70e024c91d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,47 +1,78 @@
import React from 'react';
import MusicList from './MusicList';
import music_list from './data';
-import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
+import { Box, Tabs, Tab, Typography, AppBar, CssBaseline } from '@mui/material';
import SearchPage from './SearchPage';
import Favorites from './favorites';
-export default function App () {
+export default function App() {
const [currentTab, setCurrentTab] = React.useState(0);
const [searchResult, setSearchResult] = React.useState([]);
const [favorites, setFavorites] = React.useState([]);
+ //const [like, setLike] = React.useState([]);
const handleTabChange = (event, newValue) => {
- setCurrentTab(newValue);
- }
-//수정
- const handleOnLike = (item) => {
- let value = favorites.find(it => it.collectionId == item.collectionId)
- if (value) {
- let i = searchResult.find(it => it.collectionId == item.collectionId)
- if (i) {
- item.like = false;
+ setCurrentTab(newValue);
+ }
+ //수정 - 버전1
+ // const handleOnLike = (item) => {
+ // let value = favorites.find(it => it.collectionId == item.collectionId)
+ // if (value) {
+ // let i = searchResult.find(it => it.collectionId == item.collectionId)
+ // if (i) {
+ // item.like = false;
+ // }
+ // let remains = favorites.filter((it) => it.collectionId !== item.collectionId);
+ // setFavorites(remains);
+ // } else {
+ // let i = searchResult.find(it => it.collectionId == item.collectionId)
+ // if (i) {
+ // item.like = true;
+ // }
+ // setFavorites([...favorites, item]);
+ // }
+ // };
+
+ //버전2
+ 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 remains = favorites.filter((it) => it.collectionId !== item.collectionId);
- setFavorites(remains);
- } else {
- let i = searchResult.find(it => it.collectionId == item.collectionId)
- if (i) {
- item.like = true;
+ 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 }]);
}
+
+ // const updatedSearchResult = searchResult.map((it) =>
+ // it.collectionId === item.collectionId ? { ...it, like: !favoriteItem } : it
+ // );
+ // setSearchResult(updatedSearchResult);
};
return (
<React.Fragment>
<AppBar position="fixed">
- <Typography align = "center" variant = "h3" color = "inherit">이나현's Favorite music</Typography>
+ <Typography align="center" variant="h3" color="inherit">이나현's Favorite music</Typography>
</AppBar>
- <div style = {{height: 60, width: '100%'}}></div>
-
-
- <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
+ <div style={{ height: 60, width: '100%' }}></div>
+
+
+ <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={currentTab} onChange={handleTabChange} aria-label="basic tabs"
centered>
<Tab label="Search Music" value={0} />
@@ -50,8 +81,8 @@ export default function App () {
</Tabs>
</Box>
- {currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult}/>}
- {currentTab == 1 && <Favorites list={favorites} onLike={handleOnLike}/> }
+ {currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult} onLike={handleOnLike} />}
+ {currentTab == 1 && <Favorites list={favorites} onLike={handleOnLike} />}
{currentTab == 2 &&
<Typography align="center" variant="h2">Item Three</Typography>}
</React.Fragment>
diff --git a/src/MusicList.js b/src/MusicList.js
index 2da44d0b14b9daa2ec7692ab5baea315a8a0e58f..9890c29a5ada86534ff26b5986cfb250811ed1c0 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -1,27 +1,27 @@
import React from 'react';
-import {Card, CardContent, CardActions, Typography, IconButton} from '@mui/material';
-import {Favorite, FavoriteBorder} from '@mui/icons-material';
+import { Card, CardContent, CardActions, Typography, IconButton } from '@mui/material';
+import { Favorite, FavoriteBorder } from '@mui/icons-material';
const styles = {
- content : {},
- layout : {
- display : 'flex',
- justifyContent : 'center'
+ content: {},
+ layout: {
+ display: 'flex',
+ justifyContent: 'center'
},
card: {
minWidth: 275,
maxWidth: 600,
- marginBottom : "20pt",
- marginLeft : 'auto',
- marginRight : 'auto',
+ marginBottom: "20pt",
+ marginLeft: 'auto',
+ marginRight: 'auto',
},
};
-export default function MusicList ({list, onLike}) {
- let [snackState, setSnackState] = React.useState({open : false, msg : ''})
- const [likes, setLikes] = React.useState({});
+export default function MusicList({ list, onLike }) {
+ let [snackState, setSnackState] = React.useState({ open: false, msg: '' })
+ //const [likes, setLikes] = React.useState({});
- const toggleFavorite = (id) => () => {
+ const toggleFavorite = (item) => () => {
//React Hooks useState() with Object
//https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object
//setLikes({...likes, [id] : !likes[id]});
@@ -29,35 +29,36 @@ export default function MusicList ({list, onLike}) {
//temp[id] = !temp[id]
//setlikes(temp) => 좋아요 이미 눌려져 있는거 다시 누르면 좋아요 취소
//setSnackState({...snackState, open : true, msg : `${id} is clicked` })
- onLike(id);
+ onLike(item);
}
const handleSnackbarClose = (event, reason) => {
if (reason === 'clickaway') {
- return;
- }
- setSnackState({open : false, msg : ''});
- <SnackMsg open = {snackState.open} message={snackState.msg}
- onClose={handleSnackbarClose}/>
- }
-
-
+ return;
+ }
+ setSnackState({ open: false, msg: '' });
+ <SnackMsg open={snackState.open} message={snackState.msg}
+ onClose={handleSnackbarClose} />
+ }
+
+
return (
<div>
{list.map(item => {
- return(
- <Card sx = {styles.card} key={item.collectionName}>
- <CardContent>
- <Typography variant="subtitle1"> {item.artistName}</Typography>
- <Typography variant="subtitle2"> {item.collectionCensoredName}</Typography>
- </CardContent>
- <CardActions>
- <IconButton onClick={toggleFavorite(item)}>
- {item.like ? <Favorite /> : <FavoriteBorder />}
- </IconButton>
- </CardActions>
- </Card>)
+ return (
+ <Card sx={styles.card} key={item.collectionId}>
+ <CardContent>
+ <Typography variant="subtitle1"> {item.artistName} </Typography>
+ <Typography variant="subtitle2"> {item.collectionCensoredName}</Typography>
+ </CardContent>
+ <CardActions>
+ <IconButton onClick={toggleFavorite(item)}>
+ {item.like ? <Favorite /> : <FavoriteBorder />}
+ </IconButton>
+ </CardActions>
+ </Card>
+ );
})}
</div>
);
diff --git a/src/SearchPage.js b/src/SearchPage.js
index 00890308086245a0300154b46969ed6f8cb33209..22ee702986a6bdf7220e983d61a57cf269f01b2d 100644
--- a/src/SearchPage.js
+++ b/src/SearchPage.js
@@ -1,61 +1,61 @@
import React from 'react';
-import {Button, TextField} from '@mui/material';
+import { Button, TextField } from '@mui/material';
import MusicList from './MusicList';
-export default function SearchPage({list, onSearch}){
- const [searchWord, setSearchWord] = React. useState('');
+export default function SearchPage({ list, onSearch, onLike }) {
+ const [searchWord, setSearchWord] = React.useState('');
const handleSearch = (event) => {
event.preventDefault();
console.log(searchWord);
setSearchWord('');
fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
- .then(r => r.json()).then(r => {
- console.log(r);
- const updatedList = r.results.map(item => ({
- ...item,
- show: true,
- liked: false
- }));
- onSearch(updatedList);
- setSearchWord('');
- }).catch(e => console.log('error when search musician'))
+ .then(r => r.json()).then(r => {
+ console.log(r);
+ // const updatedList = r.results.map(item => ({
+ // ...item,
+ // show: true,
+ // liked: false
+ // }));
+ onSearch(r.results);
+ setSearchWord('');
+ }).catch(e => console.log('error when search musician'))
}
const handleSearchTextChange = (event) => {
setSearchWord(event.target.value);
}
- const handleLike = (collectionName, liked) => {
- const updatedList = list.map(item => {
- if (item.collectionName === collectionName) {
- return {
- ...item,
- liked
- };
- }
- return item;
- });
- onSearch(updatedList);
- };
-
- return(
+ // const handleLike = (collectionName, liked) => {
+ // const updatedList = list.map(item => {
+ // if (item.collectionName === collectionName) {
+ // return {
+ // ...item,
+ // liked
+ // };
+ // }
+ // return item;
+ // });
+ // onSearch(updatedList);
+ // };
+
+ return (
<React.Fragment>
- <form style={{display: 'flex', marginTop : 20, marginBottom : 15}}>
- <div style={{display : 'flex', marginLeft : 'auto', marginRight : 'auto',}}>
- <TextField variant="outlined" label="Music Album Search" type="search" style={{width : 450}}
+ <form style={{ display: 'flex', marginTop: 20, marginBottom: 15 }}>
+ <div style={{ display: 'flex', marginLeft: 'auto', marginRight: 'auto', }}>
+ <TextField variant="outlined" label="Music Album Search" type="search" style={{ width: 450 }}
onChange={handleSearchTextChange} value={searchWord}>
</TextField>
<Button variant="contained" color="primary"
type="submit" onClick={handleSearch}
- style={{marginLeft : 20}}>
+ style={{ marginLeft: 20 }}>
Search
</Button>
</div>
</form>
- <MusicList list={list} onLike={handleLike} />
+ <MusicList list={list} onLike={onLike} />
</React.Fragment>
)
}
\ No newline at end of file
diff --git a/src/favorites.js b/src/favorites.js
index 6c28a0067e96625904cd8aceb2d7609227aec902..962c751a8c80b4e4603dc71f2085af8c95cebe9e 100644
--- a/src/favorites.js
+++ b/src/favorites.js
@@ -2,11 +2,12 @@ import React from 'react';
import { Typography } from '@mui/material';
import MusicList from './MusicList';
-const Favorites = ({list, onLike}) => {
+const Favorites = ({ list, onLike }) => {
return (
- <div>
- <MusicList list={list} onLike={onLike}/>
- </div>
+ <React.Fragment>
+ <MusicList list={list} onLike={onLike} />
+ </React.Fragment>
+
);
};