From 0fe82a1dd25ae5c96406deeda7760cd6ff2e1bc3 Mon Sep 17 00:00:00 2001
From: Yonghun <2YH02>
Date: Wed, 21 Feb 2024 21:56:37 +0900
Subject: [PATCH] Feat: Delete My marker

---
 frontend/src/api/markers/DeleteMarker.ts      | 31 ++++++++++
 .../components/ActionButton/ActionButton.tsx  | 30 ++++++++++
 frontend/src/components/Map/Map.tsx           | 25 +++++++-
 .../MarkerInfoModal/MarkerInfoModal.style.ts  |  3 +
 .../MarkerInfoModal/MarkerInfoModal.tsx       | 57 +++++++++++++++++--
 5 files changed, 138 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/api/markers/DeleteMarker.ts
 create mode 100644 frontend/src/components/ActionButton/ActionButton.tsx

diff --git a/frontend/src/api/markers/DeleteMarker.ts b/frontend/src/api/markers/DeleteMarker.ts
new file mode 100644
index 00000000..d655b618
--- /dev/null
+++ b/frontend/src/api/markers/DeleteMarker.ts
@@ -0,0 +1,31 @@
+import axios from "axios";
+
+const DeleteMarker = async (id: number) => {
+  const token = JSON.parse(localStorage.getItem("user") as string).state.user
+    .token;
+
+  try {
+    const res = await axios.delete(
+      `${import.meta.env.VITE_LOCAL_URL}/api/v1/markers/${id}`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    return res;
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response) {
+      console.error(
+        `삭제 실패: ${error.response.status} - ${error.response.data.error}`
+      );
+
+      return error.response.data.error;
+    } else {
+      console.error(`삭제 실패: ${error}`);
+    }
+  }
+};
+
+export default DeleteMarker;
diff --git a/frontend/src/components/ActionButton/ActionButton.tsx b/frontend/src/components/ActionButton/ActionButton.tsx
new file mode 100644
index 00000000..29bd1d51
--- /dev/null
+++ b/frontend/src/components/ActionButton/ActionButton.tsx
@@ -0,0 +1,30 @@
+import { Button, ButtonProps } from "@mui/material";
+
+interface Props extends ButtonProps {
+  bg?: "black" | "gray";
+}
+
+const ActionButton = ({ bg, ...props }: Props) => {
+  if (!bg) {
+    return <Button>{props.children}</Button>;
+  }
+
+  return (
+    <Button
+      sx={{
+        color: bg === "black" ? "#fff" : "#000",
+        width: "100%",
+        backgroundColor: bg === "black" ? "#333" : "#ccc",
+        margin: "1rem 0",
+        "&:hover": {
+          backgroundColor: bg === "black" ? "#555" : "#eee",
+        },
+      }}
+      {...props}
+    >
+      {props.children}
+    </Button>
+  );
+};
+
+export default ActionButton;
diff --git a/frontend/src/components/Map/Map.tsx b/frontend/src/components/Map/Map.tsx
index c6185188..3da94e4f 100644
--- a/frontend/src/components/Map/Map.tsx
+++ b/frontend/src/components/Map/Map.tsx
@@ -37,6 +37,10 @@ export interface Marker {
   photos?: Photo[];
 }
 
+export interface MarkerInfo extends Marker {
+  index: number;
+}
+
 export interface Markers {
   title: string;
   latlng: () => number;
@@ -53,9 +57,11 @@ const Map = () => {
   const [isMarked, setIsMarked] = useState(false);
   const [openForm, setOpenForm] = useState(false);
 
+  const [markers, setMarkers] = useState<KakaoMarker[]>([]);
+
   const [markerInfoModal, setMarkerInfoModal] = useState(false);
 
-  const [currentMarkerInfo, setCurrentMarkerInfo] = useState<Marker | null>(
+  const [currentMarkerInfo, setCurrentMarkerInfo] = useState<MarkerInfo | null>(
     null
   );
 
@@ -105,7 +111,16 @@ const Map = () => {
 
             window.kakao.maps.event.addListener(newMarker, "click", () => {
               setMarkerInfoModal(true);
-              setCurrentMarkerInfo(res?.data[i]);
+              setCurrentMarkerInfo({
+                ...res?.data[i],
+                index: i,
+              });
+            });
+
+            setMarkers((prev) => {
+              const copy = [...prev];
+              copy.push(newMarker);
+              return copy;
             });
           }
         })
@@ -191,7 +206,11 @@ const Map = () => {
       )}
       {markerInfoModal && (
         <BasicModal setState={setMarkerInfoModal}>
-          <MarkerInfoModal currentMarkerInfo={currentMarkerInfo as Marker} />
+          <MarkerInfoModal
+            currentMarkerInfo={currentMarkerInfo as MarkerInfo}
+            setMarkerInfoModal={setMarkerInfoModal}
+            markers={markers}
+          />
         </BasicModal>
       )}
       <Button
diff --git a/frontend/src/components/MarkerInfoModal/MarkerInfoModal.style.ts b/frontend/src/components/MarkerInfoModal/MarkerInfoModal.style.ts
index 8d957c75..af2267b6 100644
--- a/frontend/src/components/MarkerInfoModal/MarkerInfoModal.style.ts
+++ b/frontend/src/components/MarkerInfoModal/MarkerInfoModal.style.ts
@@ -5,6 +5,9 @@ export const imageWrap = styled.div`
     object-fit: cover;
     background-position: center;
     background-size: cover;
+
+    border-radius: 1rem;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   }
 `;
 
diff --git a/frontend/src/components/MarkerInfoModal/MarkerInfoModal.tsx b/frontend/src/components/MarkerInfoModal/MarkerInfoModal.tsx
index 2ffb5340..2a274fcc 100644
--- a/frontend/src/components/MarkerInfoModal/MarkerInfoModal.tsx
+++ b/frontend/src/components/MarkerInfoModal/MarkerInfoModal.tsx
@@ -1,20 +1,66 @@
+import RemoveIcon from "@mui/icons-material/Remove";
+import { IconButton, Tooltip } from "@mui/material";
 import { useEffect } from "react";
-import type { Marker } from "../Map/Map";
+import DeleteMarker from "../../api/markers/DeleteMarker";
 import noimg from "../../assets/images/noimg.png";
+import useToastStore from "../../store/useToastStore";
+import useUserStore from "../../store/useUserStore";
+import type { KakaoMarker } from "../../types/KakaoMap.types";
+import ActionButton from "../ActionButton/ActionButton";
+import type { MarkerInfo } from "../Map/Map";
 import * as Styled from "./MarkerInfoModal.style";
 
 interface Props {
-  currentMarkerInfo: Marker;
+  currentMarkerInfo: MarkerInfo;
+  setMarkerInfoModal: React.Dispatch<React.SetStateAction<boolean>>;
+  markers: KakaoMarker[];
 }
 
-const MarkerInfoModal = ({ currentMarkerInfo }: Props) => {
+const MarkerInfoModal = ({
+  currentMarkerInfo,
+  setMarkerInfoModal,
+  markers,
+}: Props) => {
+  const userState = useUserStore();
+  const toastState = useToastStore();
+
   useEffect(() => {
+    toastState.close();
+
     if (currentMarkerInfo.photos) {
       console.log(currentMarkerInfo.photos[0].photoUrl);
     }
+
+    console.log(currentMarkerInfo);
   }, []);
+
+  const handleDelete = () => {
+    DeleteMarker(currentMarkerInfo.markerId).then((res) => {
+      console.log(res);
+      toastState.open();
+      markers[currentMarkerInfo.index].setMap(null);
+      setMarkerInfoModal(false);
+    });
+  };
+
   return (
     <div>
+      {userState.user.user.userId === currentMarkerInfo.userId && (
+        <Tooltip title="삭제하기" arrow disableInteractive>
+          <IconButton
+            onClick={handleDelete}
+            aria-label="delete"
+            sx={{
+              position: "absolute",
+              top: ".4rem",
+              right: ".4rem",
+            }}
+          >
+            <RemoveIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+
       <Styled.imageWrap>
         <img
           src={
@@ -23,11 +69,12 @@ const MarkerInfoModal = ({ currentMarkerInfo }: Props) => {
               : noimg
           }
           alt=""
-          width={"80%"}
-          height={250}
+          width={"90%"}
+          height={300}
         />
       </Styled.imageWrap>
       <Styled.description>{currentMarkerInfo.description}</Styled.description>
+      <ActionButton bg="black">리뷰 보기</ActionButton>
     </div>
   );
 };