0118모달분리

client/src/Components/ClosedList.js

@@ -7,11 +7,11 @@ function ClosedList(props) {
     { room: '테스트 방2', memnum: 4, admin: '수현' }]
   );
 
-  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()
   }
@@ -20,7 +20,7 @@ function ClosedList(props) {
     <div>
       {list.map((item, index) =>
         <ListGroup key={index}>
-          <ListGroup.Item action onClick={enterChatroomCH} name={item.room}>
+          <ListGroup.Item action onClick={enterChatRoomCH} name={item.room}>
           {item.room}
           </ListGroup.Item>
         </ListGroup>

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

@@ -7,9 +7,9 @@ function OpenList(props) {
     { room: '테스트 방4', memnum: 2, admin: '수현2' }]
   );
 
-  function enterChatroomCH(e) {
+  function enterChatRoomCH(e) {
     const roomName = e.target.name
-    props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함
+    props.enterChatRoom(roomName) // 각각의 room으로 들어가도록 설정해야 함
     props.setRoomName(roomName)
     // props.clearChat()
   }
@@ -18,7 +18,7 @@ function OpenList(props) {
     <div>
       {list.map((list, index) =>
         <ListGroup key={index}>
-          <ListGroup.Item action onClick={enterChatroomCH} name={list.room}>
+          <ListGroup.Item action onClick={enterChatRoomCH} name={list.room}>
             {list.room}
           </ListGroup.Item>
         </ListGroup>

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)
+            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,61 +9,39 @@ import Menu from '../Components/Menu';
 import catchErrors from '../utils/catchErrors';
 import { io } from "socket.io-client";   //모듈 가져오기
 import Chat from "../Components/Chat";
+import RoomMake from "../Components/RoomMake"
+import EnterRoom from "../Components/EnterRoom"
 
 const socket = io();
 
-const INIT_ROOM = {
-    roomName: '',
-    interest: '',
-    isOpen: false
-}
-
 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 [roomCode, setRoomCode] = useState('')
 
-    const handleClose = () => setShow(false);
-    const handleShow = () => setShow(true);
+    //방참가
+    const [roomId, setRoomId] = useState('')
+
+    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);
     
-    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)
-            setRoom(INIT_ROOM)
-        } catch (error){
-            catchErrors(error, setError)
-        }
-    }
 
-    //SOCKET 관련 시작
+    //SOCKET 함수
 
-    function enterChatroom(rName) {    //방 입장하기
-        socket.emit('joinRoom', rName)
-        console.log(`joinRoom : ${rName} 입장`)
+    function enterChatRoom(roomCode) {    //방 입장하기
+        socket.emit('joinRoom', roomCode)
+        console.log(`joinRoom : ${roomCode} 입장`)
     }
 
     const sendMsg = (e) => {
@@ -72,7 +50,7 @@ function Home() {
 
     useEffect(() => {
         socket.emit("chat", {
-            roomName: roomName,
+            roomName: roomCode,
             msg: singleChat
         })
     }, [singleChat])
@@ -85,11 +63,6 @@ function Home() {
         })
     }, [])
 
-    // socket.on('broadcast', (msg) => {
-    //     console.log(msg)
-    //     setSingleChat(msg)
-    // }, se)
-
     return (
         <>
             <Menu />
@@ -97,10 +70,10 @@ 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>
@@ -108,90 +81,18 @@ function Home() {
                     {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>
-                                        {/* <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>
-
-                    <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>
+            <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
+            <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter}/>
         </>
     );
 }