김대휘 / Do-gether

Go to a project
Toggle navigation Toggle navigation pinning
김대휘
2b921e18 1 parent 9815ca1b

모달 추가

Inline Side-by-side
Showing 7 changed files with 281 additions and 143 deletions
1 -html, body, div, span, applet, object, iframe, 1 +html,
2 -h1, h2, h3, h4, h5, h6, p, blockquote, pre, 2 +body,
3 -a, abbr, acronym, address, big, cite, code, 3 +div,
4 -del, dfn, em, img, ins, kbd, q, s, samp, 4 +span,
5 -small, strike, strong, sub, sup, tt, var, 5 +applet,
6 -b, u, i, center, 6 +object,
7 -dl, dt, dd, ol, ul, li, 7 +iframe,
8 -fieldset, form, label, legend, 8 +h1,
9 -table, caption, tbody, tfoot, thead, tr, th, td, 9 +h2,
10 -article, aside, canvas, details, embed, 10 +h3,
11 -figure, figcaption, footer, header, hgroup, 11 +h4,
12 -menu, nav, output, ruby, section, summary, 12 +h5,
13 -time, mark, audio, video { 13 +h6,
14 - margin: 0; 14 +p,
15 - padding: 0; 15 +blockquote,
16 - border: 0; 16 +pre,
17 - font-size: 100%; 17 +a,
18 - font: inherit; 18 +abbr,
19 - vertical-align: baseline; 19 +acronym,
20 +address,
21 +big,
22 +cite,
23 +code,
24 +del,
25 +dfn,
26 +em,
27 +img,
28 +ins,
29 +kbd,
30 +q,
31 +s,
32 +samp,
33 +small,
34 +strike,
35 +strong,
36 +sub,
37 +sup,
38 +tt,
39 +var,
40 +b,
41 +u,
42 +i,
43 +center,
44 +dl,
45 +dt,
46 +dd,
47 +ol,
48 +ul,
49 +li,
50 +fieldset,
51 +form,
52 +label,
53 +legend,
54 +table,
55 +caption,
56 +tbody,
57 +tfoot,
58 +thead,
59 +tr,
60 +th,
61 +td,
62 +article,
63 +aside,
64 +canvas,
65 +details,
66 +embed,
67 +figure,
68 +figcaption,
69 +footer,
70 +header,
71 +hgroup,
72 +menu,
73 +nav,
74 +output,
75 +ruby,
76 +section,
77 +summary,
78 +time,
79 +mark,
80 +audio,
81 +video {
82 + margin: 0;
83 + padding: 0;
84 + border: 0;
85 + font-size: 100%;
86 + font: inherit;
87 + vertical-align: baseline;
20 } 88 }
21 /* HTML5 display-role reset for older browsers */ 89 /* HTML5 display-role reset for older browsers */
22 -article, aside, details, figcaption, figure, 90 +article,
23 -footer, header, hgroup, menu, nav, section { 91 +aside,
24 - display: block; 92 +details,
93 +figcaption,
94 +figure,
95 +footer,
96 +header,
97 +hgroup,
98 +menu,
99 +nav,
100 +section {
101 + display: block;
25 } 102 }
26 body { 103 body {
27 - line-height: 1; 104 + line-height: 1;
28 } 105 }
29 -ol, ul { 106 +ol,
30 - list-style: none; 107 +ul {
108 + list-style: none;
31 } 109 }
32 -blockquote, q { 110 +blockquote,
33 - quotes: none; 111 +q {
112 + quotes: none;
34 } 113 }
35 -blockquote:before, blockquote:after, 114 +blockquote:before,
36 -q:before, q:after { 115 +blockquote:after,
37 - content: ''; 116 +q:before,
38 - content: none; 117 +q:after {
118 + content: "";
119 + content: none;
39 } 120 }
40 table { 121 table {
41 - border-collapse: collapse; 122 + border-collapse: collapse;
42 - border-spacing: 0; 123 + border-spacing: 0;
43 } 124 }
44 125
126 +/*Background random image: use unsplash api*/
127 +html,
128 +body {
129 + width:100vw; /* or % */
130 + height:100vh; /* or % */
131 + overflow-x: hidden;
132 +}
133 +body {
134 + width: 100%;
135 + background-attachment: fixed;
136 + background-image: url("https://source.unsplash.com/random/1920x1080/?nature");
137 + background-size: "cover";
138 +}
45 139
46 -/*background random image: use unsplash api*/
47 -html, body{
48 - height:100%;
49 -}
50 -body{
51 - width:100%;
52 - background-attachment:fixed;
53 - background-image:url('https://source.unsplash.com/random/1920x1080/?nature');
54 - background-size:"cover";
55 -}
...\ No newline at end of file ...\ No newline at end of file
140 +/*SCROLL BAR DESIGN*/
141 +body::-webkit-scrollbar {
142 + width: 10px;
143 + background: transparent;
144 + background-color: rgba(0, 0, 0, 0.5);
145 +}
146 +body::-webkit-scrollbar-thumb {
147 + background-color: #ffffff;
148 + border-radius: 10px;
149 +}
......
...@@ -3,17 +3,15 @@ ...@@ -3,17 +3,15 @@
3 <head> 3 <head>
4 <meta charset="utf-8" /> 4 <meta charset="utf-8" />
5 <link rel="stylesheet" href="%PUBLIC_URL%/index.css" /> 5 <link rel="stylesheet" href="%PUBLIC_URL%/index.css" />
6 - <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 +
7 - <meta name="theme-color" content="#000000" />
8 - <meta
9 - name="description"
10 - content="Web site created using create-react-app"
11 - />
12 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> 7 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
13 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> 8 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
9 +
14 <title>Do-gether</title> 10 <title>Do-gether</title>
15 </head> 11 </head>
12 +
16 <body> 13 <body>
17 <div id="root"></div> 14 <div id="root"></div>
18 </body> 15 </body>
16 +
19 </html> 17 </html>
......
1 +import React, { useState } from "react";
2 +
3 +import { makeStyles } from "@material-ui/core/styles";
4 +
5 +import Modal from "@material-ui/core/Modal";
6 +import Icon from "@material-ui/core/Icon";
7 +import IconButton from "@material-ui/core/IconButton";
8 +import TextField from "@material-ui/core/TextField";
9 +import Button from "@material-ui/core/Button";
10 +import Typography from '@material-ui/core/Typography';
11 +
12 +const useStyles = makeStyles((theme) => ({
13 + iconButton: {
14 + margin: "0",
15 + padding: "0",
16 + position: "fixed",
17 + bottom: "3rem",
18 + right: "3rem",
19 + },
20 + icon: {
21 + fontSize: 70,
22 + color: "black"
23 + },
24 +
25 + paper: {
26 + position: "absolute",
27 + width: 300,
28 + backgroundColor: "white",
29 + boxShadow: theme.shadows[5],
30 + padding: theme.spacing(2, 4, 3),
31 + },
32 + input: {
33 + "& > *": {
34 + margin: theme.spacing(1),
35 + width: "30ch",
36 + },
37 + },
38 + button:{
39 + '& > *': {
40 + margin: theme.spacing(1),
41 + float:"right"
42 + },
43 + }
44 +}));
45 +
46 +function getModalStyle() {
47 + return {
48 + top: "50%",
49 + left: "50%",
50 + transform: "translate(-50%, -50%)",
51 + };
52 +}
53 +
54 +export default function AddButton() {
55 + const classes = useStyles();
56 + const [modalStyle] = useState(getModalStyle);
57 + const [open, setOpen] = useState(false);
58 +
59 + const handleOpen = () => {
60 + setOpen(true);
61 + };
62 +
63 + const handleClose = () => {
64 + setOpen(false);
65 + };
66 +
67 + const body = (
68 + <div style={modalStyle} className={classes.paper}>
69 + <Typography variant="h5">ADD TODO LIST</Typography>
70 +
71 + <form className={classes.input} noValidate autoComplete="off">
72 + <TextField id="standard-basic" label="Title" />
73 + <TextField id="standard-basic" label="Todo 1" />
74 + <TextField id="standard-basic" label="Todo 1" />
75 + </form>
76 +
77 + <form className={classes.button}>
78 + <Button variant="outlined" color="primary" onClick={handleClose}>
79 + 확인
80 + </Button>
81 + <Button variant="outlined" color="secondary" onClick={handleClose}>
82 + 취소
83 + </Button>
84 + </form>
85 + </div>
86 + );
87 +
88 + return (
89 + <>
90 + <IconButton className={classes.iconButton} onClick={handleOpen}>
91 + <Icon className={classes.icon}>add_circle</Icon>
92 + </IconButton>
93 + <Modal
94 + open={open}
95 + aria-labelledby="simple-modal-title"
96 + aria-describedby="simple-modal-description"
97 + >
98 + {body}
99 + </Modal>
100 + </>
101 + );
102 +}
...@@ -5,11 +5,10 @@ import Container from "@material-ui/core/Container"; ...@@ -5,11 +5,10 @@ import Container from "@material-ui/core/Container";
5 import Grid from "@material-ui/core/Grid"; 5 import Grid from "@material-ui/core/Grid";
6 import Typography from "@material-ui/core/Typography"; 6 import Typography from "@material-ui/core/Typography";
7 7
8 -import Icon from "@material-ui/core/Icon";
9 -import IconButton from "@material-ui/core/IconButton";
10 // import CircularProgress from "@material-ui/core/CircularProgress"; 8 // import CircularProgress from "@material-ui/core/CircularProgress";
11 9
12 import TodoCard from "./TodoCard.js"; 10 import TodoCard from "./TodoCard.js";
11 +import AddButton from "./AddButton.js";
13 12
14 const useStyles = makeStyles((theme) => ({ 13 const useStyles = makeStyles((theme) => ({
15 root: { 14 root: {
...@@ -111,10 +110,7 @@ export default function BodyLayout() { ...@@ -111,10 +110,7 @@ export default function BodyLayout() {
111 <Icon style={{ fontSize: 60 }}>add_circle</Icon> 110 <Icon style={{ fontSize: 60 }}>add_circle</Icon>
112 </Grid> */} 111 </Grid> */}
113 </Grid> 112 </Grid>
114 - 113 + <AddButton></AddButton>
115 - <IconButton className={classes.iconButton}>
116 - <Icon className={classes.icon}>add_circle</Icon>
117 - </IconButton>
118 </Container> 114 </Container>
119 </div> 115 </div>
120 ); 116 );
......
1 -import React from 'react';
2 -import { makeStyles } from '@material-ui/core/styles';
3 -import Modal from '@material-ui/core/Modal';
4 -
5 -function rand() {
6 - return Math.round(Math.random() * 20) - 10;
7 -}
8 -
9 -function getModalStyle() {
10 - const top = 50 + rand();
11 - const left = 50 + rand();
12 -
13 - return {
14 - top: `${top}%`,
15 - left: `${left}%`,
16 - transform: `translate(-${top}%, -${left}%)`,
17 - };
18 -}
19 -
20 -const useStyles = makeStyles((theme) => ({
21 - paper: {
22 - position: 'absolute',
23 - width: 400,
24 - backgroundColor: theme.palette.background.paper,
25 - border: '2px solid #000',
26 - boxShadow: theme.shadows[5],
27 - padding: theme.spacing(2, 4, 3),
28 - },
29 -}));
30 -
31 -export default function SimpleModal() {
32 - const classes = useStyles();
33 - // getModalStyle is not a pure function, we roll the style only on the first render
34 - const [modalStyle] = React.useState(getModalStyle);
35 - const [open, setOpen] = React.useState(false);
36 -
37 - const handleOpen = () => {
38 - setOpen(true);
39 - };
40 -
41 - const handleClose = () => {
42 - setOpen(false);
43 - };
44 -
45 - const body = (
46 - <div style={modalStyle} className={classes.paper}>
47 - <h2 id="simple-modal-title">Text in a modal</h2>
48 - <p id="simple-modal-description">
49 - Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
50 - </p>
51 - <SimpleModal />
52 - </div>
53 - );
54 -
55 - return (
56 - <div>
57 - <button type="button" onClick={handleOpen}>
58 - Open Modal
59 - </button>
60 - <Modal
61 - open={open}
62 - onClose={handleClose}
63 - aria-labelledby="simple-modal-title"
64 - aria-describedby="simple-modal-description"
65 - >
66 - {body}
67 - </Modal>
68 - </div>
69 - );
70 -}
1 +import React from "react";
2 +
3 +import { makeStyles } from "@material-ui/core/styles";
4 +
5 +import Icon from "@material-ui/core/Icon";
6 +import IconButton from "@material-ui/core/IconButton";
7 +
8 +const useStyles = makeStyles({
9 + iconButton: {
10 + float: "right",
11 + margin: "0",
12 + padding: "0",
13 + },
14 + icon: {
15 + fontSize: 16,
16 + color: "gray",
17 + },
18 +});
19 +
20 +export default function SettingButton() {
21 + const classes = useStyles();
22 +
23 + return (
24 + <>
25 + <IconButton className={classes.iconButton}>
26 + <Icon className={classes.icon}>
27 + settings
28 + </Icon>
29 + </IconButton>
30 + </>
31 + );
32 +}
...@@ -5,8 +5,8 @@ import CardContent from "@material-ui/core/CardContent"; ...@@ -5,8 +5,8 @@ import CardContent from "@material-ui/core/CardContent";
5 import Typography from "@material-ui/core/Typography"; 5 import Typography from "@material-ui/core/Typography";
6 import FormControlLabel from "@material-ui/core/FormControlLabel"; 6 import FormControlLabel from "@material-ui/core/FormControlLabel";
7 import Checkbox from "@material-ui/core/Checkbox"; 7 import Checkbox from "@material-ui/core/Checkbox";
8 -import Icon from "@material-ui/core/Icon"; 8 +
9 -import IconButton from "@material-ui/core/IconButton"; 9 +import SettingButton from "./SettingButton.js";
10 10
11 const useStyles = makeStyles({ 11 const useStyles = makeStyles({
12 root: { 12 root: {
...@@ -16,15 +16,6 @@ const useStyles = makeStyles({ ...@@ -16,15 +16,6 @@ const useStyles = makeStyles({
16 fontSize: 14, 16 fontSize: 14,
17 float: "left", 17 float: "left",
18 }, 18 },
19 - iconButton: {
20 - float: "right",
21 - margin: "0",
22 - padding: "0",
23 - },
24 - icon: {
25 - fontSize: 16,
26 - color: "black",
27 - },
28 title: { 19 title: {
29 clear: "both", 20 clear: "both",
30 float: "left", 21 float: "left",
...@@ -33,7 +24,6 @@ const useStyles = makeStyles({ ...@@ -33,7 +24,6 @@ const useStyles = makeStyles({
33 clear: "both", 24 clear: "both",
34 float: "left", 25 float: "left",
35 }, 26 },
36 -
37 percent: { 27 percent: {
38 color: "#00BB00", 28 color: "#00BB00",
39 float: "right", 29 float: "right",
...@@ -51,11 +41,7 @@ export default function TodoCard({ data, isMine, isVisible }) { ...@@ -51,11 +41,7 @@ export default function TodoCard({ data, isMine, isVisible }) {
51 41
52 if (isMine) { 42 if (isMine) {
53 settingButton = ( 43 settingButton = (
54 - <IconButton className={classes.iconButton}> 44 + <SettingButton></SettingButton>
55 - <Icon className={classes.icon} color="primary" on>
56 - settings
57 - </Icon>
58 - </IconButton>
59 ); 45 );
60 } 46 }
61 return ( 47 return (
...@@ -77,7 +63,7 @@ export default function TodoCard({ data, isMine, isVisible }) { ...@@ -77,7 +63,7 @@ export default function TodoCard({ data, isMine, isVisible }) {
77 return ( 63 return (
78 <FormControlLabel 64 <FormControlLabel
79 className={classes.checkBox} 65 className={classes.checkBox}
80 - control={<Checkbox />} 66 + control={<Checkbox/>}
81 checked={check[idx]} 67 checked={check[idx]}
82 label={item} 68 label={item}
83 /> 69 />
......