육현진

Material UI

1 -[{"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 ...\ No newline at end of file
1 +[{"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 ...\ No newline at end of file
......
This diff is collapsed. Click to expand it.
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
3 "version": "0.1.0", 3 "version": "0.1.0",
4 "private": true, 4 "private": true,
5 "dependencies": { 5 "dependencies": {
6 + "@material-ui/core": "^4.11.2",
6 "@testing-library/jest-dom": "^5.11.6", 7 "@testing-library/jest-dom": "^5.11.6",
7 "@testing-library/react": "^11.2.2", 8 "@testing-library/react": "^11.2.2",
8 "@testing-library/user-event": "^12.5.0", 9 "@testing-library/user-event": "^12.5.0",
......
1 import React, {Component, components} from 'react'; 1 import React, {Component, components} from 'react';
2 -import './App.css';
3 import Student from './components/Student'; 2 import Student from './components/Student';
3 +import './App.css';
4 +import Paper from '@material-ui/core/Paper'
5 +import Table from '@material-ui/core/Table'
6 +import TableHead from '@material-ui/core/TableHead'
7 +import TableBody from '@material-ui/core/TableBody'
8 +import TableRow from '@material-ui/core/TableRow'
9 +import TableCell from '@material-ui/core/TableCell'
10 +import {withStyles} from '@material-ui/core/styles';
11 +
12 +const styles = theme => ({
13 + root: {
14 + width: '100%',
15 + marginTop: theme.spacing.unit * 3,
16 + overflowX: "auto"
17 + },
18 + table: {
19 + minWidth:1000
20 + }
21 +})
4 22
5 const students = [ 23 const students = [
6 { 24 {
...@@ -28,8 +46,26 @@ const students = [ ...@@ -28,8 +46,26 @@ const students = [
28 46
29 class App extends Component{ 47 class App extends Component{
30 render(){ 48 render(){
49 +
50 + const {classes}= this.props;
51 +
31 return ( 52 return (
32 - <div> 53 + <Paper className={classes.root}>
54 + <Table className={classes.table}>
55 +
56 + <TableHead>
57 + <TableCell>코드번호</TableCell>
58 + <TableCell>이름</TableCell>
59 + <TableCell>학번</TableCell>
60 + <TableCell>전공</TableCell>
61 + <TableCell>중간</TableCell>
62 + <TableCell>기말</TableCell>
63 + <TableCell>과제</TableCell>
64 + <TableCell>출석</TableCell>
65 + <TableCell>학점</TableCell>
66 + </TableHead>
67 +
68 + <TableBody>
33 { 69 {
34 students.map(c=>{ 70 students.map(c=>{
35 return ( 71 return (
...@@ -48,10 +84,14 @@ class App extends Component{ ...@@ -48,10 +84,14 @@ class App extends Component{
48 ); 84 );
49 }) 85 })
50 } 86 }
51 - </div> 87 + </TableBody>
88 +
89 + </Table>
90 +
91 + </Paper>
52 92
53 ); 93 );
54 } 94 }
55 } 95 }
56 96
57 -export default App; 97 +export default withStyles(styles)(App);
......
1 import React from 'react'; 1 import React from 'react';
2 +import TableRow from '@material-ui/core/TableRow';
3 +import TableCell from '@material-ui/core/TableCell';
2 4
3 class Student extends React.Component{ 5 class Student extends React.Component{
4 render(){ 6 render(){
5 return( 7 return(
6 - <div> 8 + <TableRow>
9 + <TableCell> {this.props.st_Code} </TableCell>
10 + <TableCell> {this.props.st_Name} </TableCell>
11 + <TableCell> {this.props.st_Id} </TableCell>
12 + <TableCell> {this.props.st_Major} </TableCell>
13 + <TableCell> {this.props.st_Midscore} </TableCell>
14 + <TableCell> {this.props.st_Finalscore} </TableCell>
15 + <TableCell> {this.props.st_Assignscore} </TableCell>
16 + <TableCell> {this.props.st_Attendscore} </TableCell>
17 + <TableCell> {this.props.st_Score} </TableCell>
18 +
19 + </TableRow>
20 +
21 + /*<div>
7 22
8 <Searchscores st_Midscore={this.props.st_Midscore} 23 <Searchscores st_Midscore={this.props.st_Midscore}
9 st_Finalscore = {this.props.st_Finalscore} 24 st_Finalscore = {this.props.st_Finalscore}
...@@ -18,7 +33,8 @@ class Student extends React.Component{ ...@@ -18,7 +33,8 @@ class Student extends React.Component{
18 st_Attendscore = {this.props.st_Attendscore} 33 st_Attendscore = {this.props.st_Attendscore}
19 st_Score = {this.props.st_Score}/> 34 st_Score = {this.props.st_Score}/>
20 35
21 - </div> 36 + </div>*/
37 +
22 ) 38 )
23 } 39 }
24 } 40 }
......