Refactor/#655: 토픽 단일 조회 페이지 레이어 분리 (#656)

* rename: 페이지 단위 코로케이션 적용

* refactor: 불필요한 변수 제거

* refactor: topicDetail 요청 로직 Query로 분리

* refactor: 클러스터링 로직 훅으로 분리 및 재사용

추후 모아보기 페이지에서 재사용할 예정이다.

* refactor: 사용자 지도 상호작용 이벤트 핸들링 및 상호작용 후 동작 로직 커스텀 훅으로 분리

* chore: prettier printWidth 100으로 설정

훅의 인자, 반환값의 네이밍 길이가 길어짐에 따라 위와 같이 변경한다.

* refactor: 더블 사이드바 및 쿼리파라미터 세팅 로직 커스텀 훅으로 분리

추후 모아보기 페이지에서 사용할 수 있도록 한다.

* refactor: useTags init 로직 useTags 훅 내부로 이동

모든 페이지마다 tags를 초기화해줘야하는 로직이 불필요하게 반복된다. 또한 휴먼에러가 발생할 가능성이 높은 부분으로 판단되어 useTags의 props로 받아 초기화가 불필요한 페이지는 명시적으로 초기화 하지 않도록 한다.

* fix: tags 초기화 기능 조건 로직 반대로 지정한 오류 수정

frontend/.prettierrc.js

@@ -1,3 +1,4 @@
 module.exports = {
+  printWidth: 100,
   singleQuote: true,
 };

frontend/src/apis/new/index.ts

@@ -1,7 +1,19 @@
-import { TopicCardProps } from '../../types/Topic';
+import { ClusteredCoordinates } from '../../pages/SelectedTopic/types';
+import { TopicCardProps, TopicDetailProps } from '../../types/Topic';
 import { http } from './http';
 
 export const getTopics = (url: string) => http.get<TopicCardProps[]>(url);
 
 export const getProfile = () =>
   http.get<TopicCardProps[] | null>('/members/my/topics');
+
+export const getTopicDetail = (topicId: string) =>
+  http.get<TopicDetailProps[]>(`/topics/ids?ids=${topicId}`);
+
+export const getClusteredCoordinates = (
+  topicId: string,
+  distanceOfPinSize: number,
+) =>
+  http.get<ClusteredCoordinates[]>(
+    `/topics/clusters?ids=${topicId}&image-diameter=${distanceOfPinSize}`,
+  );

frontend/src/hooks/useTags.ts

@@ -1,9 +1,13 @@
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 
 import { TagContext } from '../context/TagContext';
 import useNavigator from './useNavigator';
 
-const useTags = () => {
+interface Props {
+  isInitTags: boolean;
+}
+
+const useTags = ({ isInitTags }: Props) => {
   const { tags, setTags } = useContext(TagContext);
   const { routePage } = useNavigator();
 
@@ -15,7 +19,11 @@ const useTags = () => {
     setTags([]);
   };
 
-  return { tags, setTags, onClickInitTags, onClickCreateTopicWithTags };
+  useEffect(() => {
+    if (isInitTags) setTags([]);
+  }, []);
+
+  return { tags, onClickInitTags, onClickCreateTopicWithTags };
 };
 
 export default useTags;