Add event handling && Modify layout

DongyoungKwon · DongyoungKwon
Commit c3e8c2996e5a8835ef4e7a72c6eff634f2135109 c3e8c299 1 parent 15937fd9
Showing 3 changed files with 33 additions and 22 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 { withStyles, Typography, Paper, Button, TextField} from '@material-ui/core';
-import TextField from '@material-ui/core/TextField';
 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,
+        marginTop: theme.spacing.unit * 5,
-        marginLeft: 500,
+        marginLeft: theme.spacing.unit * 20,
-        marginRight: 500
+        marginRight: theme.spacing.unit * 20
       },
     button: {
-        marginTop: 15,
+        marginTop: theme.spacing.unit * 1,
-        marginLeft: 1320,
+        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 (
-            <>
+            <Fragment>
-                <Typography className={classes.title} variant="h6" color="inherit" noWrap>
+                <Typography className={classes.title} variant="h6" color="inherit" noWrap>음성에 맞춰 대본을 화면에 실시간으로 출력하는 프롬프터 서비스</Typography>
-                음성에 맞춰 대본을 화면에 실시간으로 출력하는 프롬프터 서비스
-                </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);
\ No newline at end of file
-