라우팅

package.json

@@ -10,7 +10,9 @@
     "firebase": "^10.12.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.12",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,5 +1,21 @@
+import { Route, Routes } from "react-router-dom";
+import DashBoard from "./components/layout/DashBoard";
+import SignInPage from "./pages/Auth/SignInPage";
+import LoginPage from "./pages/Auth/LoginPage";
+import LandingPage from "./pages/Home/LandingPage";
+
 function App() {
-  return <div className="container">하이</div>;
+  return (
+    <Routes>
+      <Route element={<DashBoard />}>
+        <Route index element={<LandingPage />} />
+        <Route path="auth">
+          <Route path="signIn" element={<LoginPage />} />
+          <Route path="signIn" element={<SignInPage />} />
+        </Route>
+      </Route>
+    </Routes>
+  );
 }
 
 export default App;

src/components/Create/Create.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Create = () => {
+  return <div>새 일기 만드는 페이지</div>;
+};
+
+export default Create;

src/components/Drawing/Drawing.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Drawing = () => {
+  return <div>그림 캔버스 api</div>;
+};
+
+export default Drawing;

src/components/auth/Login.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Login = () => {
+  return <div>로그인</div>;
+};
+
+export default Login;

src/components/auth/SignIn.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const SignIn = () => {
+  return <div>회원가입</div>;
+};
+
+export default SignIn;

src/components/layout/DashBoard.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import Container from "./style";
+
+const DashBoard = () => {
+  return (
+    <Container>
+      <Outlet />
+    </Container>
+  );
+};
+
+export default DashBoard;

src/components/layout/Home.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Home = () => {
+  return <div>홈페이지</div>;
+};
+
+export default Home;

src/components/layout/style.js

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  position: relative;
+
+  width: 360px;
+  min-height: 100vh;
+  background-color: #fff;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
+
+  @media screen and (max-width: 480px) {
+    width: 100%;
+  }
+`;
+
+export default Container;

src/index.js

@@ -3,10 +3,13 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./reset.css";
 import "./style.css";
+import { BrowserRouter as Router } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>
 );

src/pages/Auth/LoginPage.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Container from "../../components/layout/style";
+import Login from "../../components/auth/Login";
+
+const LoginPage = () => {
+  return (
+    <Container>
+      <Login />
+    </Container>
+  );
+};
+
+export default LoginPage;

src/pages/Auth/SignInPage.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Container from "../../components/layout/style";
+import SignIn from "../../components/auth/SignIn";
+
+const SignInPage = () => {
+  return (
+    <Container>
+      <SignIn />
+    </Container>
+  );
+};
+
+export default SignInPage;