LOGIN 페이지 디자인

@@ -148,7 +148,6 @@ body::-webkit-scrollbar-thumb {
   background-color: #ffffff;
   border-radius: 10px;
 }
-
 @font-face {
   font-family: "MapoGoldenPier";
   src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoGoldenPierA.woff")

 import React from "react";
 import LandingPage from "./pages/LandingPage.js";
 import MainPage from "./pages/MainPage.js";
+import LoginPage from "./pages/LoginPage.js";
+import SignUpPage from "./pages/SignUpPage.js";
 
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
@@ -18,6 +20,8 @@ function App() {
         <Switch>
           <Route exact path="/" component={LandingPage} />
           <Route exact path="/main" component={MainPage} />
+          <Route exact path="/login" component={LoginPage} />
+          <Route exact path="/signup" component={SignUpPage} />
         </Switch>
       </Router>
     </MuiThemeProvider>

@@ -60,37 +60,4 @@ export default function AddButton() {
       </>
     );
   }
-}
-
-/* <Modal
-        open={open}
-      >
-        <div className={classes.paper}>
-          <Typography className={classes.title} variant="h5">
-            ADD TODO LIST
-          </Typography>
-          <FormControlLabel
-            className={classes.isPublic}
-            control={<Checkbox onClick={handlePublic} />}
-            checked={isPublic}
-            label="Public"
-          />
-
-          <form className={classes.input} noValidate autoComplete="off">
-            <TextField required label="Title" onChange={handleTitle} />
-            {textFieldBody.map((field) => field)}
-          </form>
-          <IconButton className={classes.addButton} onClick={handleAdd}>
-            <AddIcon />
-          </IconButton>
-
-          <form className={classes.buttonGroup}>
-            <Button variant="contained" color="primary" onClick={handleClose}>
-              확인
-            </Button>
-            <Button variant="contained" color="secondary" onClick={handleClose}>
-              취소
-            </Button>
-          </form>
-        </div>
-      </Modal> */
+}
\ No newline at end of file

 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
+import { Link } from "react-router-dom";
 
-const useStyles = makeStyles((theme) =>({
+const useStyles = makeStyles((theme) => ({
   root: {
-    position:"fixed",
-    minHeight:"100vh",
-    minWidth:"100vw",
-    backgroundColor: "rgba(0,0,0,0.5)",
-    padding:0,
+    position: "fixed",
+    minHeight: "100vh",
+    minWidth: "100vw",
+    backgroundColor: "rgba(0,0,0,0.8)",
   },
-  title:{
-    color:"white",
+  title: {
+    color: "white",
     fontSize: 50,
-    textAlign:"center",
-    marginLeft : "auto",
-    marginRight : "auto",
-    marginTop:"15%",
-    width: "15rem"
+    textAlign: "center",
+    marginLeft: "auto",
+    marginRight: "auto",
+    marginTop: "17rem",
+    width: "15rem",
+  },
+  content: {
+    color: "white",
+    textAlign: "center",
+    marginTop: "1rem",
+    marginLeft: "auto",
+    marginRight: "auto",
+    width: "20rem",
+  },
+  start: {
+    color: "white",
+    textAlign: "center",
+    marginTop: "1rem",
+    marginLeft: "auto",
+    marginRight: "auto",
+    padding: "7px 0 7px 0",
+    width: "10rem",
+    backgroundColor: "rgba(225,225,225,0.1)",
+    border: "1px solid white",
+    borderRadius: "15px",
   },
-  content:{
-    color:"white",
-    textAlign:"center",
-    marginTop:"1rem",
-    marginLeft : "auto",
-    marginRight : "auto",
-    width: "20rem"
-  }
 }));
 
 export default function LandingPage() {
   const classes = useStyles();
+
   return (
     <div className={classes.root}>
       <p className={classes.title}>Do-gether</p>
       <p className={classes.content}>Sharing your TODO-LIST with others!</p>
+      <div className={classes.start}>
+        <Link to="/login" style={{textDecoration: "none",color:"white"}}>
+          click here to join!
+        </Link>
+      </div>
     </div>
   );
 }

+import React, { useState } from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+import { Link } from "react-router-dom";
+
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    position: "fixed",
+    minHeight: "100vh",
+    minWidth: "100vw",
+    backgroundColor: "rgba(0,0,0,0.8)",
+  },
+  paper: {
+    width: "25rem",
+    height: "28rem",
+    marginTop: "8rem",
+    marginLeft: "auto",
+    marginRight: "auto",
+    backgroundColor: "rgba(255,255,255,0.8)",
+  },
+  grid: {
+    "& > *": {
+      position: "relative",
+      marginLeft: "auto",
+      marginRight: "auto",
+    },
+  },
+  title: {
+    width: "100%",
+    marginTop: "5rem",
+    fontSize: 40,
+    textAlign: "center",
+  },
+  idInput: {
+    top: "3.5rem",
+    width: "70%",
+  },
+  pwInput: {
+    top: "5.5rem",
+    width: "70%",
+  },
+  signin: {
+    top: "7.4rem",
+    width: "70%",
+  },
+  signup: {
+    fontSize: 13,
+    top: "7.9rem",
+  },
+}));
+
+export default function LandingPage() {
+  const classes = useStyles();
+
+  const [userID, setUserID] = useState();
+  const [userPW, setUserPW] = useState();
+
+  return (
+    <div className={classes.root}>
+      <Paper className={classes.paper} elevation={3}>
+        <Grid container className={classes.grid}>
+          <div className={classes.title}>LOGIN</div>
+          <TextField
+            className={classes.idInput}
+            label="ID"
+            variant="outlined"
+            size="small"
+            onChange={(e) => {
+              setUserID(e.target.value);
+            }}
+          />
+          <TextField
+            className={classes.pwInput}
+            label="Password"
+            type="password"
+            autoComplete="current-password"
+            variant="outlined"
+            size="small"
+            onChange={(e) => {
+              setUserPW(e.target.value);
+            }}
+          />
+          <Button className={classes.signin} variant="outlined" size="small">
+            Login
+          </Button>
+          <div className={classes.signup}>
+            <Link
+              to="/signup"
+              style={{ color: "gray", textDecoration: "none" }}
+            >
+              Click here to SIGN UP
+            </Link>
+          </div>
+        </Grid>
+      </Paper>
+    </div>
+  );
+}

+import React, { useState } from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+import { Link } from "react-router-dom";
+
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    position: "fixed",
+    minHeight: "100vh",
+    minWidth: "100vw",
+    backgroundColor: "rgba(0,0,0,0.8)",
+  },
+  paper: {
+    width: "25rem",
+    height: "28rem",
+    marginTop: "8rem",
+    marginLeft: "auto",
+    marginRight: "auto",
+    backgroundColor: "rgba(255,255,255,0.8)",
+  },
+  grid: {
+    "& > *": {
+      position: "relative",
+      marginLeft: "auto",
+      marginRight: "auto",
+    },
+  },
+  title: {
+    width: "100%",
+    marginTop: "5rem",
+    fontSize: 40,
+    textAlign: "center",
+  },
+  idInput: {
+    top: "3.5rem",
+    width: "70%",
+  },
+  pwInput: {
+    top: "5.5rem",
+    width: "70%",
+  },
+  signin: {
+    top: "7.4rem",
+    width: "70%",
+  },
+  signup: {
+    fontSize: 13,
+    top: "7.9rem",
+  },
+}));
+
+export default function LandingPage() {
+  const classes = useStyles();
+
+  const [userID, setUserID] = useState();
+  const [NickName, setNickName] = useState();
+  const [userPW, setUserPW] = useState();
+  const [checkPW, setCheckPW] = useState();
+
+  return (
+    <div className={classes.root}>
+      <Paper className={classes.paper} elevation={3}>
+        <Grid container className={classes.grid}>
+          <div className={classes.title}>SIGN IN</div>
+          <TextField
+            required
+            className={classes.idInput}
+            label="ID"
+            variant="outlined"
+            size="small"
+          />
+          <TextField
+            required
+            className={classes.idInput}
+            label="ID"
+            variant="outlined"
+            size="small"
+          />
+          <TextField
+            required
+            className={classes.pwInput}
+            label="Password"
+            type="password"
+            autoComplete="current-password"
+            variant="outlined"
+            size="small"
+          />
+          <TextField
+            required
+            className={classes.pwInput}
+            label="Password"
+            type="password"
+            autoComplete="current-password"
+            variant="outlined"
+            size="small"
+          />
+          <Button className={classes.signin} variant="outlined" size="small">
+            Login
+          </Button>
+          <div className={classes.signup}>Click here to SIGN UP</div>
+        </Grid>
+      </Paper>
+    </div>
+  );
+}