[FEAT] #1 회원가입 로그인 구현

package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -34,5 +36,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:8000"
 }

public/index.html

@@ -14,7 +14,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -1,10 +1,26 @@
+import React from "react";
+import { Route, Routes, useNavigate } from "react-router-dom";
+//import Navbar from "./Navbar";
+import SignUp from "./SignUp";
+import Login from "./Login";
+import Home from "./Home";
+import Menubar from "./Menubar";
+import Router from "./Router";
 
-function App() {
+const App = () => {
   return (
     <div>
-      GotGong FrontEnd
+      <Router />
+      {/* <SignUp></SignUp> */}
+      {/* <Routes>
+        <Route path="/" element={Menubar}>
+          <Route path="/home" element={Home} />
+          <Route path="/sign-up" element={SignUp} />
+          <Route path="/login" element={Login} />
+        </Route>
+      </Routes> */}
     </div>
   );
-}
+};
 
 export default App;

src/Home.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Link, Outlet, useNavigate } from "react-router-dom";
+
+const Menubar = () => {
+  const navigate = useNavigate();
+  const goHome = () => {
+    navigate("/");
+  };
+
+  return (
+    <div>
+      <Outlet />
+    </div>
+  );
+};
+
+export default Menubar;

src/Login.js

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+
+function Login() {
+  const [id, setId] = useState("");
+  const [password, setPassword] = useState("");
+
+  const idHandler = (e) => {
+    setId(e.target.value);
+  };
+  const passwordHandler = (e) => {
+    setPassword(e.target.value);
+  };
+
+  const submit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <>
+      <form>
+        <div>
+          <input
+            name="id"
+            type="id"
+            placeholder="아이디"
+            value={id}
+            onChange={idHandler}
+          />
+        </div>
+        <div>
+          <input
+            name="password"
+            type="password"
+            placeholder="비밀번호"
+            value={password}
+            onChange={passwordHandler}
+          />
+        </div>
+      </form>
+      <div>
+        <button name="loginButton" type="submit" onSubmit={submit}>
+          로그인
+        </button>
+      </div>
+    </>
+  );
+}
+
+export default Login;

src/Menubar.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Link, Outlet, useNavigate } from "react-router-dom";
+
+const Menubar = () => {
+  const navigate = useNavigate();
+  const goHome = () => {
+    navigate("/");
+  };
+
+  return (
+    <div>
+      <ul>
+        <li>
+          <Link to="/home">Home</Link>
+        </li>
+        <li>
+          <Link to="/login">로그인</Link>
+        </li>
+        <li>
+          <Link to="/signup">회원가입</Link>
+        </li>
+      </ul>
+
+      <Outlet />
+      <button onClick={goHome} type="button">
+        홈으로 돌아가기
+      </button>
+    </div>
+  );
+};
+
+export default Menubar;

src/Navbar.js

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+
+function Navbar() {
+  const [sign, setSign] = useState(true);
+  const onClick = () => {
+    setSign((prev) => !prev);
+  };
+  return (
+    <div>
+      <ul className="navbar">
+        <li>
+          <Link to="/">홈</Link>
+        </li>
+        {sign ? (
+          <li>
+            <Link to="/signin">
+              <button onClick={onClick}>로그인</button>
+            </Link>
+          </li>
+        ) : (
+          <li>
+            <Link to="/sign_up">
+              <button onClick={onClick}>회원가입</button>
+            </Link>
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+}
+
+export default Navbar;

src/Router.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Route, Routes, useNavigate } from "react-router-dom";
+//import Navbar from "./Navbar";
+import SignUp from "./SignUp";
+import Login from "./Login";
+import Home from "./Home";
+import Menubar from "./Menubar";
+
+const Router = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Menubar />}>
+        <Route path="/home" element={<Home />} />
+        <Route path="/signup" element={<SignUp />} />
+        <Route path="/login" element={<Login />} />
+      </Route>
+    </Routes>
+  );
+};
+export default Router;