InitRoom.js 2.13 KB
Newer Older
Kim, Chaerin's avatar
Kim, Chaerin committed
1
2
3
4
5
6
import { useEffect, useState } from "react";
import catchErrors from "../../context/catchError";
import { useParams } from "react-router-dom";
import roomApi from "../../apis/room.api";

const INIT_ROOM = {
7
8
9
  id: "",
  name: "",
  profileimg: "",
Kim, Chaerin's avatar
Kim, Chaerin committed
10
11
12
};

const InitRoom = () => {
13
14
15
  const { roomId } = useParams();
  const [room, setRoom] = useState(INIT_ROOM);
  const [error, setError] = useState("");
Kim, Chaerin's avatar
Kim, Chaerin committed
16

17
18
19
  async function getRoom(roomId) {
    try {
      const data = await roomApi.getRoom([roomId]);
이재연's avatar
aaaa    
이재연 committed
20
21
      console.log(data)
      setRoom({...room, id:data[0].id, name:data[0].name, profileimg: data[0].profileimg})
이재연's avatar
이재연 committed
22
      console.log(room.profileimg)
23
24
    } catch (error) {
      catchErrors(error, setError);
Kim, Chaerin's avatar
Kim, Chaerin committed
25
    }
26
  }
Kim, Chaerin's avatar
Kim, Chaerin committed
27

28
29
30
  useEffect(() => {
    getRoom(roomId);
  }, [roomId]);
Kim, Chaerin's avatar
Kim, Chaerin committed
31

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
  return (
    <div>
      <div
        style={{ backgroundColor: "#262626", width: "auto", height: "2px" }}
      />
      <form className="flex-row align-items-center justify-content-center m-5">
        <div className="d-flex justify-content-center">
          <img
            src={`/roomUploads/${room.profileimg}`}
            className="rounded-circle"
            style={{
              width: "250px",
              height: "250px",
            }}
          />
Kim, Chaerin's avatar
Kim, Chaerin committed
47
        </div>
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
        <div className="row">
          <div className="col-3"></div>
          <div className="col-6 my-5">
            <h2
              className="mb-3"
              style={{ fontSize: "13px", fontWeight: "bold" }}
            >
               이름
            </h2>
            <h2
              className="mb-4 mt-2"
              style={{ fontSize: "25px", fontWeight: "bold" }}
            >
              {room.name}
            </h2>
            <h2
              className="mb-3 mt-2"
              style={{ fontSize: "13px", fontWeight: "bold" }}
            >
               코드
            </h2>
            <h2
              className="mb-3 mt-2"
              style={{ fontSize: "25px", fontWeight: "bold" }}
            >
              {room.id}
            </h2>
          </div>
          <div className="col"></div>
        </div>
      </form>
    </div>
  );
Kim, Chaerin's avatar
Kim, Chaerin committed
81
82
83
};

export default InitRoom;