a

client/src/Pages/LogInPage.js

@@ -32,7 +32,7 @@ function LogIn() {
                             <Form.Label>이메일</Form.Label>
                             <Form.Control
                                 required
-                                type="text"
+                                type="email"
                                 placeholder="이메일을 입력해주세요" />
                             <Form.Control.Feedback type="invalid">
                                 필수 정보입니다! 이메일을 입력해주세요!
@@ -43,18 +43,18 @@ function LogIn() {
                             <Form.Label>비밀번호</Form.Label>
                             <Form.Control
                                 required
-                                type="text"
+                                type="password"
                                 placeholder="비밀번호를 입력해주세요" />
                             <Form.Control.Feedback type="invalid">
                                 필수 정보입니다! 비밀번호를 입력해주세요!
                         </Form.Control.Feedback>
                         </Form.Group>
 
-                        <Link to="./homepage">
+                        <Link to="./home">
                             <Button type="submit" variant="outline-success" size="lg" className="mr-4" block>로그인</Button>
                         </Link>
 
-                        <Link to="./signuppage">
+                        <Link to="./signup">
                             <h6 type="button" className="text-right mt-2" style={{ cursor: 'pointer' }}>회원가입</h6>
                         </Link>
                     </div>

client/src/Pages/SignUpPage.js

@@ -16,6 +16,35 @@ function SingUp() {
         setValidated(true);
     };
 
+// async function addUser(user) {
+//     await fetch(`http://localhost:3000/users`, {
+//         method: 'POST',
+//         headers: {
+//             'Content-Type' : 'application/json'
+//          },
+//         body: JSON.stringify(user)
+//         //json 형식으로 보냄.
+//     })
+// }
+
+    function submitUser() {
+        const username = document.querySelector('#username')
+        const nickname = document.querySelector('#nickname')
+        const email = document.querySelector('#email')
+        const password = document.querySelector('#password')
+
+        const user = {
+            username: username.value,
+            nickname: nickname.value,
+            email: email.value,
+            password: password.value
+        }
+
+        console.log(user);
+    }
+
+
+
     return (
         <>
             <Navbar bg="dark" variant="dark">
@@ -35,6 +64,7 @@ function SingUp() {
                                 <Form.Control
                                     required
                                     type="text"
+                                    id="username"
                                     placeholder="이름을 입력해주세요" />
                                 <Form.Control.Feedback type="invalid">
                                     필수 정보입니다! 이름을 입력해주세요!
@@ -46,6 +76,7 @@ function SingUp() {
                                 <Form.Control
                                     required
                                     type="text"
+                                    id="nickname"
                                     placeholder="별명을 입력해주세요" />
                                 <Form.Control.Feedback type="invalid">
                                     필수 정보입니다! 별명을 입력해주세요!
@@ -56,7 +87,8 @@ function SingUp() {
                                 <Form.Label>이메일</Form.Label>
                                 <Form.Control
                                     required
-                                    type="text"
+                                    type="email"
+                                    id="email"
                                     placeholder="이메일을 입력해주세요" />
                                 <Form.Control.Feedback type="invalid">
                                     필수 정보입니다! 이메일을 입력해주세요!
@@ -67,15 +99,17 @@ function SingUp() {
                                 <Form.Label>비밀번호</Form.Label>
                                 <Form.Control
                                     required
-                                    type="text"
+                                    type="password"
+                                    id="password"
                                     placeholder="비밀번호를 입력해주세요" />
                                 <Form.Control.Feedback type="invalid">
                                     필수 정보입니다! 비밀번호를 입력해주세요!
                             </Form.Control.Feedback>
                             </Form.Group>
 
-                            <Link to="./">
-                                <Button type="submit" variant="outline-success" size="lg" className="mr-4" block>가입</Button>
+
+                            <Link to="./login">
+                                <Button type="submit" onClick={{submitUser}} variant="outline-success" size="lg" className="mr-4" block>가입</Button>
                             </Link>
                         </div>
                     </Container>

client/src/index.js

@@ -7,7 +7,6 @@ import ProfilePage from './Pages/ProfilePage';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import LogInPage from './Pages/LogInPage';
-import LoginForm from './Pages/LoginForm';
 import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
 import Hello from './Hello'
 import HomePage from './Pages/HomePage'

server/controllers/user.controller.js

 import User from "../models/User.js"
+import user from '.../client/src/Pages/SignUpPage.js'
 import isLength from 'validator/lib/isLength.js'
 import isEmail from 'validator/lib/isEmail.js'
 //꼭 js붙여주기!!
-//isEmail
 
 //sign validation해야됨
 const signup = async (req, res) => {
-    const { name, nickname, email, password } = req.body
+
+    const { username, nickname, email, password } = req.body
     //req.body를 구조분해하여 각각 보이게함 -> 모든정보들이 한줄에 보임
-    console.log(name, nickname, email, password)
+    console.log(username, nickname, email, password)
 
     try {
 
-        if (!isLength(name, { min: 3, max: 10 })) {
+        if (!isLength(username, { min: 3, max: 10 })) {
             //이범위를 벗어나면 error발생
             return res.status(422).send('Name must be 3-10 characters')
             //422 : 형식이 잘못되었다는 error발생
@@ -29,7 +30,7 @@ const signup = async (req, res) => {
         }
 
         const newUser = await new User({
-            name,
+            username,
             nickname,
             email,
             password,

server/models/User.js

@@ -8,7 +8,7 @@ const {String} = mongoose.Schema.Types
 
 //형식을 정의함.
 const UserSchema = new mongoose.Schema({
-    name: {
+    username: {
         type: String,
         required: true,
     },

server/routes/user.routes.js

@@ -4,7 +4,7 @@ import userCtrl from '../controllers/user.controller.js'
 const router = express.Router()
 //router의 역할 : './주소'부분을 처리하는 역할함. 
 
-router.route('/api/users/signup')
+router.route('/signup')
     .post(userCtrl.signup)
     .get(userCtrl.hello)