회원가입 로그인

client/src/App.js

@@ -6,6 +6,8 @@ import ProfilePage from "./pages/ProfilePage";
 import RoomPage from "./pages/RoomPage";
 import InfoUpdatePage from "./pages/InfoUpdatePage";
 import InvitePage from "./pages/InvitePage";
+import SingupPage from "./components/SignUp";
+import LoginPage from "./components/Login"
 
 function App() {
   return (
@@ -14,6 +16,8 @@ function App() {
       <Switch>
         <Route exact path="/" component={HomeGuestPage} />
         <Route exact path="/user" component={HomeUserPage} />
+        <Route exact path="/signup" component={SingupPage} />
+        <Route exact path="/login" component={LoginPage} />
         <Route path="/profile/:id/update" component={InfoUpdatePage} />
         <Route path="/profile/:id" component={ProfilePage} />
         <Route path="/room/:roomId/:channelId" component={RoomPage}>

client/src/components/Login.js

 import { useEffect, useState, useRef } from 'react'
-import { Redirect } from 'react-router-dom'
+import { Link, Redirect } from 'react-router-dom'
 import userApi from '../apis/user.api'
 import catchErrors from '../context/catchError'
 import { handleLogin } from '../context/auth'
@@ -63,56 +63,52 @@ const Login = () => {
   const { email, password } = user
 
   return (
-    <div className="modal-content">
+    <div className="container">
       <form onSubmit={handleSubmit}>
-        <div className="modal-header">
-          <h5 className="modal-title" id="loginModalLabel">
-            로그인
-          </h5>
-          <button
-            type="button"
-            className="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
+        <div className="m-3 d-flex justify-content-center">
+          <Link to="/">
+            <img src="/BORA.png" style={{ width: '160px' }} />
+          </Link>
         </div>
-        {error && <div className="alert alert-danger">{error}</div>}
-        <div className="modal-body">
-          <div>
-            <label>아이디</label>
-            <input
-              className="form-control"
-              id="email"
-              type="text"
-              name="email"
-              placeholder="아이디를 입력하세요"
-              value={email}
-              onChange={handleChange}
-            />
+        <div className="row mt-5 d-flex align-items-center">
+          <h2 style={{ textAlign: 'center' }}>로그인</h2>
+          {error && <div className="alert alert-danger">{error}</div>}
+          <div className="form-group">
+            <div className="mt-5">
+              <label>아이디</label>
+              <input
+                className="form-control"
+                id="email"
+                type="text"
+                name="email"
+                placeholder="아이디를 입력하세요"
+                value={email}
+                onChange={handleChange}
+              />
+            </div>
+            <div className="mt-3">
+              <label>비밀번호</label>
+              <input
+                className="form-control"
+                id="password"
+                type="password"
+                name="password"
+                placeholder="비밀번호를 입력하세요"
+                value={password}
+                onChange={handleChange}
+              />
+            </div>
           </div>
-          <div>
-            <label>비밀번호</label>
-            <input
-              className="form-control"
-              id="password"
-              type="password"
-              name="password"
-              placeholder="비밀번호를 입력하세요"
-              value={password}
-              onChange={handleChange}
-            />
+          <div className="mt-4 d-flex justify-content-center">
+            <button
+              type="submit"
+              className="btn btn-primary"
+              disabled={disabled}
+            >
+              로그인
+            </button>
           </div>
         </div>
-        <div className="modal-footer">
-          <button
-            type="submit"
-            className="btn btn-primary"
-            disabled={disabled}
-            data-bs-dismiss="modal"
-          >
-            로그인
-          </button>
-        </div>
       </form>
     </div>
   )

client/src/components/SignUp.js

-import axios from "axios";
-import { useEffect, useState } from "react";
-import { Redirect } from "react-router-dom";
-import userApi from "../apis/user.api";
-import catchErrors from "../context/catchError";
+import axios from 'axios'
+import { useEffect, useState } from 'react'
+import { Link, Redirect } from 'react-router-dom'
+import userApi from '../apis/user.api'
+import catchErrors from '../context/catchError'
+
 const INIT_USER = {
-  name: "",
-  email: "",
-  password: "",
-  checkpw: "",
-  phone: "",
-};
+  name: '',
+  email: '',
+  password: '',
+  checkpw: '',
+  phone: '',
+}
 
 const Signup = () => {
-  const [user, setUser] = useState(INIT_USER);
-  const [error, setError] = useState("");
-  const [disabled, setDisabled] = useState(false);
-  const [success, setSuccess] = useState(false);
+  const [user, setUser] = useState(INIT_USER)
+  const [error, setError] = useState('')
+  const [disabled, setDisabled] = useState(false)
+  const [success, setSuccess] = useState(false)
 
   useEffect(() => {
-    setDisabled(
-      !(
-        user.name &&
-        user.email &&
-        user.password &&
-        user.checkpw
-      )
-    );
-  }, [user]);
+    setDisabled(!(user.name && user.email && user.password && user.checkpw))
+  }, [user])
 
   function handleChange(event) {
-    const { name, value } = event.target;
-    setUser({ ...user, [name]: value });
+    const { name, value } = event.target
+    setUser({ ...user, [name]: value })
   }
 
-  async function handleSubmit() {
+  async function handleSubmit(e) {
+    e.preventDefault()
     console.log('회원가입')
     try {
-      const data = await userApi.signup(user);
+      if (!checkPassword()) {
+        return
+      }
+      const data = await userApi.signup(user)
       console.log(data)
-      setSuccess(true);
-      setError("");
+      setSuccess(true)
+      setError('')
     } catch (error) {
-      catchErrors(error, setError);
+      console.log('error')
+      catchErrors(error, setError)
     } finally {
       // setLoading(false);
     }
   }
   function checkPassword(event) {
-    const p1 = user.password;
-    const p2 = user.checkpw;
+    const p1 = user.password
+    const p2 = user.checkpw
     if (p1 !== p2) {
-      event.preventDefault();
-      alert("비밀번호가 일치하지 않습니다.");
-      return false;
+      // event.preventDefault()
+      alert('비밀번호가 일치하지 않습니다.')
+      return false
     } else {
-      setSuccess(true);
-      return true;
+      alert('회원가입 되었습니다.')
+      window.location.href = '/'
+      return true
     }
   }
-  if (success) {
-    alert("회원가입 되었습니다.");
-    <Redirect to="/" />;
-  }
 
-  const { name, id, password, checkpw, phone } = user;
+  const { name, id, password, checkpw, phone } = user
   return (
-    <div className="modal-content">
-        {error && <div className="alert alert-danger">{error}</div>}
+    <div className="container">
+      {error && <div className="alert alert-danger">{error}</div>}
       <form onSubmit={handleSubmit}>
-        <div className="modal-header">
-          <h5 className="modal-title" id="loginModalLabel">
-            회원가입
-          </h5>
-          <button
-            type="button"
-            className="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
+        <div className="m-3 d-flex justify-content-center">
+          <Link to="/">
+            <img src="/BORA.png" style={{ width: '160px' }} />
+          </Link>
         </div>
-        <div className="modal-body">
+        <div className="row mt-4">
+          <h5 style={{ textAlign: 'center' }}>회원가입</h5>
+        </div>
+        <div className="form-group">
           <div className="p-2">
             <label className="p-1">이름</label>
             <input
@@ -140,21 +133,21 @@ const Signup = () => {
               onChange={handleChange}
             />
           </div>
-        </div>
-        {console.log(disabled)}
-        <div className="modal-footer">
+          {/* {console.log(disabled)} */}
+          <div className="mt-3 d-flex justify-content-center">
           <button
             type="submit"
             className="btn btn-primary"
-            onClick={checkPassword}
+            onClick={handleSubmit}
             disabled={disabled}
           >
             회원가입
           </button>
         </div>
-      </form> 
+        </div>
+      </form>
     </div>
-  );
-};
+  )
+}
 
-export default Signup;
+export default Signup

client/src/pages/HomeGuestPage.js

+import { Link } from "react-router-dom";
 import Login from "../components/Login";
 import SignUp from "../components/SignUp";
 
@@ -6,44 +7,22 @@ const HomeGuestPage = () => {
     <div className="d-flex flex-column justify-content-center h-100 font-weight-bold">
       <img src="BORA.PNG" className="w-100 p-4" />
       <div className="d-flex flex-column align-items-center">
+        <Link to="/login">
         <button
           type="button"
-          className="col-4 btn btn-info"
-          data-bs-toggle="modal"
-          data-bs-target="#loginModal"
+          className="row-4 btn btn-info"
         >
           로그인
         </button>
-        <div
-          className="modal fade"
-          id="loginModal"
-          tabIndex="-1"
-          aria-labelledby="loginModalLabel"
-          aria-hidden="true"
-        >
-          <div className="modal-dialog">
-            <Login />
-          </div>
-        </div>
+        </Link>
+        <Link to="/signup">
         <button
           type="button"
-          className="col-4 btn btn-info"
-          data-bs-toggle="modal"
-          data-bs-target="#signupModal"
+          className="row-4 btn btn-info"
         >
           회원가입
         </button>
-      </div>
-      <div
-        className="modal fade"
-        id="signupModal"
-        tabIndex="-1"
-        aria-labelledby="signupModalLabel"
-        aria-hidden="true"
-      >
-        <div className="modal-dialog">
-          <SignUp />
-        </div>
+        </Link>
       </div>
     </div>
   );

controllers/user.controller.js

@@ -70,7 +70,7 @@ const login = async (req, res) => {
 
 const signup = async (req, res) => {
   try {
-    // console.log('sign up= ', req.body)
+    console.log('sign up= ', req.body)
     const { name, email, password, gender, phone } = req.body
     const id = Math.floor(Math.random() * (9999 - 1000) + 1000)
     // console.log('id:', id)