From be5e7ea4c37b99bef39b3406154e1ce8f8dd8678 Mon Sep 17 00:00:00 2001
From: Yonghun <2YH02>
Date: Wed, 21 Feb 2024 22:26:41 +0900
Subject: [PATCH] Fix: Apply click event to new marker

---
 .../AddChinupBarForm/AddChinupBarForm.tsx     | 32 +++++++++++++++++--
 frontend/src/components/Map/Map.tsx           |  4 +++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/AddChinupBarForm/AddChinupBarForm.tsx b/frontend/src/components/AddChinupBarForm/AddChinupBarForm.tsx
index 97bca7c3..9b9d1dad 100644
--- a/frontend/src/components/AddChinupBarForm/AddChinupBarForm.tsx
+++ b/frontend/src/components/AddChinupBarForm/AddChinupBarForm.tsx
@@ -6,17 +6,31 @@ import useInput from "../../hooks/useInput";
 import useUploadFormDataStore from "../../store/useUploadFormDataStore";
 import type { KakaoMap, KakaoMarker } from "../../types/KakaoMap.types";
 import Input from "../Input/Input";
+import type { MarkerInfo } from "../Map/Map";
 import UploadImage from "../UploadImage/UploadImage";
 import * as Styled from "./AddChinupBarForm.style";
 
 interface Props {
   setState: React.Dispatch<React.SetStateAction<boolean>>;
   setIsMarked: React.Dispatch<React.SetStateAction<boolean>>;
+  setMarkerInfoModal: React.Dispatch<React.SetStateAction<boolean>>;
+  setCurrentMarkerInfo: React.Dispatch<React.SetStateAction<MarkerInfo | null>>;
+  setMarkers: React.Dispatch<React.SetStateAction<KakaoMarker[]>>;
   map: KakaoMap | null;
+  markers: KakaoMarker[];
   marker: KakaoMarker | null;
 }
 
-const AddChinupBarForm = ({ setState, setIsMarked, map, marker }: Props) => {
+const AddChinupBarForm = ({
+  setState,
+  setIsMarked,
+  setMarkerInfoModal,
+  setCurrentMarkerInfo,
+  setMarkers,
+  map,
+  markers,
+  marker,
+}: Props) => {
   const formState = useUploadFormDataStore();
 
   const descriptionValue = useInput("");
@@ -42,7 +56,7 @@ const AddChinupBarForm = ({ setState, setIsMarked, map, marker }: Props) => {
           imageOption
         );
 
-        new window.kakao.maps.Marker({
+        const newMarker = new window.kakao.maps.Marker({
           map: map,
           position: new window.kakao.maps.LatLng(
             formState.latitude,
@@ -52,6 +66,20 @@ const AddChinupBarForm = ({ setState, setIsMarked, map, marker }: Props) => {
           image: markerImage2,
         });
 
+        window.kakao.maps.event.addListener(newMarker, "click", () => {
+          setMarkerInfoModal(true);
+          setCurrentMarkerInfo({
+            ...res?.data,
+            index: markers.length,
+          });
+        });
+
+        setMarkers((prev) => {
+          const copy = [...prev];
+          copy.push(newMarker);
+          return copy;
+        });
+
         setState(false);
         setIsMarked(false);
         marker?.setMap(null);
diff --git a/frontend/src/components/Map/Map.tsx b/frontend/src/components/Map/Map.tsx
index 3da94e4f..0f986f02 100644
--- a/frontend/src/components/Map/Map.tsx
+++ b/frontend/src/components/Map/Map.tsx
@@ -199,6 +199,10 @@ const Map = () => {
           <AddChinupBarForm
             setState={setOpenForm}
             setIsMarked={setIsMarked}
+            setMarkerInfoModal={setMarkerInfoModal}
+            setCurrentMarkerInfo={setCurrentMarkerInfo}
+            setMarkers={setMarkers}
+            markers={markers}
             map={map}
             marker={marker}
           />