From 710788bf1278a6ccaef21b28aa227b9310647241 Mon Sep 17 00:00:00 2001
From: HaegyeongKim01 <haegyeong.kim01@gmail.com>
Date: Fri, 15 Nov 2024 06:53:08 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=AA=85=ED=95=A8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EC=82=AD=EC=A0=9C=20=EB=8F=99=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/static/css/card/card-detail.css | 32 ++++++++++++++++
 .../resources/static/js/card/card-detail.js   | 38 +++++++++++++++++++
 src/main/resources/templates/card-detail.html |  8 +++-
 3 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 src/main/resources/static/js/card/card-detail.js

diff --git a/src/main/resources/static/css/card/card-detail.css b/src/main/resources/static/css/card/card-detail.css
index 347ce56..415cd35 100644
--- a/src/main/resources/static/css/card/card-detail.css
+++ b/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 */
+}
\ No newline at end of file
diff --git a/src/main/resources/static/js/card/card-detail.js b/src/main/resources/static/js/card/card-detail.js
new file mode 100644
index 0000000..a866c61
--- /dev/null
+++ b/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);
+            });
+        }
+    });
+}
diff --git a/src/main/resources/templates/card-detail.html b/src/main/resources/templates/card-detail.html
index 01810c0..55644a5 100644
--- a/src/main/resources/templates/card-detail.html
+++ b/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>