[project] spotLight 효과주기

✨오늘의 작업은 자신의 차례일때 user 카드에 border-line 과 background 컬러등을 변경하여 sporLight 효과를 주었습니다 : )

📌

css,Ul작업은 너무 힘드네요 어찌어찌 차례가되면 class name을 다르게 주는 로직을 사용해서 css 변경을 할수 있게 되었지만... 원하는대로 css를 작업하기 너무 힘들어서 같은 조원 수빈님께 css 작업은 따로 부탁 드렸습니다!!!
저는 차례를 어떻게 넘기는지 로직을 구현했어요 :)
아래 코드로 살펴 보겠습니다!

 setUsers((oldUsers) => [
      ...oldUsers,
      {
        id: socketID,
        stream: null,
        nickName: userNickName,
        isCameraOn: false,
        isMyTurn: false,
        isOwner: false,
      },
    ]);

🔧 제일 처음 user 객체를 만들어 배열로 관리하는 곳에서 isMyTurn이라는 키를 falser 값을 default로 추가 해주었습니다 :)

 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;
       }

🔧 spotLight를 받았을때 nickName을 이용하여 자신의 차례인지 아닌지 구분후 setIsMyTurn을 이용하여 값을 변경해 주었습니다 😊 자신의 차례가 아닐경우 users배열에서 차례가 된 유저를 nickName을 이용하여 찾은 후 해당 객체의 isMyTurn 값을 true 변경해주어 해당 유저의 차례임을 구현 하였습니다!

                  <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 작업 공부좀 해야겠다고 절실히 느낀 하루....
로직만 짜서 될일이 아니다 ㅠㅠ....
그래도 오늘도 보람찬 하루였습니당 😂😂😂😂