add student search module

@@ -11,19 +11,86 @@ import TableCell from '@material-ui/core/TableCell'
 import {withStyles} from '@material-ui/core/styles';
 import curcularProgress 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 => ({
   root: {
     width: '100%',
-    marginTop: theme.spacing.unit * 3,
-    overflowX: "auto"
+    minWidth:1080
   },
   table: {
-    minWidth:1000
+    marginLeft:18,
+    marginRight:18
+  },
+  menu: {
+    marginTop:15,
+    marginBottom:15,
+    display:'flex',
+    justifyContent:'center'
   },
   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 = [
@@ -56,14 +123,16 @@ class App extends Component{
     super(props);
     this.state = {
       students: '',
-      completed: 0
+      completed: 0,
+      searchKeyword:''
     }
   }
 
   stateRefresh = () => {
     this.setState({
       students: '',
-      completed: 0
+      completed: 0,
+      searchKeyword:''
     });
     this.callApi()
     .then(res => this.setState({students: res}))
@@ -89,62 +158,95 @@ class App extends Component{
     this.setState({completed:completed >= 100 ?0:completed +1});
   }
 
+  handleValueChange =(e)=>{
+    let nextState ={};
+    nextState[e.target.st_Name]=e.target.value;
+    this.setState(nextState);
+  }
+
   render(){
 
-    const {classes}= this.props;
+    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} 
+          st_Code={c.st_Code}
+          st_Name={c.st_Name}
+          st_Id={c.st_Id}
+          st_Major={c.st_Major}
+          st_Midscore={c.st_Midscore}
+          st_Finalscore={c.st_Finalscore}
+          st_Assignscore={c.st_Assignscore}
+          st_Attendscore={c.st_Attendscore}
+          st_Score={c.st_Score}/>
+      });
+    }
 
+    const {classes}= this.props;
+    const cellList=["코드번호","이름","학번","전공","중간","기말","과제","출석","설정"];
       return (  
-        <div>
-          <Paper className={classes.root}>
-          <Table className={classes.table}>
-
-          <TableHead>
-            <TableRow>
-            <TableCell>코드번호</TableCell>
-            <TableCell>이름</TableCell>
-            <TableCell>학번</TableCell>
-            <TableCell>전공</TableCell>
-            <TableCell>중간</TableCell>
-            <TableCell>기말</TableCell>
-            <TableCell>과제</TableCell>
-            <TableCell>출석</TableCell>
-            <TableCell>학점</TableCell>
-            <TableCell>설정</TableCell>
-            </TableRow>
-          </TableHead>
-            
-            <TableBody>
-            {
-            this.state.students ?
-            this.state.students.map(c=>{
-              return (
-                <Student stateRefresh={this.stateRefresh}
-                  key={c.st_Code}
-                  st_Code={c.st_Code}
-                  st_Name={c.st_Name}
-                  st_Id={c.st_Id}
-                  st_Major={c.st_Major}
-                  st_Midscore={c.st_Midscore}
-                  st_Finalscore={c.st_Finalscore}
-                  st_Assignscore={c.st_Assignscore}
-                  st_Attendscore={c.st_Attendscore}
-                  st_Score={c.st_Score}
-                  />
-              );
-            }) : 
-            <TableRow>
-              <TableCell colSpan="9" allign="center">
-                <CircularProgress className={classes.progress} variant="determinate" value={this.state.completed}/>
-              </TableCell>
-            </TableRow>
-          } 
-            </TableBody>
-
-          </Table>
-
-        </Paper> 
-
-        <StudentAdd stateRefresh={this.stateRefresh}/>
+        <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>
+                <TableCell colSpan="9" allign="center">
+                  <CircularProgress className={classes.progress} variant="determinate" value={this.state.completed}/>
+                </TableCell>
+              </TableRow>
+              } 
+              </TableBody>
+            </Table>
+          </Paper> 
         </div>
 
 

@@ -4,6 +4,22 @@
     "lockfileVersion": 1,
     "requires": true,
     "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": {
             "version": "1.17.4",
             "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.4.tgz",
@@ -833,6 +849,11 @@
                 "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": {
             "version": "2.1.1",
             "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\""
     },
     "dependencies": {
+        "@material-ui/icons": "^4.11.2",
         "body-parser": "^1.19.0",
         "config": "^3.3.3",
         "express": "4.17.1",