HomePage.js 3.62 KB
Newer Older
Soo Hyun Kim's avatar
Soo Hyun Kim committed
1
import React, { useState, useEffect } from 'react';
Choi Ga Young's avatar
에러    
Choi Ga Young committed
2
import { Row, Col, Button } from 'react-bootstrap';
우지원's avatar
ul    
우지원 committed
3
4
5
6
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList';
Choi Ga Young's avatar
Choi Ga Young committed
7
import Menu from '../Components/Menu';
8
import { io } from "socket.io-client";   //모듈 가져오기
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
9
import Chat from "../Components/Chat";
Soo Hyun Kim's avatar
Soo Hyun Kim committed
10
11
import RoomMake from "../Components/RoomMake"
import EnterRoom from "../Components/EnterRoom"
우지원's avatar
ul    
우지원 committed
12

13
const socket = io();
우지원's avatar
ul    
우지원 committed
14
15

function Home() {
JeongYeonwoo's avatar
JeongYeonwoo committed
16
17
18
  const [showModal, setShowModal] = useState(false);
  const [showEnter, setEnter] = useState(false);
  const [chat, setChat] = useState(false);
Soo Hyun Kim's avatar
Soo Hyun Kim committed
19

JeongYeonwoo's avatar
JeongYeonwoo committed
20
21
22
23
  //소켓
  const [singleChat, setSingleChat] = useState('')
  const [recievedMsg, setRecievedMsg] = useState('')
  const [roomCode, setRoomCode] = useState('')
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
24

JeongYeonwoo's avatar
JeongYeonwoo committed
25
26
  const [singleUser, setSingleUser] = useState('')
  const [recievedUser, setRecievedUser] = useState('')
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
27

JeongYeonwoo's avatar
JeongYeonwoo committed
28
29
30
  const [singleImg, setSingleImg] = useState('')
  const [recievedImg, setRecievedImg] = useState('')

JeongYeonwoo's avatar
JeongYeonwoo committed
31
  //방참가
32

JeongYeonwoo's avatar
JeongYeonwoo committed
33
  const [roomName, setRoomName] = useState('')
Soo Hyun Kim's avatar
Soo Hyun Kim committed
34

JeongYeonwoo's avatar
JeongYeonwoo committed
35
36
37
38
39
40
  const handleCloseModal = () => setShowModal(false);
  const handleShowModal = () => setShowModal(true);
  const handleCloseEnter = () => setEnter(false);
  const handleShowEnter = () => setEnter(true);
  const handleChato = () => setChat(true);
  const handleChatc = () => setChat(false);
Choi Ga Young's avatar
Choi Ga Young committed
41

Soo Hyun Kim's avatar
Soo Hyun Kim committed
42

Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
43

JeongYeonwoo's avatar
JeongYeonwoo committed
44
45
46
47
48
49
50
51
52
  //SOCKET 관련 시작
  function enterChatRoom(rName) {    //방 입장하기
    socket.emit('joinRoom', rName)
    console.log(`joinRoom : ${rName} 입장`)
  }

  const sendMsg = (e) => {
    e.preventDefault()
  }
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
53

JeongYeonwoo's avatar
JeongYeonwoo committed
54
55
56
57
58

  useEffect(() => {
    if (!(singleChat == '')) {
      socket.emit("chat", {
        roomInfo: roomCode,
JeongYeonwoo's avatar
JeongYeonwoo committed
59
        sendInfo: { msg: singleChat, sender: singleUser, img: singleImg },
JeongYeonwoo's avatar
JeongYeonwoo committed
60
61
62
      })
      //setSingleChat([''])
    }
JeongYeonwoo's avatar
JeongYeonwoo committed
63
  }, [singleChat])
JeongYeonwoo's avatar
JeongYeonwoo committed
64
65
66


  useEffect(() => {
JeongYeonwoo's avatar
JeongYeonwoo committed
67
68
69
70
    socket.on("sendedMSG", (sendInfo) => {
      setRecievedImg(sendInfo.img)
      setRecievedUser(sendInfo.sender)
      setRecievedMsg(sendInfo.msg)
JeongYeonwoo's avatar
JeongYeonwoo committed
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
    })
  }, [])




  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} />
            </Tab>
            <Tab eventKey="open" title="공개방" onClick={handleChato}>
              <OpenList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
            </Tab>
          </Tabs>
        </Col>
        <Col style={{ padding: "0" }}>
JeongYeonwoo's avatar
JeongYeonwoo committed
92
          {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleImg={singleImg} setSingleImg={setSingleImg} recievedImg={recievedImg} singleUser={singleUser} setSingleUser={setSingleUser} recievedUser={recievedUser} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} /> : null}
JeongYeonwoo's avatar
JeongYeonwoo committed
93
94
95
96

          <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
            <Button variant="primary" onClick={handleShowModal} size="lg" block>
              생성
Soo Hyun Kim's avatar
Soo Hyun Kim committed
97
                        </Button>
우지원's avatar
ul    
우지원 committed
98

JeongYeonwoo's avatar
JeongYeonwoo committed
99
100
            <Button variant="secondary" onClick={handleShowEnter} size="lg" block>
              참가
Soo Hyun Kim's avatar
Soo Hyun Kim committed
101
                        </Button>
JeongYeonwoo's avatar
JeongYeonwoo committed
102
103
104
105
106
107
108
          </div>
        </Col>
      </Row>
      <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
      <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomName={setRoomName} />
    </>
  );
우지원's avatar
ul    
우지원 committed
109
110
111
}

export default Home;
112