From d902c01eed9471e75e8423b37f9839be0b9bd283 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B1=84=EC=A7=80=EC=9B=90?= <dev.julia.chae@gmail.com>
Date: Fri, 16 May 2025 00:57:30 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AC=B8=EC=9E=90=20=ED=85=9C=ED=94=8C?=
 =?UTF-8?q?=EB=A6=BF=20=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20api=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/BulkMessagePage/BulkMessagePage.tsx |  7 --
 .../MessageTemplatePage.tsx                   | 70 ++++++++++++++++++-
 2 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/src/pages/BulkMessagePage/BulkMessagePage.tsx b/src/pages/BulkMessagePage/BulkMessagePage.tsx
index 4199538..92ab17e 100644
--- a/src/pages/BulkMessagePage/BulkMessagePage.tsx
+++ b/src/pages/BulkMessagePage/BulkMessagePage.tsx
@@ -766,13 +766,6 @@ const BulkMessagePage = () => {
                   borderRadius: "20px",
                 },
               }}
-              SelectProps={{
-                sx: {
-                  "& .MuiOutlinedInput-notchedOutline": {
-                    borderRadius: "20px",
-                  },
-                },
-              }}
               MenuProps={{
                 PaperProps: {
                   borderRadius: "20px",
diff --git a/src/pages/MessageTemplatePage/MessageTemplatePage.tsx b/src/pages/MessageTemplatePage/MessageTemplatePage.tsx
index 616f96c..03dbcc1 100644
--- a/src/pages/MessageTemplatePage/MessageTemplatePage.tsx
+++ b/src/pages/MessageTemplatePage/MessageTemplatePage.tsx
@@ -12,7 +12,7 @@ import {
   Select,
   MenuItem,
 } from "@mui/material";
-import { toast } from "react-toastify";
+import DeleteConfirmModal from "@components/DeleteConfirm/DeleteConfirmModal";
 import PageHeader from "@components/PageHeader/PageHeader";
 import apiClient from "@apis/apiClient";
 import useUserStore from "@stores/useUserStore";
@@ -55,6 +55,7 @@ const MessageTemplatePage = () => {
     { id: 3, name: "계약 만료", category: "EXPIRED_NOTI", templates: [] },
   ]);
   const [isLoading, setIsLoading] = useState(false);
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
 
   // 변수 목록 정의
   const VARIABLE_LIST = ALLOWED_VARIABLES.map((key) => ({ label: key, key }));
@@ -156,6 +157,44 @@ const MessageTemplatePage = () => {
     }
   };
 
+  // 템플릿 삭제 확인 다이얼로그 열기
+  const handleOpenDeleteDialog = () => {
+    setOpenDeleteDialog(true);
+  };
+
+  // 템플릿 삭제 기능
+  const handleDeleteTemplate = async () => {
+    if (!selectedTemplate) return;
+
+    try {
+      setIsLoading(true);
+      const response = await apiClient.delete(
+        `/templates/${selectedTemplate.uid}`
+      );
+
+      if (response.data.success) {
+        fetchTemplates();
+        handleAddNewTemplate(); // 폼 초기화
+        setOpenDeleteDialog(false);
+        showToast({
+          message: "템플릿을 삭제했습니다.",
+          type: "success",
+        });
+      }
+    } catch (error) {
+      console.error("Error deleting template:", error);
+      const err = error as { response?: { data?: { message?: string } } };
+      showToast({
+        message:
+          err?.response?.data?.message ||
+          "템플릿 삭제 중 오류가 발생했습니다. 다시 시도해주세요.",
+        type: "error",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   // Move fetchTemplates outside useEffect so it can be reused
   const fetchTemplates = async () => {
     try {
@@ -604,7 +643,7 @@ const MessageTemplatePage = () => {
             sx={{
               display: "flex",
               justifyContent: "flex-end",
-              gap: "28px",
+              gap: "12px",
               mt: 2,
             }}
           >
@@ -624,6 +663,24 @@ const MessageTemplatePage = () => {
                 취소
               </Button>
             )}
+            {/* 일반 템플릿이고 선택된 템플릿이 있을 때만 삭제 버튼 표시 */}
+            {selectedTemplate && selectedTemplate.category === "GENERAL" && (
+              <Button
+                variant="outlined"
+                color="error"
+                onClick={handleOpenDeleteDialog}
+                sx={{
+                  borderColor: "#FF5050",
+                  color: "#FF5050",
+                  "&:hover": {
+                    borderColor: "#FF3333",
+                    backgroundColor: "rgba(255, 80, 80, 0.04)",
+                  },
+                }}
+              >
+                삭제하기
+              </Button>
+            )}
             <Button
               variant="contained"
               onClick={
@@ -638,7 +695,9 @@ const MessageTemplatePage = () => {
               }
               sx={{
                 backgroundColor: "#164F9E",
+                boxShadow: "none",
                 "&:hover": {
+                  boxShadow: "none",
                   backgroundColor: "#0D3B7A",
                 },
                 "&.Mui-disabled": {
@@ -652,6 +711,13 @@ const MessageTemplatePage = () => {
           </Box>
         </Paper>
       </Box>
+
+      <DeleteConfirmModal
+        open={openDeleteDialog}
+        onConfirm={handleDeleteTemplate}
+        onCancel={() => setOpenDeleteDialog(false)}
+        category="문자 템플릿"
+      />
     </Box>
   );
 };