0712 UI 수정

client/src/components/Home/RoomSingle.js

-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom'
 
 const RoomSingle = () => {
-  const id = 1;
-  const channelId = 1;
+  const id = 1
+  const channelId = 1
   return (
-    <Link to={`/room/${id}/${channelId}`} className="text-decoration-none text-dark">
+    <Link
+      to={`/room/${id}/${channelId}`}
+      className="text-decoration-none text-dark"
+    >
       <div
         className="d-flex mx-4 my-2 p-2"
-        style={{ backgroundColor: "#C4C4C4" }}
+        style={{ backgroundColor: '#C4C4C4' }}
       >
-        <div style={{ width: "37px", height: "37px" }}>
+        <div style={{ width: '37px', height: '37px' }}>
           <img
             src="BORA.png"
             className="rounded-circle"
-            style={{ width: "37px", height: "37px" }}
+            style={{ width: '37px', height: '37px' }}
           />
         </div>
-        <div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
-          데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
+        <div
+          className="mx-3 mt-2"
+          style={{
+            width: '250px',
+            overflow:'scroll',
+            whiteSpace: 'nowrap',
+            msOverflowStyle:'none',
+          }}
+        >
+          데계 재미있는 수학과 데계데계데계 재미있는 수학과
+        </div>
         <div className="ms-auto mt-2"> 15/34 </div>
       </div>
 
       <div
         className="d-flex mx-4 my-2 p-2"
-        style={{ backgroundColor: "#C4C4C4" }}
+        style={{ backgroundColor: '#C4C4C4' }}
       >
-        <div style={{ width: "37px", height: "37px" }}>
+        <div style={{ width: '37px', height: '37px' }}>
           <img
             src="BORA.png"
             className="rounded-circle"
-            style={{ width: "37px", height: "37px" }}
+            style={{ width: '37px', height: '37px' }}
           />
         </div>
-        <div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
-          데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
+        <div
+          className="mx-3 mt-2"
+          style={{ width: '250px', overflow: 'scroll', whiteSpace: 'nowrap' }}
+        >
+          데계 재미있는 수학과 데계데계데계 재미있는 수학과
+        </div>
         <div className="ms-auto mt-2"> 15/34 </div>
       </div>
 
       <div
         className="d-flex mx-4 my-2 p-2"
-        style={{ backgroundColor: "#C4C4C4" }}
+        style={{ backgroundColor: '#C4C4C4' }}
       >
-        <div style={{ width: "37px", height: "37px" }}>
+        <div style={{ width: '37px', height: '37px' }}>
           <img
             src="BORA.png"
             className="rounded-circle"
-            style={{ width: "37px", height: "37px" }}
+            style={{ width: '37px', height: '37px' }}
           />
         </div>
-        <div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
-          데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
+        <div
+          className="mx-3 mt-2"
+          style={{ width: '250px', overflow: 'scroll', whiteSpace: 'nowrap' }}
+        >
+          데계 재미있는 수학과 데계데계데계 재미있는 수학과
+        </div>
         <div className="ms-auto mt-2"> 15/34 </div>
       </div>
-    </Link >
-  );
-};
+    </Link>
+  )
+}
 
-export default RoomSingle;
+export default RoomSingle

client/src/components/Room/ChannelSingle.js

@@ -2,103 +2,122 @@ const ChannelSingle = () => {
   return (
     <div className="overflow-auto" style={{ height: '610px' }}>
       <div className="mb-3">
-                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
-                    <img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" />
+        <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
+          <img
+            className="col-auto mt-2"
+            src="/fullSpeaker.png"
+            width="25px"
+            height="25px"
+          />
           <h5 className="col mt-2">회의</h5>
         </div>
-                <ul className="mx-5">
+        <ul className="mx-5" style={{ color: '#76D079' }}>
           <li>
-                        CHERRY
+            <p style={{ color: 'black' }}>CHERRY</p>
           </li>
           <li>
-                        JAEYEON
+            <p style={{ color: 'black' }}>JAEYEON</p>
           </li>
           <li>
-                        SEOYEON
+            <p style={{ color: 'black' }}>SEOYEON</p>
           </li>
           <li>
-                        JIWEON
+            <p style={{ color: 'black' }}>JIWEON</p>
           </li>
           <li>
-                        BYOUNGYUN
+            <p style={{ color: 'black' }}>BYOUNGYUN</p>
           </li>
         </ul>
       </div>
 
       <div className="mb-3">
-                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
-                    <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
+        <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
+          <img
+            className="col-auto mt-2"
+            src="/emptySpeaker.png"
+            width="25px"
+            height="25px"
+          />
           <h5 className="col mt-2">사담</h5>
         </div>
-                <ul className="mx-5">
+        <ul className="mx-5" style={{ color: '#76D079' }}>
           <li>
-                        CHERRY
+            <p style={{ color: 'black' }}>CHERRY</p>
           </li>
           <li>
-                        JAEYEON
+            <p style={{ color: 'black' }}>JAEYEON</p>
           </li>
           <li>
-                        SEOYEON
+            <p style={{ color: 'black' }}>SEOYEON</p>
           </li>
           <li>
-                        JIWEON
+            <p style={{ color: 'black' }}>JIWEON</p>
           </li>
           <li>
-                        BYOUNGYUN
+            <p style={{ color: 'black' }}>BYOUNGYUN</p>
           </li>
         </ul>
       </div>
 
       <div className="mb-3">
-                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
-                    <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
+        <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
+          <img
+            className="col-auto mt-2"
+            src="/emptySpeaker.png"
+            width="25px"
+            height="25px"
+          />
           <h5 className="col mt-2">일반</h5>
         </div>
-                <ul className="mx-5">
+        <ul className="mx-5" style={{ color: '#76D079' }}>
           <li>
-                        CHERRY
+            <p style={{ color: 'black' }}>CHERRY</p>
           </li>
           <li>
-                        JAEYEON
+            <p style={{ color: 'black' }}>JAEYEON</p>
           </li>
           <li>
-                        SEOYEON
+            <p style={{ color: 'black' }}>SEOYEON</p>
           </li>
           <li>
-                        JIWEON
+            <p style={{ color: 'black' }}>JIWEON</p>
           </li>
           <li>
-                        BYOUNGYUN
+            <p style={{ color: 'black' }}>BYOUNGYUN</p>
           </li>
         </ul>
       </div>
 
       <div className="mb-3">
-                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
-                    <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
+        <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
+          <img
+            className="col-auto mt-2"
+            src="/emptySpeaker.png"
+            width="25px"
+            height="25px"
+          />
           <h5 className="col mt-2">공지</h5>
         </div>
-                <ul className="mx-5">
+        <ul className="mx-5" style={{ color: '#76D079' }}>
           <li>
-                        CHERRY
+            <p style={{ color: 'black' }}>CHERRY</p>
           </li>
           <li>
-                        JAEYEON
+            <p style={{ color: 'black' }}>JAEYEON</p>
           </li>
           <li>
-                        SEOYEON
+            <p style={{ color: 'black' }}>SEOYEON</p>
           </li>
           <li>
-                        JIWEON
+            <p style={{ color: 'black' }}>JIWEON</p>
           </li>
           <li>
-                        BYOUNGYUN
+            <p style={{ color: 'black' }}>BYOUNGYUN</p>
           </li>
         </ul>
       </div>
     </div>
-
   )
-};
+}
 
-export default ChannelSingle;
+export default ChannelSingle

client/src/components/Room/Screen.js

 const Screen = () => {
+  const user = '00'
+
   return (
     <div className="container">
       <div className="row">
-        <div className="col" style={{ backgroundColor: '#FCF4FF' }}>
-          <p className="m-2" style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}>
-            스크린<br/>
+        <div className="col mt-3 d-flex justify-content-space-between" style={{ backgroundColor: '#FCF4FF' }}>
+          <img
+            className="rounded-circle"
+            src="/cherry.jpg"
+            width="40px"
+            height="40px"
+          />
+          <p
+            className="m-2"
+            style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}
+          >
+            {user}님이 화면공유중...
+            <br />
           </p>
           <div className="col m-5"></div>
         </div>