Feature/157

src/apis/apiClient.ts

@@ -45,17 +45,21 @@ apiClient.interceptors.response.use(
     const originalRequest = error.config;
 
     const isLoginRequest = originalRequest?.url?.includes("/users/login");
-    if (error.response.status === 401 && !originalRequest.__isRetryRequest && !isLoginRequest) {
+    if (
+      error.response.status === 401 &&
+      !originalRequest.__isRetryRequest &&
+      !isLoginRequest
+    ) {
       try {
         originalRequest.__isRetryRequest = true;
 
         const deviceId = localStorage.getItem("deviceId");
 
-const refreshResponse = await reissueTokenClient.get("/users/reissue", {
-  headers: {
-    "X-Device-Id": deviceId ?? "",
-  },
-});;
+        const refreshResponse = await reissueTokenClient.get("/users/reissue", {
+          headers: {
+            "X-Device-Id": deviceId ?? "",
+          },
+        });
         const newAccessToken = refreshResponse?.data?.data?.accessToken ?? null;
 
         if (!newAccessToken) {
@@ -71,7 +75,7 @@ const refreshResponse = await reissueTokenClient.get("/users/reissue", {
         return axios(originalRequest);
       } catch (refreshError) {
         sessionStorage.removeItem("_ZA");
-        toast.error("인증이 만료되었습니다. 다시 로그인하세요."); 
+        toast.error("인증이 만료되었습니다. 다시 로그인하세요.");
         window.location.replace("/sign-in");
         return Promise.reject(refreshError);
       }

src/components/DeleteConfirm/DeleteConfirmModal.tsx

@@ -1,66 +1,79 @@
 import {
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Button,
-    IconButton,
-    Typography,
-  } from "@mui/material";
-  import CloseIcon from "@mui/icons-material/Close";
-
-  interface DeleteConfirmModalProps {
-    open: boolean;
-    onConfirm: () => void;
-    onCancel: () => void;
-  }
-
-  const DeleteConfirmModal = ({ open, onConfirm, onCancel }: DeleteConfirmModalProps) => {
-    return (
-        <Dialog
-        open={open}
-        onClose={onCancel}
-        PaperProps={{
-          sx: {
-            width: "400px",       // 원하는 고정 너비
-            maxWidth: "90%",      // 모바일 대응
-            borderRadius: 2,
-          },
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+
+interface DeleteConfirmModalProps {
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  category: string;
+}
+
+const DeleteConfirmModal = ({
+  open,
+  onConfirm,
+  onCancel,
+  category = "",
+}: DeleteConfirmModalProps) => {
+  return (
+    <Dialog
+      open={open}
+      onClose={onCancel}
+      PaperProps={{
+        sx: {
+          width: "400px", // 원하는 고정 너비
+          maxWidth: "90%", // 모바일 대응
+          borderRadius: 2,
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
         }}
       >
-        <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-          <Typography fontWeight="bold">경고</Typography>
-          <IconButton edge="end" onClick={onCancel}>
-            <CloseIcon />
-          </IconButton>
-        </DialogTitle>
-
-        <DialogContent>
-          <Typography textAlign="center" mt={1} mb={2}>
-            정말 삭제하시겠습니까?
-          </Typography>
-        </DialogContent>
-
-        <DialogActions sx={{ justifyContent: "center", mb: 2 }}>
-          <Button
-            onClick={onConfirm}
-            variant="contained"
-            color="error"
-            sx={{ minWidth: 100 }}
-          >
-            삭제
-          </Button>
-          <Button
-            onClick={onCancel}
-            variant="outlined"
-            sx={{ minWidth: 100 }}
-          >
-            취소
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-  };
-  
-  export default DeleteConfirmModal;
-  
+        <Typography variant="h6" fontWeight="bold">
+          {category} 삭제
+        </Typography>
+        <IconButton edge="end" onClick={onCancel}>
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent>
+        <Typography textAlign="center" mt={1} mb={2}>
+          이 {category}을 정말 삭제할까요?
+        </Typography>
+      </DialogContent>
+
+      <DialogActions sx={{ justifyContent: "center", mb: 2 }}>
+        <Button
+          onClick={onConfirm}
+          variant="contained"
+          color="error"
+          sx={{
+            minWidth: 100,
+            boxShadow: "none",
+            "&:hover": { boxShadow: "none" },
+          }}
+        >
+          삭제
+        </Button>
+        <Button onClick={onCancel} variant="outlined" sx={{ minWidth: 100 }}>
+          취소
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DeleteConfirmModal;

src/components/PageHeader/PageHeader.tsx

@@ -11,7 +11,6 @@ import { Link, useNavigate } from "react-router-dom";
 import useUserStore from "@stores/useUserStore";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import apiClient from "@apis/apiClient";
-import ArrowBackIcon from "@mui/icons-material/ArrowBackIos";
 
 interface PageHeaderProps {
   title: string;
@@ -36,11 +35,11 @@ const PageHeader = ({ title, userName, action }: PageHeaderProps) => {
     try {
       const accessToken = sessionStorage.getItem("_ZA");
       const deviceId = localStorage.getItem("deviceId");
-  
+
       if (!accessToken || !deviceId) {
         throw new Error("로그아웃 정보가 부족합니다.");
       }
-  
+
       await apiClient.post(
         "/users/logout",
         {},
@@ -52,12 +51,11 @@ const PageHeader = ({ title, userName, action }: PageHeaderProps) => {
           withCredentials: true,
         }
       );
-  
+
       sessionStorage.removeItem("_ZA");
       clearUser();
       navigate("/sign-in");
     } catch (error) {
-      console.error("로그아웃 실패", error);      
       sessionStorage.removeItem("_ZA");
       clearUser();
       navigate("/sign-in");
@@ -83,16 +81,6 @@ const PageHeader = ({ title, userName, action }: PageHeaderProps) => {
       }}
     >
       <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
-        {
-          <IconButton
-            onClick={() => navigate(-1)}
-            sx={{
-              color: "#222222",
-            }}
-          >
-            <ArrowBackIcon />
-          </IconButton>
-        }
         <Typography
           variant="h5"
           component="h1"

src/components/Toast/Toast.tsx

@@ -0,0 +1,37 @@
+import { toast, ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+interface ToastProps {
+  message: string;
+  type: "success" | "error";
+}
+
+export const showToast = ({ message, type }: ToastProps) => {
+  toast[type](message, {
+    autoClose: 2000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    style: {
+      marginTop: "6px",
+      top: "40px",
+    },
+  });
+};
+
+export const ToastProvider = () => {
+  return (
+    <ToastContainer
+      autoClose={2000}
+      hideProgressBar={false}
+      newestOnTop
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover
+      theme="light"
+    />
+  );
+};