merge seoyeon + link

client/src/App.js

@@ -15,7 +15,7 @@ function App() {
         <Route exact path="/user" component={HomeUserPage} />
         <Route path="/profile/:id/update" component={InfoUpdatePage} />
         <Route path="/profile/:id" component={ProfilePage} />
-        <Route path="/Room/:id/:channel" component={RoomPage} />
+        <Route path="/room/:id/:channel" component={RoomPage} />
       </Switch>
       {/* </AuthProvider> */}
     </Router>

client/src/components/Home/AddRoom.js

-import React from 'react'
-
 const AddRoom = () => {
+  return (
+    <form className="m-3">
+      <div className="row justify-content-around">
+        <div className="col">
+          <h4>참여중인 방목록</h4>
+        </div>
+        <button
+          type="button"
+          className="col-2"
+          data-bs-toggle="modal"
+          data-bs-target="#myModal"
+          style={{ backgroundColor: "#FCF4FF", borderColor: "#FCF4FF" }}
+        >
+          +
+        </button>
+      </div>
 
-    return (
-        <form className="m-3">
-            <div className="row justify-content-around">
-                <div className="col">
-                    <h4>참여중인 방목록</h4>
-                </div>
-                <button type="button" className="col-2" data-bs-toggle="modal" data-bs-target="#myModal" style={{ backgroundColor: "#FCF4FF", borderColor: "#FCF4FF" }} >
-                    +
-                </button>
+      <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>
             </div>
-
-            <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>
-                        </div>
-                        <div className="modal-body">
-                            <div className="row justify-content-around mt-4 mb-4">
-                                <div className="col-5">
-                                    <button type="button" className="p-4" data-bs-toggle="modal" data-bs-target="#joinModal" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#C4C4C4", backgroundColor: "#C4C4C4", padding: '10px' }}>
-                                        방참여하기</button>
-                                </div>
-                                <div className="col-5">
-                                    <button type="button" className="p-4" data-bs-toggle="modal" data-bs-target="#makeModal" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#C4C4C4", backgroundColor: "#C4C4C4", padding: '10px' }}>
-                                        방생성하기</button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+            <div className="modal-body">
+              <div className="row justify-content-around mt-4 mb-4">
+                <div className="col-5">
+                  <button
+                    type="button"
+                    className="p-4"
+                    data-bs-toggle="modal"
+                    data-bs-target="#joinModal"
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      borderStyle: "solid",
+                      borderRadius: "5px",
+                      borderColor: "#C4C4C4",
+                      backgroundColor: "#C4C4C4",
+                      padding: "10px",
+                    }}
+                  >
+                    방참여하기
+                  </button>
+                </div>
+                <div className="col-5">
+                  <button
+                    type="button"
+                    className="p-4"
+                    data-bs-toggle="modal"
+                    data-bs-target="#makeModal"
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      borderStyle: "solid",
+                      borderRadius: "5px",
+                      borderColor: "#C4C4C4",
+                      backgroundColor: "#C4C4C4",
+                      padding: "10px",
+                    }}
+                  >
+                    방생성하기
+                  </button>
                 </div>
+              </div>
             </div>
+          </div>
+        </div>
+      </div>
 
-            {/* 방참여하기 모달 */}
-            <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>
-                        </div>
-                        <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">
-                                <button type="button" className="btn-primary" style={{ borderStyle: "solid", borderRadius: "5px", padding: '15px' }} >확인</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+      {/* 방참여하기 모달 */}
+      <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>
             </div>
+            <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">
+                <button
+                  type="button"
+                  className="btn-primary"
+                  style={{
+                    borderStyle: "solid",
+                    borderRadius: "5px",
+                    padding: "15px",
+                  }}
+                >
+                  확인
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-            {/* 방생성하기 모달 */}
-            <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">
-                            <h5>방프로필사진</h5>
-                            <div className="filebox mb-4">
-                                <input type="file" id="ex_filename" className="upload-hidden" />
-                            </div>
-                            <h5>방이름</h5>
-                            <div className="input-group">
-                                <input type="text" className="form-control" placeholder="방이름을 입력해주세요" aria-label="방이름 입력해주세요" aria-describedby="basic-addon1" />
-                            </div>
-                            <div className="modal-footer">
-                                <button type="button" className="btn-primary" style={{ borderStyle: "solid", borderRadius: "5px", padding: '15px' }} >생성</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+      {/* 방생성하기 모달 */}
+      <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">
+              <h5>방프로필사진</h5>
+              <div className="filebox mb-4">
+                <input type="file" id="ex_filename" className="upload-hidden" />
+              </div>
+              <h5>방이름</h5>
+              <div className="input-group">
+                <input
+                  type="text"
+                  className="form-control"
+                  placeholder="방이름을 입력해주세요"
+                  aria-label="방이름 입력해주세요"
+                  aria-describedby="basic-addon1"
+                />
+              </div>
+              <div className="modal-footer">
+                <button
+                  type="button"
+                  className="btn-primary"
+                  style={{
+                    borderStyle: "solid",
+                    borderRadius: "5px",
+                    padding: "15px",
+                  }}
+                >
+                  생성
+                </button>
+              </div>
             </div>
-        </form >
-    );
-}
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
 
 export default AddRoom;

client/src/components/Home/HomeProfile.js

-import React from 'react'
+import { Link } from "react-router-dom";
 
 const HomeProfile = () => {
-    return (
-        <>
-            <form className="flex-column align-items-center justify-content-center m-2">
-                <div className="d-flex justify-content-center">
-                    <img src="/image2.jpg" className="rounded-circle" style={{ width: "157px", height: "157px", borderStyle: "solid", borderColor: "#262626" }} />
-                </div>
-                <h1 className="d-flex justify-content-center"> CHERRY </h1>
-                <h2 className="d-flex justify-content-center"> #0805 </h2>
-            </form>
-            <div style={{ backgroundColor: "#262626", width: "auto", height: "2px" }} />
-        </>
-    )
+  const id = 1;
+  return (
+    <Link to={`/profile/${id}`} className="text-decoration-none text-dark">
+      <form className="flex-column align-items-center justify-content-center m-2">
+        <div className="d-flex justify-content-center">
+          <img
+            src="cherry.jpg"
+            className="rounded-circle"
+            style={{
+              width: "157px",
+              height: "157px",
+              borderStyle: "solid",
+              borderColor: "#262626",
+            }}
+          />
+        </div>
+        <h1 className="d-flex justify-content-center"> CHERRY </h1>
+        <h2 className="d-flex justify-content-center"> #0805 </h2>
+      </form>
+      <div
+        style={{ backgroundColor: "#262626", width: "auto", height: "2px" }}
+      />
+    </Link>
+  );
 };
 
 export default HomeProfile;

client/src/components/Home/RoomSingle.js

+import { Link } from "react-router-dom";
+
 const RoomSingle = () => {
-    return (
-        <>
-            <div className="row justify-content-start mx-4 my-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                <div className="col-2 mt-2"> 15/34 </div>
-            </div>
-            <div className="row justify-content-start mx-4 my-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                <div className="col-2 mt-2"> 15/34 </div>
-            </div>
-            <div className="row justify-content-start mx-4 my-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                <div className="col-2 mt-2"> 15/34 </div>
-            </div>
-            <div className="row justify-content-start mx-4 my-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                <div className="col-2 mt-2"> 15/34 </div>
-            </div>
+  const id = 1;
+  const channelId = 1;
+  return (
+    <Link to={`/room/${id}/${channelId}`} className="text-decoration-none text-dark">
+      <div
+        className="row justify-content-start mx-4 my-2 p-2"
+        style={{ backgroundColor: "#C4C4C4" }}
+      >
+        <div className="col-2" style={{ width: "37px", height: "37px" }}>
+          <img
+            src="BORA.png"
+            className="rounded-circle"
+            style={{ width: "37px", height: "37px" }}
+          />
+        </div>
+        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+        <div className="col-2 mt-2"> 15/34 </div>
+      </div>
+      <div
+        className="row justify-content-start mx-4 my-2 p-2"
+        style={{ backgroundColor: "#C4C4C4" }}
+      >
+        <div className="col-2" style={{ width: "37px", height: "37px" }}>
+          <img
+            src="BORA_LOGO.png"
+            className="rounded-circle"
+            style={{ width: "37px", height: "37px" }}
+          />
+        </div>
+        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+        <div className="col-2 mt-2"> 15/34 </div>
+      </div>
+      <div
+        className="row justify-content-start mx-4 my-2 p-2"
+        style={{ backgroundColor: "#C4C4C4" }}
+      >
+        <div className="col-2" style={{ width: "37px", height: "37px" }}>
+          <img
+            src="cherry.jpg"
+            className="rounded-circle"
+            style={{ width: "37px", height: "37px" }}
+          />
+        </div>
+        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+        <div className="col-2 mt-2"> 15/34 </div>
+      </div>
+      <div
+        className="row justify-content-start mx-4 my-2 p-2"
+        style={{ backgroundColor: "#C4C4C4" }}
+      >
+        <div className="col-2" style={{ width: "37px", height: "37px" }}>
+          <img
+            src="BORA_LOGO.png"
+            className="rounded-circle"
+            style={{ width: "37px", height: "37px" }}
+          />
+        </div>
+        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+        <div className="col-2 mt-2"> 15/34 </div>
+      </div>
 
-            <div className="row justify-content-start mx-4 my-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                <div className="col-2 mt-2"> 15/34 </div>
-            </div>
+      <div
+        className="row justify-content-start mx-4 my-2 p-2"
+        style={{ backgroundColor: "#C4C4C4" }}
+      >
+        <div className="col-2" style={{ width: "37px", height: "37px" }}>
+          <img
+            src="BORA.png"
+            className="rounded-circle"
+            style={{ width: "37px", height: "37px" }}
+          />
+        </div>
+        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+        <div className="col-2 mt-2"> 15/34 </div>
+      </div>
 
-            <div className="row justify-content-start mx-4 my-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                <div className="col-2 mt-2"> 15/34 </div>
-            </div>
+      <div
+        className="row justify-content-start mx-4 my-2 p-2"
+        style={{ backgroundColor: "#C4C4C4" }}
+      >
+        <div className="col-2" style={{ width: "37px", height: "37px" }}>
+          <img
+            src="cherry.jpg"
+            className="rounded-circle"
+            style={{ width: "37px", height: "37px" }}
+          />
+        </div>
+        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+        <div className="col-2 mt-2"> 15/34 </div>
+      </div>
 
-            <div className="row justify-content-start mx-4 my-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                <div className="col-2 mt-2"> 15/34 </div>
-            </div>
+      <div
+        className="row justify-content-start mx-4 my-2 p-2"
+        style={{ backgroundColor: "#C4C4C4" }}
+      >
+        <div className="col-2" style={{ width: "37px", height: "37px" }}>
+          <img
+            src="BORA_LOGO.png"
+            className="rounded-circle"
+            style={{ width: "37px", height: "37px" }}
+          />
+        </div>
+        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+        <div className="col-2 mt-2"> 15/34 </div>
+      </div>
 
-            <div className="row justify-content-start mx-4 my-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                <div className="col-2 mt-2"> 15/34 </div>
-            </div>
+      <div
+        className="row justify-content-start mx-4 my-2 p-2"
+        style={{ backgroundColor: "#C4C4C4" }}
+      >
+        <div className="col-2" style={{ width: "37px", height: "37px" }}>
+          <img
+            src="BORA.png"
+            className="rounded-circle"
+            style={{ width: "37px", height: "37px" }}
+          />
+        </div>
+        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+        <div className="col-2 mt-2"> 15/34 </div>
+      </div>
 
-            <div className="row justify-content-start mx-4 my-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-                <div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
-                <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
-                <div className="col-2 mt-2"> 15/34 </div>
-            </div>
-        </>
-    )
+      <div
+        className="row justify-content-start mx-4 my-2 p-2"
+        style={{ backgroundColor: "#C4C4C4" }}
+      >
+        <div className="col-2" style={{ width: "37px", height: "37px" }}>
+          <img
+            src="cherry.jpg"
+            className="rounded-circle"
+            style={{ width: "37px", height: "37px" }}
+          />
+        </div>
+        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
+        <div className="col-2 mt-2"> 15/34 </div>
+      </div>
+    </Link>
+  );
 };
 
 export default RoomSingle;

client/src/components/Profile/InfoUpdate.js

@@ -33,7 +33,7 @@ const InfoUpdate = () => {
           <div class="row">
             <div className="d-flex justify-content-center">
               <img
-                src="/image2.jpg"
+                src="/cherry.jpg"
                 className="rounded-circle"
                 style={{ height: "320px", width: "320px" }}
               />

client/src/components/Profile/Profile.js

@@ -31,7 +31,7 @@ const Profile = () => {
           <div className="col">
             <div className="d-flex justify-content-center">
               <img
-                src="/image2.jpg"
+                src="/cherry.jpg"
                 className="rounded-circle"
                 style={{ height: "320px", width: "320px" }}
               />

client/src/components/Room/ChannelSingle.js

 const ChannelSingle = () => {
     return (
         <div>
-            ChannelSingle Component 입니다.
+            음성 채널 목록
+            
         </div>
     )
 };

client/src/components/Room/Controller.js

-import ScreenSelect from "./ScreenSelect";
-
+import ScreenSelect from './ScreenSelect'
+import video_btn from '../../videobtn.png'
+import speaker_btn from '../../speakerbtn.png'
+import mic_btn from '../../micbtn.png'
 const Controller = () => {
   return (
-    <div>
-      Controller Component 입니다.
-      <ScreenSelect />
+    <div className="container">
+      <div className="row">
+        <div
+          className="col d-flex justify-content-center"
+          style={{ backgroundColor: '#C4C4C4' }}
+        >
+          <div className="col d-flex justify-content-center">
+            <button type="button" className="btn">
+              <img src={mic_btn} width="45" height="40" />
+            </button>
+          </div>
+          <div className="col d-flex justify-content-center">
+            <button type="button" className="btn">
+              <img src={speaker_btn} width="45" />
+            </button>
+          </div>
+          <div className="col d-flex justify-content-center">
+            <button
+              type="button"
+              className="btn"
+              data-bs-toggle="modal"
+              data-bs-target="#exampleModal"
+              src={video_btn}
+              onClick="location.href='ScreenSelect.js'"
+            >
+              <img src={video_btn} width="45" />
+            </button>
+          </div>
+        </div>
+        <ScreenSelect />
+      </div>
     </div>
-  );
-};
+  )
+}
 
-export default Controller;
+export default Controller

client/src/components/Room/RoomHeader.js

 const RoomHeader = () => {
-    return (
-        <div>
-            RoomHeader Component 입니다.
+  return (
+    <div className="container">
+      <div className="row">
+        <div
+          className=" col d-flex justify-content-space-between"
+          style={{ backgroundColor: "#C4C4C4" }}
+        >
+          <img
+            className="m-2 rounded-circle"
+            src="/cherry.jpg"
+            width="40"
+            height="40"
+          />
+          <p
+            className="m-2"
+            style={{
+              fontWeight: "bold",
+              fontSize: "15px",
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            <p>데계 재밌는 수학과</p> #ASV2AE98
+          </p>
+          <p className="m-2" style={{ fontWeight: "bold", fontSize: "20px" }}>
+            회의
+          </p>
+          <button
+            type="button"
+            className="m-2 rounded"
+            style={{
+              height: "30px",
+              fontWeight: "bold",
+              backgroundColor: "#E8B7FF",
+              color: "black",
+              border: "1px #f4c1f2",
+            }}
+          >
+            돌아가기
+          </button>
         </div>
-    )
+      </div>
+    </div>
+  );
 };
 
 export default RoomHeader;

client/src/components/Room/Screen.js

 const Screen = () => {
-    return (
-        <div>
-            Screen Component 입니다.
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col" style={{ backgroundColor: '#FCF4FF' }}>
+          <p className="m-2" style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}>
+            스크린
+          </p>
+          <div className="col m-5"></div>
         </div>
-    )
-};
+      </div>
+    </div>
+  )
+}
 
-export default Screen;
+export default Screen

client/src/components/Room/ScreenSelect.js

 const ScreenSelect = () => {
-    return (
-        <div>
-            ScreenSelect Component 입니다.
+  return (
+    <div className="container">
+      <div
+        className="modal fade"
+        id="exampleModal"
+        tabindex="-1"
+        aria-labelledby="exampleModalLabel"
+        aria-hidden="true"
+      >
+        <div className="modal-dialog">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title" id="exampleModalLabel">
+                공유 화면 선택
+              </h5>
+              <button
+                type="button"
+                className="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div className="modal-body">
+              <div className="row">
+                <div className="col-sm-6 mb-3">
+                  <div className="card">
+                    <div style={{ height:'150px'}} className="card-body">
+                      <p className="card-text">공유화면1</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-sm-6">
+                  <div className="card">
+                    <div style={{ height:'150px'}} className="card-body">
+                      <p className="card-text">공유화면2</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-    )
-};
+      </div>
+    </div>
+  )
+}
 
-export default ScreenSelect;
+export default ScreenSelect

client/src/components/Room/User.js

 const User = () => {
-    return (
-        <div>
-            User Component 입니다.
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col" style={{ backgroundColor: "#DEC7F5" }}>
+          <p
+            className="m-2"
+            style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
+          >
+            참여 중인 사용자
+          </p>
+          <div className="col m-3" xs={6} md={4}>
+            <img
+              src="/cherry.jpg"
+              width="40"
+              height="40"
+              className="rounded-circle"
+            />
+            <img
+              src="/cherry.jpg"
+              width="40"
+              height="40"
+              className="rounded-circle"
+            />
+            <img
+              src="/cherry.jpg"
+              width="40"
+              height="40"
+              className="rounded-circle"
+            />
+          </div>
+          <div className="col m-3" xs={6} md={4}>
+            <img
+              src="/cherry.jpg"
+              width="40"
+              height="40"
+              className="rounded-circle"
+            />
+          </div>
         </div>
-    )
+      </div>
+      <div className="row">
+        <div className="col" style={{ backgroundColor: "#BCB0C6" }}>
+          <p
+            className="m-2"
+            style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
+          >
+            참여하고 있지 않은 사용자
+          </p>
+          <div className="col m-3" xs={6} md={4}>
+            <img
+              src="/cherry.jpg"
+              width="40"
+              height="40"
+              className="rounded-circle"
+            />
+            <img
+              src="/cherry.jpg"
+              width="40"
+              height="40"
+              className="rounded-circle"
+            />
+            <img
+              src="/cherry.jpg"
+              width="40"
+              height="40"
+              className="rounded-circle"
+            />
+          </div>
+          <div className="col m-3" xs={6} md={4}></div>
+          <div className="col m-5"></div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default User;

client/src/pages/RoomPage.js

-import Header from "../components/Header";
-import ChannelList from "../components/Room/ChannelList";
-import RoomHeader from "../components/Room/RoomHeader";
-import Screen from "../components/Room/Screen";
-import User from "../components/Room/User";
-import Controller from "../components/Room/Controller";
+import Header from '../components/Header'
+import ChannelList from '../components/Room/ChannelList'
+import RoomHeader from '../components/Room/RoomHeader'
+import Screen from '../components/Room/Screen'
+import User from '../components/Room/User'
+import Controller from '../components/Room/Controller'
 
 const RoomPage = () => {
   return (
     <div>
-      Room Page 입니다.
       <Header hamburger={ChannelList} />
       <RoomHeader />
       <Screen />
       <User />
       <Controller />
     </div>
-  );
-};
+  )
+}
 
-export default RoomPage;
+export default RoomPage