import React, { useState, useEffect } from 'react'; import axios from 'axios'; import { Row, Col, Modal, Button, Form, Alert } 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 catchErrors from '../utils/catchErrors'; import { io } from "socket.io-client"; //모듈 가져오기 import Chat from "../Components/Chat"; const socket = io(); const INIT_ROOM = { roomName: '', interest: '', isOpen: false } function Home() { // const [namelist, setNamelist] = useState([]) const [show, setShow] = useState(false); const [show2, setShow2] = 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 [roomName, setRoomName] = useState('') const handleClose = () => setShow(false); const handleShow = () => setShow(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 관련 시작 function enterChatroom(rName) { //방 입장하기 socket.emit('joinRoom', rName) console.log(`joinRoom : ${rName} 입장`) } const sendMsg = (e) => { e.preventDefault() // socket.emit("chat", { // roomName: roomName, // msg: inner, // }); } useEffect(() => { socket.emit("chat", { roomName: roomName, msg: singleChat }) socket.on('broadcast', (msg) => { console.log(msg) setSingleChat(msg) }) }, [singleChat]) return ( <> {chat ? : null}
방 생성 {error && {error} }
방 이름 관심 분야 {/* */} 공개방 setRoom({ ...room, isOpen: !room.isOpen })} /> { (room.isOpen) ? (

공개방으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.

) : (

비밀방으로 개설되며, 참여자들에게 코드를 공유해야합니다.

) }
참여 코드로 채팅 참가
{ console.log('제출') }}> 참여 코드
); } export default Home;