From 6edfa729df77e3e4ca5370c8201bcb4ad1f8e3ae Mon Sep 17 00:00:00 2001
From: howu <67588757+choihooo@users.noreply.github.com>
Date: Thu, 28 Nov 2024 20:19:10 +0900
Subject: [PATCH] =?UTF-8?q?[feature]=20=EB=82=B4=20=ED=95=91=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20(#95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/components/PingInformation.tsx       | 56 +++++++++++++++++--
 1 file changed, 50 insertions(+), 6 deletions(-)

diff --git a/fe/src/app/event-maps/[id]/components/PingInformation.tsx b/fe/src/app/event-maps/[id]/components/PingInformation.tsx
index dd89210..191b2b3 100644
--- a/fe/src/app/event-maps/[id]/components/PingInformation.tsx
+++ b/fe/src/app/event-maps/[id]/components/PingInformation.tsx
@@ -94,7 +94,49 @@ export default function PingInformaion() {
       return null;
     }
   };
+  const deletePingApi = async () => {
+    try {
+      const token = localStorage.getItem("authToken");
+
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_BASE_URL}/pings/member`,
+        {
+          method: "DELETE",
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            sid: selectedPing?.sid,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          const errorResponse = await response.json();
+          if (errorResponse.subCode === 4) {
+            const newAccessToken = await reissueAccessToken(token);
+            if (newAccessToken) {
+              return await deletePingApi();
+            }
+            openLoginModal();
+            return null;
+          }
+        }
+        openLoginModal();
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
 
+      toggleTrigger();
+      setLastUpdated(Date.now());
+      console.log("삭제 성공");
+      return true;
+    } catch (error) {
+      console.error("삭제 중 오류 발생:", error);
+      return null;
+    }
+  };
   const handleOpenLoginModal = () => {
     sendPingApi();
     console.log("Button clicked: Open login modal");
@@ -131,12 +173,14 @@ export default function PingInformaion() {
           </div>
 
           {isAlreadyPing ? (
-            <Image
-              src="/svg/alreadyPing.svg"
-              alt="이미 내 핑"
-              width={24}
-              height={24}
-            />
+            <button type="button" onClick={deletePingApi}>
+              <Image
+                src="/svg/alreadyPing.svg"
+                alt="내 핑에서 삭제"
+                width={24}
+                height={24}
+              />
+            </button>
           ) : (
             <button type="button" onClick={handleOpenLoginModal}>
               <Image