2

src/App.js

 import React from 'react';
 import { Typography, AppBar } from '@mui/material';
+import MusicList from './MusicList';
+import music_list from './data';
 
 export default function App () {
     return (
         <React.Fragment>
+
             <AppBar position="fixed">
                 <Typography align="center" variant="h3" color="inherit">Tae Wook's 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 MusicList ({list}) {
+    return (
+        <div>
+            {list.result.map(item => {
+                return (
+                <Card>
+                    <CardContent>
+                        <Typography variant="subtitle1"> {item.artistName}</Typography>
+                        <Typography variant="subtitle2"> {item.collectionCensoredName}</Typography>
+                    </CardContent>
+                </Card>)
+            })}
+        </div>
+    );
+}
\ No newline at end of file