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 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(false) //소켓 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 = () => 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]) setOpen(true) 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, sendInfo: { msg: singleChat, sender: singleUser, img: singleImg } }) setSingleChat(['']) } }, [singleChat]) useEffect(() => { socket.on("sendedMSG", (sendInfo) => { setRecievedImg(sendInfo.img) setRecievedUser(sendInfo.sender) setRecievedMsg(sendInfo.msg) }) }, []) return ( <> <> {(show || chat) ? null :
} {chat ? : null} {open ?

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

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