12일차

오늘은 채팅창 동결, 채팅 삭제, 비디오 전체화면 전환을 구현.

 

채팅창 동결

const [freezeChat, setFreezeChat] = useState(false);

// 중략...

const handleFreezeChat = () => {
setFreezeChat(!freezeChat);
}

// 중략...

<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
disabled={!connected || freezeChat}
onKeyDown={enterKey}
className='message-input'
/>

// 중략

<button onClick={handleFreezeChat}>
{freezeChat ? '채팅창 동결 해제' : '채팅창 동결'}
</button>

// 버튼 클릭 시 input 창 비활성화

 

채팅창 동결 전

채팅창 동결 후

 

 

채팅 삭제

const deleteMessage = (index) => {
  setMessages(messages.filter((message, i) => i !== index));
  
}

//중략...

<div key={index} className='message'>
  <strong>{msg.sender}</strong>: {msg.content} 
  <button className='deleteBtn' onClick={() => deleteMessage(index)}>X</button>
</div>

//css

.deleteBtn {
  display: none;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
  position: absolute; 
  right: 8px; 
}

.message:hover .deleteBtn {
  display: block;
}

.message:hover {
  backgr

 

마우스를 올리면 X 버튼이 뜨도록 설정

3개 삭제

 

 

마지막으로 전체 화면 전환

//yarn add react-full-screen

import { FullScreen, useFullScreenHandle } from 'react-full-screen';

// 중략...

const handleFullScreen = useFullScreenHandle();

//중략...

{webCamView ?             
<FullScreen handle={handleFullScreen} >
    <video className='webcam' ref={videoRef}/>
</FullScreen> :
<span className='blackScreen' style={{ display: 'flex' }}>
    <p>준비 중 입니다.</p>
</span>
}

 

도중에 FullScreen 때문에 기존에 있던 css가 망가졌지만 다시 복구 성공.

 

전체 화면

 

전체 화면도 정상적으로 기능.

 

지금까지 완성된 페이지의 대략적인 모습은 다음과 같다.

 

헤더는 일단 임시로 만들어 둔 것. 다음에 본격적으로 다듬을 예정.