AddRoom.js 4.95 KB
Newer Older
Kim, Chaerin's avatar
Kim, Chaerin committed
1
const AddRoom = () => {
Kim, Chaerin's avatar
Kim, Chaerin committed
2
3
4
  return (
    <form className="m-3">
      <div className="row justify-content-around">
우지원's avatar
우지원 committed
5
        <div className="col pt-2">
Kim, Chaerin's avatar
Kim, Chaerin committed
6
7
8
9
          <h4>참여중인 방목록</h4>
        </div>
        <button
          type="button"
우지원's avatar
우지원 committed
10
          className="col-2 btn btn-info"
Kim, Chaerin's avatar
Kim, Chaerin committed
11
12
13
14
15
16
          data-bs-toggle="modal"
          data-bs-target="#myModal"
        >
          +
        </button>
      </div>
우지원's avatar
0628    
우지원 committed
17

Kim, Chaerin's avatar
Kim, Chaerin committed
18
19
20
21
22
23
24
25
26
27
      <div className="modal" id="myModal" tabIndex="-1" aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <button
                type="button"
                className="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
우지원's avatar
0628    
우지원 committed
28
            </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
29
            <div className="modal-body">
우지원's avatar
우지원 committed
30
31
              <div className="row justify-content-evenly mt-4 mb-4 fs-6">
                <div className="col-6 d-flex justify-content-center">
Kim, Chaerin's avatar
Kim, Chaerin committed
32
33
                  <button
                    type="button"
우지원's avatar
우지원 committed
34
                    className="p-3"
Kim, Chaerin's avatar
Kim, Chaerin committed
35
36
37
38
39
40
41
                    data-bs-toggle="modal"
                    data-bs-target="#joinModal"
                    style={{
                      display: "flex",
                      flexDirection: "column",
                      borderStyle: "solid",
                      borderRadius: "5px",
우지원's avatar
우지원 committed
42
43
                      backgroundColor: "#f6c7ba",
                      borderColor: "#f6c7ba",
Kim, Chaerin's avatar
Kim, Chaerin committed
44
45
                    }}
                  >
우지원's avatar
우지원 committed
46
47
48
                    <div style={{ width: "6rem" }} >
                      방참여하기
                    </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
49
50
                  </button>
                </div>
우지원's avatar
우지원 committed
51
                <div className="col-6 d-flex justify-content-center">
Kim, Chaerin's avatar
Kim, Chaerin committed
52
53
                  <button
                    type="button"
우지원's avatar
우지원 committed
54
                    className="p-3"
Kim, Chaerin's avatar
Kim, Chaerin committed
55
56
57
58
59
60
61
                    data-bs-toggle="modal"
                    data-bs-target="#makeModal"
                    style={{
                      display: "flex",
                      flexDirection: "column",
                      borderStyle: "solid",
                      borderRadius: "5px",
우지원's avatar
우지원 committed
62
63
                      backgroundColor: "#f6c7ba",
                      borderColor: "#f6c7ba",
Kim, Chaerin's avatar
Kim, Chaerin committed
64
65
                    }}
                  >
우지원's avatar
우지원 committed
66
67
68
                    <div style={{ width: "6rem" }} >
                      방생성하기
                    </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
69
                  </button>
우지원's avatar
0628    
우지원 committed
70
                </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
71
              </div>
우지원's avatar
0628    
우지원 committed
72
            </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
73
74
75
          </div>
        </div>
      </div>
우지원's avatar
0628    
우지원 committed
76

Kim, Chaerin's avatar
Kim, Chaerin committed
77
78
79
80
81
82
83
84
85
86
87
88
      {/* 방참여하기 모달 */}
      <div className="modal" id="joinModal" tabIndex="-1" aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <div>방참여하기</div>
              <button
                type="button"
                className="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
우지원's avatar
0628    
우지원 committed
89
            </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
90
91
92
93
94
95
96
97
98
99
100
            <div className="modal-body">
              <div className="input-group mb-3">
                <input
                  type="text"
                  className="form-control"
                  placeholder="참여코드를 입력하세요"
                  aria-label="참여코드를 입력하세요"
                  aria-describedby="basic-addon1"
                />
              </div>
              <div className="modal-footer">
우지원's avatar
우지원 committed
101
                <button type="submit" className="btn btn-primary">
Kim, Chaerin's avatar
Kim, Chaerin committed
102
103
104
105
106
107
108
                  확인
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
우지원's avatar
0628    
우지원 committed
109

Kim, Chaerin's avatar
Kim, Chaerin committed
110
111
112
113
114
115
116
117
118
119
120
121
122
123
      {/* 방생성하기 모달 */}
      <div className="modal" id="makeModal" tabIndex="-1" aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <div>방생성하기</div>
              <button
                type="button"
                className="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div className="modal-body">
우지원's avatar
우지원 committed
124
              <h6>방프로필사진</h6>
우지원's avatar
   
우지원 committed
125
126
              <div className="mb-4">
                <input type="file" className="upload-hidden" />
Kim, Chaerin's avatar
Kim, Chaerin committed
127
              </div>
우지원's avatar
우지원 committed
128
              <h6>방이름</h6>
Kim, Chaerin's avatar
Kim, Chaerin committed
129
130
131
132
133
134
135
136
137
138
              <div className="input-group">
                <input
                  type="text"
                  className="form-control"
                  placeholder="방이름을 입력해주세요"
                  aria-label="방이름 입력해주세요"
                  aria-describedby="basic-addon1"
                />
              </div>
              <div className="modal-footer">
우지원's avatar
우지원 committed
139
                <button type="submit" className="btn btn-primary">
Kim, Chaerin's avatar
Kim, Chaerin committed
140
141
142
                  생성
                </button>
              </div>
우지원's avatar
0628    
우지원 committed
143
            </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
144
145
146
147
148
149
          </div>
        </div>
      </div>
    </form>
  );
};
Kim, Chaerin's avatar
Kim, Chaerin committed
150
151

export default AddRoom;