Material UI

육현진
Commit 1c8921670ff0bf39c4b873bf4416cd42d22550f4 1c892167 1 parent 1b313ac8
Showing 5 changed files with 341 additions and 9 deletions
.eslintcache
package-lock.json
package.json
src/App.js
src/components/Student.js
--- a/.eslintcache
View file @1c89216
+++ b/.eslintcache
View file @1c89216
-[{"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
--- a/package-lock.json
View file @1c89216
+++ b/package-lock.json
View file @1c89216
@@ -1158,6 +1158,11 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@eslint/eslintrc": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.2.tgz",
@@ -1762,6 +1767,74 @@
         }
       }
     },
+    "@material-ui/core": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.2.tgz",
+      "integrity": "sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.11.2",
+        "@material-ui/system": "^4.11.2",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0",
+        "react-transition-group": "^4.4.0"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.2.tgz",
+      "integrity": "sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.0.3",
+        "jss-plugin-camel-case": "^10.0.3",
+        "jss-plugin-default-unit": "^10.0.3",
+        "jss-plugin-global": "^10.0.3",
+        "jss-plugin-nested": "^10.0.3",
+        "jss-plugin-props-sort": "^10.0.3",
+        "jss-plugin-rule-value-function": "^10.0.3",
+        "jss-plugin-vendor-prefixer": "^10.0.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.2.tgz",
+      "integrity": "sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.2",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
+    "@material-ui/utils": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
+      "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -2301,11 +2374,40 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.5.tgz",
       "integrity": "sha512-UEyp8LwZ4Dg30kVU2Q3amHHyTn1jEdhCIE59ANed76GaT1Vp76DD3ZWSAxgCrw6wJ0TqeoBpqmfUHiUDPs//HQ=="
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
+    "@types/react": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.0.tgz",
+      "integrity": "sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
+          "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
+        }
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -4041,6 +4143,11 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4554,6 +4661,15 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -4730,6 +4846,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "2.6.14",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
+      "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -5059,6 +5180,22 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
+          "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
+        }
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -7042,6 +7179,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -7361,6 +7506,11 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7461,6 +7611,14 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "indefinite-observable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
+      "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
+      "requires": {
+        "symbol-observable": "1.2.0"
+      }
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -7711,6 +7869,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -9525,6 +9688,92 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz",
+      "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "indefinite-observable": "^2.0.1",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
+          "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
+        }
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz",
+      "integrity": "sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz",
+      "integrity": "sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz",
+      "integrity": "sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz",
+      "integrity": "sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz",
+      "integrity": "sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz",
+      "integrity": "sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz",
+      "integrity": "sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.5.0"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.1.0.tgz",
@@ -10897,6 +11146,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -12383,6 +12637,17 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -14181,6 +14446,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -14440,6 +14710,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
--- a/package.json
View file @1c89216
+++ b/package.json
View file @1c89216
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.5.0",
--- a/src/App.js
View file @1c89216
+++ b/src/App.js
View file @1c89216
 import React, {Component, components} from 'react';
-import './App.css';
 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 = [
   {
@@ -28,9 +46,27 @@ const students = [
 class App extends Component{
   render(){
+
+    const {classes}= this.props;
+
       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=>{
               return (
                 <Student
@@ -47,11 +83,15 @@ class App extends Component{
                   />
               );
             })
-          }
+          } 
-        </div>
+            </TableBody>
+
+          </Table>
+
+        </Paper>
   );
   }
 }
-export default App;
+export default withStyles(styles)(App);
--- a/src/components/Student.js
View file @1c89216
+++ b/src/components/Student.js
View file @1c89216
 import React from 'react';
+import TableRow from '@material-ui/core/TableRow';
+import TableCell from '@material-ui/core/TableCell';
 class Student extends React.Component{
     render(){
         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} 
             st_Finalscore = {this.props.st_Finalscore}
@@ -18,7 +33,8 @@ class Student extends React.Component{
             st_Attendscore = {this.props.st_Attendscore}
             st_Score = {this.props.st_Score}/>
-        </div>
+        </div>*/
+
         )
     }
 }