김대휘 / 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
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*background random image: use unsplash api*/
html, body{
height:100%;
}
#root{
}
body{
width:100%;
background-attachment:fixed;
background-image:url('https://source.unsplash.com/random/1920x1080/?nature');
background-size:"cover";
}
\ No newline at end of file
......@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="%PUBLIC_URL%/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
......@@ -11,12 +11,9 @@
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Do-gether</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
......
......@@ -2,12 +2,21 @@ import React, { useState, useEffect } from "react";
import NavBar from "./components/NavBar.js";
import BodyLayout from "./components/BodyLayout.js";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
root:{
}
})
function App() {
const classes = useStyles();
return (
<>
<div className={classes.root}>
<NavBar />
<BodyLayout />
</>
</div>
);
}
......
......@@ -8,15 +8,17 @@ import Icon from "@material-ui/core/Icon";
import TodoCard from "./TodoCard.js";
const useStyles = makeStyles((theme) => ({
root: {
root:{
backgroundColor:"rgba(0,0,0,0.5)"
},
container: {
flexGrow: 1,
backgroundColor: "#e9e9e9",
paddingTop: "4rem",
marginTop: "0",
paddingTop:"4rem",
paddingBottom:"1rem",
marginLeft: "auto",
marginRight: "auto"
},
item: {
marginLeft: "auto",
marginRight: "auto",
},
}));
......@@ -37,13 +39,12 @@ export default function BodyLayout() {
});
if (!data) {
return <p>ㄱㄷㄱㄷ</p>;
return <p>Loading....</p>;
} else {
console.log(123);
console.log(data);
return (
<Container className={classes.root} maxwidth="sm">
<Grid className={classes.item} container spacing={3}>
<div className={classes.root}>
<Container className={classes.container} maxwidth="md">
<Grid className={classes.item} container spacing={0}>
{data.map((data) => {
return (
<Grid item xs="6" sm="6" md="3">
......@@ -56,6 +57,7 @@ export default function BodyLayout() {
</Grid>
</Grid>
</Container>
</div>
);
}
}
......
......@@ -8,14 +8,15 @@ import Checkbox from "@material-ui/core/Checkbox";
import Icon from "@material-ui/core/Icon";
const useStyles = makeStyles({
root: {},
root: {
margin:10
},
date: {
fontSize: 14,
float: "left",
},
icon: {
fontSize: 18,
marginTop: "auto",
float: "right",
color: "black",
},
......@@ -37,7 +38,6 @@ const useStyles = makeStyles({
export default function TodoCard(props) {
const classes = useStyles();
const data = props.data;
console.log(data);
return (
<Card className={classes.root}>
<CardContent>
......
......@@ -12,21 +12,168 @@ app.get("/api/cards", (req, res) => {
name: "daehwi",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["응가하기", "똥싸기", "변누기"],
todo: ["휴대폰하기", "리액트하기", "옾소과제"],
},
{
date: "2020-99-99",
name: "fuck",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["응가하다말기", "똥싸기", "변누기"],
todo: ["헬스", "낮잠", "확랜과제"],
},
{
date: "2020-99-99",
name: "성훈",
name: "talk",
isPublic: true,
title: "열글자까지가능할걸요.",
todo: ["응가하면서폰보기", "똥싸기", "변누기"],
todo: ["카톡", "라인", "페메","DM"],
},
{
date: "2020-99-99",
name: "성훈정",
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
{
date: "2020-99-99",
name: "daehwi",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["휴대폰하기", "리액트하기", "옾소과제"],
},
{
date: "2020-99-99",
name: "fuck",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["헬스", "낮잠", "확랜과제"],
},
{
date: "2020-99-99",
name: "talk",
isPublic: true,
title: "열글자까지가능할걸요.",
todo: ["카톡", "라인", "페메","DM"],
},
{
date: "2020-99-99",
name: "성훈정",
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
{
date: "2020-99-99",
name: "daehwi",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["휴대폰하기", "리액트하기", "옾소과제"],
},
{
date: "2020-99-99",
name: "fuck",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["헬스", "낮잠", "확랜과제"],
},
{
date: "2020-99-99",
name: "talk",
isPublic: true,
title: "열글자까지가능할걸요.",
todo: ["카톡", "라인", "페메","DM"],
},
{
date: "2020-99-99",
name: "성훈정",
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
{
date: "2020-99-99",
name: "daehwi",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["휴대폰하기", "리액트하기", "옾소과제"],
},
{
date: "2020-99-99",
name: "fuck",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["헬스", "낮잠", "확랜과제"],
},
{
date: "2020-99-99",
name: "talk",
isPublic: true,
title: "열글자까지가능할걸요.",
todo: ["카톡", "라인", "페메","DM"],
},
{
date: "2020-99-99",
name: "성훈정",
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
{
date: "2020-99-99",
name: "daehwi",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["휴대폰하기", "리액트하기", "옾소과제"],
},
{
date: "2020-99-99",
name: "fuck",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["헬스", "낮잠", "확랜과제"],
},
{
date: "2020-99-99",
name: "talk",
isPublic: true,
title: "열글자까지가능할걸요.",
todo: ["카톡", "라인", "페메","DM"],
},
{
date: "2020-99-99",
name: "성훈정",
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
{
date: "2020-99-99",
name: "daehwi",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["휴대폰하기", "리액트하기", "옾소과제"],
},
{
date: "2020-99-99",
name: "fuck",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["헬스", "낮잠", "확랜과제"],
},
{
date: "2020-99-99",
name: "talk",
isPublic: true,
title: "열글자까지가능할걸요.",
todo: ["카톡", "라인", "페메","DM"],
},
{
date: "2020-99-99",
name: "성훈정",
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
]);
});
......