shyun0104

client/src/Pages/HomePage.js

-import React, { useState } from 'react';
-import { Row, Col, Modal, Button } from 'react-bootstrap';
+import React, { useState, useEffect } from 'react';
+import { Row, Col, Modal, Button, Form } from 'react-bootstrap';
 import Tabs from 'react-bootstrap/Tabs';
 import Tab from 'react-bootstrap/Tab';
 import ClosedList from '../Components/ClosedList';
@@ -12,17 +12,53 @@ import Menu from '../Components/Menu';
 //   background: #FFFAFA;
 // `
 
+const INIT_CHATR = {
+    name: '',
+    interest: '',
+    isOpen: false
+}
 
 function Home() {
     const [show, setShow] = useState(false);
+    const [show2, setShow2] = useState(false);
     const [chat, setChat] = useState(false);
+    const [checkedI, setCheckedI] = useState(false);
+    const [chatR, setChatR] = useState(INIT_CHATR);
+    const [disabled, setDisabled] = useState(true);
 
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
     const handleChato = () => setChat(true);
     const handleChatc = () => setChat(false);
+    const handleClose2 = () => setShow2(false);
+    const handleShow2 = () => setShow2(true);
     // variant="pills"
 
+    useEffect(() => {
+        const isChatR = Object.values(chatR).every(el => Boolean(el))
+        isChatR ? setDisabled(false) : setDisabled(true)
+    }, [chatR])
+
+    function handleChange(event){
+        const {name, value} = event.target
+        setChatR({...chatR, [name]:value})
+        console.log(chatR)
+    }
+
+    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)
+    }
+
     return (
         <>
             <Menu />
@@ -40,20 +76,86 @@ function Home() {
                 <Col style={{ padding: "0" }}>
                     {chat ? <Chat handleChatc={handleChatc} /> : null}
 
-          <Button variant="primary" onClick={handleShow} style={{ position: "fixed", bottom: "10px", right: "10px" }} >
+                    <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
+                        <Button variant="primary" onClick={handleShow} size="lg" block>
                             생성
                         </Button>
 
+                        <Button variant="secondary" onClick={handleShow2} size="lg" block>
+                            참가
+                        </Button>
+                    </div>
+
                     <Modal show={show} onHide={handleClose}>
                         <Modal.Header closeButton>
                             <Modal.Title>방 생성</Modal.Title>
                         </Modal.Header>
-            <Modal.Body>여기에 form 입력</Modal.Body>
-            <Modal.Footer>
-              <Button variant="primary" onClick={handleClose}>
-                생성
-            </Button>
-            </Modal.Footer>
+                        <Modal.Body>
+                            <Form onSubmit={handleSubmit}>
+                                <Form.Group as={Row} controlId="chatName">
+                                    <Form.Label column sm={4}>방 이름</Form.Label>
+                                    <Col>
+                                        <Form.Control name='name' type='text' value={chatR.name} onChange={handleChange} />
+                                    </Col>
+                                </Form.Group>
+                                <Form.Group as={Row} controlId="chatInterest">
+                                    <Form.Label column sm={4}>관심 분야</Form.Label>
+                                    <Col>
+                                        <Form.Control as="select" defaultValue="Choose..." name='interest' type='text' value={chatR.interest} onChange={handleChange}>
+                                            <option>Choose...</option>
+                                            <option>과학</option>
+                                            <option>수학</option>
+                                            <option>예술</option>
+                                            <option>언어</option>
+                                            <option>취미</option>
+                                        </Form.Control>
+                                        {/* <Form.Control type="text" /> */}
+                                    </Col>
+                                </Form.Group>
+                                <Form.Group as={Row} controlId="chatIsOpen">
+                                    <Form.Label column sm={4}>공개방</Form.Label>
+                                    <Col>
+                                        <Form.Check
+                                            type="checkbox"
+                                            checked={chatR.isOpen}
+                                            name='isOpen'
+                                            onChange={() => setChatR({...chatR, isOpen: !chatR.isOpen})}/>
+                                    </Col>
+                                </Form.Group>
+                                {
+                                    (chatR.isOpen)
+                                        ? (<p><b>공개방</b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</p>)
+                                        : (<p><b>비밀방</b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</p>)
+                                }
+                                <Form.Group as={Row}>
+                                    {console.log(chatR)}
+                                    <Col sm={{ span: 5, offset: 4 }}>
+                                        <Button type="submit" >방 생성</Button>
+                                    </Col>
+                                </Form.Group>
+                            </Form>
+                        </Modal.Body>
+                    </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>
                 </Col>
             </Row>

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/chat.controller.js

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

server/models/chat.js

@@ -13,13 +13,11 @@ const ChatSchema = new mongoose.Schema({
         select: false
     },
     isOpen: {
-        type: String,
+        type: Boolean,
         required: true,
-        default: 'user',
-        enum: ['user', 'admin', 'root']
     }
 }, {
     timestamps: true
 })
 
-export default mongoose.models.User || 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/routes/chat.routers.js

+import express from 'express'
+import chatCtrl from '../controllers/chat.controller.js'
+
+const router = express.Router()
+
+router.route('/chat/makeChat')
+    .post(chatCtrl.makeChat)
+    .get(chatCtrl.hello)
+export default router
\ No newline at end of file

server/server.js

 import express from 'express'
 import connectDb from './utils/connectDb.js'
-import userRouter from './routes/user.routes.js'
+import chatRouter from './routes/chat.routers.js'
 
 connectDb()
 
@@ -11,12 +11,16 @@ app.use(express.json())
 //express가 req.body라는곳을 자동으로만들어서 json형식으로 보낸것을 객체형식으로 넣음
 //이부분 다음부터는 req.body라는 부분을 실행할 수 있음
 
-app.use(userRouter)
+app.use(chatRouter)
 //userRouter로 이동
 
-app.get('/', (req, res) => {
-    res.send('Hello World. 안녕하세요')
-})
+// app.post('/makeChat', (req, res) => { 
+//     app.use(chatRouter)
+// })
+
+// app.get('/', (req, res) => {
+//     res.send('Hello World. 안녕하세요')
+// })
 
 app.listen(3030, () => {
     console.log('Listening on port 3030')