Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
R
react-material
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
HyunjinNoh
react-material
Commits
2a16f88f
Commit
2a16f88f
authored
1 year ago
by
HyunjinNoh
Browse files
Options
Downloads
Patches
Plain Diff
msg commit
parent
33604124
No related branches found
No related tags found
No related merge requests found
Pipeline
#8129
passed
1 year ago
Stage: deploy
Changes
4
Pipelines
1
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
src/App.js
+6
-4
6 additions, 4 deletions
src/App.js
src/Favorites.js
+12
-0
12 additions, 0 deletions
src/Favorites.js
src/MusicList.js
+7
-7
7 additions, 7 deletions
src/MusicList.js
src/SearchPage.js
+3
-34
3 additions, 34 deletions
src/SearchPage.js
with
28 additions
and
45 deletions
src/App.js
+
6
−
4
View file @
2a16f88f
import
React
from
'
react
'
;
import
MusicList
from
'
./MusicList.js
'
;
import
music_list
from
'
./data.js
'
;
import
music_list
from
'
./data
'
;
import
SearchPage
from
'
./SearchPage
'
;
import
Favorites
from
'
./Favorites
'
;
import
{
Box
,
Tabs
,
Tab
,
Typography
,
AppBar
,
CssBaseline
}
from
'
@mui/material
'
;
export
default
function
App
()
{
const
[
currentTab
,
setCurrentTab
]
=
React
.
useState
(
0
);
const
[
searchResult
,
setSearchResult
]
=
React
.
useState
([]);
const
[
likes
,
setLikes
]
=
React
.
useState
({});
const
handleTabChange
=
(
event
,
newValue
)
=>
{
setCurrentTab
(
newValue
);
}
...
...
@@ -26,8 +28,8 @@ export default function App () {
</Tabs>
</Box>
{currentTab == 0 && <SearchPage list = {searchResult} onSearch = {setSearchResult}/>}
{currentTab == 1 && <Typography align = "center" variant = "h2"> Favorites </Typography>}
{currentTab == 0 && <SearchPage list = {searchResult} onSearch = {setSearchResult}
likes = {likes} setLikes = {setLikes}
/>}
{currentTab == 1 && <Typography align = "center" variant = "h2"
likes = {likes} setLikes = {setLikes}
> Favorites </Typography>}
{currentTab == 2 && <Typography align = "center" variant = "h2"> Item Three </Typography>}
</React.Fragment>
)
...
...
This diff is collapsed.
Click to expand it.
src/Favorites.js
+
12
−
0
View file @
2a16f88f
...
...
@@ -6,9 +6,20 @@ Favorites에서 좋아요를 다시 클릭하면, 그 음악이 사라져야 합
3. 상태변수 likes는 SearchPage와 Favorites에 공유되어야 한다.
4. 상태변수 likes를 어느 컴포넌트에 두어야 하며, MusicList, SearchPage, Favorites 컴포넌트의 props는 어떠한 형태로 전달되어야 하는가?
*/
import
React
from
'
react
'
;
import
MusicList
from
'
./MusicList
'
;
const
Favorites
=
({
likes
,
setLikes
})
=>
{
const
list
=
Object
.
entries
(
likes
)
.
filter
(([
_
,
value
])
=>
value
)
.
map
(([
key
])
=>
key
);
return
(
<
MusicList
list
=
{
list
}
likes
=
{
likes
}
setLikes
=
{
setLikes
}
><
/MusicList
>
);
}
/*
const Favorites = ({ list, likes, onToggleFavorite }) => {
return (
<div>
...
...
@@ -16,5 +27,6 @@ const Favorites = ({ list, likes, onToggleFavorite }) => {
</div>
);
};
*/
export
default
Favorites
;
This diff is collapsed.
Click to expand it.
src/MusicList.js
+
7
−
7
View file @
2a16f88f
...
...
@@ -3,7 +3,6 @@ import SnackMsg from './SnackMsg';
import
{
Card
,
CardContent
,
CardActions
,
Typography
,
IconButton
}
from
'
@mui/material
'
;
import
{
Favorite
,
FavoriteBorder
}
from
'
@mui/icons-material
'
;
const
styles
=
{
content
:
{},
layout
:
{
...
...
@@ -18,15 +17,16 @@ const styles = {
marginRight
:
'
auto
'
,
},
};
export
default
function
MusicList
({
list
,
likes
,
onToggleFavorite
})
{
//여기
//const [likes, setLikes] = React.useState({});//SearchPage.js로 옮겨짐
export
default
function
MusicList
({
list
,
likes
,
setLikes
})
{
let
[
snackState
,
setSnackState
]
=
React
.
useState
({
open
:
false
,
msg
:
''
})
/*
const toggleFavorite = (id, name) => () => {
//SearchPage.js로 옮겨짐
const
toggleFavorite
=
(
id
,
name
)
=>
()
=>
{
setLikes
({...
likes
,
[
id
]:
!
likes
[
id
]});
setSnackState
({...
snackState
,
open
:
true
,
msg
:
`
${
name
}
is clicked`
})
console
.
log
(
likes
)
}
*/
const
handleSnackbarClose
=
(
event
,
reason
)
=>
{
if
(
reason
===
'
clickaway
'
){
return
;
...
...
@@ -44,7 +44,7 @@ export default function MusicList ({list, likes, onToggleFavorite}) {//여기
<
Typography
variant
=
"
subtitle2
"
>
{
item
.
colletcionCensoredName
}
<
/Typography
>
<
/CardContent
>
<
CardActions
>
<
IconButton
onClick
=
{
onT
oggleFavorite
(
item
.
collectionId
,
item
.
collectionCensoredName
)}
>
<
IconButton
onClick
=
{
t
oggleFavorite
(
item
.
collectionId
,
item
.
collectionCensoredName
)}
>
{(
likes
[
item
.
collectionId
]
===
true
)
?
<
Favorite
/>
:
<
FavoriteBorder
/>
}
<
/IconButton
>
<
/CardActions
>
...
...
This diff is collapsed.
Click to expand it.
src/SearchPage.js
+
3
−
34
View file @
2a16f88f
import
React
from
'
react
'
;
//import music_list from './data';
import
MusicList
from
'
./MusicList.js
'
;
import
Favorites
from
'
./Favorites.js
'
;
//여기
import
{
Button
,
TextField
}
from
'
@mui/material
'
;
export
default
function
SearchPage
({
list
,
onSearch
})
{
export
default
function
SearchPage
({
list
,
onSearch
,
likes
,
setLikes
})
{
const
[
searchWord
,
setSearchWord
]
=
React
.
useState
(
''
);
const
[
likes
,
setLikes
]
=
React
.
useState
({});
//여기
let
[
snackState
,
setSnackState
]
=
React
.
useState
({
open
:
false
,
msg
:
''
});
//여기
const
handleSearch
=
(
event
)
=>
{
event
.
preventDefault
();
...
...
@@ -24,33 +22,6 @@ export default function SearchPage ({list, onSearch}) {
setSearchWord
(
event
.
target
.
value
);
}
const
toggleFavorite
=
(
id
,
name
)
=>
()
=>
{
setLikes
({...
likes
,
[
id
]:
!
likes
[
id
]});
setSnackState
({...
snackState
,
open
:
true
,
msg
:
`
${
name
}
is clicked`
})
}
/*
let [snackState, setSnackState] = React.useState({open: false, msg:''})
const toggleFavorite = (id, name) => () => {
setLikes({...likes, [id]: !likes[id]});
setSnackState({...snackState, open: true, msg: `${name} is clicked`})
}
*/
/*
const handleToggleFavorite = (id, name) => () => {//여기
setLikes((prevLikes) => {
const updatedLikes = { ...prevLikes };
if (updatedLikes[id]) {
delete updatedLikes[id];
} else {
updatedLikes[id] = true;
}
return updatedLikes;
});
};
*/
return
(
<
React
.
Fragment
>
<
form
style
=
{{
display
:
'
flex
'
,
marginTop
:
20
,
marginBottom
:
15
}}
>
...
...
@@ -59,9 +30,7 @@ export default function SearchPage ({list, onSearch}) {
<
Button
varient
=
"
contained
"
collor
=
"
primary
"
type
=
"
submit
"
onClick
=
{
handleSearch
}
style
=
{{
marginLeft
:
20
}}
>
Search
<
/Button
>
<
/div
>
<
/form
>
<
MusicList
list
=
{
list
}
likes
=
{
likes
}
onToggleFavorite
=
{
toggleFavorite
}
><
/MusicList
>
<
Favorites
list
=
{
list
}
likes
=
{
likes
}
onToggleFavorite
=
{
toggleFavorite
}
><
/Favorites
>
<
MusicList
list
=
{
list
}
likes
=
{
likes
}
setLikes
=
{
setLikes
}
><
/MusicList>
<
/React.Fragment
>
)
//MusicList랑 Favorites 수정함
}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment