Showing
16 changed files
with
121 additions
and
77 deletions
client/.gitignore
0 → 100644
1 | +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
2 | + | ||
3 | +# dependencies | ||
4 | +/node_modules | ||
5 | +/.pnp | ||
6 | +.pnp.js | ||
7 | + | ||
8 | +# testing | ||
9 | +/coverage | ||
10 | + | ||
11 | +# production | ||
12 | +/build | ||
13 | + | ||
14 | +# misc | ||
15 | +.DS_Store | ||
16 | +.env.local | ||
17 | +.env.development.local | ||
18 | +.env.test.local | ||
19 | +.env.production.local | ||
20 | + | ||
21 | +npm-debug.log* | ||
22 | +yarn-debug.log* | ||
23 | +yarn-error.log* | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
File moved
File moved
client/package.json
0 → 100644
1 | +{ | ||
2 | + "name": "do-gether", | ||
3 | + "version": "0.1.0", | ||
4 | + "private": true, | ||
5 | + "dependencies": { | ||
6 | + "@material-ui/core": "^4.10.1", | ||
7 | + "@material-ui/icons": "^4.9.1", | ||
8 | + "@testing-library/jest-dom": "^4.2.4", | ||
9 | + "@testing-library/react": "^9.3.2", | ||
10 | + "@testing-library/user-event": "^7.1.2", | ||
11 | + "react": "^16.13.1", | ||
12 | + "react-dom": "^16.13.1", | ||
13 | + "react-scripts": "3.4.1" | ||
14 | + }, | ||
15 | + "scripts": { | ||
16 | + "start": "react-scripts start", | ||
17 | + "build": "react-scripts build", | ||
18 | + "test": "react-scripts test", | ||
19 | + "eject": "react-scripts eject" | ||
20 | + }, | ||
21 | + "eslintConfig": { | ||
22 | + "extends": "react-app" | ||
23 | + }, | ||
24 | + "browserslist": { | ||
25 | + "production": [ | ||
26 | + ">0.2%", | ||
27 | + "not dead", | ||
28 | + "not op_mini all" | ||
29 | + ], | ||
30 | + "development": [ | ||
31 | + "last 1 chrome version", | ||
32 | + "last 1 firefox version", | ||
33 | + "last 1 safari version" | ||
34 | + ] | ||
35 | + } | ||
36 | +} |
File moved
File moved
... | @@ -2,12 +2,22 @@ import React from "react"; | ... | @@ -2,12 +2,22 @@ import React from "react"; |
2 | import { makeStyles } from "@material-ui/core/styles"; | 2 | import { makeStyles } from "@material-ui/core/styles"; |
3 | import Grid from "@material-ui/core/Grid"; | 3 | import Grid from "@material-ui/core/Grid"; |
4 | import Container from "@material-ui/core/Container"; | 4 | import Container from "@material-ui/core/Container"; |
5 | +import Icon from '@material-ui/core/Icon'; | ||
5 | 6 | ||
6 | import TodoCard from "./TodoCard.js"; | 7 | import TodoCard from "./TodoCard.js"; |
8 | + | ||
9 | +const data={ | ||
10 | + date:"2020-99-99", | ||
11 | + title:"머휘의 TODO LSIT", | ||
12 | + todo:["응가하기","똥싸기","변누기"] | ||
13 | +} | ||
14 | + | ||
7 | const useStyles = makeStyles((theme) => ({ | 15 | const useStyles = makeStyles((theme) => ({ |
8 | root: { | 16 | root: { |
9 | flexGrow: 1, | 17 | flexGrow: 1, |
10 | - marginTop: "1rem", | 18 | + backgroundColor:"#e9e9e9", |
19 | + paddingTop:"4rem", | ||
20 | + marginTop:"0" | ||
11 | }, | 21 | }, |
12 | item: { | 22 | item: { |
13 | marginLeft: "auto", | 23 | marginLeft: "auto", |
... | @@ -22,24 +32,11 @@ export default function CenteredGrid() { | ... | @@ -22,24 +32,11 @@ export default function CenteredGrid() { |
22 | <Container className={classes.root} maxwidth="sm"> | 32 | <Container className={classes.root} maxwidth="sm"> |
23 | <Grid className={classes.item} container spacing={3}> | 33 | <Grid className={classes.item} container spacing={3}> |
24 | <Grid item xs="6" sm="6" md="3"> | 34 | <Grid item xs="6" sm="6" md="3"> |
25 | - <TodoCard></TodoCard> | 35 | + <TodoCard data={data}/> |
26 | </Grid> | 36 | </Grid> |
27 | - <Grid item xs="6" sm="6" md="3"> | 37 | + <Grid item xs="6" sm="6" md="3" alignItems="center"> |
28 | - <TodoCard></TodoCard> | 38 | + <Icon style={{ fontSize: 60 }}>add_circle</Icon> |
29 | </Grid> | 39 | </Grid> |
30 | - <Grid item xs="6" sm="6" md="3"> | ||
31 | - <TodoCard></TodoCard> | ||
32 | - </Grid> | ||
33 | - <Grid item xs="6" sm="6" md="3"> | ||
34 | - <TodoCard></TodoCard> | ||
35 | - </Grid> | ||
36 | - <Grid item xs="6" sm="6" md="3"> | ||
37 | - <TodoCard></TodoCard> | ||
38 | - </Grid> | ||
39 | - <Grid item xs="6" sm="6" md="3"> | ||
40 | - <TodoCard></TodoCard> | ||
41 | - </Grid> | ||
42 | - | ||
43 | </Grid> | 40 | </Grid> |
44 | </Container> | 41 | </Container> |
45 | ); | 42 | ); | ... | ... |
... | @@ -27,7 +27,7 @@ export default function ButtonAppBar() { | ... | @@ -27,7 +27,7 @@ export default function ButtonAppBar() { |
27 | 27 | ||
28 | return ( | 28 | return ( |
29 | <div className={classes.root}> | 29 | <div className={classes.root}> |
30 | - <AppBar className={classes.bar} position="static"> | 30 | + <AppBar className={classes.bar} position="fixed"> |
31 | <Toolbar> | 31 | <Toolbar> |
32 | <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu"> | 32 | <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu"> |
33 | <MenuIcon /> | 33 | <MenuIcon /> | ... | ... |
... | @@ -2,57 +2,52 @@ import React from "react"; | ... | @@ -2,57 +2,52 @@ import React from "react"; |
2 | import { makeStyles } from "@material-ui/core/styles"; | 2 | import { makeStyles } from "@material-ui/core/styles"; |
3 | import Card from "@material-ui/core/Card"; | 3 | import Card from "@material-ui/core/Card"; |
4 | import CardContent from "@material-ui/core/CardContent"; | 4 | import CardContent from "@material-ui/core/CardContent"; |
5 | -import Button from "@material-ui/core/Button"; | ||
6 | import Typography from "@material-ui/core/Typography"; | 5 | import Typography from "@material-ui/core/Typography"; |
7 | import FormControlLabel from "@material-ui/core/FormControlLabel"; | 6 | import FormControlLabel from "@material-ui/core/FormControlLabel"; |
8 | import Checkbox from "@material-ui/core/Checkbox"; | 7 | import Checkbox from "@material-ui/core/Checkbox"; |
8 | +import Icon from "@material-ui/core/Icon"; | ||
9 | 9 | ||
10 | const useStyles = makeStyles({ | 10 | const useStyles = makeStyles({ |
11 | - root: { | 11 | + root: {}, |
12 | + date: { | ||
13 | + fontSize: 14, | ||
14 | + float: "left", | ||
15 | + }, | ||
16 | + icon: { | ||
17 | + marginRight: "1%", | ||
18 | + float: "right", | ||
19 | + color: "black", | ||
12 | }, | 20 | }, |
13 | title: { | 21 | title: { |
14 | - fontSize: 14, | 22 | + clear: "both", |
15 | }, | 23 | }, |
16 | pos: { | 24 | pos: { |
17 | marginBottom: 12, | 25 | marginBottom: 12, |
18 | }, | 26 | }, |
19 | }); | 27 | }); |
20 | 28 | ||
21 | -export default function SimpleCard() { | 29 | +export default function TodoCard(props) { |
22 | const classes = useStyles(); | 30 | const classes = useStyles(); |
23 | 31 | ||
24 | return ( | 32 | return ( |
25 | <Card className={classes.root}> | 33 | <Card className={classes.root}> |
26 | <CardContent> | 34 | <CardContent> |
27 | - <Typography | 35 | + <Typography className={classes.date} color="textSecondary" gutterBottom> |
28 | - className={classes.title} | 36 | + {props.data.date} |
29 | - color="textSecondary" | ||
30 | - gutterBottom | ||
31 | - > | ||
32 | - 2020-03-26 | ||
33 | </Typography> | 37 | </Typography> |
34 | - <Typography variant="h5" component="h2"> | 38 | + <Icon className={classes.icon} color="primary"> |
35 | - Todo Main | 39 | + settings |
40 | + </Icon> | ||
41 | + <Typography className={classes.title} variant="h5" component="h2"> | ||
42 | + {props.data.title} | ||
36 | </Typography> | 43 | </Typography> |
44 | + {props.data.todo.map((todo) => { | ||
45 | + return ( | ||
37 | <div> | 46 | <div> |
38 | - <FormControlLabel | 47 | + <FormControlLabel control={<Checkbox />} label={todo} /> |
39 | - control={<Checkbox name="checkedC" />} | ||
40 | - label="똥싸기" | ||
41 | - /> | ||
42 | - </div> | ||
43 | - <div> | ||
44 | - <FormControlLabel | ||
45 | - control={<Checkbox name="checkedC" />} | ||
46 | - label="똥싸기" | ||
47 | - /> | ||
48 | - </div> | ||
49 | - <div> | ||
50 | - <FormControlLabel | ||
51 | - control={<Checkbox name="checkedC" />} | ||
52 | - label="똥싸기" | ||
53 | - /> | ||
54 | </div> | 48 | </div> |
55 | - <Button size="small">Learn More</Button> | 49 | + ); |
50 | + })} | ||
56 | </CardContent> | 51 | </CardContent> |
57 | </Card> | 52 | </Card> |
58 | ); | 53 | ); | ... | ... |
File moved
client/yarn.lock
0 → 100644
This diff could not be displayed because it is too large.
1 | { | 1 | { |
2 | "name": "do-gether", | 2 | "name": "do-gether", |
3 | - "version": "0.1.0", | 3 | + "version": "1.0.0", |
4 | - "private": true, | ||
5 | - "dependencies": { | ||
6 | - "@material-ui/core": "^4.10.1", | ||
7 | - "@material-ui/icons": "^4.9.1", | ||
8 | - "@testing-library/jest-dom": "^4.2.4", | ||
9 | - "@testing-library/react": "^9.3.2", | ||
10 | - "@testing-library/user-event": "^7.1.2", | ||
11 | - "react": "^16.13.1", | ||
12 | - "react-dom": "^16.13.1", | ||
13 | - "react-scripts": "3.4.1" | ||
14 | - }, | ||
15 | "scripts": { | 4 | "scripts": { |
16 | - "start": "react-scripts start", | 5 | + "client": "cd client && yarn start", |
17 | - "build": "react-scripts build", | 6 | + "server": "nodemon server.js", |
18 | - "test": "react-scripts test", | 7 | + "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"" |
19 | - "eject": "react-scripts eject" | 8 | + }, |
9 | + "dependencies": { | ||
10 | + "body-parser": "^1.18.3", | ||
11 | + "express": "^4.16.4" | ||
20 | }, | 12 | }, |
21 | - "eslintConfig": { | 13 | + "devDependencies": { |
22 | - "extends": "react-app" | 14 | + "concurrently": "^4.0.1" |
23 | }, | 15 | }, |
24 | - "browserslist": { | 16 | + "proxy": "http://localhost:5000/" |
25 | - "production": [ | ||
26 | - ">0.2%", | ||
27 | - "not dead", | ||
28 | - "not op_mini all" | ||
29 | - ], | ||
30 | - "development": [ | ||
31 | - "last 1 chrome version", | ||
32 | - "last 1 firefox version", | ||
33 | - "last 1 safari version" | ||
34 | - ] | ||
35 | - } | ||
36 | } | 17 | } | ... | ... |
server.js
0 → 100644
1 | +const express = require('express'); | ||
2 | +const bodyParser = require('body-parser'); | ||
3 | +const app = express(); | ||
4 | +const port = process.env.PORT || 5000; | ||
5 | +app.use(bodyParser.json()); | ||
6 | +app.use(bodyParser.urlencoded({ extended: true })); | ||
7 | + | ||
8 | +app.get('/api/hello', (req, res) => { | ||
9 | +res.send({ message: 'Hello Express!' }); | ||
10 | +}); | ||
11 | + | ||
12 | +app.listen(port, () => console.log(`Listening on port ${port}`)); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/App.css
deleted
100644 → 0
File mode changed
src/index.css
deleted
100644 → 0
File mode changed
This diff could not be displayed because it is too large.
-
Please register or login to post a comment