Merge remote-tracking branch 'origin/sooModalTest' into young

client/src/Components/Chat.js

@@ -25,15 +25,24 @@ function Chat(props) {
     setChat([...chat, props.singleChat])
   }, [props.singleChat])
 
+  useEffect(() => {
+    setChat([...chat, props.recievedMsg])
+  }, [props.recievedMsg])
+
   return (
 
     <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
       <h2>현재 {props.roomName} 입니다.</h2>
-      {      chat.map((value, index) => (
-        <Row key={index} className='ml-3'>
-          {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
-        </Row>
-      ))}
+      {      chat.map((value, index) => {
+        if (Boolean(value)) {
+          // console.log(`value=${value}=`)
+          return <Row key={index} className='ml-3'>
+            {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
+          </Row>
+        } else {
+          return null
+        }
+      })}
       <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
       <Form onSubmit={sendMsgCH}>
         <Form.Group>
@@ -49,4 +58,5 @@ function Chat(props) {
   );
 }
 
+
 export default Chat;

client/src/Components/ClosedList.js

@@ -20,11 +20,11 @@ function ClosedList(props) {
     setList(res.data)
   }
 
-  function enterChatroomCH(e) {
+  function enterChatRoomCH(e) {
     console.log(e.target.name)
     console.log(e.target)
     const roomName = e.target.name
-    props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함
+    props.enterChatRoom(roomName) // 각각의 room으로 들어가도록 설정해야 함
     props.setRoomName(roomName)
     // props.clearChat()
   }

client/src/Components/EnterRoom.js

+import React, { useState } from 'react'
+import axios from 'axios';
+import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
+import catchErrors from '../utils/catchErrors'
+
+
+function EnterRoom(props) {
+    const [enterCode, setEnterCode] = useState('');
+    const [error, setError] = useState('');
+    
+    function handleChange(event) {
+        const { name, value } = event.target
+        setEnterCode(value)
+        console.log(enterCode)
+    }
+    
+    async function handleSubmit(event) {
+        event.preventDefault()
+        try {
+            setError('')
+            // await axios.post('/room/enterRoom', enterCode)
+            props.enterChatRoom(enterCode)
+            setEnterCode('')
+        } catch (error){
+            catchErrors(error, setError)
+        }
+    }
+
+    return (
+        <>
+            <Modal show={props.showEnter} onHide={props.handleCloseEnter}>
+                <Modal.Header closeButton>
+                    <Modal.Title>참여 코드로 채팅 참가</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <Form onSubmit={handleSubmit}>
+                        <Form.Group as={Row} controlId="formCodeE">
+                            <Form.Label column sm={4}>참여 코드</Form.Label>
+                            <Col>
+                                <Form.Control name='roomCode' type='text' value={enterCode} onChange={handleChange} />
+                            </Col>
+                        </Form.Group>
+                        <Form.Group as={Row}>
+                            <Col sm={{ span: 5, offset: 4 }}>
+                                <Button type="submit">참가</Button>
+                            </Col>
+                        </Form.Group>
+                    </Form>
+                </Modal.Body>
+            </Modal>
+        </>
+    )
+}
+
+export default EnterRoom

client/src/Components/OpenList.js

@@ -16,11 +16,9 @@ function OpenList(props) {
   }
 
 
-  function enterChatroomCH(e) {
-    console.log(e.target.name)
-    console.log(e.target)
+  function enterChatRoomCH(e) {
     const roomName = e.target.name
-    props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함
+    props.enterChatRoom(roomName) // 각각의 room으로 들어가도록 설정해야 함
     props.setRoomName(roomName)
     // props.clearChat()
   }

client/src/Components/RoomMake.js

+import React, { useState, useEffect } from 'react'
+import axios from 'axios';
+import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
+import catchErrors from '../utils/catchErrors';
+
+const INIT_ROOM = {
+    roomName: '',
+    interest: '',
+    isOpen: false
+}
+
+function RoomMake(props) {
+    const [room, setRoom] = useState(INIT_ROOM);
+    const [disabled, setDisabled] = useState(true);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        const isRoom = Object.values(room).every(el => Boolean(el))
+        isRoom ? setDisabled(false) : setDisabled(true)
+    }, [room])
+
+    function handleChange(event) {
+        const { name, value } = event.target
+        setRoom({ ...room, [name]: value })
+        console.log(room)
+    }
+
+    async function handleSubmit(event) {
+        event.preventDefault()
+        try {
+            setError('')
+            await axios.post('/room/makeRoom', room)
+            const Id = res.data.roomId
+            alert(`방암호는 ${Id}입니다`)
+            props.handleCloseModal()
+            setRoom(INIT_ROOM)
+        } catch (error){
+            catchErrors(error, setError)
+        }
+    }
+
+    return (
+        <Modal show={props.showModal} onHide={props.handleCloseModal}>
+            <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">
+                        <Form.Label column sm={4}>방 이름</Form.Label>
+                        <Col>
+                            <Form.Control name='roomName' type='text' value={room.roomName} 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={room.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={room.isOpen}
+                                name='isOpen'
+                                onChange={() => setRoom({ ...room, isOpen: !room.isOpen })} />
+                        </Col>
+                    </Form.Group>
+                    {
+                        (room.isOpen)
+                            ? (<p><b>공개방</b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</p>)
+                            : (<p><b>비밀방</b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</p>)
+                    }
+                    <Form.Group as={Row}>
+                        <Col sm={{ span: 5, offset: 4 }}>
+                            <Button type="submit" >방 생성</Button>
+                        </Col>
+                    </Form.Group>
+                </Form>
+            </Modal.Body>
+        </Modal>
+
+    )
+}
+
+export default RoomMake

client/src/Pages/HomePage.js

@@ -9,35 +9,32 @@ import Menu from '../Components/Menu';
 import catchErrors from '../utils/catchErrors';
 import { io } from "socket.io-client";   //모듈 가져오기
 import Chat from "../Components/Chat";
-const socket = io();
+import RoomMake from "../Components/RoomMake"
+import EnterRoom from "../Components/EnterRoom"
 
-const INIT_ROOM = {
-    roomName: '',
-    interest: '',
-    isOpen: false,
-    moderator: '',
-}
+const socket = io();
 
 function Home() {
-    const [show, setShow] = useState(false);
-    const [show2, setShow2] = useState(false);
+    const [showModal, setShowModal] = useState(false);
+    const [showEnter, setEnter] = useState(false);
     const [chat, setChat] = useState(false);
-    const [room, setRoom] = useState(INIT_ROOM);
-    const [disabled, setDisabled] = useState(true);
-    const [error, setError] = useState('');
 
+    //소켓
     const [singleChat, setSingleChat] = useState('')
+    const [recievedMsg, setRecievedMsg] = useState('')
     const [roomName, setRoomName] = useState('')
-    // const [success, setSuccess] = useState(false)
+    const [roomCode, setRoomCode] = useState('')
+
+    //방참가
+    const [roomId, setRoomId] = useState('')
 
-    const handleClose = () => setShow(false);
-    const handleShow = () => setShow(true);
+    const handleCloseModal = () => setShowModal(false);
+    const handleShowModal = () => setShowModal(true);
+    const handleCloseEnter = () => setEnter(false);
+    const handleShowEnter = () => setEnter(true);
     const handleChato = () => setChat(true);
     const handleChatc = () => setChat(false);
-    const handleClose2 = () => setShow2(false);
-    const handleShow2 = () => setShow2(true);
 
-    const moderator = sessionStorage.getItem('userId');
     const member = sessionStorage.getItem('userId');
 
     useEffect(() => {
@@ -47,26 +44,7 @@ function Home() {
 
     function handleChange(event) {
         const { name, value } = event.target
-        setRoom({ ...room, [name]: value, moderator, member })
-        //console.log(room)
-    }
-
-    console.log(room)
-
-    async function handleSubmit(event) {
-        event.preventDefault()
-
-        try {
-            setError('')
-            let res = await axios.post('/room/makeRoom', room)
-            console.log(res.data.roomId)
-            const Id = res.data.roomId
-            alert(`방암호는 ${Id}입니다`)
-            setShow(false)
-        } catch (error) {
-            catchErrors(error, setError)
-        }
-
+        setRoom({ ...room, [name]: value, member })
     }
 
     //SOCKET 관련 시작
@@ -81,14 +59,18 @@ function Home() {
 
     useEffect(() => {
         socket.emit("chat", {
-            roomName: roomName,
+            roomName: roomCode,
             msg: singleChat
         })
-        socket.on('broadcast', (msg) => {
+    }, [singleChat])
+    
+    
+    useEffect(() => {
+        socket.on("sendedMSG", (msg) => {
             console.log(msg)
-            setSingleChat(msg)
+            setRecievedMsg(msg)
         })
-    }, [singleChat])
+    }, [])
 
     return (
         <>
@@ -105,92 +87,21 @@ function Home() {
                     </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} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomName={roomName}/> : null}
 
                     <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
-                        <Button variant="primary" onClick={handleShow} size="lg" block>
+                        <Button variant="primary" onClick={handleShowModal} size="lg" block>
                             생성
                         </Button>
 
-                        <Button variant="secondary" onClick={handleShow2} size="lg" block>
+                        <Button variant="secondary" onClick={handleShowEnter} size="lg" block>
                             참가
                         </Button>
                     </div>
-
-                    <Modal show={show} onHide={handleClose}>
-                        <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">
-                                    <Form.Label column sm={4}>방 이름</Form.Label>
-                                    <Col>
-                                        <Form.Control name='roomName' type='text' value={room.roomName} 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={room.interest} onChange={handleChange}>
-                                            <option>Choose...</option>
-                                            <option>과학</option>
-                                            <option>수학</option>
-                                            <option>예술</option>
-                                            <option>언어</option>
-                                            <option>취미</option>
-                                        </Form.Control>
-                                    </Col>
-                                </Form.Group>
-                                <Form.Group as={Row} controlId="chatIsOpen">
-                                    <Form.Label column sm={4}>공개방</Form.Label>
-                                    <Col>
-                                        <Form.Check
-                                            type="checkbox"
-                                            checked={room.isOpen}
-                                            name='isOpen'
-                                            onChange={() => setRoom({ ...room, isOpen: !room.isOpen })} />
-                                    </Col>
-                                </Form.Group>
-                                {
-                                    (room.isOpen)
-                                        ? (<p><b>공개방</b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</p>)
-                                        : (<p><b>비밀방</b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</p>)
-                                }
-                                <Form.Group as={Row}>
-                                    <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={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>
             </Row>
+            <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
+            <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter}/>
         </>
     );
 }

server/server.js

@@ -24,9 +24,13 @@ io.on("connection", (socket) => { // 기본 연결
     socket.join(roomName); //클라이언트에서 data에 적힌 room으로 참여시킴
   });
 
-  socket.on('chat', (data)=>{
-    io.to(data.roomName).emit('broadcast',data.msg); //roomName에 존재하는 모든 소켓들에게 
-  })
+  // socket.on('chat', (data)=>{
+  //   io.to(data.roomName).emit('chat',data.msg); //roomName에 존재하는 모든 소켓들에게 
+  // })
+
+  socket.on('chat', (data) => {
+    socket.broadcast.emit('sendedMSG', data.msg ); // everyone gets it but the sender
+  });
 
   socket.on('disconnect', () => {
     console.log('disconnected from server id=', socket.id)