Add event handling && Modify layout

DongyoungKwon · DongyoungKwon
Commit c3e8c2996e5a8835ef4e7a72c6eff634f2135109 c3e8c299 1 parent 15937fd9
Showing 3 changed files with 34 additions and 23 deletions
README.md
public/index.html
src/App.js
--- a/README.md
View file @c3e8c29
+++ b/README.md
View file @c3e8c29
@@ -16,7 +16,7 @@
 
 - 김다솔 (2017110268)
 
- ####
+ #### Start 
 - `$ yarn global add create-react-app`
 - `$ create-react-app teleprompt-sst`
 - `$ yarn add @material-ui/core`
\ No newline at end of file
--- a/public/index.html
View file @c3e8c29
+++ b/public/index.html
View file @c3e8c29
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-     <title>React App</title>
+     <title>프롬프터 서비스</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/App.js
View file @c3e8c29
+++ b/src/App.js
View file @c3e8c29
 import React, { Component, Fragment } from 'react';
 import './App.css';
- import { withStyles, Typography, Paper, Button} from '@material-ui/core';
- import TextField from '@material-ui/core/TextField';
+ import { withStyles, Typography, Paper, Button, TextField} from '@material-ui/core';
 
 const styles = theme => ({
     root: {
@@ -12,44 +11,56 @@ const styles = theme => ({
       },
     },
     title: {
-         marginTop: 150,
+         marginTop: theme.spacing.unit * 5,
         textAlign: 'center',
         display: 'none',
-         fontSize: '3.0rem',
+         fontSize: '2.0rem',
         [theme.breakpoints.up('sm')]: {
           display: 'block',
-         //   fontSize: '20',
         }
     },
     paper: {
-         marginTop: 100,
-         marginLeft: 500,
-         marginRight: 500
+         marginTop: theme.spacing.unit * 5,
+         marginLeft: theme.spacing.unit * 20,
+         marginRight: theme.spacing.unit * 20
       },
     button: {
-         marginTop: 15,
-         marginLeft: 1320,
+         marginTop: theme.spacing.unit * 1,
+         marginLeft: theme.spacing.unit * 20,
+         fontSize: '1rem',
     },
   });
 
 class App extends Component {
+     constructor(props) {
+         super(props);
+         this.state = {
+             script: ''
+         }
+     }
+ 
+     // Get Script
+     getScript = (e) => {
+         this.script = e.target.value;
+     }
+ 
+     // Send script to server && Move Next URL
+     handleScriptSubmit = (e) => {
+         console.log(this.script);   // test
+     }
+ 
     render() {
         const { classes } = this.props;
         return (
-             <>
-                 <Typography className={classes.title} variant="h6" color="inherit" noWrap>
-                 음성에 맞춰 대본을 화면에 실시간으로 출력하는 프롬프터 서비스
-                 </Typography>
+             <Fragment>
+                 <Typography className={classes.title} variant="h6" color="inherit" noWrap>음성에 맞춰 대본을 화면에 실시간으로 출력하는 프롬프터 서비스</Typography>
                 <Paper className={classes.paper} elevation={3}>
-                     <TextField id="outlined-textarea" label="Script를 입력해주세요." fullWidth="true" rows={20} placeholder="Script" multiline variant="outlined"/>
+                     <TextField id="outlined-textarea" label="Script를 입력해주세요." fullWidth="true" rows={20} placeholder="Script" multiline variant="outlined" onChange={this.getScript}/>
                 </Paper>
-                 <Button className={classes.button} variant="contained" color="primary">시작합니다.</Button>
-             </>
+                 <Button className={classes.button} variant="contained" color="primary" size="medium" onClick={this.handleScriptSubmit}>시작합니다.</Button>
+             </Fragment>
         );
     }
 }
 
- // export default makeStyles(useStyles)(App);
- // export default App;
- export default withStyles(styles)(App);
- 
+ export default withStyles(styles)(App);
\ No newline at end of file