회원가입 server연결

client/debug.log

-[1229/112842.005:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
-[1229/165211.265:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
-[0101/185146.578:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)

client/src/Pages/LogInPage.js

 import React, { useState } from 'react';
 import { Button, Form, Container, Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
-import Menu from '../Components/Menu';
 
 function LogIn() {
     const [validated, setValidated] = useState(false);
@@ -64,7 +63,4 @@ function LogIn() {
     );
 }
 
-//render(<LogIn />);
-
-
 export default LogIn
\ No newline at end of file

client/src/Pages/SignUpPage.js

-import React, { useState } from 'react';
-import { Button, Form, Container, Navbar } from 'react-bootstrap';
+import React, { useState, useEffect } from 'react';
+import { Button, Form, Container, Navbar, Alert } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
-import Menu from '../Components/Menu';
+
+const INIT_USER = {
+    username: '',
+    nickname: '',
+    email: '',
+    password: '',
+}
 
 function SingUp() {
     const [validated, setValidated] = useState(false);
+    const [user, setUser] = useState(INIT_USER)
+    const [error, setError] = useState('')
+    const [disabled, setDisabled] = useState(true)
+
+    useEffect(() => {
+        const isUser = Object.values(user).every(el => Boolean(el))
+        //Boolean : 참거짓 판별
+        //every : every뒤에 함수값이 return하는 값이 모두 참일때만 true출력 -> element가 하나도 빈 문자열이 존재하지 않을때
+        //empty string때만 false로 나옴.
+        isUser ? setDisabled(false) : setDisabled(true)
+    }, [user])
+
+    function handleChange(event) {
+        const { name, value } = event.target
+        // console.log(name, value)
+        setUser({ ...user, [name]: value })
+    }
+
+    async function handleSubmit(event) {
+        event.preventDefault();
 
-    const handleSubmit = (event) => {
         const form = event.currentTarget;
         if (form.checkValidity() === false) {
             event.preventDefault();
             event.stopPropagation();
         }
-
         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)
+
+        try {
+            setError('')
+            const response = await fetch('/api/users/signup', {
+                //post, get같은게 주어지지 않으면 기본적으로 fetch에 get요청함
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(user)
+            })
+            const data = await response.json()
+            console.log(data)
+            // setUser(INIT_USER)
+        } catch (error) {
+            console.log(error)
+            setError('에러발생')
         }
-
-        console.log(user);
     }
 
-
-
     return (
         <>
             <Navbar bg="dark" variant="dark">
                 <Navbar.Brand>YDK Messenger</Navbar.Brand>
             </Navbar>
                                                                                                                                                      
-
             <div>
                 <Form noValidate validated={validated} onSubmit={handleSubmit}>
                     <Container className="d-flex justify-content-center">
@@ -64,7 +77,9 @@ function SingUp() {
                                 <Form.Control
                                     required
                                     type="text"
-                                    id="username"
+                                    name="username"
+                                    onChange={handleChange}
+                                    value={user.username}
                                     placeholder="이름을 입력해주세요" />
                                 <Form.Control.Feedback type="invalid">
                                     필수 정보입니다! 이름을 입력해주세요!
@@ -76,7 +91,9 @@ function SingUp() {
                                 <Form.Control
                                     required
                                     type="text"
-                                    id="nickname"
+                                    name="nickname"
+                                    onChange={handleChange}
+                                    value={user.nickname}
                                     placeholder="별명을 입력해주세요" />
                                 <Form.Control.Feedback type="invalid">
                                     필수 정보입니다! 별명을 입력해주세요!
@@ -88,7 +105,9 @@ function SingUp() {
                                 <Form.Control
                                     required
                                     type="email"
-                                    id="email"
+                                    name="email"
+                                    onChange={handleChange}
+                                    value={user.email}
                                     placeholder="이메일을 입력해주세요" />
                                 <Form.Control.Feedback type="invalid">
                                     필수 정보입니다! 이메일을 입력해주세요!
@@ -100,7 +119,9 @@ function SingUp() {
                                 <Form.Control
                                     required
                                     type="password"
-                                    id="password"
+                                    name="password"
+                                    onChange={handleChange}
+                                    value={user.password}
                                     placeholder="비밀번호를 입력해주세요" />
                                 <Form.Control.Feedback type="invalid">
                                     필수 정보입니다! 비밀번호를 입력해주세요!
@@ -108,9 +129,18 @@ function SingUp() {
                             </Form.Group>
 
 
-                            <Link to="./login">
-                                <Button type="submit" onClick={{submitUser}} variant="outline-success" size="lg" className="mr-4" block>가입</Button>
-                            </Link>
+                            {/* <Link to="./login"> */}
+                                <Button 
+                                disabled={disabled}
+                                type='submit' 
+                                variant="outline-success" 
+                                size="lg" 
+                                className="mr-4"
+                                block>가입</Button>
+                            {/* </Link> */}
+                            {error && <Alert variant='danger'>
+                                {error}
+                            </Alert>}
                         </div>
                     </Container>
                 </Form>

package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev" : "nodemon index.js"
+    "dev" : "nodemon server/server.js",
   },
   "repository": {
     "type": "git",

server/controllers/User.controllers.js

-import User from "../models/User.js"
-import isLength from 'validator/lib/isLength.js'
-
-const signup = async (req, res) => {
-    const { name, email, password } = req.body
-    try {
-        if (!isLength(name, { min: 3, max: 10 })) {
-            return res.status(422).send('Name must be 3-10 characters')
-        }
-        const newUser = await new User({
-            name,
-            email,
-            password
-        }).save()
-        console.log(newUser)
-        res.json(newUser)
-    } catch (error) {
-        console.log(error)
-        res.status(500).send('User signup error')
-    }
-}
-
-const hello = (req, res) => {
-    res.send('Hello from users controller')
-}
-
-export default { signup, hello }
\ No newline at end of file

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붙여주기!!
@@ -17,7 +16,8 @@ const signup = async (req, res) => {
             //이범위를 벗어나면 error발생
             return res.status(422).send('Name must be 3-10 characters')
             //422 : 형식이 잘못되었다는 error발생
-        } else if (!isLength(nickname, { min: 3, max: 10 })) {
+        } 
+        else if (!isLength(nickname, { min: 3, max: 10 })) {
             return res.status(422).send('Nickname must be 3-10 characters')
         } else if (!isEmail(email, {
             allow_display_name: true,

server/routes/User.routers.js

-import express from 'express'
-import userCtrl from '../controllers/user.controllers.js'
-
-const router = express.Router()
-
-router.route('/api/users/signup')
-    .post(userCtrl.signup)
-    .get(userCtrl.hello)
-export default router
\ No newline at end of file

server/routes/user.routes.js

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