Showing
7 changed files
with
62 additions
and
27 deletions
... | @@ -45,7 +45,7 @@ Then you can simply: | ... | @@ -45,7 +45,7 @@ Then you can simply: |
45 | Reference from [`YARN`](https://yarnpkg.com/en/docs/install) | 45 | Reference from [`YARN`](https://yarnpkg.com/en/docs/install) |
46 | <br> | 46 | <br> |
47 | 47 | ||
48 | -### Third, add "database.json" | 48 | +#### Third, add "database.json" |
49 | you should add `database.json` in the following format. | 49 | you should add `database.json` in the following format. |
50 | ```sh | 50 | ```sh |
51 | { | 51 | { | ... | ... |
... | @@ -67,7 +67,7 @@ export default function BodyLayout() { | ... | @@ -67,7 +67,7 @@ export default function BodyLayout() { |
67 | } else { | 67 | } else { |
68 | return ( | 68 | return ( |
69 | <div className={classes.root}> | 69 | <div className={classes.root}> |
70 | - <Container className={classes.container} maxwidth="md"> | 70 | + <Container key="container" className={classes.container} maxwidth="md"> |
71 | <Grid className={classes.item} container> | 71 | <Grid className={classes.item} container> |
72 | {data.map((card, idx) => { | 72 | {data.map((card, idx) => { |
73 | let isVisible = card.isPublic; | 73 | let isVisible = card.isPublic; |
... | @@ -75,7 +75,11 @@ export default function BodyLayout() { | ... | @@ -75,7 +75,11 @@ export default function BodyLayout() { |
75 | const isMine = card.name === localStorage["userName"]; //remove item | 75 | const isMine = card.name === localStorage["userName"]; //remove item |
76 | if (idx === 0 || card.date !== data[idx - 1].date) { | 76 | if (idx === 0 || card.date !== data[idx - 1].date) { |
77 | showDate = ( | 77 | showDate = ( |
78 | - <Typography key={idx} variant="h4" className={classes.date}> | 78 | + <Typography |
79 | + key={card.date} | ||
80 | + variant="h4" | ||
81 | + className={classes.date} | ||
82 | + > | ||
79 | {card.date} | 83 | {card.date} |
80 | </Typography> | 84 | </Typography> |
81 | ); | 85 | ); |
... | @@ -89,9 +93,9 @@ export default function BodyLayout() { | ... | @@ -89,9 +93,9 @@ export default function BodyLayout() { |
89 | return ( | 93 | return ( |
90 | <> | 94 | <> |
91 | {showDate} | 95 | {showDate} |
92 | - <Grid item xs={12} sm={6} md={3} key={idx+1}> | 96 | + <Grid item xs={12} sm={6} md={3} key={idx}> |
93 | <TodoCard | 97 | <TodoCard |
94 | - key={idx} | 98 | + key={card.title} |
95 | data={card} | 99 | data={card} |
96 | isVisible={isVisible} | 100 | isVisible={isVisible} |
97 | isMine={isMine} | 101 | isMine={isMine} |
... | @@ -104,7 +108,7 @@ export default function BodyLayout() { | ... | @@ -104,7 +108,7 @@ export default function BodyLayout() { |
104 | } | 108 | } |
105 | })} | 109 | })} |
106 | </Grid> | 110 | </Grid> |
107 | - <AddButton key="addBtn"></AddButton> | 111 | + <AddButton></AddButton> |
108 | </Container> | 112 | </Container> |
109 | </div> | 113 | </div> |
110 | ); | 114 | ); | ... | ... |
... | @@ -77,7 +77,7 @@ export default function AddButton({ handleClose }) { | ... | @@ -77,7 +77,7 @@ export default function AddButton({ handleClose }) { |
77 | const [isPublic, setIsPublic] = useState(1); | 77 | const [isPublic, setIsPublic] = useState(1); |
78 | const [textList, setTextList] = useState([]); | 78 | const [textList, setTextList] = useState([]); |
79 | const [textFieldBody, setTextFieldBody] = useState([ | 79 | const [textFieldBody, setTextFieldBody] = useState([ |
80 | - <TextField required label="To do 1" onChange={(e) => handleText(e, 0)} />, | 80 | + <TextField required key={0} label="To do 1" onChange={(e) => handleText(e, 0)} />, |
81 | ]); | 81 | ]); |
82 | 82 | ||
83 | const addApi = (data) => { | 83 | const addApi = (data) => { |
... | @@ -139,6 +139,7 @@ export default function AddButton({ handleClose }) { | ... | @@ -139,6 +139,7 @@ export default function AddButton({ handleClose }) { |
139 | ...textFieldBody, | 139 | ...textFieldBody, |
140 | <TextField | 140 | <TextField |
141 | required | 141 | required |
142 | + key={idx} | ||
142 | label={"To do " + (idx + 1)} | 143 | label={"To do " + (idx + 1)} |
143 | onChange={(e) => handleText(e, idx)} | 144 | onChange={(e) => handleText(e, idx)} |
144 | />, | 145 | />, | ... | ... |
... | @@ -81,6 +81,7 @@ export default function AddButton({ data, handleClose }) { | ... | @@ -81,6 +81,7 @@ export default function AddButton({ data, handleClose }) { |
81 | return ( | 81 | return ( |
82 | <TextField | 82 | <TextField |
83 | required | 83 | required |
84 | + key={idx} | ||
84 | fullWidth={true} | 85 | fullWidth={true} |
85 | defaultValue={textList[idx]} | 86 | defaultValue={textList[idx]} |
86 | label={"To do " + (idx + 1)} | 87 | label={"To do " + (idx + 1)} | ... | ... |
... | @@ -92,7 +92,7 @@ export default function LandingPage(props) { | ... | @@ -92,7 +92,7 @@ export default function LandingPage(props) { |
92 | }; | 92 | }; |
93 | 93 | ||
94 | const checkEnter = ()=>{ | 94 | const checkEnter = ()=>{ |
95 | - if(window.event.keyCode == 13){ | 95 | + if(window.event.keyCode === 13){ |
96 | handleLogin(); | 96 | handleLogin(); |
97 | } | 97 | } |
98 | } | 98 | } | ... | ... |
... | @@ -105,6 +105,12 @@ export default function LandingPage(props) { | ... | @@ -105,6 +105,12 @@ export default function LandingPage(props) { |
105 | } | 105 | } |
106 | }; | 106 | }; |
107 | 107 | ||
108 | + const checkEnter = ()=>{ | ||
109 | + if(window.event.keyCode === 13){ | ||
110 | + handleSubmit(); | ||
111 | + } | ||
112 | + } | ||
113 | + | ||
108 | return ( | 114 | return ( |
109 | <div className={classes.root}> | 115 | <div className={classes.root}> |
110 | <Paper className={classes.paper} elevation={3}> | 116 | <Paper className={classes.paper} elevation={3}> |
... | @@ -119,6 +125,7 @@ export default function LandingPage(props) { | ... | @@ -119,6 +125,7 @@ export default function LandingPage(props) { |
119 | onChange={(e) => { | 125 | onChange={(e) => { |
120 | setUserID(e.target.value); | 126 | setUserID(e.target.value); |
121 | }} | 127 | }} |
128 | + onKeyUp={checkEnter} | ||
122 | /> | 129 | /> |
123 | <TextField | 130 | <TextField |
124 | required | 131 | required |
... | @@ -129,6 +136,7 @@ export default function LandingPage(props) { | ... | @@ -129,6 +136,7 @@ export default function LandingPage(props) { |
129 | onChange={(e) => { | 136 | onChange={(e) => { |
130 | setNickName(e.target.value); | 137 | setNickName(e.target.value); |
131 | }} | 138 | }} |
139 | + onKeyUp={checkEnter} | ||
132 | /> | 140 | /> |
133 | <TextField | 141 | <TextField |
134 | required | 142 | required |
... | @@ -141,6 +149,7 @@ export default function LandingPage(props) { | ... | @@ -141,6 +149,7 @@ export default function LandingPage(props) { |
141 | onChange={(e) => { | 149 | onChange={(e) => { |
142 | setUserPW(e.target.value); | 150 | setUserPW(e.target.value); |
143 | }} | 151 | }} |
152 | + onKeyUp={checkEnter} | ||
144 | /> | 153 | /> |
145 | <TextField | 154 | <TextField |
146 | required | 155 | required |
... | @@ -160,6 +169,7 @@ export default function LandingPage(props) { | ... | @@ -160,6 +169,7 @@ export default function LandingPage(props) { |
160 | setMatchPW(false); | 169 | setMatchPW(false); |
161 | } | 170 | } |
162 | }} | 171 | }} |
172 | + onKeyUp={checkEnter} | ||
163 | /> | 173 | /> |
164 | <Button | 174 | <Button |
165 | className={classes.submit} | 175 | className={classes.submit} | ... | ... |
... | @@ -20,7 +20,26 @@ const connection = mysql.createConnection({ | ... | @@ -20,7 +20,26 @@ const connection = mysql.createConnection({ |
20 | port: conf.port, | 20 | port: conf.port, |
21 | database: conf.database, | 21 | database: conf.database, |
22 | }); | 22 | }); |
23 | -connection.connect(); | 23 | +// connection.connect(); |
24 | +function handleDisconnect() { | ||
25 | + connection.connect(function (err) { | ||
26 | + if (err) { | ||
27 | + console.log("error when connecting to db:", err); | ||
28 | + setTimeout(handleDisconnect, 4000); | ||
29 | + } | ||
30 | + }); | ||
31 | + | ||
32 | + connection.on("error", function (err) { | ||
33 | + console.log("db error", err); | ||
34 | + if (err.code === "PROTOCOL_CONNECTION_LOST") { | ||
35 | + return handleDisconnect(); | ||
36 | + } else { | ||
37 | + throw err; | ||
38 | + } | ||
39 | + }); | ||
40 | +} | ||
41 | + | ||
42 | +handleDisconnect(); | ||
24 | 43 | ||
25 | app.use(bodyParser.json()); | 44 | app.use(bodyParser.json()); |
26 | app.use(bodyParser.urlencoded({ extended: true })); | 45 | app.use(bodyParser.urlencoded({ extended: true })); |
... | @@ -30,8 +49,8 @@ app.use( | ... | @@ -30,8 +49,8 @@ app.use( |
30 | resave: false, | 49 | resave: false, |
31 | saveUninitialized: true, | 50 | saveUninitialized: true, |
32 | cookie: { | 51 | cookie: { |
33 | - maxAge: 1000 * 60 * 60 // 쿠키 유효기간 24시간 | 52 | + maxAge: 1000 * 60 * 60, // 쿠키 유효기간 24시간 |
34 | - } | 53 | + }, |
35 | }) | 54 | }) |
36 | ); | 55 | ); |
37 | 56 | ||
... | @@ -119,7 +138,7 @@ app.post("/api/signup", async (req, res) => { | ... | @@ -119,7 +138,7 @@ app.post("/api/signup", async (req, res) => { |
119 | if (err) { | 138 | if (err) { |
120 | res.send({ | 139 | res.send({ |
121 | code: 400, | 140 | code: 400, |
122 | - message: "error", | 141 | + message: "Change ID or NickName", |
123 | }); | 142 | }); |
124 | } else { | 143 | } else { |
125 | res.send({ | 144 | res.send({ |
... | @@ -173,28 +192,28 @@ app.post("/auth/login", (req, res) => { | ... | @@ -173,28 +192,28 @@ app.post("/auth/login", (req, res) => { |
173 | ); | 192 | ); |
174 | }); | 193 | }); |
175 | 194 | ||
176 | -app.get("/auth/logout", async (req,res,next) => { | 195 | +app.get("/auth/logout", async (req, res, next) => { |
177 | - console.log(req.session.userName+ "is logout"); | 196 | + console.log(req.session.userName + "is logout"); |
178 | req.session.destroy(); | 197 | req.session.destroy(); |
179 | - res.clearCookie('sid'); | 198 | + res.clearCookie("sid"); |
180 | res.redirect("/"); | 199 | res.redirect("/"); |
181 | -}) | 200 | +}); |
182 | 201 | ||
183 | -app.get("/auth", (req,res) =>{ | 202 | +app.get("/auth", (req, res) => { |
184 | - try{ | 203 | + try { |
185 | - if(req.session.userName){ | 204 | + if (req.session.userName) { |
186 | res.send({ | 205 | res.send({ |
187 | - message: "Authenticated user" | 206 | + message: "Authenticated user", |
188 | - }) | 207 | + }); |
189 | - }else{ | 208 | + } else { |
190 | - console.log("Unauthorized access") | 209 | + console.log("Unauthorized access"); |
191 | res.send({ | 210 | res.send({ |
192 | - message: "Unauthenticated user" | 211 | + message: "Unauthenticated user", |
193 | - }) | 212 | + }); |
194 | } | 213 | } |
195 | - }catch(e){ | 214 | + } catch (e) { |
196 | console.log(e); | 215 | console.log(e); |
197 | } | 216 | } |
198 | -}) | 217 | +}); |
199 | 218 | ||
200 | app.listen(port, () => console.log(`Listening on port ${port}`)); | 219 | app.listen(port, () => console.log(`Listening on port ${port}`)); | ... | ... |
-
Please register or login to post a comment