📌
css,Ul작업은 너무 힘드네요 어찌어찌 차례가되면 class name을 다르게 주는 로직을 사용해서 css 변경을 할수 있게 되었지만... 원하는대로 css를 작업하기 너무 힘들어서 같은 조원 수빈님께 css 작업은 따로 부탁 드렸습니다!!!
저는 차례를 어떻게 넘기는지 로직을 구현했어요 :)
아래 코드로 살펴 보겠습니다!
setUsers((oldUsers) => [
...oldUsers,
{
id: socketID,
stream: null,
nickName: userNickName,
isCameraOn: false,
isMyTurn: false,
isOwner: false,
},
]);
const [isMyTurn, setIsMyTurn] = useState(false);
useState로 관리할 isMyTurn을 별도로 선언해주고!
case 'SPOTLIGHT': {
setNotice(data.content);
if (myNickName === data.sender) {
stream.getAudioTracks().forEach((track) => {
track.enabled = true;
});
setIsVoiceOn(true);
setIsSpotTimer(true);
muteBtn.current.style.display = 'inline-blcok';
setIsMyTurn(true);
} else {
stream.getAudioTracks().forEach((track) => {
track.enabled = false;
});
setIsVoiceOn(false);
setIsTimer(true);
muteBtn.current.style.display = 'none';
setIsMyTurn(false);
setUsers((users) =>
users.map((user) =>
user.nickName === data.sender
? { ...user, isMyTurn: true }
: { ...user, isMyTurn: false },
),
);
}
break;
}
<Audio
key={user.id}
stream={user.stream}
nickName={user.nickName}
isCameraOn={user.isCameraOn}
keyword={keyword}
isMyTurn={user.isMyTurn}
isOwner={user.isOwner}
>
<track kind="captions" />
</Audio>
🔧 타사용자들 user 카드에 props로 isMyTrun을 전달해줍니다!
해당 컴포넌트에서도 동일하게 IsMyTurn를 이용하여 클래스 name의 부여해 주었습니다
☝
UI, css 작업 공부좀 해야겠다고 절실히 느낀 하루....
로직만 짜서 될일이 아니다 ㅠㅠ....
그래도 오늘도 보람찬 하루였습니당 😂😂😂😂