warning-yellow fix

client/src/components/Header.js

@@ -11,7 +11,7 @@ const Header = () => {
         <div className="d-flex justify-content-end">
           <div>
             <Link to="/user">
-              <img src="/BORA.png" style={{ width: '160px' }} />
+              <img src="/BORA.png" alt="logo" style={{ width: '160px' }} />
             </Link>
           </div>
           <button

client/src/components/Home/HomeProfile.js

@@ -3,37 +3,34 @@ import { useState, useEffect } from "react";
 import userApi from "../../apis/user.api";
 import catchErrors from "../../context/catchError";
 
-const userprofile = localStorage.getItem("user");
 const INIT_USER = {
-  id: userprofile,
-  email: '',
-  img: '',
-}
+  id: localStorage.getItem("user"),
+  email: "",
+  img: "",
+};
 
 const HomeProfile = () => {
-  const [user, setUser] = useState(INIT_USER)
+  const [user, setUser] = useState(INIT_USER);
 
   async function getSetUser(userID) {
     try {
-      console.log('userID', userID)
-      const data = await userApi.getUser(userID)
-      console.log(data)
-      setUser(data)
-      // console.log(user)
+      const data = await userApi.getUser(userID);
+      setUser(data);
     } catch (error) {
       // catchErrors(error, setError)
     }
   }
 
   useEffect(() => {
-    getSetUser(userprofile)
-  }, [userprofile])
+    getSetUser(user.id);
+  }, []);
 
   return (
     <Link to={`/profile/${user.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
+            alt="homeProfileImg"
             src={`/uploads/${user.img}`}
             className="rounded-circle"
             style={{

client/src/components/Home/RoomSingle.js

-import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom'
-import roomApi from '../../apis/room.api';
-import userApi from '../../apis/user.api';
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import roomApi from "../../apis/room.api";
+import userApi from "../../apis/user.api";
 
 const RoomSingle = () => {
-  const [roomNum, setRoomNum] = useState('')
-  const [room, setRoom] = useState([])
-  const roomId = localStorage.getItem('user');
-  const channelId = 1
-  const A = []
+  const [roomNum, setRoomNum] = useState("");
+  const [room, setRoom] = useState([]);
+  const roomId = localStorage.getItem("user");
+  const channelId = 1;
+  const A = [];
 
   // async function getJoinRoom(Id) {
   //   try {
@@ -35,31 +35,31 @@ const RoomSingle = () => {
     >
       <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
+            alt="roomImg"
             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',
-            msOverflowStyle:'none',
+            width: "250px",
+            overflow: "scroll",
+            whiteSpace: "nowrap",
+            msOverflowStyle: "none",
           }}
         >
           데계 재미있는 수학과 데계데계데계 재미있는 수학과
         </div>
         <div className="ms-auto mt-2"> 15/34 </div>
       </div>
-
     </Link>
-  )
-}
+  );
+};
 
-export default RoomSingle
+export default RoomSingle;

client/src/components/Profile/Info.js

@@ -20,7 +20,7 @@ const Info = () => {
   }
   useEffect(() => {
     getProfile(userprofile);
-  }, [userprofile]);
+  }, []);
 
   return (
     

client/src/components/Profile/InfoUpdate.js

@@ -100,6 +100,7 @@ const InfoUpdate = () => {
             >
               <img
                 src={`/uploads/${profile.img}`}
+                alt="profileImg"
                 id="imgfile"
                 className="rounded-circle mt-2"
                 style={{ height: "320px", width: "320px" }}
@@ -111,6 +112,7 @@ const InfoUpdate = () => {
                 <label htmlFor="inputfile">
                   <img
                     className="rounded-circle"
+                    alt="newProfileImg"
                     src="/infoimg.jpg"
                     style={{
                       width: "50px",

client/src/components/Profile/Profile.js

@@ -2,27 +2,23 @@ import { Link, useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
 import userApi from "../../apis/user.api";
 
-
 const userprofile = localStorage.getItem("user");
 const INIT_PROFILE = {
-  img:"",
+  img: "",
 };
 
 const Profile = () => {
-  
   const [profile, setProfile] = useState(INIT_PROFILE);
 
   async function getProfile(userID) {
     try {
       const data = await userApi.getUser(userID);
-      setProfile(data.img)
-      
+      setProfile(data.img);
     } catch (error) {}
   }
   useEffect(() => {
     getProfile(userprofile);
-  }, [userprofile]);
-
+  }, []);
 
   const { id } = useParams();
 
@@ -55,6 +51,7 @@ const Profile = () => {
           <div className="col">
             <div className="d-flex justify-content-center">
               <img
+                alt="profileImg"
                 src={`/uploads/${profile}`}
                 className="rounded-circle mt-2"
                 style={{ height: "320px", width: "320px" }}

client/src/components/Room/ChannelList.js

@@ -10,7 +10,7 @@ const ChannelList = () => {
         <LeftHamburger />
         <div>
           <Link to="/user">
-            <img src="/BORA.png" style={{ width: '160px' }} />
+            <img src="/BORA.png" alt="logo" style={{ width: '160px' }} />
           </Link>
         </div>
         <RightHamburger />

client/src/components/Room/Controller.js

-import ScreenSelect from './ScreenSelect'
-import video_btn from '../../images/videobtn.png'
-import speaker_btn from '../../images/speakerbtn.png'
-import mic_btn from '../../images/micbtn.png'
-import videooff_btn from '../../images/videooffbtn.png'
-import speakeroff_btn from '../../images/speakeroffbtn.png'
-import micoff_btn from '../../images/micoffbtn.png'
-import React, { useState } from 'react';
-
-const Controller = () => {
-  const [mic, setMic] = useState("true")
-  const [speaker, setSpeaker] = useState("true")
-  const [video, setVideo] = useState("true")
-
-  const micOn = (() => setMic(false));
-  const micOff = (() => setMic(true));
-  const speakerOn = (() => setSpeaker(false));
-  const speakerOff = (() => setSpeaker(true));
-  const videoOn = (() => setVideo(false));
-  const videoOff = (() => setVideo(true));
+import ScreenSelect from "./ScreenSelect";
+import video_btn from "../../images/videobtn.png";
+import speaker_btn from "../../images/speakerbtn.png";
+import mic_btn from "../../images/micbtn.png";
+import videooff_btn from "../../images/videooffbtn.png";
+import speakeroff_btn from "../../images/speakeroffbtn.png";
+import micoff_btn from "../../images/micoffbtn.png";
+import React, { useState } from "react";
 
+const Controller = (props) => {
+  const { mic, video, speaker, setMic, setSpeaker, setVideo } = props;
   return (
     <div className="container">
       <div className="row">
         <div
           className="col d-flex justify-content-center"
-          style={{ backgroundColor: '#C4C4C4', position: 'absolute', bottom: 0, width: '414px' }}
+          style={{
+            backgroundColor: "#C4C4C4",
+            position: "absolute",
+            bottom: 0,
+            width: "414px",
+          }}
         >
-
-          {mic ? <div className="col d-flex justify-content-center">
-            <button type="button" className="btn" onClick={micOn}>
+          {mic ? (
+            <div className="col d-flex justify-content-center">
+              <button type="button" className="btn" onClick={setMic}>
                 <img src={micoff_btn} width="45" height="40" />
               </button>
             </div>
-            : <div className="col d-flex justify-content-center">
-              <button type="button" className="btn" onClick={micOff}>
+          ) : (
+            <div className="col d-flex justify-content-center">
+              <button type="button" className="btn" onClick={setMic}>
                 <img src={mic_btn} width="45" height="40" />
               </button>
             </div>
-          }
-          {speaker ? <div className="col d-flex justify-content-center">
-            <button type="button" className="btn" onClick={speakerOn}>
+          )}
+          {speaker ? (
+            <div className="col d-flex justify-content-center">
+              <button type="button" className="btn" onClick={setSpeaker}>
                 <img src={speakeroff_btn} width="45" />
               </button>
-          </div> : <div className="col d-flex justify-content-center">
-            <button type="button" className="btn" onClick={speakerOff}>
+            </div>
+          ) : (
+            <div className="col d-flex justify-content-center">
+              <button type="button" className="btn" onClick={setSpeaker}>
                 <img src={speaker_btn} width="45" />
               </button>
             </div>
-          }
-          {video ? <div className="col d-flex justify-content-center">
+          )}
+          {video ? (
+            <div className="col d-flex justify-content-center">
               <button
                 type="button"
                 className="btn"
                 data-bs-toggle="modal"
                 data-bs-target="#shareModal"
-              onClick="location.href='ScreenSelect.js'"
-              onClick={videoOn}
+                onClick={setVideo}
               >
                 <img src={videooff_btn} width="45" />
               </button>
-          </div> :
+            </div>
+          ) : (
             <div className="col d-flex justify-content-center">
-              <button type="button" className="btn" onClick={videoOff}>
+              <button type="button" className="btn" onClick={setVideo}>
                 <img src={video_btn} width="45" />
               </button>
-            </div>}
             </div>
-        <ScreenSelect videoOff={videoOff} />
+          )}
+        </div>
+        {/* <ScreenSelect videoOff={setVideo} /> */}
       </div>
-
-
     </div>
-  )
-}
+  );
+};
 
-export default Controller
+export default Controller;

client/src/components/Room/RoomHeader.js

-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
 
 const RoomHeader = () => {
   return (
     <div
       className="d-flex justify-content-between align-items-center p-2"
-      style={{ backgroundColor: '#C4C4C4', height: '60px' }}
+      style={{ backgroundColor: "#C4C4C4", height: "60px" }}
     >
       <div className="d-flex align-items-center">
         <img
+          alt="roomImg"
           className="rounded-circle"
           src="/cherry.jpg"
           width="40px"
@@ -16,16 +17,16 @@ const RoomHeader = () => {
         <a
           className="p-3 ms-1 text-center text-decoration-none"
           style={{
-            fontWeight: 'bold',
-            fontSize: '20px',
-            color: '#6c33a2',
+            fontWeight: "bold",
+            fontSize: "20px",
+            color: "#6c33a2",
           }}
         >
           # 회의
         </a>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default RoomHeader
+export default RoomHeader;

client/src/pages/HomeGuestPage.js

@@ -4,7 +4,7 @@ import SignUp from "../components/SignUp";
 const HomeGuestPage = () => {
   return (
     <div className="d-flex flex-column justify-content-center h-100 font-weight-bold">
-      <img src="BORA.PNG" className="w-100 p-4" />
+      <img src="BORA.PNG" alt="logo" className="w-100 p-4" />
       <div className="d-flex flex-column align-items-center">
         <button
           type="button"

client/src/pages/InvitePage.js

@@ -34,7 +34,7 @@ const InvitePage = () => {
         >
           {/* 방 부분 */}
           <p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p>
-          <img style={{ width: "90px", height: "90px" }}></img>
+          <img alt="roomImg" style={{ width: "90px", height: "90px" }}></img>
           <p style={{ marginBottom: "0px", fontSize: "16px" }}>
             방 id: {/*${roomid}*/}
           </p>