useRef

client/src/components/Login.js

-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { Redirect } from 'react-router-dom'
 import userApi from '../apis/user.api'
-import catchErrors from "../context/catchError";
-import { handleLogin } from '../context/auth';
+import catchErrors from '../context/catchError'
+import { handleLogin } from '../context/auth'
 const INIT_USER = {
   email: '',
   password: '',
 }
 
 const Login = () => {
-  // const { loading, login, catchErrorAuth } = useAuth()
   const [user, setUser] = useState(INIT_USER)
   const [disabled, setDisabled] = useState(true)
   const [error, setError] = useState('')
   const [success, setSuccess] = useState(false)
+  // const [modalopen, setmodalOpen] = useState(false)
+  // const loginref = useRef()
 
   useEffect(() => {
     const isUser = Object.values(user).every((el) => Boolean(el))
     isUser ? setDisabled(false) : setDisabled(true)
+    // window.addEventListener('click', handleModal)
+    // return () => {
+    //   window.removeEventListener('click', handleModal)
+    // }
   }, [user])
 
   function handleChange(event) {
@@ -25,6 +30,14 @@ const Login = () => {
     setUser({ ...user, [name]: value })
   }
 
+  // const handleModal = (e) => {
+  //   if (
+  //     modalopen &&
+  //     (!loginref.current || !loginref.current.contains(e.target))
+  //   )
+  //     setmodalOpen(false)
+  // }
+
   async function handleSubmit(e) {
     e.preventDefault()
     console.log('로그인')
@@ -51,7 +64,6 @@ const Login = () => {
 
   return (
     <div className="modal-content">
-      {error && <div className="alert alert-danger">{error}</div>}
       <form onSubmit={handleSubmit}>
         <div className="modal-header">
           <h5 className="modal-title" id="loginModalLabel">
@@ -64,6 +76,7 @@ const Login = () => {
             aria-label="Close"
           ></button>
         </div>
+        {error && <div className="alert alert-danger">{error}</div>}
         <div className="modal-body">
           <div>
             <label>아이디</label>

client/src/components/Room/Controller.js

@@ -2,9 +2,9 @@ import ScreenSelect from './ScreenSelect'
 import React, { useState } from 'react';
 
 const Controller = () => {
-  const [mic, setMic] = useState("true")
-  const [speaker, setSpeaker] = useState("true")
-  const [video, setVideo] = useState("true")
+  const [mic, setMic] = useState(true)
+  const [speaker, setSpeaker] = useState(true)
+  const [video, setVideo] = useState(true)
 
   const micOn = (() => setMic(false));
   const micOff = (() => setMic(true));