Complete Project for Local Server

@@ -15,7 +15,7 @@
 
 
 ```bash
 ```bash
 Teleprompter-SST
 Teleprompter-SST
-├── client                        ---> Front-end
+├── client                        ---> Front-end [React]
 │   ├── public                    ---> 정적 파일 보관
 │   ├── public                    ---> 정적 파일 보관
 │   │   ├── favicon.ico
 │   │   ├── favicon.ico
 │   │   ├── index.html
 │   │   ├── index.html
@@ -46,7 +46,7 @@ Teleprompter-SST
 ├── package-lock.json
 ├── package-lock.json
 ├── package.json
 ├── package.json
 ├── README.md
 ├── README.md
-├── server.js                     ---> Back-end         
+├── server.js                     ---> Back-end [Node Express]
 └── yarn.lock
 └── yarn.lock
 ```
 ```
 
 

@@ -2,15 +2,14 @@ import React, { Component } from 'react';
 import { Route } from 'react-router-dom';
 import { Route } from 'react-router-dom';
 import MainPage from './pages/MainPage';
 import MainPage from './pages/MainPage';
 import PrompterPage from './pages/PrompterPage';
 import PrompterPage from './pages/PrompterPage';
-// import test from './pages/test';
 
 
 class App extends Component {
 class App extends Component {
+
   render() {
   render() {
     return (
     return (
       <>
       <>
         <Route path="/" component={MainPage} exact={true} />
         <Route path="/" component={MainPage} exact={true} />
-        <Route path="/prompter" component={PrompterPage} exact={true} />
-        {/* <Route path="/prompter" component={test} exact={true} /> */}
+        <Route path="/prompter:script" component={PrompterPage} exact={true} />
       </>
       </>
     );
     );
   }
   }

@@ -7,7 +7,7 @@ const StyledTeleprompter = styled.div`
   width: 100%;
   width: 100%;
   height: 56rem;
   height: 56rem;
   scroll-behavior: smooth;
   scroll-behavior: smooth;
-  overflow: scroll;
+  overflow: auto;
   display: block;
   display: block;
   margin-bottom: 1rem;
   margin-bottom: 1rem;
 `
 `

 import React, { Component, Fragment } from 'react';
 import React, { Component, Fragment } from 'react';
 import { post } from 'axios';
 import { post } from 'axios';
 import { withStyles, Typography, Paper, Button, TextField } from '@material-ui/core';
 import { withStyles, Typography, Paper, Button, TextField } from '@material-ui/core';
-// import PrompterPage from './PrompterPage';
 
 
 const styles = theme => ({
 const styles = theme => ({
   root: {
   root: {
@@ -71,12 +70,12 @@ class MainPage extends Component {
     this.setState({
     this.setState({
       script: ''
       script: ''
   })
   })
-    this.props.history.push('/prompter');
+    this.props.history.push(`/prompter:${this.script}`);
 }
 }
   
   
   // Send script to Server
   // Send script to Server
   addScript = () => {
   addScript = () => {
-    const url = '/api/script';
+    const url = `/api/this.props.script`;
     let scriptJSON = { script : this.script };
     let scriptJSON = { script : this.script };
     const config = {
     const config = {
         headers: {
         headers: {

 import React, { Fragment } from 'react';
 import React, { Fragment } from 'react';
 import axios from 'axios'
 import axios from 'axios'
+import { withStyles, Button} from '@material-ui/core';
 import {
 import {
   GlobalStyles,
   GlobalStyles,
   StyledApp,
   StyledApp,
   StyledTeleprompter as Teleprompter,
   StyledTeleprompter as Teleprompter,
-  Controls,
-  Buttons,
-  Button,
 } from "../styles";
 } from "../styles";
-// import { withStyles, Typography, Paper, Button, TextField} from '@material-ui/core';
 
 
-// const styles = theme => ({
-//     root: {
-//       '& .MuiTextField-root': {
-//         margin: theme.spacing(1),
-//         width: '100%',
-//         minWidth: 1080
-//       },
-//     },
-//     title: {
-//         marginTop: theme.spacing.unit * 5,
-//         textAlign: 'center',
-//         display: 'none',
-//         fontSize: '2.0rem',
-//         [theme.breakpoints.up('sm')]: {
-//           display: 'block',
-//         }
-//     },
-//     paper: {
-//         marginTop: theme.spacing.unit * 5,
-//         marginLeft: theme.spacing.unit * 20,
-//         marginRight: theme.spacing.unit * 20
-//       },
-//     button: {
-//         marginTop: theme.spacing.unit * 1,
-//         marginLeft: theme.spacing.unit * 20,
-//         fontSize: '1rem',
-//     },
-//   });
+const styles = theme => ({
+  button: {
+    fontSize: '1.2rem',
+  },
+});
 
 
-// const INITIAL_TEXT = ``;
 
 
-function PrompterPage() {
+function PrompterPage({match}) {
+  const classes = styles();
   const [listening, setListening] = React.useState(false);
   const [listening, setListening] = React.useState(false);
   const [words, setWords] = React.useState("".split(" "));
   const [words, setWords] = React.useState("".split(" "));
-  // const [words, setWords] = React.useState("");
   const [progress, setProgress] = React.useState(0);
   const [progress, setProgress] = React.useState(0);
 
 
   // Server로부터 Script 받아옴
   // Server로부터 Script 받아옴
-  axios.get("api/script")
+  axios.get(`api/${match.params["script"].slice(1)}`)
     .then(res => {      // .then : 응답(상태코드200~300미만)성공시
     .then(res => {      // .then : 응답(상태코드200~300미만)성공시
       console.log(res.data);
       console.log(res.data);
       setWords(res.data.split(" ")); // 받아온 Script 문자열 처리
       setWords(res.data.split(" ")); // 받아온 Script 문자열 처리
@@ -57,12 +30,6 @@ function PrompterPage() {
       console.log(error);
       console.log(error);
     });
     });
 
 
-
-  // const handleInput = (e) => {
-  //   setWords(e.target.value.split(" "));
-  //   progress && setProgress(0);
-  // };
-
   const handleListening = () => {
   const handleListening = () => {
     if (listening) {
     if (listening) {
       setListening(false);
       setListening(false);
@@ -78,18 +45,14 @@ function PrompterPage() {
 
 
   return (
   return (
     <>
     <>
+      <Button className={classes.button} variant="contained" color="primary" size="medium" onClick={handleListening}>{listening ? "Stop" : "Start"}</Button>
+      <Button className={classes.button} variant="contained" color="secondary" size="medium" disabled={listening} onClick={handleReset}>Reset</Button>
       <GlobalStyles />
       <GlobalStyles />
       <StyledApp>
       <StyledApp>
-        <Controls>
-          <Buttons>
-            <Button onClick={handleListening}>{listening ? "Stop" : "Start"}</Button>
-            <Button onClick={handleReset} disabled={listening} secondary>Reset</Button>
-          </Buttons>
-        </Controls>
         <Teleprompter words={words} listening={listening} progress={progress} onChange={handleChange} />
         <Teleprompter words={words} listening={listening} progress={progress} onChange={handleChange} />
       </StyledApp>
       </StyledApp>
     </>
     </>
   );
   );
 }
 }
 
 
-export default PrompterPage;
\ No newline at end of file
+export default withStyles(styles)(PrompterPage);
\ No newline at end of file

-import styled, { createGlobalStyle, css } from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import Teleprompter from "./components/Teleprompter";
 import Teleprompter from "./components/Teleprompter";
 
 
 export const GlobalStyles = createGlobalStyle`
 export const GlobalStyles = createGlobalStyle`
@@ -29,60 +29,5 @@ export const StyledTeleprompter = styled(Teleprompter)`
   flex-direction: column;
   flex-direction: column;
   justify-content: space-around;
   justify-content: space-around;
   height: 100%;
   height: 100%;
-`;
-
-export const Controls = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1rem;
-`;
-
-export const Buttons = styled.div`
-  display: flex;
-  justify-content: flex-start;
-`;
 
 
-export const Input = styled.textarea`
-  height: 5rem;
-  border: 1px solid rgb(0, 0, 0, 0.25);
-  padding: 0.5rem;
-  font-family: Tahoma, sans-serif;
-  background: transparent;
-  margin-bottom: 1rem;
-  width: 100%;
-`;
-
-export const Button = styled.button`
-  display: inline-block;
-  border: none;
-  padding: 0.5rem 1rem;
-  margin: 0;
-  text-decoration: none;
-  background: #666ba5;
-  border: 1px solid rgb(0, 0, 0, 0.25);
-  color: white;
-  font-size: 1rem;
-  cursor: pointer;
-  text-align: center;
-  transition: background 250ms ease-in-out, transform 150ms ease;
-  margin-right: 1rem;
-  min-width: 5rem;
-  ${(p) =>
-    p.secondary &&
-    css`
-      background: #666;
-    `}
-  &:last-child {
-    margin-right: 0;
-  }
-  &:hover,
-  &:focus {
-    transform: scale(1.1);
-  }
-  &:focus {
-    outline: 1px solid #fff;
-  }
-  &:active {
-    transform: scale(0.99);
-  }
 `;
 `;
\ No newline at end of file

@@ -9,13 +9,13 @@ app.use(bodyParser.urlencoded({ extended: true}));
 
 
 let scriptReceived = "";
 let scriptReceived = "";
 
 
-app.get('/api/script', (req, res) => {
+app.get('/api/:script', (req, res) => {
   res.send(
   res.send(
     scriptReceived
     scriptReceived
   )
   )
 });
 });
 
 
-app.post('/api/script', (req, res) => {
+app.post('/api/:script', (req, res) => {
   scriptReceived = req.body.script;
   scriptReceived = req.body.script;
 });
 });