comment 를 선택함에 따라 선택된 comment가 canvas의 중앙에 표시되는 로직 정리

<aside> 💡

피그마의 comment와 같은 기능

• Stacked PR 전략: 두 개의 하위 작업으로 분리 진행
  • 선택하면 선택된 comment가 window의 중앙에 표시 + 선택된 comment ID가 searchParam에 저장됨
  • 유저 멘션 기능 </aside>

1. CommentID와 SearchParam 연동

1-1. 배경

1. 고려해야할 상황
   • 현재 페이지 내에 있는 comment를 선택
   • 다른 페이지에 있는 comment 를 선택
   • 공유된 url로 접근해 param에 선택된 comment 정보가 담긴 경우
2. param에는 이미 선택된 노드의 정보가 담겨져 있음.
   1. 선택된 노드와 선택된 코멘트 중 어떤 것을 canvas 중앙에 표시되도록 할 것인가?
3. url로 접근하는 경우, 다른 페이지에 있는 comment를 선택한 경우 모두 새로 page가 load되어 loader 함수가 실행되지만 이 둘이 다르다는 것을 무엇으로 알 수 있을까?

1-2. 구현 방법

1. 코멘트를 선택하면 selectThread가 실행되고, 같은 페이지 인지 여부를 알 수 있도록 pageID가 전달 된다.
   1. props의 인터페이스를 보고 selectThread의 동작이 예측될 수 있도록 전달 받을 인자들의 타입을 미리 정의.
2. viewThread는 항상 같은 페이지 내의 코멘트만 찾는다.
3. comment 를 선택했을 때 다른 페이지내의 thread를 선택한 경우 url을 찍고 접근한 것과 동일하게 동작하도록 param을 넣은 주소로 navigate된다.
4. page는 항상 로드 될 때마다 선택된 코멘트를 찾는다(viewThread). 노드보다 우선순위 높음

1-3. 어려웠던 점 및 해결 방법

1. thread의 list를 받아오기 전에 viewThread가 실행되면 제대로 동작하지 않음
2. pageLoader에 getThread를 추가하여 페이지가 렌더링 되기 전에 데이터가 있음을 보장할 수 있음.