김대휘 / Do-gether

Go to a project
Toggle navigation Toggle navigation pinning
김대휘
9ede902e 1 parent 009c3e58

Modal 분리

Inline Side-by-side
Showing 3 changed files with 241 additions and 41 deletions
1 import React, { useState } from "react"; 1 import React, { useState } from "react";
2 -
3 import { makeStyles } from "@material-ui/core/styles"; 2 import { makeStyles } from "@material-ui/core/styles";
3 +import ModalControl from "./ModalControl.js";
4 4
5 import Modal from "@material-ui/core/Modal"; 5 import Modal from "@material-ui/core/Modal";
6 import Icon from "@material-ui/core/Icon"; 6 import Icon from "@material-ui/core/Icon";
...@@ -8,6 +8,9 @@ import IconButton from "@material-ui/core/IconButton"; ...@@ -8,6 +8,9 @@ import IconButton from "@material-ui/core/IconButton";
8 import TextField from "@material-ui/core/TextField"; 8 import TextField from "@material-ui/core/TextField";
9 import Button from "@material-ui/core/Button"; 9 import Button from "@material-ui/core/Button";
10 import Typography from "@material-ui/core/Typography"; 10 import Typography from "@material-ui/core/Typography";
11 +import AddIcon from "@material-ui/icons/Add";
12 +import FormControlLabel from "@material-ui/core/FormControlLabel";
13 +import Checkbox from "@material-ui/core/Checkbox";
11 14
12 const useStyles = makeStyles((theme) => ({ 15 const useStyles = makeStyles((theme) => ({
13 iconButton: { 16 iconButton: {
...@@ -21,21 +24,15 @@ const useStyles = makeStyles((theme) => ({ ...@@ -21,21 +24,15 @@ const useStyles = makeStyles((theme) => ({
21 fontSize: 70, 24 fontSize: 70,
22 color: "black", 25 color: "black",
23 }, 26 },
24 - 27 + addButton: {
25 - paper: { 28 + fontSize: 11,
26 - position: "absolute", 29 + float: "right",
27 - width: 300, 30 + margin: 0,
28 - backgroundColor: "white", 31 + marginTop: "1rem",
29 - boxShadow: theme.shadows[5], 32 + marginRight: "1rem",
30 - padding: theme.spacing(2, 4, 3),
31 - },
32 - input: {
33 - "& > *": {
34 - margin: theme.spacing(1),
35 - width: "30ch",
36 - },
37 }, 33 },
38 - button: { 34 + buttonGroup: {
35 + clear: "both",
39 "& > *": { 36 "& > *": {
40 margin: theme.spacing(1), 37 margin: theme.spacing(1),
41 float: "right", 38 float: "right",
...@@ -43,17 +40,8 @@ const useStyles = makeStyles((theme) => ({ ...@@ -43,17 +40,8 @@ const useStyles = makeStyles((theme) => ({
43 }, 40 },
44 })); 41 }));
45 42
46 -function getModalStyle() {
47 - return {
48 - top: "50%",
49 - left: "50%",
50 - transform: "translate(-50%, -50%)",
51 - };
52 -}
53 -
54 export default function AddButton() { 43 export default function AddButton() {
55 const classes = useStyles(); 44 const classes = useStyles();
56 - const [modalStyle] = useState(getModalStyle);
57 const [open, setOpen] = useState(false); 45 const [open, setOpen] = useState(false);
58 46
59 const handleOpen = () => { 47 const handleOpen = () => {
...@@ -61,38 +49,56 @@ export default function AddButton() { ...@@ -61,38 +49,56 @@ export default function AddButton() {
61 }; 49 };
62 50
63 const handleClose = () => { 51 const handleClose = () => {
52 + console.log(1);
64 setOpen(false); 53 setOpen(false);
65 }; 54 };
66 55
56 + if (!open) {
67 return ( 57 return (
68 <> 58 <>
69 <IconButton className={classes.iconButton} onClick={handleOpen}> 59 <IconButton className={classes.iconButton} onClick={handleOpen}>
70 <Icon className={classes.icon}>add_circle</Icon> 60 <Icon className={classes.icon}>add_circle</Icon>
71 </IconButton> 61 </IconButton>
72 - <Modal 62 + </>
63 + );
64 + } else {
65 + return (
66 + <>
67 + <ModalControl state={open} handleClose={handleClose} />
68 + </>
69 + );
70 + }
71 +}
72 +
73 +/* <Modal
73 open={open} 74 open={open}
74 - aria-labelledby="simple-modal-title"
75 - aria-describedby="simple-modal-description"
76 > 75 >
77 - <div style={modalStyle} className={classes.paper}> 76 + <div className={classes.paper}>
78 - <Typography variant="h5">ADD TODO LIST</Typography> 77 + <Typography className={classes.title} variant="h5">
78 + ADD TODO LIST
79 + </Typography>
80 + <FormControlLabel
81 + className={classes.isPublic}
82 + control={<Checkbox onClick={handlePublic} />}
83 + checked={isPublic}
84 + label="Public"
85 + />
79 86
80 <form className={classes.input} noValidate autoComplete="off"> 87 <form className={classes.input} noValidate autoComplete="off">
81 - <TextField id="standard-basic" label="Title" /> 88 + <TextField required label="Title" onChange={handleTitle} />
82 - <TextField id="standard-basic" label="Todo 1" /> 89 + {textFieldBody.map((field) => field)}
83 - <TextField id="standard-basic" label="Todo 1" />
84 </form> 90 </form>
91 + <IconButton className={classes.addButton} onClick={handleAdd}>
92 + <AddIcon />
93 + </IconButton>
85 94
86 - <form className={classes.button}> 95 + <form className={classes.buttonGroup}>
87 - <Button variant="outlined" color="primary" onClick={handleClose}> 96 + <Button variant="contained" color="primary" onClick={handleClose}>
88 확인 97 확인
89 </Button> 98 </Button>
90 - <Button variant="outlined" color="secondary" onClick={handleClose}> 99 + <Button variant="contained" color="secondary" onClick={handleClose}>
91 취소 100 취소
92 </Button> 101 </Button>
93 </form> 102 </form>
94 </div> 103 </div>
95 - </Modal> 104 + </Modal> */
96 - </>
97 - );
98 -}
......
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 IconButton from "@material-ui/core/IconButton";
7 +import TextField from "@material-ui/core/TextField";
8 +import Button from "@material-ui/core/Button";
9 +import Typography from "@material-ui/core/Typography";
10 +import AddIcon from "@material-ui/icons/Add";
11 +import FormControlLabel from "@material-ui/core/FormControlLabel";
12 +import Checkbox from "@material-ui/core/Checkbox";
13 +
14 +const useStyles = makeStyles((theme) => ({
15 + iconButton: {
16 + margin: "0",
17 + padding: "0",
18 + position: "fixed",
19 + bottom: "3rem",
20 + right: "3rem",
21 + },
22 + icon: {
23 + fontSize: 70,
24 + color: "black",
25 + },
26 + addButton: {
27 + fontSize: 11,
28 + float: "right",
29 + margin: 0,
30 + marginTop: "1rem",
31 + marginRight: "1rem",
32 + },
33 + buttonGroup: {
34 + clear: "both",
35 + "& > *": {
36 + margin: theme.spacing(1),
37 + float: "right",
38 + },
39 + },
40 + title: {
41 + float: "left",
42 + width: "13rem",
43 + marginLeft: "0.5rem",
44 + marginTop: "0.3rem",
45 + padding: 0,
46 + },
47 + isPublic: {
48 + float: "left",
49 + },
50 + paper: {
51 + top: "50%",
52 + left: "50%",
53 + transform: "translate(-50%, -50%)",
54 + position: "absolute",
55 + width: "90%",
56 + maxWidth: 320,
57 + maxHeight: 500,
58 + msOverflowStyle: "none",
59 + backgroundColor: "white",
60 + boxShadow: theme.shadows[5],
61 + padding: theme.spacing(2, 4, 2),
62 + },
63 + input: {
64 + "& > *": {
65 + float: "left",
66 + margin: theme.spacing(1),
67 + marginRight: 0,
68 + width: "14.5rem",
69 + },
70 + },
71 +}));
72 +
73 +export default function AddButton({ state, handleClose }) {
74 + const classes = useStyles();
75 + const [title, setTitle] = useState("");
76 + const [isPublic, setIsPublic] = useState(1);
77 + const [textList, setTextList] = useState(new Array());
78 + const [textFieldBody, setTextFieldBody] = useState([
79 + <TextField required label="To do 1" onChange={(e) => handleText(e, 0)} />,
80 + ]);
81 +
82 + const addApi = (data) => {
83 + return fetch("/api/addcard", {
84 + method: "POST",
85 + headers: {
86 + "Content-Type": "application/json",
87 + },
88 + body: JSON.stringify(data),
89 + }).then((response) => response.json());
90 + };
91 +
92 + // const initData = () => {
93 + // const initArr = new Array("","","","","");
94 + // setTitle("");
95 + // setIsPublic(1);
96 + // setTextList(initArr);
97 + // console.log(textList,1);
98 + // setTextFieldBody([
99 + // <TextField required label="To do 1" onChange={(e) => handleText(e, 0)} />,
100 + // ]);
101 + // };
102 +
103 + const checkEemptyList = (arr) => {
104 + if (arr.length === 0) {
105 + return 1;
106 + }
107 + for (let idx = 0; idx < arr.length; idx++) {
108 + if (arr[idx] === undefined || arr[idx] === "") {
109 + return 1;
110 + }
111 + }
112 + return 0;
113 + };
114 +
115 + const checkAndClose = () => {
116 + if (title === "") {
117 + alert("Please enter a title!");
118 + } else if (checkEemptyList(textList)) {
119 + alert("Please fill in the blank!");
120 + } else {
121 + //initData();
122 + console.log(textList);
123 + handleClose();
124 + }
125 + };
126 +
127 + const handleTitle = (e) => {
128 + setTitle(e.target.value);
129 + };
130 +
131 + const handlePublic = () => {
132 + setIsPublic(isPublic ? 0 : 1);
133 + };
134 +
135 + const handleText = (e, idx) => {
136 + let tempArr = textList;
137 + tempArr[idx] = e.target.value;
138 + setTextList(tempArr);
139 + };
140 +
141 + const handleAdd = () => {
142 + if (textFieldBody.length < 5) {
143 + const idx = textFieldBody.length;
144 + setTextFieldBody([
145 + ...textFieldBody,
146 + <TextField
147 + required
148 + label={"To do " + (idx + 1)}
149 + onChange={(e) => handleText(e, idx)}
150 + />,
151 + ]);
152 + } else {
153 + alert("You can register up to five.");
154 + }
155 + };
156 +
157 + return (
158 + <>
159 + <Modal open={true}>
160 + <div className={classes.paper}>
161 + <Typography className={classes.title} variant="h5">
162 + ADD TODO LIST
163 + </Typography>
164 + <FormControlLabel
165 + className={classes.isPublic}
166 + control={<Checkbox onClick={handlePublic} />}
167 + checked={isPublic}
168 + label="Public"
169 + />
170 +
171 + <form className={classes.input} noValidate autoComplete="off">
172 + <TextField required label="Title" onChange={handleTitle} />
173 + {textFieldBody.map((field) => field)}
174 + </form>
175 + <IconButton className={classes.addButton} onClick={handleAdd}>
176 + <AddIcon />
177 + </IconButton>
178 +
179 + <form className={classes.buttonGroup}>
180 + <Button variant="contained" color="primary" onClick={checkAndClose}>
181 + 확인
182 + </Button>
183 + <Button variant="contained" color="secondary" onClick={handleClose}>
184 + 취소
185 + </Button>
186 + </form>
187 + </div>
188 + </Modal>
189 + </>
190 + );
191 +}
...@@ -34,8 +34,11 @@ const useStyles = makeStyles({ ...@@ -34,8 +34,11 @@ const useStyles = makeStyles({
34 export default function TodoCard({ data, isMine, isVisible }) { 34 export default function TodoCard({ data, isMine, isVisible }) {
35 const classes = useStyles(); 35 const classes = useStyles();
36 const [render, setRender] = useState(0); 36 const [render, setRender] = useState(0);
37 - const todo = data.todo.split(","); 37 + const todo = data.todo.split(",").slice(0,-1).map((text)=>{
38 - const [checkState, setCheckState] = useState(data.ck.split(",").map((ck) => { 38 + return text;
39 + });
40 + console.log(todo);
41 + const [checkState, setCheckState] = useState(data.ck.split(",").slice(0,-1).map((ck) => {
39 return parseInt(ck); 42 return parseInt(ck);
40 })) 43 }))
41 let settingButton = null; 44 let settingButton = null;
......