refactor: 명함 수정 삭제 동작

src/main/resources/static/css/card/card-detail.css

@@ -156,3 +156,35 @@
 .add-to-group-button:hover {
     background-color: var(--cnu-orange);
 }
+
+
+/* Base button styling */
+.button {
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+/* Edit button styling */
+.edit-button.button {
+    background-color: grey; /* Green */
+    color: white;
+}
+
+.edit-button.button:hover {
+    background-color: #16a085; /* Darker green */
+}
+
+/* Delete button styling */
+.delete-button.button {
+    background-color: grey; /* Red */
+    color: white;
+    margin-left: 10px; /* Spacing between buttons */
+}
+
+.delete-button.button:hover {
+    background-color: #16a085; /* Darker red */
+}

src/main/resources/static/js/card/card-detail.js

@@ -0,0 +1,38 @@
+// Edit button functionality
+const editButton = document.querySelector('.edit-button');
+if (editButton) {
+    editButton.addEventListener('click', function(event) {
+        const cardId = this.getAttribute("data-id");
+        console.log(cardId)
+        window.location.href = `/cards/${cardId}/edit`;  // Redirect to edit page
+    });
+}
+
+// Delete button functionality
+const deleteButton = document.querySelector('.delete-button');
+if (deleteButton) {
+    deleteButton.addEventListener('click', function(event) {
+        const cardId = this.getAttribute("data-id");
+
+        if (confirm("정말로 이 명함을 삭제하시겠습니까?")) {
+            fetch(`/cards/${cardId}`, {
+                method: "DELETE",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+            })
+            .then(response => {
+                if (response.ok) {
+                    handleSuccess("명함이 삭제되었습니다.", 400);
+                    window.location.href = `/cards/manage`
+                } else {
+                    handleError("명함 삭제에 실패했습니다.", 300);
+                }
+            })
+            .catch(error => {
+                console.error("명함 삭제 실패:", error);
+                handleError("명함 삭제에 실패했습니다.", 300);
+            });
+        }
+    });
+}

src/main/resources/templates/card-detail.html

@@ -49,6 +49,10 @@ <h3>그룹 선택</h3>
     <!-- 명함 -->
     <div th:replace="card :: cardSection"></div>
 
+    <div class = "buttons">
+        <button class="edit-button button" th:attr="data-id=${card.id}">수정</button>
+        <button class="delete-button button" th:attr="data-id=${card.id}">삭제</button>
+    </div>
     <div class="share-options" id="share-options" style="display: none;">
         <button id="kakao-share-btn" class="share-button-icon">
             <img th:src="@{/images/kakaotalk-icon.svg}" alt="KakaoTalk Icon" class="icon">
@@ -89,8 +93,10 @@ <h3>그룹 선택</h3>
         }
     }
 </script>
+</body>
+
+<script th:src="@{/js/card/card-detail.js}"></script>
 <script th:src="@{/js/card/card-share.js}"></script>
 <script th:src="@{/js/wallet/wallet-add.js}"></script>
 
-</body>
 </html>