랜딩페이지 디자인

@@ -126,9 +126,10 @@ table {
 /*Background random image: use unsplash api*/
 html,
 body {
-	width:100vw; /* or % */
-	height:100vh; /* or % */
-	overflow-x: hidden;
+  width: 100vw; /* or % */
+  height: 100vh; /* or % */
+  overflow-x: hidden;
+  font-family: MapoGoldenPier;
 }
 body {
   width: 100%;
@@ -139,11 +140,19 @@ body {
 
 /*SCROLL BAR DESIGN*/
 body::-webkit-scrollbar {
-    width: 10px;
-	background: transparent;
-	background-color: rgba(0, 0, 0, 0.5);
+  width: 10px;
+  background: transparent;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 body::-webkit-scrollbar-thumb {
   background-color: #ffffff;
   border-radius: 10px;
 }
+
+@font-face {
+  font-family: "MapoGoldenPier";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoGoldenPierA.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: normal;
+}

-import React from 'react';
-import LandingPage from './pages/LandingPage.js';
-import MainPage from './pages/MainPage.js';
+import React from "react";
+import LandingPage from "./pages/LandingPage.js";
+import MainPage from "./pages/MainPage.js";
 
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route
-} from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 
+const THEME = createMuiTheme({
+  typography: {
+  "fontFamily": "MapoGoldenPier",
+  }
+});
 
 function App() {
   return (
-    <Router>
-      <>
+    <MuiThemeProvider theme={THEME}>
+      <Router>
         <Switch>
-          <Route exact path="/" component={LandingPage}/> 
-          <Route exact path="/main" component={MainPage}/>
+          <Route exact path="/" component={LandingPage} />
+          <Route exact path="/main" component={MainPage} />
         </Switch>
-      </>
-    </Router>
+      </Router>
+    </MuiThemeProvider>
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;

@@ -72,7 +72,6 @@ const useStyles = makeStyles((theme) => ({
 
 export default function AddButton({ handleClose }) {
   const classes = useStyles();
-  const initCk = new Array(3,0);
   const [title, setTitle] = useState("");
   const [date, setDate] = useState(new Date());
   const [isPublic, setIsPublic] = useState(1);
@@ -82,7 +81,6 @@ export default function AddButton({ handleClose }) {
   ]);
 
   const addApi = (data) => {
-    console.log(data);
     return fetch("/api/addcard", {
       method: "POST",
       headers: {

@@ -72,7 +72,6 @@ export default function TodoCard({ data, isMine}) {
           {checkState.reduce((a, b) => a + b)}/{checkState.length}
         </Typography>
         {todo.map((item, idx) => {
-          console.log(item);
           return (
             <FormControlLabel
               className={classes.checkBox}

 import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
 
-function App() {
+const useStyles = makeStyles((theme) =>({
+  root: {
+    position:"fixed",
+    minHeight:"100vh",
+    minWidth:"100vw",
+    backgroundColor: "rgba(0,0,0,0.5)",
+    padding:0,
+  },
+  title:{
+    color:"white",
+    fontSize: 50,
+    textAlign:"center",
+    marginLeft : "auto",
+    marginRight : "auto",
+    marginTop:"15%",
+    width: "15rem"
+  },
+  content:{
+    color:"white",
+    textAlign:"center",
+    marginTop:"1rem",
+    marginLeft : "auto",
+    marginRight : "auto",
+    width: "20rem"
+  }
+}));
+
+export default function LandingPage() {
+  const classes = useStyles();
   return (
-    <>
-    </>
+    <div className={classes.root}>
+      <p className={classes.title}>Do-gether</p>
+      <p className={classes.content}>Sharing your TODO-LIST with others!</p>
+    </div>
   );
 }
-
-export default App;