import React, { useState, useEffect } from 'react'; import { Row, Col, Button } from 'react-bootstrap'; import Tabs from 'react-bootstrap/Tabs'; import Tab from 'react-bootstrap/Tab'; import ClosedList from '../Components/ClosedList'; import OpenList from '../Components/OpenList'; import Menu from '../Components/Menu'; import { io } from "socket.io-client"; //모듈 가져오기 import Chat from "../Components/Chat"; import RoomMake from "../Components/RoomMake" import EnterRoom from "../Components/EnterRoom" import axios from 'axios'; const socket = io(); const INIT_ROOM = { roomName: '', interest: '', roomId: '', member: '', } function Home() { 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 [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 = () => setOpen(true); //SOCKET 관련 시작 function enterChatRoom(rCode) { //방 입장하기 socket.emit('joinRoom', rCode) console.log(`joinRoom : ${rCode} 입장`) } //오픈채팅방에서 참가하기 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('이미 참가된 방입니다.') } } function enterButton() { setOpen(false) } const sendMsg = (e) => { e.preventDefault() } useEffect(() => { if (!(singleChat == '')) { socket.emit("chat", { roomInfo: roomCode, msg: singleChat }) setSingleChat(['']) } }, [singleChat]) useEffect(() => { socket.on("sendedMSG", (msg) => { console.log(msg) setRecievedMsg(msg) }) }, []) return ( <> {show ? <> {chat ? :
} : <> {open ?

현재 {room.roomName}방 입니다.

▷ 관심분야 : {room.interest}
▷ 참여인원 : {room.member.length}
▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}
:
} }
); } export default Home;