[FE]Fix#191 같이보기 상태에서 핀 추가시 발생하는 오류 수정

frontend/src/components/TopicInfo/index.tsx

@@ -4,10 +4,11 @@ import Clipping from '../../assets/clipping.svg';
 import Share from '../../assets/share.svg';
 import Button from '../common/Button';
 import Space from '../common/Space';
-import { useParams } from 'react-router-dom';
 import useNavigator from '../../hooks/useNavigator';
 
 export interface TopicInfoProps {
+  fullUrl?: string;
+  topicId?: string;
   topicParticipant: number;
   pinNumber: number;
   topicTitle: string;
@@ -16,17 +17,18 @@ export interface TopicInfoProps {
 }
 
 const TopicInfo = ({
+  fullUrl,
+  topicId,
   topicParticipant,
   pinNumber,
   topicTitle,
   topicOwner,
   topicDescription,
 }: TopicInfoProps) => {
-  const { topicId } = useParams();
   const { routePage } = useNavigator();
 
   const goToNewPin = () => {
-    routePage(`/new-pin?topic-id=${topicId}`);
+    routePage(`/new-pin?topic-id=${topicId}`, fullUrl);
   };
 
   const copyContent = async () => {

frontend/src/pages/NewPin.tsx

@@ -14,8 +14,10 @@ import { NewPinValuesType } from '../types/FormValues';
 import useFormValues from '../hooks/useFormValues';
 import { MarkerContext } from '../context/MarkerContext';
 import { CoordinatesContext } from '../context/CoordinatesContext';
+import { useLocation } from 'react-router-dom';
 
 const NewPin = () => {
+  const { state: prevUrl } = useLocation();
   const [topic, setTopic] = useState<TopicType | null>(null);
   const { markers, clickedMarker } = useContext(MarkerContext);
   const { clickedCoordinate, setClickedCoordinate } =
@@ -55,7 +57,10 @@ const NewPin = () => {
     e.preventDefault();
 
     await postToServer();
-    routePage(`/topics/${topic?.id}`, [topic!.id]);
+
+    if (prevUrl.length > 1) routePage(`/topics/${prevUrl}`, [topic!.id]);
+    else routePage(`/topics/${topic?.id}`, [topic!.id]);
+
     // 선택된 마커가 있으면 마커를 지도에서 제거
     if (clickedMarker) {
       clickedMarker.setMap(null);

frontend/src/pages/SelectedTopic.tsx

@@ -28,6 +28,7 @@ const SelectedTopic = () => {
     const data = await getApi(
       `/topics/ids?ids=${topicId?.split(',').join('&ids=')}`,
     );
+    const topicHashmap = new Map([]);
 
     // 각 topic의 pin들의 좌표를 가져옴
     const newCoordinates: any = [];
@@ -45,7 +46,17 @@ const SelectedTopic = () => {
 
     setCoordinates(newCoordinates);
 
-    setTopicDetail([...data]);
+    data.forEach((topicDetailFromData: TopicInfoType) =>
+      topicHashmap.set(`${topicDetailFromData.id}`, topicDetailFromData),
+    );
+
+    const topicDetailFromData = topicId
+      ?.split(',')
+      .map((number) => topicHashmap.get(number)) as TopicInfoType[];
+
+    if (!topicDetailFromData) return;
+
+    setTopicDetail([...topicDetailFromData]);
   };
 
   const onClickConfirm = () => {
@@ -92,6 +103,8 @@ const SelectedTopic = () => {
               <ul key={topic.id}>
                 {idx !== 0 && <Space size={5} />}
                 <TopicInfo
+                  fullUrl={topicId}
+                  topicId={topicId?.split(',')[idx]}
                   topicParticipant={1}
                   pinNumber={topic.pinCount}
                   topicTitle={topic.name}