e

client/src/Components/Chat.js

@@ -87,7 +87,7 @@ function Chat(props) {
   return (
     <>
       <Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
-        <Row class="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px", margin: "1%" }}>
+        <Row className="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px", margin: "1%" }}>
           <Col md="auto">
             <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
           </Col>

client/src/Components/OpenList.js

@@ -18,7 +18,8 @@ function OpenList(props) {
   function enterChatRoomCH(e) {
     console.log('e확인', e.target)
     const roomCode = e.target.name
-    props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
+    // props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
+    props.openListroom(roomCode)
     props.setRoomCode(roomCode)
     // props.clearChat()
   }

client/src/Pages/HomePage.js

@@ -14,157 +14,159 @@ import axios from 'axios';
 const socket = io();
 
 const INIT_ROOM = {
-  roomName: '',
-  interest: '',
-  roomId: '',
-  member: '',
+    roomName: '',
+    interest: '',
+    roomId: '',
+    member: '',
 }
 
 function Home() {
-  const userName = sessionStorage.getItem('name')
-
-  const [showModal, setShowModal] = useState(false);
-  const [showEnter, setEnter] = useState(false);
-  const [chat, setChat] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [room, setRoom] = useState(INIT_ROOM)
-  const [show, setShow] = useState(true)
-
-  //소켓
-  const [singleChat, setSingleChat] = useState('')
-  const [recievedMsg, setRecievedMsg] = useState('')
-  const [roomCode, setRoomCode] = useState('')
-  const [newUser, setNewUser] = useState('')
-
-  const [singleUser, setSingleUser] = useState('')
-  const [recievedUser, setRecievedUser] = useState('')
-
-  const [singleImg, setSingleImg] = useState('')
-  const [recievedImg, setRecievedImg] = useState('')
-
-
-  //SOCKET 관련 시작
-  function enterChatRoom(rCode) {    //방 입장하기
-    socket.emit('joinRoom', rCode)
-    socket.emit('newUser', { rmIf: rCode, userInfo: userName })
-    console.log(`joinRoom : ${rCode} 입장`)
-  }
-  const [roomName, setRoomName] = 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);
-
-  socket.on("sendUser", (data) => {
-    setNewUser(data)
-  })
-
-  //오픈채팅방에서 참가하기
-  async function openListroom(roomId) {
-    console.log(roomId)
-    const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } })
-    console.log(roomInf)
-    console.log(roomInf.data)
-    console.log(roomInf.data[0])
-    setRoom(roomInf.data[0])
-    setShow(false)
-  }
-
-  async function attendListRoom() {
-    const userId = sessionStorage.getItem('userId'); //sessionStorage에 저장된 userId가져옴
-    const roomId = room.roomId
-    const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
-    if (tf.data) {
-      alert('참가되었습니다.')
-    } else {
-      alert('이미 참가된 방입니다.')
+    const userName = sessionStorage.getItem('name')
+
+    const [showModal, setShowModal] = useState(false);
+    const [showEnter, setShowEnter] = useState(false);
+    const [chat, setChat] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [room, setRoom] = useState(INIT_ROOM)
+    const [show, setShow] = useState(true)
+
+    //소켓
+    const [singleChat, setSingleChat] = useState('')
+    const [recievedMsg, setRecievedMsg] = useState('')
+    const [roomCode, setRoomCode] = useState('')
+    const [newUser, setNewUser] = useState('')
+
+    const [singleUser, setSingleUser] = useState('')
+    const [recievedUser, setRecievedUser] = useState('')
+
+    const [singleImg, setSingleImg] = useState('')
+    const [recievedImg, setRecievedImg] = useState('')
+
+
+    //SOCKET 관련 시작
+    function enterChatRoom(rCode) {    //방 입장하기
+        socket.emit('joinRoom', rCode)
+        socket.emit('newUser', { rmIf: rCode, userInfo: userName })
+        console.log(`joinRoom : ${rCode} 입장`)
+    }
+    const [roomName, setRoomName] = useState('')
+
+    const handleCloseModal = () => setShowModal(false);
+    const handleShowModal = () => setShowModal(true);
+    const handleCloseEnter = () => setShowEnter(false);
+    const handleShowEnter = () => setShowEnter(true);
+    const handleChato = () => setChat(true);
+    const handleChatc = () => setOpen(true);
+
+    socket.on("sendUser", (data) => {
+        setNewUser(data)
+    })
+
+    //오픈채팅방에서 참가하기
+    async function openListroom(roomId) {
+        console.log(roomId)
+        const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } })
+        console.log(roomInf)
+        console.log(roomInf.data)
+        console.log(roomInf.data[0])
+        setRoom(roomInf.data[0])
+        setOpen(true)
+        setShow(false)
     }
-  }
-
-  function enterButton() {
-    setOpen(false)
-  }
-  const sendMsg = (e) => {
-    e.preventDefault()
-  }
-
-
-  useEffect(() => {
-    if (!(singleChat == '')) {
-      socket.emit("chat", {
-        roomInfo: roomCode,
-        sendInfo: {
-          msg: singleChat,
-          sender: singleUser,
-          img: singleImg
+
+    async function attendListRoom() {
+        const userId = sessionStorage.getItem('userId'); //sessionStorage에 저장된 userId가져옴
+        const roomId = room.roomId
+        const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
+        if (tf.data) {
+            alert('참가되었습니다.')
+        } else {
+            alert('이미 참가된 방입니다.')
         }
-      })
-      setSingleChat([''])
     }
-  }, [singleChat])
 
+    function enterButton() {
+        setOpen(false)
+    }
+    const sendMsg = (e) => {
+        e.preventDefault()
+    }
 
-  useEffect(() => {
-    socket.on("sendedMSG", (sendInfo) => {
-      setRecievedImg(sendInfo.img)
-      setRecievedUser(sendInfo.sender)
-      setRecievedMsg(sendInfo.msg)
-    })
-  }, [])
-
-  return (
-    <>
-      <Menu />
-      <Row className="mr-0">
-        <Col className="list" md={5}>
-          <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
-            <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-              <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
-            </Tab>
-            <Tab eventKey="open" title="공개방" onClick={handleChato}>
-              <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
-            </Tab>
-          </Tabs>
-        </Col>
-        <Col style={{ padding: "0" }}>
-          {show ? <>
-            {chat ?
-              <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} newUser={newUser} setSingleChat={setSingleChat} roomCode={roomCode} singleImg={singleImg} setSingleImg={setSingleImg} recievedImg={recievedImg} singleUser={singleUser} setSingleUser={setSingleUser} recievedUser={recievedUser} />
-              : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
-                <Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
-                <Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
-              </div>}
-          </> : <>
-              {open ?
-                <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
-                  <div className="d-flex justify-content-center">
-                    <div className="mt-5 p-5 shadow w-75">
-                      <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName}방 입니다.</h2>
-                      <h5>▷ 관심분야 : {room.interest}</h5>
-                      <h5>▷ 참여인원 : {room.member.length}</h5>
-                      <h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
-                      <Row className='justify-content-center'>
-                        <Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
-                        <Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
-                      </Row>
-                    </div>
-                  </div>
-                </div> :
-                <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
-                  <Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
-                  <Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
-                </div>}
-            </>}
-        </Col>
-      </Row>
-      <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
-      <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
-    </>
-  );
+
+    useEffect(() => {
+        if (!(singleChat == '')) {
+            socket.emit("chat", {
+                roomInfo: roomCode,
+                sendInfo: {
+                    msg: singleChat,
+                    sender: singleUser,
+                    img: singleImg
+                }
+            })
+            setSingleChat([''])
+        }
+    }, [singleChat])
+
+
+    useEffect(() => {
+        socket.on("sendedMSG", (sendInfo) => {
+            setRecievedImg(sendInfo.img)
+            setRecievedUser(sendInfo.sender)
+            setRecievedMsg(sendInfo.msg)
+        })
+    }, [])
+
+    return (
+        <>
+            <Menu />
+            <Row className="mr-0">
+                <Col className="list" md={5}>
+                    <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
+                        <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
+                            <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
+                        </Tab>
+                        <Tab eventKey="open" title="공개방" onClick={handleChatc}>
+                            <OpenList openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
+                        </Tab>
+                    </Tabs>
+                </Col>
+                <Col style={{ padding: "0" }}>
+                    <>
+                        {(show || chat) ?
+                            null
+                            : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
+                                <Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
+                                <Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
+                            </div>
+                        }
+                        {chat ?
+                            <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} roomName={roomName} />
+                            : null}
+                        {(!show && open) ? null : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
+                            <Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
+                            <Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
+                        </div>}
+                    </>
+                    {open ? <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
+                        <div className="d-flex justify-content-center">
+                            <div className="mt-5 p-5 shadow w-75">
+                                <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName}방 입니다.</h2>
+                                <h5>▷ 관심분야 : {room.interest}</h5>
+                                <h5>▷ 참여인원 : {room.member.length}</h5>
+                                <h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
+                                <Row className='justify-content-center'>
+                                    <Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
+                                    <Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
+                                </Row>
+                            </div>
+                        </div>
+                    </div> : null}
+                </Col>
+            </Row>
+            <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
+            <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
+        </>
+    );
 }
 
 export default Home;
-