김대휘 / Do-gether

Go to a project
Toggle navigation Toggle navigation pinning
김대휘
a3cdd4bc 1 parent 5f23690f

LOGIN 페이지 디자인

Inline Side-by-side
Showing 6 changed files with 256 additions and 55 deletions
...@@ -148,7 +148,6 @@ body::-webkit-scrollbar-thumb { ...@@ -148,7 +148,6 @@ body::-webkit-scrollbar-thumb {
148 background-color: #ffffff; 148 background-color: #ffffff;
149 border-radius: 10px; 149 border-radius: 10px;
150 } 150 }
151 -
152 @font-face { 151 @font-face {
153 font-family: "MapoGoldenPier"; 152 font-family: "MapoGoldenPier";
154 src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoGoldenPierA.woff") 153 src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoGoldenPierA.woff")
......
1 import React from "react"; 1 import React from "react";
2 import LandingPage from "./pages/LandingPage.js"; 2 import LandingPage from "./pages/LandingPage.js";
3 import MainPage from "./pages/MainPage.js"; 3 import MainPage from "./pages/MainPage.js";
4 +import LoginPage from "./pages/LoginPage.js";
5 +import SignUpPage from "./pages/SignUpPage.js";
4 6
5 import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; 7 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
6 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles"; 8 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
...@@ -18,6 +20,8 @@ function App() { ...@@ -18,6 +20,8 @@ function App() {
18 <Switch> 20 <Switch>
19 <Route exact path="/" component={LandingPage} /> 21 <Route exact path="/" component={LandingPage} />
20 <Route exact path="/main" component={MainPage} /> 22 <Route exact path="/main" component={MainPage} />
23 + <Route exact path="/login" component={LoginPage} />
24 + <Route exact path="/signup" component={SignUpPage} />
21 </Switch> 25 </Switch>
22 </Router> 26 </Router>
23 </MuiThemeProvider> 27 </MuiThemeProvider>
......
...@@ -61,36 +61,3 @@ export default function AddButton() { ...@@ -61,36 +61,3 @@ export default function AddButton() {
61 ); 61 );
62 } 62 }
63 } 63 }
...\ No newline at end of file ...\ No newline at end of file
64 -
65 -/* <Modal
66 - open={open}
67 - >
68 - <div className={classes.paper}>
69 - <Typography className={classes.title} variant="h5">
70 - ADD TODO LIST
71 - </Typography>
72 - <FormControlLabel
73 - className={classes.isPublic}
74 - control={<Checkbox onClick={handlePublic} />}
75 - checked={isPublic}
76 - label="Public"
77 - />
78 -
79 - <form className={classes.input} noValidate autoComplete="off">
80 - <TextField required label="Title" onChange={handleTitle} />
81 - {textFieldBody.map((field) => field)}
82 - </form>
83 - <IconButton className={classes.addButton} onClick={handleAdd}>
84 - <AddIcon />
85 - </IconButton>
86 -
87 - <form className={classes.buttonGroup}>
88 - <Button variant="contained" color="primary" onClick={handleClose}>
89 - 확인
90 - </Button>
91 - <Button variant="contained" color="secondary" onClick={handleClose}>
92 - 취소
93 - </Button>
94 - </form>
95 - </div>
96 - </Modal> */
......
1 import React from "react"; 1 import React from "react";
2 import { makeStyles } from "@material-ui/core/styles"; 2 import { makeStyles } from "@material-ui/core/styles";
3 +import { Link } from "react-router-dom";
3 4
4 -const useStyles = makeStyles((theme) =>({ 5 +const useStyles = makeStyles((theme) => ({
5 root: { 6 root: {
6 - position:"fixed", 7 + position: "fixed",
7 - minHeight:"100vh", 8 + minHeight: "100vh",
8 - minWidth:"100vw", 9 + minWidth: "100vw",
9 - backgroundColor: "rgba(0,0,0,0.5)", 10 + backgroundColor: "rgba(0,0,0,0.8)",
10 - padding:0,
11 }, 11 },
12 - title:{ 12 + title: {
13 - color:"white", 13 + color: "white",
14 fontSize: 50, 14 fontSize: 50,
15 - textAlign:"center", 15 + textAlign: "center",
16 - marginLeft : "auto", 16 + marginLeft: "auto",
17 - marginRight : "auto", 17 + marginRight: "auto",
18 - marginTop:"15%", 18 + marginTop: "17rem",
19 - width: "15rem" 19 + width: "15rem",
20 + },
21 + content: {
22 + color: "white",
23 + textAlign: "center",
24 + marginTop: "1rem",
25 + marginLeft: "auto",
26 + marginRight: "auto",
27 + width: "20rem",
28 + },
29 + start: {
30 + color: "white",
31 + textAlign: "center",
32 + marginTop: "1rem",
33 + marginLeft: "auto",
34 + marginRight: "auto",
35 + padding: "7px 0 7px 0",
36 + width: "10rem",
37 + backgroundColor: "rgba(225,225,225,0.1)",
38 + border: "1px solid white",
39 + borderRadius: "15px",
20 }, 40 },
21 - content:{
22 - color:"white",
23 - textAlign:"center",
24 - marginTop:"1rem",
25 - marginLeft : "auto",
26 - marginRight : "auto",
27 - width: "20rem"
28 - }
29 })); 41 }));
30 42
31 export default function LandingPage() { 43 export default function LandingPage() {
32 const classes = useStyles(); 44 const classes = useStyles();
45 +
33 return ( 46 return (
34 <div className={classes.root}> 47 <div className={classes.root}>
35 <p className={classes.title}>Do-gether</p> 48 <p className={classes.title}>Do-gether</p>
36 <p className={classes.content}>Sharing your TODO-LIST with others!</p> 49 <p className={classes.content}>Sharing your TODO-LIST with others!</p>
50 + <div className={classes.start}>
51 + <Link to="/login" style={{textDecoration: "none",color:"white"}}>
52 + click here to join!
53 + </Link>
54 + </div>
37 </div> 55 </div>
38 ); 56 );
39 } 57 }
......
1 +import React, { useState } from "react";
2 +
3 +import { makeStyles } from "@material-ui/core/styles";
4 +import { Link } from "react-router-dom";
5 +
6 +import Grid from "@material-ui/core/Grid";
7 +import Paper from "@material-ui/core/Paper";
8 +import TextField from "@material-ui/core/TextField";
9 +import Button from "@material-ui/core/Button";
10 +
11 +const useStyles = makeStyles((theme) => ({
12 + root: {
13 + position: "fixed",
14 + minHeight: "100vh",
15 + minWidth: "100vw",
16 + backgroundColor: "rgba(0,0,0,0.8)",
17 + },
18 + paper: {
19 + width: "25rem",
20 + height: "28rem",
21 + marginTop: "8rem",
22 + marginLeft: "auto",
23 + marginRight: "auto",
24 + backgroundColor: "rgba(255,255,255,0.8)",
25 + },
26 + grid: {
27 + "& > *": {
28 + position: "relative",
29 + marginLeft: "auto",
30 + marginRight: "auto",
31 + },
32 + },
33 + title: {
34 + width: "100%",
35 + marginTop: "5rem",
36 + fontSize: 40,
37 + textAlign: "center",
38 + },
39 + idInput: {
40 + top: "3.5rem",
41 + width: "70%",
42 + },
43 + pwInput: {
44 + top: "5.5rem",
45 + width: "70%",
46 + },
47 + signin: {
48 + top: "7.4rem",
49 + width: "70%",
50 + },
51 + signup: {
52 + fontSize: 13,
53 + top: "7.9rem",
54 + },
55 +}));
56 +
57 +export default function LandingPage() {
58 + const classes = useStyles();
59 +
60 + const [userID, setUserID] = useState();
61 + const [userPW, setUserPW] = useState();
62 +
63 + return (
64 + <div className={classes.root}>
65 + <Paper className={classes.paper} elevation={3}>
66 + <Grid container className={classes.grid}>
67 + <div className={classes.title}>LOGIN</div>
68 + <TextField
69 + className={classes.idInput}
70 + label="ID"
71 + variant="outlined"
72 + size="small"
73 + onChange={(e) => {
74 + setUserID(e.target.value);
75 + }}
76 + />
77 + <TextField
78 + className={classes.pwInput}
79 + label="Password"
80 + type="password"
81 + autoComplete="current-password"
82 + variant="outlined"
83 + size="small"
84 + onChange={(e) => {
85 + setUserPW(e.target.value);
86 + }}
87 + />
88 + <Button className={classes.signin} variant="outlined" size="small">
89 + Login
90 + </Button>
91 + <div className={classes.signup}>
92 + <Link
93 + to="/signup"
94 + style={{ color: "gray", textDecoration: "none" }}
95 + >
96 + Click here to SIGN UP
97 + </Link>
98 + </div>
99 + </Grid>
100 + </Paper>
101 + </div>
102 + );
103 +}
1 +import React, { useState } from "react";
2 +
3 +import { makeStyles } from "@material-ui/core/styles";
4 +import { Link } from "react-router-dom";
5 +
6 +import Grid from "@material-ui/core/Grid";
7 +import Paper from "@material-ui/core/Paper";
8 +import TextField from "@material-ui/core/TextField";
9 +import Button from "@material-ui/core/Button";
10 +
11 +const useStyles = makeStyles((theme) => ({
12 + root: {
13 + position: "fixed",
14 + minHeight: "100vh",
15 + minWidth: "100vw",
16 + backgroundColor: "rgba(0,0,0,0.8)",
17 + },
18 + paper: {
19 + width: "25rem",
20 + height: "28rem",
21 + marginTop: "8rem",
22 + marginLeft: "auto",
23 + marginRight: "auto",
24 + backgroundColor: "rgba(255,255,255,0.8)",
25 + },
26 + grid: {
27 + "& > *": {
28 + position: "relative",
29 + marginLeft: "auto",
30 + marginRight: "auto",
31 + },
32 + },
33 + title: {
34 + width: "100%",
35 + marginTop: "5rem",
36 + fontSize: 40,
37 + textAlign: "center",
38 + },
39 + idInput: {
40 + top: "3.5rem",
41 + width: "70%",
42 + },
43 + pwInput: {
44 + top: "5.5rem",
45 + width: "70%",
46 + },
47 + signin: {
48 + top: "7.4rem",
49 + width: "70%",
50 + },
51 + signup: {
52 + fontSize: 13,
53 + top: "7.9rem",
54 + },
55 +}));
56 +
57 +export default function LandingPage() {
58 + const classes = useStyles();
59 +
60 + const [userID, setUserID] = useState();
61 + const [NickName, setNickName] = useState();
62 + const [userPW, setUserPW] = useState();
63 + const [checkPW, setCheckPW] = useState();
64 +
65 + return (
66 + <div className={classes.root}>
67 + <Paper className={classes.paper} elevation={3}>
68 + <Grid container className={classes.grid}>
69 + <div className={classes.title}>SIGN IN</div>
70 + <TextField
71 + required
72 + className={classes.idInput}
73 + label="ID"
74 + variant="outlined"
75 + size="small"
76 + />
77 + <TextField
78 + required
79 + className={classes.idInput}
80 + label="ID"
81 + variant="outlined"
82 + size="small"
83 + />
84 + <TextField
85 + required
86 + className={classes.pwInput}
87 + label="Password"
88 + type="password"
89 + autoComplete="current-password"
90 + variant="outlined"
91 + size="small"
92 + />
93 + <TextField
94 + required
95 + className={classes.pwInput}
96 + label="Password"
97 + type="password"
98 + autoComplete="current-password"
99 + variant="outlined"
100 + size="small"
101 + />
102 + <Button className={classes.signin} variant="outlined" size="small">
103 + Login
104 + </Button>
105 + <div className={classes.signup}>Click here to SIGN UP</div>
106 + </Grid>
107 + </Paper>
108 + </div>
109 + );
110 +}