[❗️Error] 12/17 (최우철) mouse hover액션을 자바스크립트로 작성시 마주친 문제들

### what error
- 사용자의 썸네일 이미지를 채팅 내에서 호버링을 할 때 사용자의 정보가 나오기를 원하였으나, 컨테이너가 현재 **overflowY:scroll** 이었던 상황이었기에 컨테이너가 잘려버리는 현상이 나타나고 있었다
>빨간 부분이 사실 더 밖에 있지만 잘려나가는 모습이다

---

### Idea
- 그래서 해당 호버링하는 컨테이너를 밖으로 꺼내야 한다는 결론을 내렸고, 이에 대해서 단계별로 수도코드를 생각해봤다
1. 현재의 컨테이너 바깥에서 컴포넌트로 지정을 한다면 css에서 :hover을 통해 스타일링을 줬던 것이 아닌, 자바스크립트적으로 hover 이벤트를 감지하여 유저 정보 컨테이너에 삽입해야 하는 데이터들을 따로 상태로 저장할 수 있어야 한다

2. 해당 정보의 유무에 따라 유저 정보가 썸네일의 옆에서 표현이 되도록 만들어야 했다
3. 이때 표현되는 정보들은 채팅 컨테이너의 바깥에 존재하여 absolute 상태로 존재하기 때문에 뷰포트 기준으로 채팅 컨테이너 안쪽의 타겟 썸네일에 대한 좌표를 구할 수 있어야 한다

---

### practice

- 우선 마우스 오버에 대한 정보를 위해 찾아본 결과, react 공식 홈페이지에서 이러한 내용을 확인할 수 있었다.

- 컴포넌트 안에 마우스 포인터가 진입하면 이벤트를 발생시켜 전달한다고 하므로 이를 활용하면 되었다
> 마우스 오버를 적용했을 때 전달되는 이벤트 객체

( 참고로, onMouseOver이라는 옵션도 존재하는데, 이것은 단지 마우스가 들어가는 이벤트만 확인하고 나가는 이벤트는 확인하지 않는다)
( 현재 마우스가 떠나가면 유저 정보가 팝업이 해제되야 하므로, 마우스가 떠나가는 이벤트에 대한 로직 역시 필요한 상황이었기에 onMouseOver은 패스)

- 마우스 오버는 찾았으니, 이제 좌표를 구할 수 있어야하는데 좌표는 상당히 여러개의 기준점이 존재했다

> 간단히 정리하면, screen은 내 스크린 기준으로 하는 좌표값들이고
> page는 브라우저에 로딩된 html 도큐먼트 전체를 기준으로 하며
> client는 실제 뷰포트를 기준으로 하고
> offset은 해당 이벤트가 발생한 노드의 바로 상위 부모를 기준으로 한 좌표값이었다.

- 현재 상황은 아예 컨테이너 바깥에 나가있는 상황이므로, 뷰포트 기준으로 좌표를 설정해줘야 했다.
- 그래서 마우스가 올라가면, onMouseEnter 이벤트를 통해 이벤트 타겟에 대한 top과 left 정보를 **Element.getBoundingClientRect()** 을 통해 얻어주었다

- 그 후, 해당 상태를 업데이트하고 마우스가 떠나가면 상태를 빼버리는 로직을 구현한 후, 썸네일 옆에 떠야하는 정보창은 이 상태의 유무에 따라 보이고 안보이고를 정해주고, top과 left는 그 상태 안에 있는 정보를 기반으로 뜨도록 구현해주었다

---

### 개선점

- 현재 방식으로는 한가지 문제가 있었는데, 그것은 바로 가장 외부에 존재하는 모달 컨테이너가 position:fixed 상태인지라, 마우스를 올렸을 때에 나타나야 할 정보창이 absolute를 설정해줘도 이게 외부 모달컨테이너가 기준이 되다 보니 그 기준으로 top과 left가 정해져서 상당히 이상한 장소에 정보창이 떠있는 상황이 되었다

- 이로 인해 미디어 쿼리로 하나하나 레이아웃을 조정하면서 위치를 바꿔야 했는데, 상당히 불편했다.
- 해당 방식은 모달창에서 쓰기보다는 뭔가 고정되어 있는 전체 컨테이너를 대상으로 사용하는 것이 좋아보였다.

---

### reference

[getBoundingClientRect](https://stackoverflow.com/questions/35360704/wrong-offsetx-and-offsety-on-mousedown-event-of-parent-element)