Material UI

-[{"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\index.js":"1","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\reportWebVitals.js":"2","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\App.js":"3","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\components\\Student.js":"4"},{"size":500,"mtime":499162500000,"results":"5","hashOfConfig":"6"},{"size":362,"mtime":499162500000,"results":"7","hashOfConfig":"6"},{"size":1279,"mtime":1607355610693,"results":"8","hashOfConfig":"6"},{"size":1669,"mtime":1607355555245,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"16rehmo",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},{"filePath":"15","messages":"16","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\index.js",[],["19","20"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\reportWebVitals.js",[],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\App.js",["21"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\components\\Student.js",[],{"ruleId":"22","replacedBy":"23"},{"ruleId":"24","replacedBy":"25"},{"ruleId":"26","severity":1,"message":"27","line":1,"column":27,"nodeType":"28","messageId":"29","endLine":1,"endColumn":37},"no-native-reassign",["30"],"no-negated-in-lhs",["31"],"no-unused-vars","'components' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
+[{"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\index.js":"1","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\reportWebVitals.js":"2","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\App.js":"3","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\components\\Student.js":"4"},{"size":500,"mtime":499162500000,"results":"5","hashOfConfig":"6"},{"size":362,"mtime":499162500000,"results":"7","hashOfConfig":"6"},{"size":2429,"mtime":1607364268881,"results":"8","hashOfConfig":"6"},{"size":2433,"mtime":1607363898200,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"16rehmo",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},{"filePath":"15","messages":"16","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"17","messages":"18","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"19","usedDeprecatedRules":"12"},"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\index.js",[],["20","21"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\reportWebVitals.js",[],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\App.js",["22","23"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\src\\components\\Student.js",["24","25","26"],"import React from 'react';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport TableCell from '@material-ui/core/TableCell';\r\n\r\nclass Student extends React.Component{\r\n    render(){\r\n        return(\r\n            <TableRow>\r\n                <TableCell> {this.props.st_Code} </TableCell>\r\n                <TableCell> {this.props.st_Name} </TableCell>\r\n                <TableCell> {this.props.st_Id} </TableCell>\r\n                <TableCell> {this.props.st_Major} </TableCell>\r\n                <TableCell> {this.props.st_Midscore} </TableCell>\r\n                <TableCell> {this.props.st_Finalscore} </TableCell>\r\n                <TableCell> {this.props.st_Assignscore} </TableCell>\r\n                <TableCell> {this.props.st_Attendscore} </TableCell>\r\n                <TableCell> {this.props.st_Score} </TableCell>\r\n\r\n            </TableRow>\r\n        \r\n        /*<div>\r\n            \r\n            <Searchscores st_Midscore={this.props.st_Midscore} \r\n            st_Finalscore = {this.props.st_Finalscore}\r\n            st_Assignscore = {this.props.st_Assignscore}\r\n            st_Attendscore = {this.props.st_Attendscore}/>\r\n\r\n            <Searchscore st_Score={this.props.st_Score}/>\r\n\r\n            <Searchothers st_Midscore={this.props.st_Midscore} \r\n            st_Finalscore = {this.props.st_Finalscore}\r\n            st_Assignscore = {this.props.st_Assignscore}\r\n            st_Attendscore = {this.props.st_Attendscore}\r\n            st_Score = {this.props.st_Score}/>\r\n\r\n        </div>*/\r\n\r\n        )\r\n    }\r\n}\r\n\r\nclass Searchscores extends React.Component{\r\n    render(){\r\n        return(\r\n            <div>\r\n\r\n            <p>{this.props.st_Midscore}</p>\r\n            <p>{this.props.st_Finalscore}</p>\r\n            <p>{this.props.st_Assignscore}</p>\r\n            <p>{this.props.st_Attendscore}</p>\r\n\r\n            </div> \r\n        )\r\n    }\r\n}\r\n\r\n\r\nclass Searchscore extends React.Component{\r\n    render(){\r\n        return(\r\n            <div>\r\n              <p>{this.props.st_Score}</p>\r\n            </div> \r\n        )\r\n    }\r\n}\r\n\r\nclass Searchothers extends React.Component{\r\n    render(){\r\n        return(\r\n            <div>\r\n            <p>{this.props.st_Midscore}</p>\r\n            <p>{this.props.st_Finalscore}</p>\r\n            <p>{this.props.st_Assignscore}</p>\r\n            <p>{this.props.st_Attendscore}</p>\r\n            <p>{this.props.st_Score}</p>\r\n            </div> \r\n        )\r\n    }\r\n}\r\n\r\nexport default Student;",{"ruleId":"27","replacedBy":"28"},{"ruleId":"29","replacedBy":"30"},{"ruleId":"31","severity":1,"message":"32","line":1,"column":27,"nodeType":"33","messageId":"34","endLine":1,"endColumn":37},{"ruleId":"31","severity":1,"message":"35","line":8,"column":8,"nodeType":"33","messageId":"34","endLine":8,"endColumn":16},{"ruleId":"31","severity":1,"message":"36","line":42,"column":7,"nodeType":"33","messageId":"34","endLine":42,"endColumn":19},{"ruleId":"31","severity":1,"message":"37","line":58,"column":7,"nodeType":"33","messageId":"34","endLine":58,"endColumn":18},{"ruleId":"31","severity":1,"message":"38","line":68,"column":7,"nodeType":"33","messageId":"34","endLine":68,"endColumn":19},"no-native-reassign",["39"],"no-negated-in-lhs",["40"],"no-unused-vars","'components' is defined but never used.","Identifier","unusedVar","'TableRow' is defined but never used.","'Searchscores' is defined but never used.","'Searchscore' is defined but never used.","'Searchothers' is defined but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "version": "0.1.0",
   "private": true,
   "private": true,
   "dependencies": {
   "dependencies": {
+    "@material-ui/core": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.5.0",
     "@testing-library/user-event": "^12.5.0",

 import React, {Component, components} from 'react';
 import React, {Component, components} from 'react';
-import './App.css';
 import Student from './components/Student';
 import Student from './components/Student';
+import './App.css';
+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:1000
+  }
+})
 
 
 const students = [
 const students = [
   {
   {
@@ -28,8 +46,26 @@ const students = [
 
 
 class App extends Component{
 class App extends Component{
   render(){
   render(){
+
+    const {classes}= this.props;
+
       return (  
       return (  
-        <div>
+        <Paper className={classes.root}>
+          <Table className={classes.table}>
+
+          <TableHead>
+            <TableCell>코드번호</TableCell>
+            <TableCell>이름</TableCell>
+            <TableCell>학번</TableCell>
+            <TableCell>전공</TableCell>
+            <TableCell>중간</TableCell>
+            <TableCell>기말</TableCell>
+            <TableCell>과제</TableCell>
+            <TableCell>출석</TableCell>
+            <TableCell>학점</TableCell>
+          </TableHead>
+            
+            <TableBody>
             {
             {
             students.map(c=>{
             students.map(c=>{
               return (
               return (
@@ -48,10 +84,14 @@ class App extends Component{
               );
               );
             })
             })
           } 
           } 
-        </div>
+            </TableBody>
+
+          </Table>
+
+        </Paper>
 
 
   );
   );
   }
   }
 }
 }
 
 
-export default App;
+export default withStyles(styles)(App);

 import React from 'react';
 import React from 'react';
+import TableRow from '@material-ui/core/TableRow';
+import TableCell from '@material-ui/core/TableCell';
 
 
 class Student extends React.Component{
 class Student extends React.Component{
     render(){
     render(){
         return(
         return(
-        <div>
+            <TableRow>
+                <TableCell> {this.props.st_Code} </TableCell>
+                <TableCell> {this.props.st_Name} </TableCell>
+                <TableCell> {this.props.st_Id} </TableCell>
+                <TableCell> {this.props.st_Major} </TableCell>
+                <TableCell> {this.props.st_Midscore} </TableCell>
+                <TableCell> {this.props.st_Finalscore} </TableCell>
+                <TableCell> {this.props.st_Assignscore} </TableCell>
+                <TableCell> {this.props.st_Attendscore} </TableCell>
+                <TableCell> {this.props.st_Score} </TableCell>
+
+            </TableRow>
+        
+        /*<div>
             
             
             <Searchscores st_Midscore={this.props.st_Midscore} 
             <Searchscores st_Midscore={this.props.st_Midscore} 
             st_Finalscore = {this.props.st_Finalscore}
             st_Finalscore = {this.props.st_Finalscore}
@@ -18,7 +33,8 @@ class Student extends React.Component{
             st_Attendscore = {this.props.st_Attendscore}
             st_Attendscore = {this.props.st_Attendscore}
             st_Score = {this.props.st_Score}/>
             st_Score = {this.props.st_Score}/>
 
 
-        </div>
+        </div>*/
+
         )
         )
     }
     }
 }
 }