soo-01-12

client/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
+    "axios": "^0.21.1",
     "bootstrap": "^4.5.3",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",

client/src/Pages/HomePage.js

 import React, { useState, useEffect } from 'react';
-import { Row, Col, Modal, Button, Form } from 'react-bootstrap';
+import axios from 'axios';
+import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
 import Tabs from 'react-bootstrap/Tabs';
 import Tab from 'react-bootstrap/Tab';
 import ClosedList from '../Components/ClosedList';
 import OpenList from '../Components/OpenList';
 import Chat from '../Components/Chat';
 import Menu from '../Components/Menu';
+import catchErrors from '../utils/catchErrors';
 // import styled from 'styled-components';
 
 // const List = styled.div`
@@ -22,9 +24,10 @@ function Home() {
     const [show, setShow] = useState(false);
     const [show2, setShow2] = useState(false);
     const [chat, setChat] = useState(false);
-    const [checkedI, setCheckedI] = useState(false);
+    // const [checkedI, setCheckedI] = useState(false);
     const [chatR, setChatR] = useState(INIT_CHATR);
     const [disabled, setDisabled] = useState(true);
+    const [error, setError] = useState('');
 
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
@@ -39,24 +42,28 @@ function Home() {
         isChatR ? setDisabled(false) : setDisabled(true)
     }, [chatR])
 
-    function handleChange(event){
-        const {name, value} = event.target
-        setChatR({...chatR, [name]:value})
-        console.log(chatR)
+    function handleChange(event) {
+        const { name, value } = event.target
+        setChatR({ ...chatR, [name]: value })
     }
 
-    async function handleSubmit(event){
+    async function handleSubmit(event) {
         event.preventDefault()
-        const response = await fetch('chat/makeChat', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(chatR)
-        })
-        const data = await response.json()
-        console.log(data)
-        setChatR(INIT_CHATR)
+        try {
+            setError('')
+            // const response = await fetch('chat/makeChat', {
+            //     method: 'POST',
+            //     headers: {
+            //         'Content-Type': 'application/json'
+            //     },
+            //     body: JSON.stringify(chatR)
+            // })
+            //const data = await response.json()
+            const response = await axios.post('chat/makeChat', chatR)
+            setChatR(INIT_CHATR)
+        } catch (error){
+            catchErrors(error, setError)
+        }
     }
 
     return (
@@ -90,6 +97,9 @@ function Home() {
                         <Modal.Header closeButton>
                             <Modal.Title>방 생성</Modal.Title>
                         </Modal.Header>
+                        {error && <Alert variant='danger'>
+                            {error}
+                        </Alert>}
                         <Modal.Body>
                             <Form onSubmit={handleSubmit}>
                                 <Form.Group as={Row} controlId="chatName">
@@ -119,7 +129,7 @@ function Home() {
                                             type="checkbox"
                                             checked={chatR.isOpen}
                                             name='isOpen'
-                                            onChange={() => setChatR({...chatR, isOpen: !chatR.isOpen})}/>
+                                            onChange={() => setChatR({ ...chatR, isOpen: !chatR.isOpen })} />
                                     </Col>
                                 </Form.Group>
                                 {
@@ -128,7 +138,6 @@ function Home() {
                                         : (<p><b>비밀방</b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</p>)
                                 }
                                 <Form.Group as={Row}>
-                                    {console.log(chatR)}
                                     <Col sm={{ span: 5, offset: 4 }}>
                                         <Button type="submit" >방 생성</Button>
                                     </Col>
@@ -138,25 +147,25 @@ function Home() {
                     </Modal>
 
                     <Modal show={show2} onHide={handleClose2}>
-                    <Modal.Header closeButton>
-                        <Modal.Title>참여 코드로 채팅 참가</Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                        <Form onSubmit={() => { console.log('제출') }}>
-                            <Form.Group as={Row} controlId="formCodeE">
-                                <Form.Label column sm={4}>참여 코드</Form.Label>
-                                <Col>
-                                    <Form.Control type="text" />
-                                </Col>
-                            </Form.Group>
-                            <Form.Group as={Row}>
-                                <Col sm={{ span: 5, offset: 4 }}>
-                                    <Button type="submit">참가</Button>
-                                </Col>
-                            </Form.Group>
-                        </Form>
-                    </Modal.Body>
-                </Modal>
+                        <Modal.Header closeButton>
+                            <Modal.Title>참여 코드로 채팅 참가</Modal.Title>
+                        </Modal.Header>
+                        <Modal.Body>
+                            <Form onSubmit={() => { console.log('제출') }}>
+                                <Form.Group as={Row} controlId="formCodeE">
+                                    <Form.Label column sm={4}>참여 코드</Form.Label>
+                                    <Col>
+                                        <Form.Control type="text" />
+                                    </Col>
+                                </Form.Group>
+                                <Form.Group as={Row}>
+                                    <Col sm={{ span: 5, offset: 4 }}>
+                                        <Button type="submit">참가</Button>
+                                    </Col>
+                                </Form.Group>
+                            </Form>
+                        </Modal.Body>
+                    </Modal>
                 </Col>
             </Row>
         </>

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

package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev" : "nodemon server/server.js"
+    "dev": "nodemon server/server.js"
   },
   "repository": {
     "type": "git",
@@ -18,6 +18,7 @@
   "dependencies": {
     "express": "^4.17.1",
     "mongoose": "^5.11.9",
+    "nanoid": "^3.1.20",
     "nodemon": "^2.0.6",
     "validator": "^13.5.2"
   }

server/controllers/chat.controller.js

-import chat from "../models/chat.js"
+// import { useState } from 'react'
+import Chat from "../models/Chat.js"
+import { customAlphabet } from 'nanoid'
 import isLength from 'validator/lib/isLength.js'
 
+const nanoid = customAlphabet('1234567890abcdef', 10)
+
 const makeChat = async (req, res) => {
-    const {name, interest, isOpen} = req.body;
-    // console.log('/bodyCheck', interest);
+    const { name, interest, isOpen } = req.body;
+
+    const roomId = nanoid()
+    const chat = await Chat.findOne({ roomId })
+    while (chat) {
+        roomId = nanoid()
+        chat = await Chat.findOne({ roomId })
+    }
+
     try {
-        if (!isLength(name, { min: 3, max: 10 })) {
-            return res.status(422).json({message: 'Name must be 3-10 characters'})
+        if (!isLength(name, { min: 3, max: 20 })) {
+            return res.status(422).send('채팅방의 이름은 3-20자여야 합니다.')
+        } else if (interest=='Choose...' || interest==''){
+            return res.status(422).send('분야를 반드시 선택하여야 합니다.')
         }
-        const newChat = await new chat({
+        const newChat = await new Chat({
+            roomId,
             name,
             interest,
             isOpen
@@ -17,7 +31,7 @@ const makeChat = async (req, res) => {
         res.json(newChat)
     } catch (error) {
         console.log(error)
-        res.status(500).json({message: 'User signup error'})
+        res.status(500).send('방생성 에러')
     }
 }
 

server/models/chat.js

@@ -3,6 +3,11 @@ import mongoose from 'mongoose'
 const {String} = mongoose.Schema.Types
 
 const ChatSchema = new mongoose.Schema({
+    roomId: {
+        type: String,
+        // default:() => nanoid(),
+        unique: true
+    },
     name: {
         type: String,
         required: true,
@@ -20,4 +25,4 @@ const ChatSchema = new mongoose.Schema({
     timestamps: true
 })
 
-export default mongoose.models.chat || mongoose.model('chat', ChatSchema)
\ No newline at end of file
+export default mongoose.models.Chat || mongoose.model('Chat', ChatSchema)
\ No newline at end of file

server/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