작업시 기본틀(계산기형태)

뭉지야 2023. 6. 13. 17:22

728x90

App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./App.css";

import Home from "./Page/Home";
import Login from "./Page/Login";
import SignUp from "./Page/SignUp";
import Todo from "./Page/Todo";

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/signup" element={<SignUp />}></Route>
          <Route path="/todo" element={<Todo />}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

import styled from "styled-components";

const Body = styled.div`
  border: 5px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;
const Container = styled.div`
  width: 350px;
  height: 500px;
  border: 5px solid blue;
`;

function Login() {
  return (
    <div>
      <Body>
        <Container></Container>
      </Body>
    </div>
  );
}

export default Login;

728x90

저작자표시 (새창열림)