김대휘 / Do-gether

Go to a project
Toggle navigation Toggle navigation pinning
김대휘
99f7ecc7 1 parent 3ec97c3f

Random Background Image

Inline Side-by-side
Showing 6 changed files with 237 additions and 25 deletions
1 +html, body, div, span, applet, object, iframe,
2 +h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3 +a, abbr, acronym, address, big, cite, code,
4 +del, dfn, em, img, ins, kbd, q, s, samp,
5 +small, strike, strong, sub, sup, tt, var,
6 +b, u, i, center,
7 +dl, dt, dd, ol, ul, li,
8 +fieldset, form, label, legend,
9 +table, caption, tbody, tfoot, thead, tr, th, td,
10 +article, aside, canvas, details, embed,
11 +figure, figcaption, footer, header, hgroup,
12 +menu, nav, output, ruby, section, summary,
13 +time, mark, audio, video {
14 + margin: 0;
15 + padding: 0;
16 + border: 0;
17 + font-size: 100%;
18 + font: inherit;
19 + vertical-align: baseline;
20 +}
21 +/* HTML5 display-role reset for older browsers */
22 +article, aside, details, figcaption, figure,
23 +footer, header, hgroup, menu, nav, section {
24 + display: block;
25 +}
26 +body {
27 + line-height: 1;
28 +}
29 +ol, ul {
30 + list-style: none;
31 +}
32 +blockquote, q {
33 + quotes: none;
34 +}
35 +blockquote:before, blockquote:after,
36 +q:before, q:after {
37 + content: '';
38 + content: none;
39 +}
40 +table {
41 + border-collapse: collapse;
42 + border-spacing: 0;
43 +}
44 +
45 +
46 +/*background random image: use unsplash api*/
47 +html, body{
48 + height:100%;
49 +}
50 +#root{
51 +}
52 +body{
53 + width:100%;
54 + background-attachment:fixed;
55 + background-image:url('https://source.unsplash.com/random/1920x1080/?nature');
56 + background-size:"cover";
57 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="utf-8" /> 4 <meta charset="utf-8" />
5 - <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 5 + <link rel="stylesheet" href="%PUBLIC_URL%/index.css" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <meta name="theme-color" content="#000000" /> 7 <meta name="theme-color" content="#000000" />
8 <meta 8 <meta
...@@ -11,12 +11,9 @@ ...@@ -11,12 +11,9 @@
11 /> 11 />
12 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> 12 <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" /> 13 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
14 - <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
15 - <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 <title>Do-gether</title> 14 <title>Do-gether</title>
17 </head> 15 </head>
18 - <body> 16 + <body><noscript>You need to enable JavaScript to run this app.</noscript>
19 - <noscript>You need to enable JavaScript to run this app.</noscript>
20 <div id="root"></div> 17 <div id="root"></div>
21 </body> 18 </body>
22 </html> 19 </html>
......
...@@ -2,12 +2,21 @@ import React, { useState, useEffect } from "react"; ...@@ -2,12 +2,21 @@ import React, { useState, useEffect } from "react";
2 import NavBar from "./components/NavBar.js"; 2 import NavBar from "./components/NavBar.js";
3 import BodyLayout from "./components/BodyLayout.js"; 3 import BodyLayout from "./components/BodyLayout.js";
4 4
5 +import { makeStyles } from "@material-ui/core/styles";
6 +
7 +const useStyles = makeStyles({
8 + root:{
9 +
10 + }
11 +})
12 +
5 function App() { 13 function App() {
14 + const classes = useStyles();
6 return ( 15 return (
7 - <> 16 + <div className={classes.root}>
8 <NavBar /> 17 <NavBar />
9 <BodyLayout /> 18 <BodyLayout />
10 - </> 19 + </div>
11 ); 20 );
12 } 21 }
13 22
......
...@@ -8,15 +8,17 @@ import Icon from "@material-ui/core/Icon"; ...@@ -8,15 +8,17 @@ import Icon from "@material-ui/core/Icon";
8 import TodoCard from "./TodoCard.js"; 8 import TodoCard from "./TodoCard.js";
9 9
10 const useStyles = makeStyles((theme) => ({ 10 const useStyles = makeStyles((theme) => ({
11 - root: { 11 + root:{
12 + backgroundColor:"rgba(0,0,0,0.5)"
13 + },
14 + container: {
12 flexGrow: 1, 15 flexGrow: 1,
13 - backgroundColor: "#e9e9e9", 16 + paddingTop:"4rem",
14 - paddingTop: "4rem", 17 + paddingBottom:"1rem",
15 - marginTop: "0", 18 + marginLeft: "auto",
19 + marginRight: "auto"
16 }, 20 },
17 item: { 21 item: {
18 - marginLeft: "auto",
19 - marginRight: "auto",
20 }, 22 },
21 })); 23 }));
22 24
...@@ -37,13 +39,12 @@ export default function BodyLayout() { ...@@ -37,13 +39,12 @@ export default function BodyLayout() {
37 }); 39 });
38 40
39 if (!data) { 41 if (!data) {
40 - return <p>ㄱㄷㄱㄷ</p>; 42 + return <p>Loading....</p>;
41 } else { 43 } else {
42 - console.log(123);
43 - console.log(data);
44 return ( 44 return (
45 - <Container className={classes.root} maxwidth="sm"> 45 + <div className={classes.root}>
46 - <Grid className={classes.item} container spacing={3}> 46 + <Container className={classes.container} maxwidth="md">
47 + <Grid className={classes.item} container spacing={0}>
47 {data.map((data) => { 48 {data.map((data) => {
48 return ( 49 return (
49 <Grid item xs="6" sm="6" md="3"> 50 <Grid item xs="6" sm="6" md="3">
...@@ -56,6 +57,7 @@ export default function BodyLayout() { ...@@ -56,6 +57,7 @@ export default function BodyLayout() {
56 </Grid> 57 </Grid>
57 </Grid> 58 </Grid>
58 </Container> 59 </Container>
60 + </div>
59 ); 61 );
60 } 62 }
61 } 63 }
......
...@@ -8,14 +8,15 @@ import Checkbox from "@material-ui/core/Checkbox"; ...@@ -8,14 +8,15 @@ import Checkbox from "@material-ui/core/Checkbox";
8 import Icon from "@material-ui/core/Icon"; 8 import Icon from "@material-ui/core/Icon";
9 9
10 const useStyles = makeStyles({ 10 const useStyles = makeStyles({
11 - root: {}, 11 + root: {
12 + margin:10
13 + },
12 date: { 14 date: {
13 fontSize: 14, 15 fontSize: 14,
14 float: "left", 16 float: "left",
15 }, 17 },
16 icon: { 18 icon: {
17 fontSize: 18, 19 fontSize: 18,
18 - marginTop: "auto",
19 float: "right", 20 float: "right",
20 color: "black", 21 color: "black",
21 }, 22 },
...@@ -37,7 +38,6 @@ const useStyles = makeStyles({ ...@@ -37,7 +38,6 @@ const useStyles = makeStyles({
37 export default function TodoCard(props) { 38 export default function TodoCard(props) {
38 const classes = useStyles(); 39 const classes = useStyles();
39 const data = props.data; 40 const data = props.data;
40 - console.log(data);
41 return ( 41 return (
42 <Card className={classes.root}> 42 <Card className={classes.root}>
43 <CardContent> 43 <CardContent>
......
...@@ -12,21 +12,168 @@ app.get("/api/cards", (req, res) => { ...@@ -12,21 +12,168 @@ app.get("/api/cards", (req, res) => {
12 name: "daehwi", 12 name: "daehwi",
13 isPublic: true, 13 isPublic: true,
14 title: "열글자까지가능합니다.", 14 title: "열글자까지가능합니다.",
15 - todo: ["응가하기", "똥싸기", "변누기"], 15 + todo: ["휴대폰하기", "리액트하기", "옾소과제"],
16 }, 16 },
17 { 17 {
18 date: "2020-99-99", 18 date: "2020-99-99",
19 name: "fuck", 19 name: "fuck",
20 isPublic: true, 20 isPublic: true,
21 title: "열글자까지가능합니다.", 21 title: "열글자까지가능합니다.",
22 - todo: ["응가하다말기", "똥싸기", "변누기"], 22 + todo: ["헬스", "낮잠", "확랜과제"],
23 }, 23 },
24 { 24 {
25 date: "2020-99-99", 25 date: "2020-99-99",
26 - name: "성훈", 26 + name: "talk",
27 isPublic: true, 27 isPublic: true,
28 title: "열글자까지가능할걸요.", 28 title: "열글자까지가능할걸요.",
29 - todo: ["응가하면서폰보기", "똥싸기", "변누기"], 29 + todo: ["카톡", "라인", "페메","DM"],
30 + },
31 + {
32 + date: "2020-99-99",
33 + name: "성훈정",
34 + isPublic: true,
35 + title: "하나둘셋넷다섯여섯일.",
36 + todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
37 + },
38 + {
39 + date: "2020-99-99",
40 + name: "daehwi",
41 + isPublic: true,
42 + title: "열글자까지가능합니다.",
43 + todo: ["휴대폰하기", "리액트하기", "옾소과제"],
44 + },
45 + {
46 + date: "2020-99-99",
47 + name: "fuck",
48 + isPublic: true,
49 + title: "열글자까지가능합니다.",
50 + todo: ["헬스", "낮잠", "확랜과제"],
51 + },
52 + {
53 + date: "2020-99-99",
54 + name: "talk",
55 + isPublic: true,
56 + title: "열글자까지가능할걸요.",
57 + todo: ["카톡", "라인", "페메","DM"],
58 + },
59 + {
60 + date: "2020-99-99",
61 + name: "성훈정",
62 + isPublic: true,
63 + title: "하나둘셋넷다섯여섯일.",
64 + todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
65 + },
66 + {
67 + date: "2020-99-99",
68 + name: "daehwi",
69 + isPublic: true,
70 + title: "열글자까지가능합니다.",
71 + todo: ["휴대폰하기", "리액트하기", "옾소과제"],
72 + },
73 + {
74 + date: "2020-99-99",
75 + name: "fuck",
76 + isPublic: true,
77 + title: "열글자까지가능합니다.",
78 + todo: ["헬스", "낮잠", "확랜과제"],
79 + },
80 + {
81 + date: "2020-99-99",
82 + name: "talk",
83 + isPublic: true,
84 + title: "열글자까지가능할걸요.",
85 + todo: ["카톡", "라인", "페메","DM"],
86 + },
87 + {
88 + date: "2020-99-99",
89 + name: "성훈정",
90 + isPublic: true,
91 + title: "하나둘셋넷다섯여섯일.",
92 + todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
93 + },
94 + {
95 + date: "2020-99-99",
96 + name: "daehwi",
97 + isPublic: true,
98 + title: "열글자까지가능합니다.",
99 + todo: ["휴대폰하기", "리액트하기", "옾소과제"],
100 + },
101 + {
102 + date: "2020-99-99",
103 + name: "fuck",
104 + isPublic: true,
105 + title: "열글자까지가능합니다.",
106 + todo: ["헬스", "낮잠", "확랜과제"],
107 + },
108 + {
109 + date: "2020-99-99",
110 + name: "talk",
111 + isPublic: true,
112 + title: "열글자까지가능할걸요.",
113 + todo: ["카톡", "라인", "페메","DM"],
114 + },
115 + {
116 + date: "2020-99-99",
117 + name: "성훈정",
118 + isPublic: true,
119 + title: "하나둘셋넷다섯여섯일.",
120 + todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
121 + },
122 + {
123 + date: "2020-99-99",
124 + name: "daehwi",
125 + isPublic: true,
126 + title: "열글자까지가능합니다.",
127 + todo: ["휴대폰하기", "리액트하기", "옾소과제"],
128 + },
129 + {
130 + date: "2020-99-99",
131 + name: "fuck",
132 + isPublic: true,
133 + title: "열글자까지가능합니다.",
134 + todo: ["헬스", "낮잠", "확랜과제"],
135 + },
136 + {
137 + date: "2020-99-99",
138 + name: "talk",
139 + isPublic: true,
140 + title: "열글자까지가능할걸요.",
141 + todo: ["카톡", "라인", "페메","DM"],
142 + },
143 + {
144 + date: "2020-99-99",
145 + name: "성훈정",
146 + isPublic: true,
147 + title: "하나둘셋넷다섯여섯일.",
148 + todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
149 + },
150 + {
151 + date: "2020-99-99",
152 + name: "daehwi",
153 + isPublic: true,
154 + title: "열글자까지가능합니다.",
155 + todo: ["휴대폰하기", "리액트하기", "옾소과제"],
156 + },
157 + {
158 + date: "2020-99-99",
159 + name: "fuck",
160 + isPublic: true,
161 + title: "열글자까지가능합니다.",
162 + todo: ["헬스", "낮잠", "확랜과제"],
163 + },
164 + {
165 + date: "2020-99-99",
166 + name: "talk",
167 + isPublic: true,
168 + title: "열글자까지가능할걸요.",
169 + todo: ["카톡", "라인", "페메","DM"],
170 + },
171 + {
172 + date: "2020-99-99",
173 + name: "성훈정",
174 + isPublic: true,
175 + title: "하나둘셋넷다섯여섯일.",
176 + todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
30 }, 177 },
31 ]); 178 ]);
32 }); 179 });
......