aa

client/src/Pages/Signup.js

 import React, { useState, useEffect, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
+import axios from 'axios'
 import Nav1 from '../Components/MainNav';
 import Nav2 from '../Components/SubNav';
 import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap'
-import FormCheckInput from 'react-bootstrap/esm/FormCheckInput';
+import catchErrors from '../utils/catchErrors'
 
 const INIT_USER = {
     name: '',
@@ -16,14 +16,8 @@ const INIT_USER = {
 
 function Signup() {
     const [user, setUser] = useState(true)
-    //const [disabled, setDisabled] = useState(true)
     const [error, setError] = useState('')
 
-    //useEffect(() => {
-    //    const isUser = Object.values(user).every(el => Boolean(el))
-    //    isUser ? setDisabled(false) : setDisabled(true)
-    //}, user)
-
     function handleChange(event) {
         const { name, value } = event.target
         setUser({ ...user, [name]: value })
@@ -41,21 +35,13 @@ function Signup() {
         }
         setValidated(true);
         console.log(user)
-        
+
         try {
             setError('')
-            const response = await fetch('/signup', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(user)
-            })
-            const data = await response.json()
-            console.log(data)
+            const response = await axios.post('/api/users/signup', user)
+            console.log(response.data)
         } catch (error) {
-            console.log(error)
-            setError('다시 시도하세요.')
+            catchErrors(error, setError)
         }
     }
 
@@ -64,12 +50,13 @@ function Signup() {
             <Nav1 />
             <Nav2 />
             <Container className="my-5">
-                {error && <Alert variant='danger'>
-                    {error}
-                </Alert>}
+
                 <Row className="justify-content-center">
                     <Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
                         <h2 className="text-center mt-5">Sign Up</h2>
+                        {error && <Alert variant='danger'>
+                            {error}
+                        </Alert>}
                         <Form
                             noValidate validated={validated}
                             onSubmit={handleSubmit}

client/src/utils/catchErrors.js

+function catchErrors(error,displayError){ 
+    let errorMsg
+
+    if(error.response){
+        errorMsg=error.response.data
+        console.log(errorMsg)
+    }else if(error.request){
+        errorMsg=error.request
+        console.log(errorMsg)
+    }else{
+        errorMsg=error.message
+        console.log(errorMsg)
+    }
+    displayError(errorMsg)
+}
+
+export default catchErrors
\ No newline at end of file

server/controllers/user.controller.js

@@ -7,15 +7,22 @@ const signup = async (req, res) => {
     const { name, number1, number2, id, password, password2, tel } = req.body
     try {
         if(!isLength(password,{min:8, max:15})){
-            return res.status(422).json({message: '비밀번호는 8-15자리로 입력해주세요.'})
+            return res.status(422).send('비밀번호는 8-15자리로 입력해주세요.')
         }
+        const user=await User.findOne({id})
+        if(user){
+            return res.status(422).send(`${id}가 이미 사용중입니다.`)
+        }
+
+        const hash=await bcrypt.hash(password,10)
+
         const newUser = await new User ({
             name,
             number1,
             number2,
             id,
-            password,
-            password2,
+            password:hash,
+            password2:hash,
             tel
         }).save()
         console.log(newUser)
@@ -23,12 +30,9 @@ const signup = async (req, res) => {
         
     } catch (error) {
         console.log(error)
-        res.status(500).json({message:'죄송합니다. 다시 입력해 주십시오.'})
+        res.status(500).send('죄송합니다. 다시 입력해 주십시오.')
     }
 }
 
-const hello = (req, res) => {
-    res.send('Hello from users contriller')
-}
 
-export default  { signup, hello }
\ No newline at end of file
+export default signup
\ No newline at end of file

server/routes/user.routes.js

@@ -5,6 +5,5 @@ const router = express.Router()
 
 router.route('/signup')
     .post(userCtrl.signup)
-    .get(userCtrl.hello)
 
 export default router
\ No newline at end of file