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

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;