material-ui apply

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.10.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

 import React, { Component } from 'react';
 import './App.css';
-import Customer from './components/Customer'
+import Customer from './components/Customer';
+import Paper from '@material-ui/core/Paper';
+import Table from '@material-ui/core/Table';
+import TableHead from '@material-ui/core/TableHead';
+import TableBody from '@material-ui/core/TableBody';
+import TableRow from '@material-ui/core/TableRow';
+import TableCell from '@material-ui/core/TableCell';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing.unit*3,
+    overflowX: "auto"
+  },
+  table: {
+    minWidth: 1080
+  }
+})
 
 const customers =[
   {
@@ -32,18 +50,28 @@ const customers =[
 
 class App extends Component {
   render() {
+    const { classes } = this.props;
     return (
-      <div>
-        {
-          customers.map(c=> { return (<Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />
-            )
-          })
-        }
-      </div>
+      <Paper className = {classes.root}>
+        <Table className = {classes.table}>
+          <TableHead>
+            <TableRow>
+              <TableCell>번호</TableCell>
+              <TableCell>이미지</TableCell>
+              <TableCell>이름</TableCell>
+              <TableCell>생년월일</TableCell>
+              <TableCell>성별</TableCell>
+              <TableCell>직업</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+        {customers.map(c=> { return (<Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />)})}
+          </TableBody>
+        </Table>
+      </Paper>
     );
   }
 }
 
-
-
-export default App;
+export default withStyles(styles)(App);

 import React from 'react';
+import TableRow from '@material-ui/core/TableRow';
+import TableCell from '@material-ui/core/TableCell';
 
 class Customer extends React.Component {
     render(){
         return(
-            <div>
-                <CustomerProfile id ={this.props.id} image = {this.props.image} name = {this.props.name}/>
-                <CustomerInfo birthday = {this.props.birthday} gender = {this.props.gender} job = {this.props.job}/>
-            </div>
+            <TableRow>
+                <TableCell>{this.props.id}</TableCell>
+                <TableCell><img src={this.props.image} alt="profile"/></TableCell>
+                <TableCell>{this.props.name}</TableCell>
+                <TableCell>{this.props.birthday}</TableCell>
+                <TableCell>{this.props.gender}</TableCell>
+                <TableCell>{this.props.job}</TableCell>
+            </TableRow>
         );
     }
 }
 
-class CustomerProfile extends React.Component{
-    render(){
-        return(
-        <div>
-            <img src={this.props.image}alt="profile"/>
-            <h2>{this.props.name}({this.props.id})</h2>
-        </div>
-        );
-    }
-}
-
-class CustomerInfo extends React.Component {
-    render() {
-        return (
-            <div>
-                <p>{this.props.birthday}</p>
-                <p>{this.props.gender}</p>
-                <p>{this.props.job}</p>
-            </div>
-        )
-    }
-
-
-}
 
 
 export default Customer;
\ No newline at end of file