add student search module

-[{"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js":"1","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js":"2","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js":"3","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js":"4","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js":"5","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js":"6"},{"size":500,"mtime":499162500000,"results":"7","hashOfConfig":"8"},{"size":3923,"mtime":1607450260952,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":499162500000,"results":"10","hashOfConfig":"8"},{"size":2602,"mtime":1607450773121,"results":"11","hashOfConfig":"8"},{"size":6867,"mtime":1607455316983,"results":"12","hashOfConfig":"8"},{"size":2169,"mtime":1607455318372,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"15hdric",{"filePath":"17","messages":"18","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"23","messages":"24","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js",[],["27","28"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js",["29","30","31"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js",[],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js",["32","33","34"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js",["35","36","37"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js",["38"],{"ruleId":"39","replacedBy":"40"},{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","severity":1,"message":"44","line":1,"column":27,"nodeType":"45","messageId":"46","endLine":1,"endColumn":37},{"ruleId":"43","severity":1,"message":"47","line":12,"column":8,"nodeType":"45","messageId":"46","endLine":12,"endColumn":24},{"ruleId":"43","severity":1,"message":"48","line":29,"column":7,"nodeType":"45","messageId":"46","endLine":29,"endColumn":15},{"ruleId":"43","severity":1,"message":"49","line":43,"column":7,"nodeType":"45","messageId":"46","endLine":43,"endColumn":19},{"ruleId":"43","severity":1,"message":"50","line":59,"column":7,"nodeType":"45","messageId":"46","endLine":59,"endColumn":18},{"ruleId":"43","severity":1,"message":"51","line":69,"column":7,"nodeType":"45","messageId":"46","endLine":69,"endColumn":19},{"ruleId":"43","severity":1,"message":"52","line":13,"column":7,"nodeType":"45","messageId":"46","endLine":13,"endColumn":12},{"ruleId":"43","severity":1,"message":"53","line":24,"column":7,"nodeType":"45","messageId":"46","endLine":24,"endColumn":14},{"ruleId":"43","severity":1,"message":"54","line":122,"column":15,"nodeType":"45","messageId":"46","endLine":122,"endColumn":22},{"ruleId":"43","severity":1,"message":"52","line":11,"column":7,"nodeType":"45","messageId":"46","endLine":11,"endColumn":12},"no-native-reassign",["55"],"no-negated-in-lhs",["56"],"no-unused-vars","'components' is defined but never used.","Identifier","unusedVar","'curcularProgress' is defined but never used.","'students' is assigned a value but never used.","'Searchscores' is defined but never used.","'Searchscore' is defined but never used.","'Searchothers' is defined but never used.","'theme' is assigned a value but never used.","'primary' is assigned a value but never used.","'classes' is assigned a value but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
+[{"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js":"1","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js":"2","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js":"3","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js":"4","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js":"5","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js":"6"},{"size":500,"mtime":499162500000,"results":"7","hashOfConfig":"8"},{"size":6906,"mtime":1607495154012,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":499162500000,"results":"10","hashOfConfig":"8"},{"size":2602,"mtime":1607450773121,"results":"11","hashOfConfig":"8"},{"size":6867,"mtime":1607455316983,"results":"12","hashOfConfig":"8"},{"size":2169,"mtime":1607455462628,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"15hdric",{"filePath":"17","messages":"18","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"23","usedDeprecatedRules":"16"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"26","usedDeprecatedRules":"16"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"29","usedDeprecatedRules":"16"},"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js",[],["30","31"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js",["32","33","34"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js",[],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js",["35","36","37"],"import React from 'react';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport StudentDelete from './StudentDelete';\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                <TableCell><StudentDelete stateRefresh={this.props.stateRefresh} st_Code={this.props.st_Code}/></TableCell>\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;","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js",["38","39","40"],"import React from 'react';\r\nimport {post} from 'axios';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport Textfield from '@material-ui/core/TextField';\r\nimport Button from '@material-ui/core/Button';\r\nimport{withStyles}from '@material-ui/core/styles';\r\nimport { createMuiTheme } from '@material-ui/core/styles';\r\nimport {blue, pink} from '@material-ui/core/colors';\r\n\r\nconst theme = createMuiTheme({\r\n  palette: {\r\n    primary: {\r\n      main: blue[100],\r\n    },\r\n    secondary: {\r\n      main: pink[100],\r\n    },\r\n  },\r\n});\r\n\r\nconst primary = blue[100]; //#bbdefb\r\n\r\nconst styles = theme=>({\r\n    hidden:{\r\n        display:'none'\r\n    }\r\n\r\n});\r\n\r\nclass StudentAdd extends React.Component{\r\n\r\n    constructor(props){\r\n        super(props);\r\n        this.state={\r\n            st_Code:'',\r\n            st_Name:'',\r\n            st_Id:'',\r\n            st_Major:'',\r\n            st_Midscore:'',\r\n            st_Finalscore:'',\r\n            st_Assignscore:'',\r\n            st_Attendscore:'',\r\n            st_Score:'',\r\n            open:false\r\n        }\r\n    }\r\n\r\n    handleFormSubmit = (e) => {\r\n        e.preventDefault()\r\n        this.addStudent()\r\n        .then((response) => {\r\n            console.log(response.data);\r\n            this.props.stateRefresh();\r\n        })\r\n        this.setState({\r\n            st_Code:'',\r\n            st_Name:'',\r\n            st_Id:'',\r\n            st_Major:'',\r\n            st_Midscore:'',\r\n            st_Finalscore:'',\r\n            st_Assignscore:'',\r\n            st_Attendscore:'',\r\n            st_Score:'',\r\n            open: false\r\n        })\r\n\r\n    }\r\n\r\n    handleValueChange = (e) => {\r\n        let nextState = {};\r\n        nextState[e.target.name]=e.target.value;\r\n        this.setState(nextState);\r\n    }\r\n\r\n    addStudent = () =>{\r\n        const url ='/api/students';\r\n        const formData=new FormData();\r\n        formData.append('st_Code',this.state.st_Code);\r\n        formData.append('st_Name',this.state.st_Name);\r\n        formData.append('st_Id',this.state.st_Id);\r\n        formData.append('st_Major',this.state.st_Major);\r\n        formData.append('st_Midscore',this.state.st_Midscore);\r\n        formData.append('st_Finalscore',this.state.st_Finalscore);\r\n        formData.append('st_Assignscore',this.state.st_Assignscore);\r\n        formData.append('st_Attendscore',this.state.st_Attendscore);\r\n        formData.append('st_Score',this.state.st_Score);\r\n        const config = {\r\n            headers: {\r\n                'content-tupe': 'multipart/form-data'        \r\n            }\r\n\r\n        }\r\n        return post(url, formData, config);\r\n    }\r\n\r\n    handleClickOpen = () => {\r\n        this.setState({\r\n            open:true\r\n        });\r\n    }\r\n\r\n    handleClose = () => {\r\n        this.setState({\r\n            st_Code:'',\r\n            st_Name:'',\r\n            st_Id:'',\r\n            st_Major:'',\r\n            st_Midscore:'',\r\n            st_Finalscore:'',\r\n            st_Assignscore:'',\r\n            st_Attendscore:'',\r\n            st_Score:'',\r\n            open: false\r\n        })\r\n    }\r\n\r\n    render(){\r\n        const{classes}=this.props;\r\n        return(\r\n            <div>\r\n                <Button variant=\"contained\" color=\"primary\" onClick={this.handleClickOpen}>\r\n                    학생 추가하기\r\n                </Button>\r\n                <Dialog open={this.state.open} onClose={this.handleClose}>\r\n                    <DialogTitle>학생 추가</DialogTitle>\r\n                    <DialogContent>\r\n                        <Textfield label=\"코드 번호\" type=\"text\" name=\"st_Code\" value={this.state.st_Code} onChange={this.handleValueChange}/><br/>\r\n                        <Textfield label=\"이름\" name=\"st_Name\" value={this.state.st_Name} onChange={this.handleValueChange}/><br/>\r\n                        <Textfield label=\"학번\" name=\"st_Id\" value={this.state.st_Id} onChange={this.handleValueChange}/><br/>\r\n                        <Textfield label=\"전공\" name=\"st_Major\" value={this.state.st_Major} onChange={this.handleValueChange}/><br/>\r\n                        <Textfield label=\"중간 점수\" name=\"st_Midscore\" value={this.state.st_Midscore} onChange={this.handleValueChange}/><br/>\r\n                        <Textfield label=\"기말 점수\" name=\"st_Finalscore\" value={this.state.st_Finalscore} onChange={this.handleValueChange}/><br/>\r\n                        <Textfield label=\"과제 점수\" name=\"st_Assignscore\" value={this.state.st_Assignscore} onChange={this.handleValueChange}/><br/>\r\n                        <Textfield label=\"출석 점수\" name=\"st_Attendscore\" value={this.state.st_Attendscore} onChange={this.handleValueChange}/><br/>\r\n                        <Textfield label=\"학점\" name=\"st_Score\" value={this.state.st_Score} onChange={this.handleValueChange}/><br/>\r\n                    </DialogContent>\r\n                    <DialogActions>\r\n                    <Button varient=\"contained\" color=\"primary\" onClick={this.handleFormSubmit}>추가</Button>\r\n                    <Button varient=\"outlined\" color=\"primary\" onClick={this.handleClose}>닫기</Button>\r\n                    </DialogActions>\r\n                </Dialog>\r\n            </div>\r\n            /*\r\n            <form onSubmit={this.handleFormSubmit}>\r\n                <h1>학생 추가</h1>\r\n                코드 번호 : <input type=\"text\" name=\"st_Code\" value={this.state.st_Code} onChange={this.handleValueChange}/><br/>\r\n                   이름   : <input type=\"text\" name=\"st_Name\" value={this.state.st_Name} onChange={this.handleValueChange}/><br/>\r\n                   학번   : <input type=\"text\" name=\"st_Id\" value={this.state.st_Id} onChange={this.handleValueChange}/><br/>\r\n                   전공   : <input type=\"text\" name=\"st_Major\" value={this.state.st_Major} onChange={this.handleValueChange}/><br/>\r\n                중간 점수 : <input type=\"text\" name=\"st_Midscore\" value={this.state.st_Midscore} onChange={this.handleValueChange}/><br/>\r\n                기말 점수 : <input type=\"text\" name=\"st_Finalscore\" value={this.state.st_Finalscore} onChange={this.handleValueChange}/><br/>\r\n                과제 점수 : <input type=\"text\" name=\"st_Assignscore\" value={this.state.st_Assignscore} onChange={this.handleValueChange}/><br/>\r\n                출석 점수 : <input type=\"text\" name=\"st_Attendscore\" value={this.state.st_Attendscore} onChange={this.handleValueChange}/><br/>\r\n                   학점   : <input type=\"text\" name=\"st_Score\" value={this.state.st_Score} onChange={this.handleValueChange}/><br/>\r\n                <button type=\"submit\">추가하기</button>\r\n\r\n            </form>\r\n            */\r\n        )\r\n    }\r\n}\r\n\r\nexport default withStyles(styles)(StudentAdd);","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js",["41"],"import React from 'react';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport Button from '@material-ui/core/Button';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { createMuiTheme } from '@material-ui/core/styles';\r\nimport {blue, pink} from '@material-ui/core/colors';\r\n\r\nconst theme = createMuiTheme({\r\n  palette: {\r\n    primary: {\r\n      main: blue[100],\r\n    },\r\n    secondary: {\r\n      main: pink[100],\r\n    },\r\n  },\r\n});\r\n\r\nclass StudentDelete extends React.Component{\r\n\r\n    constructor(props){\r\n        super(props);\r\n        this.state = {\r\n            open: false\r\n        }\r\n    }\r\n\r\n    handleClickOpen = () => {\r\n        this.setState({\r\n            open:true\r\n        });\r\n    }\r\n\r\n    handleClose = () => {\r\n        this.setState({\r\n            open: false\r\n        })\r\n    }\r\n\r\n    deleteStudent(st_Code){\r\n        const url='/api/students/'+st_Code;\r\n        fetch(url,{\r\n            method:'DELETE'\r\n        });\r\n        this.props.stateRefresh();\r\n    }\r\n    \r\n    render(){\r\n\r\n        return(\r\n            <div>\r\n            <Button variant=\"contained\" color=\"secondary\" onClick={this.handleClickOpen}>삭제</Button>\r\n            <Dialog open={this.state.open} onClose={this.handleClose}>\r\n                <DialogTitle onClose={this.handleClose}>\r\n                    삭제 경고\r\n                </DialogTitle>\r\n                <DialogContent>\r\n                    <Typography gutterBottom>\r\n                        선택한 학생의 정보가 삭제됩니다!\r\n                    </Typography>\r\n                </DialogContent>\r\n                <DialogActions>\r\n                <Button variant=\"contained\" color=\"secondary\" onClick={(e)=>{this.deleteStudent(this.props.st_Code)}}>삭제</Button>\r\n                <Button variant=\"outlined\" color=\"secondary\" onClick={this.handleClose}>닫기</Button>\r\n                </DialogActions>\r\n            </Dialog>   \r\n            </div>\r\n\r\n        )\r\n    }\r\n}\r\n\r\nexport default StudentDelete;",{"ruleId":"42","replacedBy":"43"},{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","severity":1,"message":"47","line":1,"column":27,"nodeType":"48","messageId":"49","endLine":1,"endColumn":37},{"ruleId":"46","severity":1,"message":"50","line":12,"column":8,"nodeType":"48","messageId":"49","endLine":12,"endColumn":24},{"ruleId":"46","severity":1,"message":"51","line":96,"column":7,"nodeType":"48","messageId":"49","endLine":96,"endColumn":15},{"ruleId":"46","severity":1,"message":"52","line":43,"column":7,"nodeType":"48","messageId":"49","endLine":43,"endColumn":19},{"ruleId":"46","severity":1,"message":"53","line":59,"column":7,"nodeType":"48","messageId":"49","endLine":59,"endColumn":18},{"ruleId":"46","severity":1,"message":"54","line":69,"column":7,"nodeType":"48","messageId":"49","endLine":69,"endColumn":19},{"ruleId":"46","severity":1,"message":"55","line":13,"column":7,"nodeType":"48","messageId":"49","endLine":13,"endColumn":12},{"ruleId":"46","severity":1,"message":"56","line":24,"column":7,"nodeType":"48","messageId":"49","endLine":24,"endColumn":14},{"ruleId":"46","severity":1,"message":"57","line":122,"column":15,"nodeType":"48","messageId":"49","endLine":122,"endColumn":22},{"ruleId":"46","severity":1,"message":"55","line":11,"column":7,"nodeType":"48","messageId":"49","endLine":11,"endColumn":12},"no-native-reassign",["58"],"no-negated-in-lhs",["59"],"no-unused-vars","'components' is defined but never used.","Identifier","unusedVar","'curcularProgress' is defined but never used.","'students' is assigned a value but never used.","'Searchscores' is defined but never used.","'Searchscore' is defined but never used.","'Searchothers' is defined but never used.","'theme' is assigned a value but never used.","'primary' is assigned a value but never used.","'classes' is assigned a value but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file

@@ -11,19 +11,86 @@ import TableCell from '@material-ui/core/TableCell'
 import {withStyles} from '@material-ui/core/styles';
 import {withStyles} from '@material-ui/core/styles';
 import curcularProgress from '@material-ui/core/CircularProgress';
 import curcularProgress from '@material-ui/core/CircularProgress';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import AppBar from '@material-ui/core/AppBar'
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import InputBase from '@material-ui/core/InputBase';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+
 
 
 const styles = theme => ({
 const styles = theme => ({
   root: {
   root: {
     width: '100%',
     width: '100%',
-    marginTop: theme.spacing.unit * 3,
-    overflowX: "auto"
+    minWidth:1080
   },
   },
   table: {
   table: {
-    minWidth:1000
+    marginLeft:18,
+    marginRight:18
+  },
+  menu: {
+    marginTop:15,
+    marginBottom:15,
+    display:'flex',
+    justifyContent:'center'
   },
   },
   progress:{
   progress:{
-    margin: theme.spacing.unit * 2
-  }
+    margin: theme.spacing(2)
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  tableHead: {
+    fontSize: '2.0rem',
+  },
+  title: {
+    flexGrow: 1,
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+  },
+  search: {
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.common.white, 0.25),
+    },
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing(1),
+      width: 'auto',
+    },
+  },
+  searchIcon: {
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inputRoot: {
+    color: 'inherit',
+  },
+  inputInput: {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: '12ch',
+      '&:focus': {
+        width: '20ch',
+      },
+    },
+  },
 })
 })
 
 
 const students = [
 const students = [
@@ -56,14 +123,16 @@ class App extends Component{
     super(props);
     super(props);
     this.state = {
     this.state = {
       students: '',
       students: '',
-      completed: 0
+      completed: 0,
+      searchKeyword:''
     }
     }
   }
   }
 
 
   stateRefresh = () => {
   stateRefresh = () => {
     this.setState({
     this.setState({
       students: '',
       students: '',
-      completed: 0
+      completed: 0,
+      searchKeyword:''
     });
     });
     this.callApi()
     this.callApi()
     .then(res => this.setState({students: res}))
     .then(res => this.setState({students: res}))
@@ -89,36 +158,20 @@ class App extends Component{
     this.setState({completed:completed >= 100 ?0:completed +1});
     this.setState({completed:completed >= 100 ?0:completed +1});
   }
   }
 
 
-  render(){
-
-    const {classes}= this.props;
-
-      return (  
-        <div>
-          <Paper className={classes.root}>
-          <Table className={classes.table}>
+  handleValueChange =(e)=>{
+    let nextState ={};
+    nextState[e.target.st_Name]=e.target.value;
+    this.setState(nextState);
+  }
 
 
-          <TableHead>
-            <TableRow>
-            <TableCell>코드번호</TableCell>
-            <TableCell>이름</TableCell>
-            <TableCell>학번</TableCell>
-            <TableCell>전공</TableCell>
-            <TableCell>중간</TableCell>
-            <TableCell>기말</TableCell>
-            <TableCell>과제</TableCell>
-            <TableCell>출석</TableCell>
-            <TableCell>학점</TableCell>
-            <TableCell>설정</TableCell>
-            </TableRow>
-          </TableHead>
+  render(){
 
 
-            <TableBody>
-            {
-            this.state.students ?
-            this.state.students.map(c=>{
-              return (
-                <Student stateRefresh={this.stateRefresh}
+    const filteredComponents = (data)=>{
+      data=data.filter((c) =>{
+        return c.st_Name.indexOf(this.state.searchKeyword) > -1;
+      });
+      return data.map((c)=>{
+          return <Student stateRefresh={this.stateRefresh} 
           key={c.st_Code} 
           key={c.st_Code} 
           st_Code={c.st_Code}
           st_Code={c.st_Code}
           st_Name={c.st_Name}
           st_Name={c.st_Name}
@@ -128,10 +181,63 @@ class App extends Component{
           st_Finalscore={c.st_Finalscore}
           st_Finalscore={c.st_Finalscore}
           st_Assignscore={c.st_Assignscore}
           st_Assignscore={c.st_Assignscore}
           st_Attendscore={c.st_Attendscore}
           st_Attendscore={c.st_Attendscore}
-                  st_Score={c.st_Score}
+          st_Score={c.st_Score}/>
+      });
+    }
+
+    const {classes}= this.props;
+    const cellList=["코드번호","이름","학번","전공","중간","기말","과제","출석","설정"];
+      return (  
+        <div className={classes.root}>
+          <AppBar position="static">
+            <Toolbar>
+              <IconButton
+                edge="start"
+                className={classes.menuButton}
+                color="inherit"
+                aria-label="open drawer"
+              >
+                <MenuIcon />
+              </IconButton>
+              <Typography className={classes.title} variant="h6" noWrap>
+                학생 성적 관리 프로그램
+              </Typography>
+              <div className={classes.search}>
+                <div className={classes.searchIcon}>
+                  <SearchIcon />
+                </div>
+                <InputBase
+                  placeholder="검색하기"
+                  classes={{
+                    root: classes.inputRoot,
+                    input: classes.inputInput,
+                  }}
+                  name="searchKeyword"
+                  value={this.state.searchKeyword}
+                  onChange={this.handleValueChange}
+                  //inputProps={{ 'aria-label': 'search' }}
                 />
                 />
-              );
-            }) : 
+              </div>
+            </Toolbar>
+          </AppBar>
+          <div className={classes.menu}>
+             <StudentAdd stateRefresh={this.stateRefresh}/>
+          </div>
+
+          <Paper className={classes.paper}>
+            <Table className={classes.table}>
+
+            <TableHead>
+              <TableRow>
+                  {cellList.map(c => {
+                    return <TableCell className={classes.TableHead}>{c}</TableCell>
+                  })}
+              </TableRow>
+            </TableHead>            
+              <TableBody>
+              {this.state.students ?
+                filteredComponents(this.state.students):
+      
               <TableRow>
               <TableRow>
                 <TableCell colSpan="9" allign="center">
                 <TableCell colSpan="9" allign="center">
                   <CircularProgress className={classes.progress} variant="determinate" value={this.state.completed}/>
                   <CircularProgress className={classes.progress} variant="determinate" value={this.state.completed}/>
@@ -139,12 +245,8 @@ class App extends Component{
               </TableRow>
               </TableRow>
               } 
               } 
               </TableBody>
               </TableBody>
-
             </Table>
             </Table>
-
           </Paper> 
           </Paper> 
-
-        <StudentAdd stateRefresh={this.stateRefresh}/>
         </div>
         </div>
 
 
 
 

@@ -4,6 +4,22 @@
     "lockfileVersion": 1,
     "lockfileVersion": 1,
     "requires": true,
     "requires": true,
     "dependencies": {
     "dependencies": {
+        "@babel/runtime": {
+            "version": "7.12.5",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
+            "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+            "requires": {
+                "regenerator-runtime": "^0.13.4"
+            }
+        },
+        "@material-ui/icons": {
+            "version": "4.11.2",
+            "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+            "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+            "requires": {
+                "@babel/runtime": "^7.4.4"
+            }
+        },
         "@types/http-proxy": {
         "@types/http-proxy": {
             "version": "1.17.4",
             "version": "1.17.4",
             "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.4.tgz",
             "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.4.tgz",
@@ -833,6 +849,11 @@
                 "util-deprecate": "~1.0.1"
                 "util-deprecate": "~1.0.1"
             }
             }
         },
         },
+        "regenerator-runtime": {
+            "version": "0.13.7",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+            "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        },
         "require-directory": {
         "require-directory": {
             "version": "2.1.1",
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",

@@ -7,6 +7,7 @@
         "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
         "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
     },
     },
     "dependencies": {
     "dependencies": {
+        "@material-ui/icons": "^4.11.2",
         "body-parser": "^1.19.0",
         "body-parser": "^1.19.0",
         "config": "^3.3.3",
         "config": "^3.3.3",
         "express": "4.17.1",
         "express": "4.17.1",