HomePage.js 6.13 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
우지원 committed
12
import axios from 'axios';
우지원's avatar
ul    
우지원 committed
13

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

우지원's avatar
우지원 committed
16
const INIT_ROOM = {
17
18
19
20
  roomName: '',
  interest: '',
  roomId: '',
  member: '',
우지원's avatar
우지원 committed
21
22
}

우지원's avatar
ul    
우지원 committed
23
function Home() {
24
25
  const userName = sessionStorage.getItem('name')

JeongYeonwoo's avatar
JeongYeonwoo committed
26
  const [showModal, setShowModal] = useState(false);
Choi Ga Young's avatar
dmdk    
Choi Ga Young committed
27
  const [showEnter, setShowEnter] = useState(false);
JeongYeonwoo's avatar
JeongYeonwoo committed
28
  const [chat, setChat] = useState(false);
29
30
  const [open, setOpen] = useState(false);
  const [room, setRoom] = useState(INIT_ROOM)
31
  const [show, setShow] = useState(false)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
32

JeongYeonwoo's avatar
JeongYeonwoo committed
33
34
35
36
  //소켓
  const [singleChat, setSingleChat] = useState('')
  const [recievedMsg, setRecievedMsg] = useState('')
  const [roomCode, setRoomCode] = useState('')
37
  const [newUser, setNewUser] = useState('')
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
38

JeongYeonwoo's avatar
JeongYeonwoo committed
39
40
  const [singleUser, setSingleUser] = useState('')
  const [recievedUser, setRecievedUser] = useState('')
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
41

JeongYeonwoo's avatar
JeongYeonwoo committed
42
43
44
  const [singleImg, setSingleImg] = useState('')
  const [recievedImg, setRecievedImg] = useState('')

45

46
47
48
49
50
51
  //SOCKET 관련 시작
  function enterChatRoom(rCode) {    //방 입장하기
    socket.emit('joinRoom', rCode)
    socket.emit('newUser', { rmIf: rCode, userInfo: userName })
    console.log(`joinRoom : ${rCode} 입장`)
  }
JeongYeonwoo's avatar
JeongYeonwoo committed
52
  const [roomName, setRoomName] = useState('')
Soo Hyun Kim's avatar
Soo Hyun Kim committed
53

JeongYeonwoo's avatar
JeongYeonwoo committed
54
55
  const handleCloseModal = () => setShowModal(false);
  const handleShowModal = () => setShowModal(true);
56
57
  const handleCloseEnter = () => setShowEnter(false);
  const handleShowEnter = () => setShowEnter(true);
JeongYeonwoo's avatar
JeongYeonwoo committed
58
59
  const handleChato = () => setChat(true);
  const handleChatc = () => setChat(false);
Choi Ga Young's avatar
Choi Ga Young committed
60

61
62
63
  socket.on("sendUser", (data) => {
    setNewUser(data)
  })
JeongYeonwoo's avatar
JeongYeonwoo committed
64

65
66
67
68
69
70
71
72
  //오픈채팅방에서 참가하기
  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])
73
    setOpen(true)
74
75
76
77
78
79
80
81
82
83
84
    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('이미 참가된 방입니다.')
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
85
    }
86
87
88
89
90
  }

  function enterButton() {
    setOpen(false)
  }
Choi Ga Young's avatar
Choi Ga Young committed
91
92
93
94
95
  const sendMsg = (e) => {
    e.preventDefault()
  }


JeongYeonwoo's avatar
JeongYeonwoo committed
96
97
98
99
  useEffect(() => {
    if (!(singleChat == '')) {
      socket.emit("chat", {
        roomInfo: roomCode,
100
101
102
103
104
        sendInfo: {
          msg: singleChat,
          sender: singleUser,
          img: singleImg
        }
JeongYeonwoo's avatar
JeongYeonwoo committed
105
      })
106
      setSingleChat([''])
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
107
    }
JeongYeonwoo's avatar
JeongYeonwoo committed
108
  }, [singleChat])
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
109
110


JeongYeonwoo's avatar
JeongYeonwoo committed
111
  useEffect(() => {
Choi Ga Young's avatar
Choi Ga Young committed
112
    socket.on("sendedMSG", (sendInfo) => {
JeongYeonwoo's avatar
JeongYeonwoo committed
113
114
115
      setRecievedImg(sendInfo.img)
      setRecievedUser(sendInfo.sender)
      setRecievedMsg(sendInfo.msg)
Choi Ga Young's avatar
Choi Ga Young committed
116
    })
JeongYeonwoo's avatar
JeongYeonwoo committed
117
118
119
120
121
122
123
124
125
  }, [])

  return (
    <>
      <Menu />
      <Row className="mr-0">
        <Col className="list" md={5}>
          <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
            <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
126
              <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
JeongYeonwoo's avatar
JeongYeonwoo committed
127
            </Tab>
Choi Ga Young's avatar
dmdk    
Choi Ga Young committed
128
            <Tab eventKey="open" title="공개방" onClick={handleChatc}>
Choi Ga Young's avatar
Choi Ga Young committed
129
              <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
JeongYeonwoo's avatar
JeongYeonwoo committed
130
131
132
133
            </Tab>
          </Tabs>
        </Col>
        <Col style={{ padding: "0" }}>
134
135
136
          <>
            {(show || chat) ?
              null
137
138
139
              : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
                <Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
                <Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
140
141
142
              </div>
            }
            {chat ?
Choi Ga Young's avatar
dmdk    
Choi Ga Young committed
143
              <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} roomCode={roomCode} roomName={roomName} />
144
145
146
147
148
149
150
151
152
153
154
155
156
              : null}
            {open ?
              <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
                <div className="d-flex justify-content-center">
                  <div className="mt-5 p-5 shadow w-75">
                    <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName} 입니다.</h2>
                    <h5> 관심분야 : {room.interest}</h5>
                    <h5> 참여인원 : {room.member.length}</h5>
                    <h5 className="mb-3"> 방코드(방코드를 통해서도 참여할  있습니다.) : {room.roomId}</h5>
                    <Row className='justify-content-center'>
                      <Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
                      <Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
                    </Row>
157
                  </div>
158
159
160
161
                </div>
              </div>
              : null}
          </>
JeongYeonwoo's avatar
JeongYeonwoo committed
162
163
164
        </Col>
      </Row>
      <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
165
      <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
JeongYeonwoo's avatar
JeongYeonwoo committed
166
167
    </>
  );
우지원's avatar
ul    
우지원 committed
168
169
170
}

export default Home;
171