import React, { useState, useEffect } from 'react'; import { Row, Col, Button, Tabs, Tab } from 'react-bootstrap'; import styled from 'styled-components'; 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: '', } const INIT_LIST = [{ interest: '', isOpen: '', memeber: [], roomId: '', roomName: '', }] function Home() { const userName = sessionStorage.getItem('name') const userId = sessionStorage.getItem('userId') 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(false) //소켓 const [singleChat, setSingleChat] = useState('') const [recievedMsg, setRecievedMsg] = useState('') const [roomCode, setRoomCode] = useState('') const [sysmsg, setSysmsg] = useState('') const [roomName, setRoomName] = useState('') const [singleUser, setSingleUser] = useState('') const [recievedUser, setRecievedUser] = useState('') const [singleImg, setSingleImg] = useState('') const [recievedImg, setRecievedImg] = useState('') const [singleTime, setSingleTime] = useState('') const [recievedTime, setRecievedTime] = useState('') const [leaveInfo, setLeaveInfo] = useState([{ roomName: "", leaveTime: "" }]) const handleCloseModal = () => setShowModal(false); const handleShowModal = () => setShowModal(true); const handleCloseEnter = () => setShowEnter(false); const handleShowEnter = () => setShowEnter(true); const handleChato = () => setChat(true); const handleChatc = () => setChat(false); const [closedlist, setClosedList] = useState(INIT_LIST); const [openlist, setOpenlist] = useState([]) //SOCKET 관련 시작 async function enterChatRoom(rCode) { //방 입장하기 socket.emit('joinRoom', rCode) socket.emit('newUser', { rmIf: rCode, userInfo: userName }) console.log(`joinRoom : ${rCode} 입장`) //여기서 채팅 불러와서 넘겨주던가 해야할거 같은데 } function closeChatRoom(rCode) { socket.emit('closeRoom', rCode) console.log(`${rCode}방 보기 중단`) } async function exitRoom(roomId) { const response = await axios.get('/users/check', { params: { '_id': userId } }) const userNick = response.data.nickname; await axios.put('/room/deleteMem', { userId: userId, roomId: roomId }) setSysmsg(`${userNick}님이 나갔습니다.`) console.log(`${roomId}방 ${userId} 탈퇴`) setRoomCode("") } async function getClosedList() { const userid = sessionStorage.getItem('userId') let res = await axios.get('/room/closedlist', { params: { '_id': userid } }) setClosedList(res.data) } async function getOpenList() { let res = await axios.get('/room/openlist') console.log('getOpenlist', res.data) setOpenlist(res.data) } //오픈채팅방에서 참가하기 async function openListroom(roomId) { console.log(roomId) const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } }) setRoom(roomInf.data[0]) setOpen(true) setShow(false) } async function attendListRoom() { const roomId = room.roomId const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId }) const response = await axios.get('/users/check', { params: { '_id': userId } }) const userNick = response.data.nickname; if (tf.data) { alert('참가되었습니다.') setSysmsg(`${userNick}님이 들어왔습니다.`) } else { alert('이미 참가된 방입니다.') } } function enterButton() { setOpen(false) } const sendMsg = (e) => { e.preventDefault() } useEffect(() => { getClosedList(); getOpenList(); }, [roomCode]); useEffect(() => { if (!(singleChat === "")) { socket.emit("chat", { roomInfo: roomCode, sendInfo: { msg: singleChat, sender: singleUser, img: singleImg, time: singleTime } }) setSingleChat("") } }, [singleChat]) useEffect(() => { if (!(sysmsg === '')) { socket.emit("chat", { roomInfo: roomCode, sendInfo: { msg: sysmsg, sender: "system", } }) setSysmsg('') } }, [sysmsg]) useEffect(() => { socket.on("sendedMSG", (sendInfo) => { setRecievedTime(sendInfo.time) setRecievedImg(sendInfo.img) setRecievedUser(sendInfo.sender) setRecievedMsg(sendInfo.msg) console.log(sendInfo.msg) }) }, []) return ( <> {/* */} <> {(show || chat) ? null :
} {chat ? : null} {open ?

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

▷ 관심분야 : {room.interest}
▷ 참여인원 : {room.member.length}
▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}
: null}
); } const Sdiv = styled.div` @media screen and (max-width: 768px) { display: ${({ chat }) => { return chat === false ? 'block' : 'none' }} } ` export default Home;