23일차

라이브 페이지 css를 전체적으로 다시 다잡는 시간

 

하얀 페이지에 스트리밍 화면과 채팅창만 있는 건 너무 휑한 느낌이라 아예 검은색 계열 바탕으로 지정해 고급스러움을 살리는 방향으로 했다.

 

 

검은색 계열에서도 명도에 차이를 두어 구분할 수 있도록 했다.

 

그리고 채팅창에 올라오는 아이디에 랜덤한 색깔을 부여할 수 있도록 했다.

 

  // 랜덤 색상 선택 함수
  const getRandomColor = () => {
    const randomIndex = Math.floor(Math.random() * colors.length);
    return colors[randomIndex];
  };

 

처음에는 sender가 있는 strong에 바로 style={{color : getRandomColor()}} 를 지정 했으나, 그랬더니 채팅을 칠 때마다 아이디 색깔이 요동치는 이슈가 있었다.

 

그래서

 

  const sendMessage = () => {
    if (stompClient && connected && message) {
      stompClient.publish({
        destination: '/app/chat.send', //java 쪽의 컨트롤러(@MessageMapping)와 맞춰서 작성
        body: JSON.stringify({
          profile: loginMember.memberProfile,
          sender: loginMember.memberId,
          content: message,
          viewedTime: moment().format("hh:mm a"),
          formattedTime: moment().format("YYYY-MM-DD HH:mm:ss"),
          color : getRandomColor()
        })
      });
      setMessage('');
    }
    else if (!connected) {
      console.error('연결이 안됩니다. 관리자에 문의하세요.');
    }
  };

 

에서 color : getRandomColor()을 지정하고

 

<strong className='msg-sender' style={{color: msg.color}}>{msg.sender}</strong>

 

지정

 

이랬더니 한 번 등록된 채팅에서 아이디의 색깔이 바뀌는 일은 없어졌다. 문제 해결

 

 

휑해보였던 채팅창을 어느정도 꾸몄다.