0804

client/src/components/Login.js

@@ -45,22 +45,33 @@ const Login = () => {
     }
   }
   if (success) {
-    alert('로그인 되었습니다');
+    alert('로그인 되었습니다')
     window.location.href = `/user/${id}`
   }
 
   const { email, password } = user
 
   return (
-    <div className="container">
-      <form onSubmit={handleSubmit}>
-        <div className="m-3 d-flex justify-content-center">
+    <div>
+      <div>
+        <form
+          style={{ backgroundColor: '#FCF4FF' }}
+          className="flex-column align-items-center justify-content-center p-2"
+        >
+          <div className="d-flex justify-content-center">
             <Link to="/">
               <img src="/BORA.png" style={{ width: '160px' }} />
             </Link>
           </div>
+        </form>
+      </div>
+      <div
+        style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
+      ></div>
+      <div className="container">
+        <form onSubmit={handleSubmit}>
         <div className="row mt-5 d-flex align-items-center">
-          <h2 style={{ textAlign: 'center' }}>로그인</h2>
+          <h5 style={{ textAlign: 'center' }}>로그인</h5>
           {error && <div className="alert alert-danger">{error}</div>}
           <div className="form-group">
             <div className="mt-5">
@@ -100,6 +111,7 @@ const Login = () => {
         </div>
       </form>
       </div>
+    </div>
   )
 }
 

client/src/components/Room/ChannelSingle.js

-import { Link, Route, Switch, useParams } from "react-router-dom";
+import { Link, Route, Switch, useParams } from 'react-router-dom'
 
 const ChannelSingle = (props) => {
-  const { roomId } = useParams();
-  console.log("props", props.channel);
+  const { roomId, channelId } = useParams()
+  console.log('props', props.channel)
+  console.log('hi', channelId)
   return (
     <div>
-      <div className="overflow-auto" style={{ height: "610px" }}>
+      <div className="overflow-auto" style={{ height: '610px' }}>
         {props.channel.map((el) => (
           <div className="mb-3">
-            <Link to={`${roomId}/${el.channelName}`}>
+            <Link to={`/room/${roomId}/${el.channelName}`}>
               <div
                 className="m-3 p-1 row"
-                style={{ backgroundColor: "#E0CEE8" }}
+                style={{ backgroundColor: '#E0CEE8' }}
               >
+                {el.channelName === channelId ? (
                   <img
                     className="col-auto mt-2"
                     src="/fullSpeaker.png"
                     width="25px"
                     height="25px"
                   />
-                <h5 className="col mt-2" style={{ color: "black" }}>
+                ) : (
+                  <img
+                    className="col-auto mt-2"
+                    src="/emptySpeaker.png"
+                    width="25px"
+                    height="25px"
+                  />
+                )}
+                <h5 className="col mt-2" style={{ color: 'black' }}>
                   {el.channelName}
                 </h5>
-              </div>{" "}
+              </div>
             </Link>
 
             {el.joinName &&
               el.joinName.map((e) => (
                 <div>
-                  <ul className="mx-5" style={{ color: "#76D079" }}>
+                  <ul className="mx-5" style={{ color: '#76D079' }}>
                     <li>
-                      <p style={{ color: "black" }}>{e}</p>
+                      <p style={{ color: 'black' }}>{e}</p>
                     </li>
                   </ul>
                 </div>
@@ -39,7 +49,7 @@ const ChannelSingle = (props) => {
         ))}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default ChannelSingle;
+export default ChannelSingle
\ No newline at end of file

client/src/components/SignUp.js

@@ -66,17 +66,28 @@ const Signup = () => {
 
   const { name, id, password, checkpw, phone } = user
   return (
-    <div className="container">
-      {error && <div className="alert alert-danger">{error}</div>}
-      <form onSubmit={handleSubmit}>
-        <div className="m-3 d-flex justify-content-center">
+    <div>
+      <div>
+        <form
+          style={{ backgroundColor: '#FCF4FF' }}
+          className="flex-column align-items-center justify-content-center p-2"
+        >
+          <div className="d-flex justify-content-center">
             <Link to="/">
               <img src="/BORA.png" style={{ width: '160px' }} />
             </Link>
           </div>
+        </form>
+      </div>
+      <div
+        style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
+      ></div>
+      <div className="container">
+        <form onSubmit={handleSubmit}>
           <div className="row mt-4">
             <h5 style={{ textAlign: 'center' }}>회원가입</h5>
           </div>
+          {error && <div className="alert alert-danger">{error}</div>}
           <div className="form-group">
             <div className="p-2">
               <label className="p-1">이름</label>
@@ -152,6 +163,7 @@ const Signup = () => {
           </div>
         </form>
       </div>
+    </div>
   )
 }