크래프톤 정글 week18, day132 - 추가적인 UI/UX 구현, 버그 수정, 음악 추가

팀원이 요청한 요청사항 부분과 버그들을 수정했다.

 

코드 복사 구현

방 코드 복사

복사 버튼을 눌렀을 시 텍스트가 복사가 되며 복사가 됐다는 이펙트로 3번 깜빡이게 구현했다.

 

 

마우스 커서

새로운 마우스 커서

기존의 UI에 어울리게 재희님이 마우스 커서 이미지를 가지고 왔다. 기존의 커서를 cursor: none 해주고 새로 url을 통해 이미지를 넣어줬다.

 

노래 호버했을 시 주변 불빛, 사운드웨이브

이것도 재희님의 요청으로 대기 방에서 선택된 노래의 이미지에 마우스를 호버할 시 해당 노래가 재생되며, 재생되는 것을 알리기 위한 이미지 주변의 일렁이는 불빛을 요청했다.

해당 불빛을 구현하고 뭔가 밋밋하게 느껴져서 이미지의 중앙에 사운드 웨이브를 작게 추가해 노래가 플레이되고 있다는 것을 잘 보일 수 있게 구현했다.

노래 호버 이펙트

 

호버 시 나오는 노래 노래에 맞게

이것도 위의 호버 이펙트를 구현하면서 같이 수정했는데, 처음 랜덤 노래를 서버에서 받아올 때 해당 노래의 이름을 받아와 그 이름의 오디오를 재생시켰다.

똑같이 노래를 선택했을 때도 해당 변수에 노래 이름을 받아와서 적용했다.

 

결과창 앨범이미지 버그 수정

게임 결과창

노래 이미지값이 잘 안받아와져서 그런지 계속 파일이 깨져서 나왔었는데, 받아오는 부분에서 이미지 값을 세션에 저장해 결과창 컴포넌트에서 가져와 화면에 뿌려줬다.

 

누가 채팅했을 때 알람띄우기

채팅창이 꺼져있을 때도 누군가가 채팅을 하면 채팅이 왔다는 알림을 할 수 있게 구현했다. 만들면서 슬랙 알람같아서 재밌었다.

 

 

 

학습 시간 : 10 ~ 25시

24/05/18 - 토요일