김대휘 / Do-gether

Go to a project
Toggle navigation Toggle navigation pinning
김대휘
73a1bf37 1 parent fa3250bb

Changed to material-ui

Inline Side-by-side
Showing 10 changed files with 159 additions and 142 deletions
This diff could not be displayed because it is too large.
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
3 "version": "0.1.0", 3 "version": "0.1.0",
4 "private": true, 4 "private": true,
5 "dependencies": { 5 "dependencies": {
6 + "@material-ui/core": "^4.10.1",
7 + "@material-ui/icons": "^4.9.1",
6 "@testing-library/jest-dom": "^4.2.4", 8 "@testing-library/jest-dom": "^4.2.4",
7 "@testing-library/react": "^9.3.2", 9 "@testing-library/react": "^9.3.2",
8 "@testing-library/user-event": "^7.1.2", 10 "@testing-library/user-event": "^7.1.2",
9 - "bootstrap": "^4.5.0",
10 "react": "^16.13.1", 11 "react": "^16.13.1",
11 "react-dom": "^16.13.1", 12 "react-dom": "^16.13.1",
12 - "react-scripts": "3.4.1", 13 + "react-scripts": "3.4.1"
13 - "reactstrap": "^8.4.1"
14 }, 14 },
15 "scripts": { 15 "scripts": {
16 "start": "react-scripts start", 16 "start": "react-scripts start",
......
...@@ -9,35 +9,14 @@ ...@@ -9,35 +9,14 @@
9 name="description" 9 name="description"
10 content="Web site created using create-react-app" 10 content="Web site created using create-react-app"
11 /> 11 />
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" />
12 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 14 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 - <!--
14 - manifest.json provides metadata used when your web app is installed on a
15 - user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 - -->
17 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 15 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 - <!-- 16 + <title>Do-gether</title>
19 - Notice the use of %PUBLIC_URL% in the tags above.
20 - It will be replaced with the URL of the `public` folder during the build.
21 - Only files inside the `public` folder can be referenced from the HTML.
22 -
23 - Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 - work correctly both with client-side routing and a non-root public URL.
25 - Learn how to configure a non-root public URL by running `npm run build`.
26 - -->
27 - <title>React App</title>
28 </head> 17 </head>
29 <body> 18 <body>
30 <noscript>You need to enable JavaScript to run this app.</noscript> 19 <noscript>You need to enable JavaScript to run this app.</noscript>
31 <div id="root"></div> 20 <div id="root"></div>
32 - <!--
33 - This HTML file is a template.
34 - If you open it directly in the browser, you will see an empty page.
35 -
36 - You can add webfonts, meta tags, or analytics to this file.
37 - The build step will place the bundled scripts into the <body> tag.
38 -
39 - To begin the development, run `npm start` or `yarn start`.
40 - To create a production bundle, use `npm run build` or `yarn build`.
41 - -->
42 </body> 21 </body>
43 </html> 22 </html>
......
1 import React from "react"; 1 import React from "react";
2 -import { Container, Row, Col } from "reactstrap"; 2 +import NavBar from "./components/NavBar.js";
3 -import NavBar from "./NavBar.js"; 3 +import BodyLayout from "./components/BodyLayout.js";
4 -import TodoCard from "./TodoCard.js"; 4 +
5 function App() { 5 function App() {
6 return ( 6 return (
7 <> 7 <>
8 - <NavBar></NavBar> 8 + <NavBar />
9 - <Container style={{ paddingTop: "4rem" }}> 9 + <BodyLayout />
10 - <Row xs="2" sm="2" md="4">
11 - <Col>
12 - <TodoCard />
13 - </Col>
14 - <Col>
15 - <TodoCard />
16 - </Col>
17 - <Col>
18 - <TodoCard />
19 - </Col>
20 - <Col>
21 - <TodoCard />
22 - </Col>
23 - <Col>
24 - <TodoCard />
25 - </Col>
26 - <Col>
27 - <TodoCard />
28 - </Col>
29 - <Col>
30 - <TodoCard />
31 - </Col>
32 - <Col>
33 - <TodoCard />
34 - </Col>
35 - <Col>
36 - <TodoCard />
37 - </Col>
38 - <Col>
39 - <TodoCard />
40 - </Col>
41 - <Col>
42 - <TodoCard />
43 - </Col>
44 - <Col>
45 - <TodoCard />
46 - </Col>
47 - <Col>
48 - <TodoCard />
49 - </Col>
50 - <Col>
51 - <TodoCard />
52 - </Col>
53 - <Col>
54 - <TodoCard />
55 - </Col>
56 - <Col>
57 - <TodoCard />
58 - </Col>
59 - <Col>
60 - <TodoCard />
61 - </Col>
62 - <Col>
63 - <TodoCard />
64 - </Col>
65 - <Col>
66 - <TodoCard />
67 - </Col>
68 - <Col>
69 - <TodoCard />
70 - </Col>
71 - </Row>
72 - </Container>
73 </> 10 </>
74 ); 11 );
75 } 12 }
......
1 -import React, { useState } from 'react';
2 -import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
3 -
4 -const NavBar = (props) => {
5 -
6 - const [collapsed, setCollapsed] = useState(true);
7 - const toggleNavbar = () => setCollapsed(!collapsed);
8 -
9 - return (
10 - <div>
11 - <Navbar style={{backgroundColor:"rgba(0,0,0,0.5)"}} light fixed="top">
12 - <NavbarBrand href="/" className="mr-auto" style={{marginLeft:"auto",marginRight:"auto"}}>Do-gether</NavbarBrand>
13 - <NavbarToggler onClick={toggleNavbar} className="mr-2"/>
14 - <Collapse isOpen={!collapsed} navbar>
15 - <Nav navbar>
16 - <NavItem>
17 - <NavLink href="/components/">Components</NavLink>
18 - </NavItem>
19 - <NavItem>
20 - <NavLink href="www.google.com">GitHub</NavLink>
21 - </NavItem>
22 - </Nav>
23 - </Collapse>
24 - </Navbar>
25 - </div>
26 - );
27 -}
28 -
29 -export default NavBar;
...\ No newline at end of file ...\ No newline at end of file
1 -import React from "react";
2 -import { Card, Button, CardTitle, CardText, Row, Col } from "reactstrap";
3 -function TodoCard(props) {
4 - return (
5 - <>
6 - <Card body style={{ marginBottom: "1rem" }}>
7 - <CardTitle>Special Title Treatment</CardTitle>
8 - <CardText>
9 - With supporting text below as a natural lead-in to additional helod.
10 - </CardText>
11 - <Button>Go somewhere</Button>
12 - </Card>
13 - </>
14 - );
15 -}
16 -
17 -export default TodoCard;
1 +import React from "react";
2 +import { makeStyles } from "@material-ui/core/styles";
3 +import Grid from "@material-ui/core/Grid";
4 +import Container from "@material-ui/core/Container";
5 +
6 +import TodoCard from "./TodoCard.js";
7 +const useStyles = makeStyles((theme) => ({
8 + root: {
9 + flexGrow: 1,
10 + marginTop: "1rem",
11 + },
12 + item: {
13 + marginLeft: "auto",
14 + marginRight: "auto",
15 + },
16 +}));
17 +
18 +export default function CenteredGrid() {
19 + const classes = useStyles();
20 +
21 + return (
22 + <Container className={classes.root} maxwidth="sm">
23 + <Grid className={classes.item} container spacing={3}>
24 + <Grid item xs="6" sm="6" md="3">
25 + <TodoCard></TodoCard>
26 + </Grid>
27 + <Grid item xs="6" sm="6" md="3">
28 + <TodoCard></TodoCard>
29 + </Grid>
30 + <Grid item xs="6" sm="6" md="3">
31 + <TodoCard></TodoCard>
32 + </Grid>
33 + <Grid item xs="6" sm="6" md="3">
34 + <TodoCard></TodoCard>
35 + </Grid>
36 + <Grid item xs="6" sm="6" md="3">
37 + <TodoCard></TodoCard>
38 + </Grid>
39 + <Grid item xs="6" sm="6" md="3">
40 + <TodoCard></TodoCard>
41 + </Grid>
42 +
43 + </Grid>
44 + </Container>
45 + );
46 +}
1 +import React from 'react';
2 +import { makeStyles } from '@material-ui/core/styles';
3 +import AppBar from '@material-ui/core/AppBar';
4 +import Toolbar from '@material-ui/core/Toolbar';
5 +import Typography from '@material-ui/core/Typography';
6 +import Button from '@material-ui/core/Button';
7 +import IconButton from '@material-ui/core/IconButton';
8 +import MenuIcon from '@material-ui/icons/Menu';
9 +
10 +const useStyles = makeStyles((theme) => ({
11 + root: {
12 + flexGrow: 1
13 + },
14 + bar:{
15 + backgroundColor:"rgba(0,0,0,0.8)"
16 + },
17 + menuButton: {
18 + marginRight: theme.spacing(2),
19 + },
20 + title: {
21 + flexGrow: 1,
22 + },
23 +}));
24 +
25 +export default function ButtonAppBar() {
26 + const classes = useStyles();
27 +
28 + return (
29 + <div className={classes.root}>
30 + <AppBar className={classes.bar} position="static">
31 + <Toolbar>
32 + <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
33 + <MenuIcon />
34 + </IconButton>
35 + <Typography variant="h6" className={classes.title}>
36 + Fuck
37 + </Typography>
38 + <Button color="inherit">Login</Button>
39 + </Toolbar>
40 + </AppBar>
41 + </div>
42 + );
43 +}
...\ No newline at end of file ...\ No newline at end of file
1 +import React from "react";
2 +import { makeStyles } from "@material-ui/core/styles";
3 +import Card from "@material-ui/core/Card";
4 +import CardContent from "@material-ui/core/CardContent";
5 +import Button from "@material-ui/core/Button";
6 +import Typography from "@material-ui/core/Typography";
7 +import FormControlLabel from "@material-ui/core/FormControlLabel";
8 +import Checkbox from "@material-ui/core/Checkbox";
9 +
10 +const useStyles = makeStyles({
11 + root: {
12 + },
13 + title: {
14 + fontSize: 14,
15 + },
16 + pos: {
17 + marginBottom: 12,
18 + },
19 +});
20 +
21 +export default function SimpleCard() {
22 + const classes = useStyles();
23 +
24 + return (
25 + <Card className={classes.root}>
26 + <CardContent>
27 + <Typography
28 + className={classes.title}
29 + color="textSecondary"
30 + gutterBottom
31 + >
32 + 2020-03-26
33 + </Typography>
34 + <Typography variant="h5" component="h2">
35 + Todo Main
36 + </Typography>
37 + <div>
38 + <FormControlLabel
39 + control={<Checkbox name="checkedC" />}
40 + label="똥싸기"
41 + />
42 + </div>
43 + <div>
44 + <FormControlLabel
45 + control={<Checkbox name="checkedC" />}
46 + label="똥싸기"
47 + />
48 + </div>
49 + <div>
50 + <FormControlLabel
51 + control={<Checkbox name="checkedC" />}
52 + label="똥싸기"
53 + />
54 + </div>
55 + <Button size="small">Learn More</Button>
56 + </CardContent>
57 + </Card>
58 + );
59 +}
1 import React from "react"; 1 import React from "react";
2 import ReactDOM from "react-dom"; 2 import ReactDOM from "react-dom";
3 -import "bootstrap/dist/css/bootstrap.min.css";
4 import "./index.css"; 3 import "./index.css";
5 import App from "./App"; 4 import App from "./App";
6 5
......