MusicList.js

package.json

@@ -31,6 +31,6 @@
     "UI",
     "ReactJS"
   ],
-  "author": "Jae Young Choi",
+  "author": "Nyunjin Noh",
   "license": "MIT"
 }

src/App.js

 import React from 'react';
-import Typography from '@mui/material/Typography';
+import {Typography, AppBar} from '@mui/material';
+import MusicList from './MusicList';
+import music_list from './data';
 
 export default function App () {
-    return <Typography variant="h1">Hello World</Typography>
+    return (
+        <React.Fragment>
+            <AppBar positions = "fixed">
+                <Typography align = "center" variant = "h3" color = "inherit">Favorite Music</Typography>
+            </AppBar>
+
+            <div style = {{height: 60, width: '100%'}}></div>
+            <MusicList list = {music_list}></MusicList> 
+        </React.Fragment>
+    )    
 }
 

src/MusicList.js

+import React from 'react';
+import {Card, CardContent, Typography} from '@mui/material';
+
+export default function ({list}) {
+    return (
+        <div>
+            {list.results.map(item => {
+                return (
+                    <Card>
+                        <CardContent>
+                            <Typography varient = "subtitle1"> {item.artistName} </Typography>
+                            <Typography variant = "subtitle2"> {item.colletcionCensoredName} </Typography>
+                        </CardContent>
+                    </Card>
+                )
+            })}
+        </div>
+    );
+}
\ No newline at end of file