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

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

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,13 @@ const useTags = () => {
     setTags([]);
   };
 
-  return { tags, setTags, onClickInitTags, onClickCreateTopicWithTags };
+  useEffect(() => {
+    if (isInitTags) return;
+
+    setTags([]);
+  }, []);
+
+  return { tags, onClickInitTags, onClickCreateTopicWithTags };
 };
 
 export default useTags;

frontend/src/pages/SelectedTopic/SelectedTopic.page.tsx

@@ -1,17 +1,15 @@
-import { lazy, Suspense, useContext, useEffect, useRef, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { lazy, Suspense, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import Space from '../../components/common/Space';
 import PullPin from '../../components/PullPin';
 import PinsOfTopicSkeleton from '../../components/Skeletons/PinsOfTopicSkeleton';
 import { LAYOUT_PADDING, SIDEBAR } from '../../constants';
-import { CoordinatesContext } from '../../context/CoordinatesContext';
 import useResizeMap from '../../hooks/useResizeMap';
 import useSetLayoutWidth from '../../hooks/useSetLayoutWidth';
 import useSetNavbarHighlight from '../../hooks/useSetNavbarHighlight';
 import useTags from '../../hooks/useTags';
-import useMapStore from '../../store/mapInstance';
 import PinDetail from '../PinDetail';
 import useClusterCoordinates from './hooks/useClusterCoordinates';
 import useHandleMapInteraction from './hooks/useHandleMapInteraction';
@@ -24,8 +22,7 @@ function SelectedTopic() {
   const { topicId } = useParams() as { topicId: string };
   const [isEditPinDetail, setIsEditPinDetail] = useState<boolean>(false);
   const { width } = useSetLayoutWidth(SIDEBAR);
-
-  const { tags, setTags, onClickInitTags, onClickCreateTopicWithTags } = useTags();
+  const { tags, onClickInitTags, onClickCreateTopicWithTags } = useTags({ isInitTags: true });
   const { isDoubleSidebarOpen, selectedPinId, setIsDoubleSidebarOpen, setSelectedPinId } = useSetSelectedPinId();
   const { data: topicDetail, refetch: getTopicDetail } = useTopicDetailQuery(topicId);
   const setClusteredCoordinates = useClusterCoordinates(topicId);
@@ -37,10 +34,6 @@ function SelectedTopic() {
   useSetNavbarHighlight('none');
   useResizeMap();
 
-  useEffect(() => {
-    setTags([]);
-  }, []);
-
   if (!topicId || !topicDetail) return <></>;
 
   return (