수정

client/package.json

@@ -6,7 +6,9 @@
     "@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",
+    "nanoid": "^3.1.20",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",

client/src/Components/ClosedList.js

+import axios from 'axios';
 import React, { useState } from 'react'
 import { ListGroup, Row, Col } from 'react-bootstrap';
 
 function ClosedList(props) {
-  const [list, setList] = useState([
-    { room: '테스트 방1', memnum: 5, admin: '가영' },
-    { room: '테스트 방2', memnum: 4, admin: '수현' }]
-  );
+  const [list, setList] = useState([]);
+
+  // async function getClosedList() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ
+  //   const member = sessionStorage.getItem('name')
+  //   const response = await axios.put(`/room/${member}`, { 'member': member })
+  //   setList(response.data)
+  // }
+  // console.log(list)
+
+
 
   function enterChatroomCH(e) {
     console.log(e.target.name)
@@ -16,12 +23,14 @@ function ClosedList(props) {
     // props.clearChat()
   }
 
+  //user.hasOwnProperty('이름');
+
   return (
     <div>
       {list.map((item, index) =>
         <ListGroup key={index}>
           <ListGroup.Item action onClick={enterChatroomCH} name={item.room}>
-          {item.room}
+            {item.room}
           </ListGroup.Item>
         </ListGroup>
       )}

client/src/Components/Menu.js

@@ -14,11 +14,10 @@ function Menu() {
       <Navbar.Brand href="/home">YDK Messenger</Navbar.Brand>
       {name ?
         <>
-          <div className='ml-1 mr-2' style={{ color: 'white' }}>{name} 님 환영합니다</div>
+          <div className='ml-1 mr-2' style={{ color: 'white' }}>{name}님 환영합니다</div>
           <Nav className="mr-auto">
-            <Nav.Link href="/home">Home</Nav.Link>
+            {/* <Nav.Link href="/home">Home</Nav.Link> */}
             <Nav.Link href="/profile">Profile</Nav.Link>
-            <Nav.Link href="/hello">Hello</Nav.Link>
           </Nav>
           <Button className="ml-auto" onClick={() => handleLogout()} variant="light" className="ml-3">Logout</Button>
         </>

client/src/Pages/HomePage.js

@@ -9,13 +9,16 @@ import Menu from '../Components/Menu';
 import catchErrors from '../utils/catchErrors';
 import { io } from "socket.io-client";   //모듈 가져오기
 import Chat from "../Components/Chat";
+import { customAlphabet } from 'nanoid';
+import { Redirect } from 'react-router-dom';
 
 const socket = io();
 
 const INIT_ROOM = {
     roomName: '',
     interest: '',
-    isOpen: false
+    isOpen: false,
+    moderator: '',
 }
 
 function Home() {
@@ -28,6 +31,7 @@ function Home() {
 
     const [singleChat, setSingleChat] = useState('')
     const [roomName, setRoomName] = useState('')
+    const [success, setSuccess] = useState(false)
 
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
@@ -36,6 +40,10 @@ function Home() {
     const handleClose2 = () => setShow2(false);
     const handleShow2 = () => setShow2(true);
 
+    const moderator = sessionStorage.getItem('userId');
+    const nanoid = customAlphabet('1234567890abcdef', 10)
+    const roomId = nanoid()
+
     useEffect(() => {
         const isRoom = Object.values(room).every(el => Boolean(el))
         isRoom ? setDisabled(false) : setDisabled(true)
@@ -43,23 +51,31 @@ function Home() {
 
     function handleChange(event) {
         const { name, value } = event.target
-        setRoom({ ...room, [name]: value })
-        console.log(room)
+        setRoom({ ...room, [name]: value, moderator, roomId })
+        //console.log(room)
     }
 
+    console.log(room)
+    console.log(room.roomId)
+
     async function handleSubmit(event) {
         event.preventDefault()
+
         try {
             setError('')
             await axios.post('/room/makeRoom', room)
-            setRoom(INIT_ROOM)
-        } catch (error){
+            // await axios.patch('/user/signup', { joinroom: `${room.roomId}`})
+            // await axios.post(`/user/${moderator}`, room.roomId)
+            setSuccess(true)
+            // setRoom(INIT_ROOM)
+            setShow(false)
+        } catch (error) {
             catchErrors(error, setError)
         }
+
     }
 
     //SOCKET 관련 시작
-
     function enterChatroom(rName) {    //방 입장하기
         socket.emit('joinRoom', rName)
         console.log(`joinRoom : ${rName} 입장`)
@@ -80,6 +96,13 @@ function Home() {
         })
     }, [singleChat])
 
+    // console.log(room.roomId)
+    if (success) { 
+        // console.log(room.roomId)
+        alert(`방암호는 ${room.roomId}입니다`)
+        // return <Redirect to='/home' />        
+    }
+
     return (
         <>
             <Menu />
@@ -87,15 +110,15 @@ function Home() {
                 <Col className="list" md={5}>
                     <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
                         <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-                            <ClosedList enterChatroom={enterChatroom} setRoomName={setRoomName}/>
+                            <ClosedList enterChatroom={enterChatroom} setRoomName={setRoomName} />
                         </Tab>
                         <Tab eventKey="open" title="공개방" >
-                            <OpenList enterChatroom={enterChatroom} setRoomName={setRoomName}/>
+                            <OpenList enterChatroom={enterChatroom} setRoomName={setRoomName} />
                         </Tab>
                     </Tabs>
                 </Col>
                 <Col style={{ padding: "0" }}>
-                    {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} setSingleChat={setSingleChat} roomName={roomName}/> : null}
+                    {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} setSingleChat={setSingleChat} roomName={roomName} /> : null}
 
                     <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
                         <Button variant="primary" onClick={handleShow} size="lg" block>
@@ -133,7 +156,6 @@ function Home() {
                                             <option>언어</option>
                                             <option>취미</option>
                                         </Form.Control>
-                                        {/* <Form.Control type="text" /> */}
                                     </Col>
                                 </Form.Group>
                                 <Form.Group as={Row} controlId="chatIsOpen">
@@ -165,19 +187,19 @@ function Home() {
                             <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>
+                            {/* <Form onSubmit={handleSubmit2}> */}
+                            <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>

client/src/Pages/ProfilePage.js

@@ -25,7 +25,7 @@ function ProfilePage() {
     const [hidden, setHidden] = useState(true)
 
 
-    async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ
+    async function getLoginedUser() {
         const userid = sessionStorage.getItem('userId')
         const response = await axios.post(`/users/${userid}`, { '_id': userid })
         setUser(response.data)

client/src/Pages/SignUpPage.js

@@ -17,7 +17,7 @@ function SingUp() {
     const [user, setUser] = useState(INIT_USER)
     const [error, setError] = useState('')
     const [disabled, setDisabled] = useState(true)
-    const [success, setSucces] = useState(false)
+    const [success, setSuccess] = useState(false)
 
     useEffect(() => {
         const isUser = Object.values(user).every(el => Boolean(el))
@@ -45,8 +45,7 @@ function SingUp() {
         try {
             setError('')
             await axios.post('/users/signup', user)
-            alert("회원가입이 완료되었습니다!")
-            setSucces(true)
+            setSuccess(true)
         } catch (error) {
             catchErrors(error, setError)
         }

client/src/index.js

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

package.json

@@ -17,6 +17,7 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^0.21.1",
+    "bcrypt": "^5.0.0",
     "bcryptjs": "^2.4.3",
     "body-parser": "^1.19.0",
     "cors": "^2.8.5",

server/controllers/room.controller.js

 import Room from "../models/Room.js"
-import { customAlphabet } from 'nanoid'
+// import { customAlphabet } from 'nanoid'
 import isLength from 'validator/lib/isLength.js'
 
-const nanoid = customAlphabet('1234567890abcdef', 10)
+// const nanoid = customAlphabet('1234567890abcdef', 10)
 
 const makeRoom = async (req, res) => {
     console.log(req.body)
-    const { roomName, interest, isOpen } = req.body;
-    console.log(roomName, interest, isOpen)
+    const { roomName, interest, isOpen, moderator, roomId } = req.body;
+    console.log(roomName, interest, isOpen, moderator, roomId)
 
-    const roomId = nanoid()
-    const room = await Room.findOne({ roomId })
-    while (room) {
-        roomId = nanoid()
-        room = await Room.findOne({ roomId })
-    }
+    // const roomId = nanoid()
+    // const room = await Room.findOne({ roomId })
+    // while (room) {
+    //     roomId = nanoid()
+    //     room = await Room.findOne({ roomId })
+    // }
 
     try {
         if (!isLength(roomName, { min: 3, max: 20 })) {
@@ -23,10 +23,11 @@ const makeRoom = async (req, res) => {
             return res.status(422).send('분야를 반드시 선택하여야 합니다.')
         }
         const newRoom = await new Room({
-            roomId,
             roomName,
             interest,
-            isOpen
+            isOpen,
+            moderator,
+            roomId,
         }).save()
         console.log(newRoom)
         res.json(newRoom)
@@ -36,4 +37,14 @@ const makeRoom = async (req, res) => {
     }
 }
 
+// const checkmember = async (req, res) => {
+//     try {
+//         let user = await Room.findOne(req.body).select('roomName').exec()
+//         console.log(user)
+//         return res.json(user)
+//     } catch (error) {
+//         alert('올바르지 못한 접근입니다.')
+//     }
+// }
+
 export default { makeRoom }
\ No newline at end of file

server/controllers/user.controller.js

@@ -33,7 +33,7 @@ const signup = async (req, res) => {
             email,
             password: hash,
         }).save()
-        
+
         console.log(newUser)
         res.json(newUser)
 
@@ -71,5 +71,12 @@ const loginNavbar = async (req, res) => {
     }
 }
 
-export default { signup, logineduser, changenick, loginNavbar }
-// {} : 객체로 return함
\ No newline at end of file
+const saveroom = async (req, res) => {
+    const roomId = room.roomId
+    if (!isLength(roomId, { min: 11 })) {
+        return res.status(422).send('방아이디 저장에 오류가 발생하였습니다.')
+    }
+}
+
+export default { signup, logineduser, changenick, loginNavbar, saveroom }
+// {} : 객체로 return 함
\ No newline at end of file

server/models/Chat.js

@@ -18,4 +18,4 @@ const ChatSchema = new mongoose.Schema({
     timestamps: true
 })
 
-export default mongoose.models.ChatSchema || 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/models/Room.js

@@ -3,11 +3,6 @@ import mongoose from 'mongoose'
 const {String} = mongoose.Schema.Types
 
 const RoomSchema = new mongoose.Schema({
-    roomId: {
-        type: String,
-        // default:() => nanoid(),
-        unique: true
-    },
     roomName: {
         type: String,
         required: true,
@@ -21,8 +16,17 @@ const RoomSchema = new mongoose.Schema({
         type: String,
         required: true,
         default: 'user',
-        enum: ['user', 'admin', 'root']
-    }
+        enum: ['true', 'false']
+    },
+    moderator: {
+        type: String,
+        required: true,
+    },
+    roomId: {
+        type: String,
+        // default:() => nanoid(),
+        unique: true
+    },
 }, {
     timestamps: true
 })

server/models/User.js

@@ -3,6 +3,7 @@
 import mongoose from 'mongoose'
 
 const { String } = mongoose.Schema.Types
+// const { Array } = mongoose.Schema.Types
 //원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴.
 //object의 id를 쓸때에도 추가시켜줘야됨.
 

server/routes/room.routers.js

@@ -5,4 +5,8 @@ const router = express.Router()
 
 router.route('/room/makeRoom')
     .post(roomCtrl.makeRoom)
+
+// router.route(`/room/:member`)
+//     .put(userCtrl.checkmember)
+
 export default router
\ No newline at end of file

server/routes/user.routes.js

@@ -12,6 +12,9 @@ router.route(`/users/:userId`)
     .put(userCtrl.changenick)
     .get(userCtrl.loginNavbar)
 
+router.route(`users/:name`)
+    .post(userCtrl.saveroom)
+
 // router.param('userId', userCtrl.userById)
 
 // router.route('/api/users/signup/:userId')    //로그인한 사람의 정보만 가져오도록