diff --git a/src/components/AnswerContent/index.jsx b/src/components/AnswerContent/index.jsx
index fb1544b..151c72b 100644
--- a/src/components/AnswerContent/index.jsx
+++ b/src/components/AnswerContent/index.jsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import formatCreatedAt from 'utils/dateUtils';
 import { postAnswer } from 'api/answers';
 
-const AnswerContent = ({ answer, name, imageSource, id, onAnswerSubmit }) => {
+const AnswerContent = ({ answer, name, imageSource, id, onAnswerSubmit, setIsKebabLoading, setIsToast }) => {
   AnswerContent.propTypes = {
     answer: PropTypes.shape({
       id: PropTypes.number.isRequired,
@@ -16,6 +16,8 @@ const AnswerContent = ({ answer, name, imageSource, id, onAnswerSubmit }) => {
     imageSource: PropTypes.string,
     id: PropTypes.number.isRequired,
     onAnswerSubmit: PropTypes.func.isRequired,
+    setIsKebabLoading: PropTypes.func.isRequired,
+    setIsToast: PropTypes.func.isRequired,
   };
 
   AnswerContent.defaultProps = {
@@ -45,15 +47,21 @@ const AnswerContent = ({ answer, name, imageSource, id, onAnswerSubmit }) => {
 
     let response;
     try {
+      setIsKebabLoading(true);
       setIsLoading(true);
       response = await postAnswer(id, postBody);
       setUpdatedAnswer(response);
       onAnswerSubmit(id, response);
+      setIsToast('등록');
     } catch (err) {
       // eslint-disable-next-line
       console.error(err);
     } finally {
+      setIsKebabLoading(false);
       setIsLoading(false);
+      setTimeout(() => {
+        setIsToast(null);
+      }, 3000);
     }
   };
 
diff --git a/src/components/AnswerDelete/index.jsx b/src/components/AnswerDelete/index.jsx
index 4603c3a..79584aa 100644
--- a/src/components/AnswerDelete/index.jsx
+++ b/src/components/AnswerDelete/index.jsx
@@ -3,18 +3,38 @@ import { ReactComponent as Close } from 'assets/images/icons/ic_Close.svg';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import ConfirmModal from 'components/ConfirmModal'; // Import the modal component
 
-const AnswerDelete = ({ answerId, onAnswerDeleted }) => {
+const AnswerDelete = ({ id, answerId, onAnswerDeleted, onKebabClick, setIsKebabLoading, setIsToast, editId, setEditId }) => {
   AnswerDelete.propTypes = {
+    id: PropTypes.number.isRequired,
     answerId: PropTypes.number.isRequired,
     onAnswerDeleted: PropTypes.func.isRequired,
+    onKebabClick: PropTypes.func.isRequired,
+    setIsKebabLoading: PropTypes.func.isRequired,
+    setIsToast: PropTypes.func.isRequired,
+    editId: PropTypes.number.isRequired,
+    setEditId: PropTypes.func.isRequired,
   };
 
   const [isDeleting, setIsDeleting] = useState(false);
-  // const [error, setError] = useState(null);
   const navigate = useNavigate();
 
-  const handleAnswerDelete = async () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const handleDelete = async () => {
+    setShowModal(true); // Show the modal when delete is clicked
+  };
+
+  const handleModalCancel = () => {
+    onKebabClick(id);
+    setShowModal(false); // Close the modal if canceled
+  };
+
+  const handleModalConfirm = async () => {
+    onKebabClick(id);
+    setIsKebabLoading(true);
+    setShowModal(false); // Close the modal
     setIsDeleting(true);
 
     try {
@@ -23,23 +43,34 @@ const AnswerDelete = ({ answerId, onAnswerDeleted }) => {
         throw new Error('답변 삭제 중 오류가 발생했습니다.');
       }
       onAnswerDeleted(answerId);
+      setIsToast('답변');
     } catch (err) {
       navigate('/');
     } finally {
       setIsDeleting(false);
+      setIsKebabLoading(false);
+      if (editId !== null) {
+        setEditId(null);
+      }
+      setTimeout(() => {
+        setIsToast(null);
+      }, 3000);
     }
   };
 
   return (
-    <button
-      type='button'
-      className='flex justify-center items-center gap-2 rounded-lg w-[103px] h-[30px] text-gray-50 hover:text-gray-60 hover:bg-gray-20'
-      disabled={isDeleting}
-      onClick={handleAnswerDelete}
-    >
-      <Close className='w-3.5 h-3.5 fill-current' />
-      <p>답변삭제</p>
-    </button>
+    <>
+      <button
+        type='button'
+        className='flex justify-center items-center gap-2 rounded-lg w-[103px] h-[30px] text-gray-50 hover:text-blue-50 hover:bg-gray-20'
+        disabled={isDeleting}
+        onClick={handleDelete}
+      >
+        <Close className='w-3.5 h-3.5 fill-current' />
+        <p>답변삭제</p>
+      </button>
+      <ConfirmModal isOpen={showModal} onConfirm={handleModalConfirm} onCancel={handleModalCancel} message='답변을 삭제하시겠습니까?' />
+    </>
   );
 };
 
diff --git a/src/components/AnswerEdit/index.jsx b/src/components/AnswerEdit/index.jsx
index b6f1a6f..c20af6d 100644
--- a/src/components/AnswerEdit/index.jsx
+++ b/src/components/AnswerEdit/index.jsx
@@ -2,21 +2,26 @@ import PropTypes from 'prop-types';
 import { ReactComponent as Edit } from 'assets/images/icons/ic_Edit.svg';
 
 // eslint-disable-next-line
-const AnswerEdit = ({ id, setEditId, answerId }) => {
+const AnswerEdit = ({ id, editId, setEditId, answerId, onKebabClick }) => {
   AnswerEdit.propTypes = {
     id: PropTypes.number.isRequired,
+    editId: PropTypes.number.isRequired,
     setEditId: PropTypes.func.isRequired,
+    onKebabClick: PropTypes.func.isRequired,
   };
 
   const handleEdit = () => {
     setEditId(answerId);
+    onKebabClick(id);
   };
 
   return (
-    <button type='button' className='flex justify-center items-center gap-2 rounded-lg w-[103px] h-[30px] text-gray-50 hover:text-gray-60 hover:bg-gray-20' onClick={handleEdit}>
-      <Edit className='w-3.5 h-3.5 fill-current' />
-      답변수정
-    </button>
+    editId === null && (
+      <button type='button' className='flex justify-center items-center gap-2 rounded-lg w-[103px] h-[30px] text-gray-50 hover:text-blue-50 hover:bg-gray-20' onClick={handleEdit}>
+        <Edit className='w-3.5 h-3.5 fill-current' />
+        답변수정
+      </button>
+    )
   );
 };
 
diff --git a/src/components/AnswerEditForm/index.jsx b/src/components/AnswerEditForm/index.jsx
index 74d0b6e..49b2cbd 100644
--- a/src/components/AnswerEditForm/index.jsx
+++ b/src/components/AnswerEditForm/index.jsx
@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { putAnswer } from 'api/answers';
+import { ReactComponent as Close } from 'assets/images/icons/ic_Close.svg';
+import ConfirmModal from 'components/ConfirmModal';
 
 // eslint-disable-next-line
-const AnswerEditForm = ({ answer, name, imageSource, id, setEditId, setQuestionList }) => {
+const AnswerEditForm = ({ answer, name, imageSource, id, setEditId, setQuestionList, setIsKebabLoading, setIsToast }) => {
   AnswerEditForm.propTypes = {
     answer: PropTypes.shape({
       id: PropTypes.number.isRequired,
@@ -14,6 +16,8 @@ const AnswerEditForm = ({ answer, name, imageSource, id, setEditId, setQuestionL
     name: PropTypes.string.isRequired,
     imageSource: PropTypes.string,
     id: PropTypes.number.isRequired,
+    setIsKebabLoading: PropTypes.func.isRequired,
+    setIsToast: PropTypes.func.isRequired,
   };
 
   AnswerEditForm.defaultProps = {
@@ -24,6 +28,7 @@ const AnswerEditForm = ({ answer, name, imageSource, id, setEditId, setQuestionL
   const [textareaValue, setTextareaValue] = useState(answer.content === null || answer.content === 'reject' ? '' : answer.content);
   const [isLoading, setIsLoading] = useState(false);
   const [isValid, setIsValid] = useState(false);
+  const [showModal, setShowModal] = useState(false);
 
   const handleTextareaChange = (event) => {
     const text = event.target.value;
@@ -35,11 +40,13 @@ const AnswerEditForm = ({ answer, name, imageSource, id, setEditId, setQuestionL
   const handleAnswerPatch = async (e) => {
     e.preventDefault();
     try {
+      setIsKebabLoading(true);
       setIsLoading(true);
       const result = await putAnswer(answer.id, {
         content: textareaValue, // textareaValue에서 내용을 가져옵니다.
         isRejected: false, // 필요하다면 다른 데이터도 추가 가능합니다.
       });
+      setIsToast('수정');
       setQuestionList((prevQuestions) =>
         prevQuestions.map((question) => {
           if (question.id === id) {
@@ -51,15 +58,32 @@ const AnswerEditForm = ({ answer, name, imageSource, id, setEditId, setQuestionL
     } catch (err) {
       // handle error here (e.g., show error message)
     } finally {
+      setIsKebabLoading(false);
       setIsLoading(false);
       setEditId(null);
+      setTimeout(() => {
+        setIsToast(null);
+      }, 3000);
     }
   };
 
+  const onCancelClick = () => {
+    setShowModal(true);
+  };
+
+  const handleModalCancel = () => {
+    setShowModal(false);
+  };
+
+  const handleModalConfirm = () => {
+    setShowModal(false);
+    setEditId(null);
+  };
+
   const renderProfileImg = () => <img src={imageSource} alt={`${name}의 프로필`} className='w-[32px] h-[32px] md:w-[48px] md:h-[48px] rounded-full object-cover' />;
 
   const renderAnswerForm = () => (
-    <form onSubmit={handleAnswerPatch} className='flex w-full flex-col gap-[8px]'>
+    <form onSubmit={handleAnswerPatch} className='relative flex w-full flex-col gap-[8px]'>
       <textarea
         className='w-full h-[186px] resize-none rounded-lg border-none p-[16px] bg-gray-20 text-base leading-[22px] text-secondary-900 placeholder:text-base placeholder:leading-[22px] placeholder:text-gray-40 focus:outline-brown-40'
         placeholder='답변을 입력해주세요'
@@ -73,13 +97,21 @@ const AnswerEditForm = ({ answer, name, imageSource, id, setEditId, setQuestionL
   );
 
   return (
-    <div className='flex gap-[12px]'>
-      {renderProfileImg()}
-      <div className='flex-1'>
-        <p className='mb-[4px] mr-[8px] inline-block text-sm leading-[18px] md:text-lg md:leading-[24px]'>{name}</p>
-        {renderAnswerForm()}
+    <>
+      <div className='flex gap-[12px]'>
+        {renderProfileImg()}
+        <div className='flex-1'>
+          <div className='flex justify-between items-center mb-[4px]'>
+            <p className='mr-[8px] inline-block text-sm leading-[18px] md:text-lg md:leading-[24px]'>{name}</p>
+            <button type='button' className='mr-[4px] w-3 h-3 md:w-4 md:h-4 fill-current text-gray-50' onClick={onCancelClick}>
+              <Close className='w-3 h-3 md:w-4 md:h-4' />
+            </button>
+          </div>
+          {renderAnswerForm()}
+        </div>
       </div>
-    </div>
+      <ConfirmModal isOpen={showModal} onConfirm={handleModalConfirm} onCancel={handleModalCancel} message='수정 중인 답변이 있습니다. 취소하시겠습니까?' />
+    </>
   );
 };
 
diff --git a/src/components/AnswerRejection/index.jsx b/src/components/AnswerRejection/index.jsx
index 2b568fe..11b9f0d 100644
--- a/src/components/AnswerRejection/index.jsx
+++ b/src/components/AnswerRejection/index.jsx
@@ -3,10 +3,13 @@ import { useState } from 'react';
 import { postAnswer } from 'api/answers';
 import { ReactComponent as Rejection } from 'assets/images/icons/ic_Rejection.svg';
 
-const AnswerRejection = ({ id, setQuestionList }) => {
+const AnswerRejection = ({ id, setQuestionList, onKebabClick, setIsKebabLoading, setIsToast }) => {
   AnswerRejection.propTypes = {
     id: PropTypes.number.isRequired,
     setQuestionList: PropTypes.func.isRequired,
+    onKebabClick: PropTypes.func.isRequired,
+    setIsKebabLoading: PropTypes.func.isRequired,
+    setIsToast: PropTypes.func.isRequired,
   };
 
   const [isLoading, setIsLoading] = useState(false);
@@ -15,6 +18,8 @@ const AnswerRejection = ({ id, setQuestionList }) => {
   const handleRejection = async () => {
     const defaultContent = 'reject';
     try {
+      onKebabClick(id);
+      setIsKebabLoading(true);
       setIsLoading(true);
       setError(null);
 
@@ -31,10 +36,15 @@ const AnswerRejection = ({ id, setQuestionList }) => {
           return question;
         }),
       );
+      setIsToast('거절');
     } catch (err) {
       setError('답변 거절 중 오류가 발생했습니다.');
     } finally {
       setIsLoading(false);
+      setIsKebabLoading(false);
+      setTimeout(() => {
+        setIsToast(null);
+      }, 3000);
     }
   };
 
@@ -45,7 +55,7 @@ const AnswerRejection = ({ id, setQuestionList }) => {
   return (
     <button
       type='button'
-      className='flex justify-center items-center gap-2 rounded-lg w-[103px] h-[30px] text-gray-50 hover:text-gray-60 hover:bg-gray-20'
+      className='flex justify-center items-center gap-2 rounded-lg w-[103px] h-[30px] text-gray-50 hover:text-blue-50 hover:bg-gray-20'
       onClick={handleRejection}
       disabled={isLoading}
     >
diff --git a/src/components/ConfirmModal/index.jsx b/src/components/ConfirmModal/index.jsx
new file mode 100644
index 0000000..067decc
--- /dev/null
+++ b/src/components/ConfirmModal/index.jsx
@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+const ConfirmModal = ({ isOpen, onConfirm, onCancel, message }) => {
+  ConfirmModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    message: PropTypes.string.isRequired,
+  };
+
+  const modalRef = useRef(null);
+
+  // Close the modal if the user clicks outside of it
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (modalRef.current && !modalRef.current.contains(event.target)) {
+        onCancel(); // Close the modal if clicked outside
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onCancel]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className='modal-overlay fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50'>
+      <div
+        ref={modalRef}
+        className='fixed left-1/2 -translate-x-1/2 modal-content p-6 rounded-2xl bg-gray-20 shadow-2pt animate-slide-up-fade-modal'
+        role='dialog'
+        aria-labelledby='confirm-modal-title'
+      >
+        <h2 id='confirm-modal-title' className='text-center text-lg font-medium mb-4'>
+          {message}
+        </h2>
+        <div className='flex justify-center gap-4'>
+          <button type='button' onClick={onConfirm} className='bg-brown-40 text-white px-5 py-2 rounded-xl transition ease-in-out hover:-translate-y-1 hover:scale-105'>
+            확인
+          </button>
+          <button type='button' onClick={onCancel} className='bg-gray-300 text-black px-5 py-2 rounded-xl transition ease-in-out hover:-translate-y-1 hover:scale-105'>
+            취소
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmModal;
diff --git a/src/components/DeleteIdBtn/index.jsx b/src/components/DeleteIdBtn/index.jsx
index 1cec6de..aa2bbc0 100644
--- a/src/components/DeleteIdBtn/index.jsx
+++ b/src/components/DeleteIdBtn/index.jsx
@@ -14,7 +14,7 @@ const DeleteIdBtn = ({ onClick, id }) => {
     <div className='relative w-full max-w-[716px] min-w-[144px] h-[25px] md:h-[35px] mx-6 mb-1.5 md:mx-8 md:mb-[9px]'>
       <button
         type='button'
-        className='absolute right-0 w-[70px] min-w-[70px] h-[25px] md:w-[100px] md:h-[35px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] px-[17.5px] md:px-[24px] md:py-[5px] rounded-[200px] bg-brown-40 font-normal text-gray-10 text-[10px]/[25px] md:text-[15px]/[25px]'
+        className='absolute right-0 w-[70px] min-w-[70px] h-[25px] md:w-[100px] md:h-[35px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] px-[17.5px] md:px-[24px] md:py-[5px] rounded-[200px] bg-brown-40 font-normal text-gray-10 text-[10px]/[25px] md:text-[15px]/[25px] hover:scale-105'
         onClick={handleDelete}
       >
         삭제하기
diff --git a/src/components/Kebab/index.jsx b/src/components/Kebab/index.jsx
index 65bb775..2f10d21 100644
--- a/src/components/Kebab/index.jsx
+++ b/src/components/Kebab/index.jsx
@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import QuestionDelete from 'components/QuestionDelete';
 import AnswerRejection from 'components/AnswerRejection';
 import kebab from 'assets/images/icons/ic_Kebab.svg';
 import AnswerDelete from 'components/AnswerDelete';
 import AnswerEdit from 'components/AnswerEdit';
+import ConfirmModal from 'components/ConfirmModal';
 
-const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion, onAnswerDeleted, setQuestionList, setEditId, answerId }) => {
+const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion, onAnswerDeleted, setQuestionList, editId, setEditId, answerId, isKebabLoading, setIsKebabLoading, setIsToast }) => {
   Kebab.propTypes = {
     id: PropTypes.number.isRequired,
     isAnswer: PropTypes.shape({
@@ -21,15 +22,36 @@ const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion, onAn
     onDeleteQuestion: PropTypes.func.isRequired,
     onAnswerDeleted: PropTypes.func.isRequired,
     setQuestionList: PropTypes.func.isRequired,
+    editId: PropTypes.number.isRequired,
     setEditId: PropTypes.func.isRequired,
     answerId: PropTypes.number.isRequired,
+    isKebabLoading: PropTypes.bool.isRequired,
+    setIsKebabLoading: PropTypes.func.isRequired,
+    setIsToast: PropTypes.func.isRequired,
   };
 
+  const [showModal, setShowModal] = useState(false);
+
   const menuRef = useRef(null);
 
+  const handleModalCancel = () => {
+    onKebabClick(null);
+    setShowModal(false);
+  };
+
+  const handleModalConfirm = () => {
+    setShowModal(false);
+    setEditId(null);
+    onKebabClick(id);
+  };
+
   const handleMenuToggle = (e) => {
     e.stopPropagation();
-    onKebabClick(id);
+    if (editId !== null && (isAnswer === null || editId !== isAnswer.id)) {
+      setShowModal(true);
+    } else {
+      onKebabClick(id);
+    }
   };
 
   const onDeleteAnswer = () => {
@@ -53,37 +75,65 @@ const Kebab = ({ id, isAnswer, isKebabOpen, onKebabClick, onDeleteQuestion, onAn
   }, [id, onKebabClick]);
 
   return (
-    <div ref={menuRef} className='relative flex items-center'>
-      <button type='button' onClick={handleMenuToggle}>
-        <img src={kebab} alt='kebab' className='w-[26px] h-[26px]' />
-      </button>
-      {isKebabOpen && (
-        <menu type='button' className='absolute top-[26px] end-0 w-[103px] py-1 bg-gray-10 text-sm/[18px] font-medium border border-gray-30 rounded-lg shadow-2pt'>
-          {!isAnswer ? (
-            <>
-              <div className='flex justify-center items-center rounded-lg'>
-                <AnswerRejection id={id} setQuestionList={setQuestionList} />
-              </div>
-              <div className='flex justify-center items-center'>
-                <QuestionDelete id={id} onDeleteQuestion={onDeleteQuestion} />
-              </div>
-            </>
-          ) : (
-            <>
-              <div className='flex justify-center items-center'>
-                <AnswerEdit id={id} setEditId={setEditId} answerId={answerId} />
-              </div>
-              <div className='flex justify-center items-center'>
-                <QuestionDelete id={id} onDeleteQuestion={onDeleteQuestion} />
-              </div>
-              <div className='flex justify-center items-center'>
-                <AnswerDelete answerId={isAnswer.id} onAnswerDeleted={onDeleteAnswer} />
-              </div>
-            </>
-          )}
-        </menu>
-      )}
-    </div>
+    <>
+      <div ref={menuRef} className='relative flex items-center'>
+        <button type='button' onClick={handleMenuToggle} disabled={isKebabLoading}>
+          <img src={kebab} alt='kebab' className='w-[26px] h-[26px]' />
+        </button>
+        {isKebabOpen && (
+          <menu type='button' className='absolute top-[26px] end-0 w-[103px] py-1 bg-gray-10 text-sm/[18px] font-medium border border-gray-30 rounded-lg shadow-2pt'>
+            {!isAnswer ? (
+              <>
+                <div className='flex justify-center items-center rounded-lg'>
+                  <AnswerRejection id={id} setQuestionList={setQuestionList} onKebabClick={onKebabClick} setIsKebabLoading={setIsKebabLoading} setIsToast={setIsToast} />
+                </div>
+                <div className='flex justify-center items-center'>
+                  <QuestionDelete
+                    id={id}
+                    onDeleteQuestion={onDeleteQuestion}
+                    onKebabClick={onKebabClick}
+                    setIsKebabLoading={setIsKebabLoading}
+                    setIsToast={setIsToast}
+                    editId={editId}
+                    setEditId={setEditId}
+                  />
+                </div>
+              </>
+            ) : (
+              <>
+                <div className='flex justify-center items-center'>
+                  <AnswerEdit id={id} editId={editId} setEditId={setEditId} answerId={answerId} onKebabClick={onKebabClick} setIsKebabLoading={setIsKebabLoading} />
+                </div>
+                <div className='flex justify-center items-center'>
+                  <QuestionDelete
+                    id={id}
+                    onDeleteQuestion={onDeleteQuestion}
+                    onKebabClick={onKebabClick}
+                    setIsKebabLoading={setIsKebabLoading}
+                    setIsToast={setIsToast}
+                    editId={editId}
+                    setEditId={setEditId}
+                  />
+                </div>
+                <div className='flex justify-center items-center'>
+                  <AnswerDelete
+                    id={id}
+                    answerId={isAnswer.id}
+                    onAnswerDeleted={onDeleteAnswer}
+                    onKebabClick={onKebabClick}
+                    setIsKebabLoading={setIsKebabLoading}
+                    setIsToast={setIsToast}
+                    editId={editId}
+                    setEditId={setEditId}
+                  />
+                </div>
+              </>
+            )}
+          </menu>
+        )}
+      </div>
+      <ConfirmModal isOpen={showModal} onConfirm={handleModalConfirm} onCancel={handleModalCancel} message='수정 중인 답변이 있습니다. 취소하시겠습니까?' />
+    </>
   );
 };
 export default Kebab;
diff --git a/src/components/QnAList/index.jsx b/src/components/QnAList/index.jsx
index 47452c8..6db2c11 100644
--- a/src/components/QnAList/index.jsx
+++ b/src/components/QnAList/index.jsx
@@ -9,7 +9,7 @@ import Kebab from 'components/Kebab';
 import questionBoxImg from 'assets/images/img_QuestionBox.svg';
 import AnswerEditForm from 'components/AnswerEditForm';
 
-const QnAList = ({ name, imageSource, questionList, setQuestionList, onDeleteQuestion }) => {
+const QnAList = ({ name, imageSource, questionList, setQuestionList, onDeleteQuestion, setIsToast }) => {
   QnAList.propTypes = {
     name: PropTypes.string.isRequired,
     imageSource: PropTypes.string.isRequired,
@@ -31,12 +31,14 @@ const QnAList = ({ name, imageSource, questionList, setQuestionList, onDeleteQue
     ).isRequired,
     setQuestionList: PropTypes.func.isRequired,
     onDeleteQuestion: PropTypes.func.isRequired,
+    setIsToast: PropTypes.func.isRequired,
   };
 
   const [visibleMenuId, setVisibleMenuId] = useState(null);
   const location = useLocation();
   const isAnswerPage = location.pathname.startsWith('/post/') && location.pathname.includes('/answer');
   const [editId, setEditId] = useState(null);
+  const [isKebabLoading, setIsKebabLoading] = useState(false);
 
   const handleKebabClick = (id) => {
     setVisibleMenuId((prevVisibleMenuId) => (prevVisibleMenuId === id ? null : id));
@@ -80,8 +82,12 @@ const QnAList = ({ name, imageSource, questionList, setQuestionList, onDeleteQue
                     onDeleteQuestion={handleDeleteQuestion}
                     onAnswerDeleted={handleAnswerDeleted}
                     setQuestionList={setQuestionList}
+                    editId={editId}
                     setEditId={setEditId}
                     answerId={question.answer ? question.answer.id : null}
+                    isKebabLoading={isKebabLoading}
+                    setIsKebabLoading={setIsKebabLoading}
+                    setIsToast={setIsToast}
                   />
                 )}
               </div>
@@ -97,9 +103,19 @@ const QnAList = ({ name, imageSource, questionList, setQuestionList, onDeleteQue
                   id={question.id}
                   setEditId={setEditId}
                   setQuestionList={setQuestionList}
+                  setIsKebabLoading={setIsKebabLoading}
+                  setIsToast={setIsToast}
                 />
               ) : (
-                <AnswerContent answer={question.answer} name={name} imageSource={imageSource} id={question.id} onAnswerSubmit={handleAnswerSubmit} />
+                <AnswerContent
+                  answer={question.answer}
+                  name={name}
+                  imageSource={imageSource}
+                  id={question.id}
+                  onAnswerSubmit={handleAnswerSubmit}
+                  setIsKebabLoading={setIsKebabLoading}
+                  setIsToast={setIsToast}
+                />
               )}
 
               <CountFavorite like={question.like} dislike={question.dislike} id={question.id} />
diff --git a/src/components/QuestionDelete/index.jsx b/src/components/QuestionDelete/index.jsx
index 54ea43c..39ccd53 100644
--- a/src/components/QuestionDelete/index.jsx
+++ b/src/components/QuestionDelete/index.jsx
@@ -2,18 +2,38 @@ import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { deleteQuestion } from 'api/questions';
 import { ReactComponent as Close } from 'assets/images/icons/ic_Close.svg';
+import ConfirmModal from 'components/ConfirmModal';
 
-const QuestionDelete = ({ id, onDeleteQuestion }) => {
+const QuestionDelete = ({ id, onDeleteQuestion, onKebabClick, setIsKebabLoading, setIsToast, editId, setEditId }) => {
   QuestionDelete.propTypes = {
     id: PropTypes.number.isRequired,
     onDeleteQuestion: PropTypes.func.isRequired,
+    onKebabClick: PropTypes.func.isRequired,
+    setIsKebabLoading: PropTypes.func.isRequired,
+    setIsToast: PropTypes.func.isRequired,
+    editId: PropTypes.number.isRequired,
+    setEditId: PropTypes.func.isRequired,
   };
 
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
 
+  const [showModal, setShowModal] = useState(false);
+
   const handleDelete = async () => {
+    setShowModal(true); // Show the modal when delete is clicked
+  };
+
+  const handleModalCancel = () => {
+    onKebabClick(id);
+    setShowModal(false); // Close the modal if canceled
+  };
+
+  const handleModalConfirm = async () => {
+    setShowModal(false); // Close the moda
+
     try {
+      setIsKebabLoading(true);
       setIsLoading(true);
       setError(null);
 
@@ -22,23 +42,39 @@ const QuestionDelete = ({ id, onDeleteQuestion }) => {
         throw new Error('질문 삭제 중 오류가 발생했습니다.');
       }
 
+      setIsToast('질문');
+
       onDeleteQuestion(id);
     } catch (err) {
       setError('질문 삭제 중 오류가 발생했습니다.');
     } finally {
+      setIsKebabLoading(false);
       setIsLoading(false);
+      if (editId !== null) {
+        setEditId(null);
+      }
+      setTimeout(() => {
+        setIsToast(null);
+      }, 3000);
     }
   };
-
   if (error) {
     return <div>에러: {error}</div>;
   }
 
   return (
-    <button type='button' className='flex justify-center items-center gap-2 rounded-lg w-[103px] h-[30px] text-gray-50 hover:text-gray-60 hover:bg-gray-20' onClick={handleDelete} disabled={isLoading}>
-      <Close className='w-3.5 h-3.5 fill-current' />
-      질문삭제
-    </button>
+    <>
+      <button
+        type='button'
+        className='flex justify-center items-center gap-2 rounded-lg w-[103px] h-[30px] text-gray-50 hover:text-blue-50 hover:bg-gray-20'
+        onClick={handleDelete}
+        disabled={isLoading}
+      >
+        <Close className='w-3.5 h-3.5 fill-current' />
+        질문삭제
+      </button>
+      <ConfirmModal isOpen={showModal} onConfirm={handleModalConfirm} onCancel={handleModalCancel} message='질문을 삭제하시겠습니까?' />
+    </>
   );
 };
 
diff --git a/src/components/ToastSuccess/index.jsx b/src/components/ToastSuccess/index.jsx
new file mode 100644
index 0000000..6fd27ef
--- /dev/null
+++ b/src/components/ToastSuccess/index.jsx
@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+
+const ToastSuccess = ({ toastMsg }) => {
+  ToastSuccess.propTypes = {
+    toastMsg: PropTypes.string.isRequired,
+  };
+  if (toastMsg === '질문' || toastMsg === '답변') {
+    return (
+      <div className='fixed bottom-[100px] md:bottom-[60px] left-1/2 px-5 py-3 bg-black rounded-lg text-sm/[18px] font-medium text-white -translate-x-1/2 shadow-2pt animate-slide-up-fade-delete'>
+        {toastMsg}이 삭제되었습니다.
+      </div>
+    );
+  }
+  if (toastMsg === '수정') {
+    return (
+      <div className='fixed bottom-[100px] md:bottom-[60px] left-1/2 px-5 py-3 bg-black rounded-lg text-sm/[18px] font-medium text-white -translate-x-1/2 shadow-2pt animate-slide-up-fade-delete'>
+        {toastMsg}이 완료되었습니다.
+      </div>
+    );
+  }
+  if (toastMsg === '거절') {
+    return (
+      <div className='fixed bottom-[100px] md:bottom-[60px] left-1/2 px-5 py-3 bg-black rounded-lg text-sm/[18px] font-medium text-white -translate-x-1/2 shadow-2pt animate-slide-up-fade-delete'>
+        답변이 {toastMsg}되었습니다.
+      </div>
+    );
+  }
+  if (toastMsg === '등록') {
+    return (
+      <div className='fixed bottom-[100px] md:bottom-[60px] left-1/2 px-5 py-3 bg-black rounded-lg text-sm/[18px] font-medium text-white -translate-x-1/2 shadow-2pt animate-slide-up-fade-delete'>
+        답변이 {toastMsg}되었습니다.
+      </div>
+    );
+  }
+  return null;
+};
+export default ToastSuccess;
diff --git a/src/pages/Answer/index.jsx b/src/pages/Answer/index.jsx
index b0cb7fa..8f2ab13 100644
--- a/src/pages/Answer/index.jsx
+++ b/src/pages/Answer/index.jsx
@@ -8,6 +8,8 @@ import CountQuestion from 'components/CountQuestion';
 import QnAList from 'components/QnAList';
 import ToastDeleteId from 'components/ToastDeleteId';
 import questionBoxImg from 'assets/images/img_QuestionBox.svg';
+import ConfirmModal from 'components/ConfirmModal'; // Import the modal component
+import ToastDelete from 'components/ToastSuccess';
 
 const getDynamicLimit = () => {
   const screenHeight = window.innerHeight;
@@ -27,7 +29,8 @@ const Answer = () => {
   const [profile, setProfile] = useState(null);
   const [questionCount, setQuestionCount] = useState(0);
   const [error, setError] = useState(null);
-  const [isDelete, setIsDelete] = useState(false);
+  const [isDeleteId, setIsDeleteId] = useState(false);
+  const [isToast, setIsToast] = useState(null);
   const LocalId = localStorage.getItem('id');
 
   const navigate = useNavigate();
@@ -41,15 +44,27 @@ const Answer = () => {
 
   const observerRef = useRef(null);
 
+  const [showModal, setShowModal] = useState(false); // State for showing the modal
+
   const handleDelete = async () => {
+    setShowModal(true); // Show the modal when delete is clicked
+  };
+
+  const handleModalCancel = () => {
+    setShowModal(false); // Close the modal if canceled
+  };
+
+  const handleModalConfirm = async () => {
+    setShowModal(false); // Close the modal
     try {
       const response = await deleteSubject(subjectId);
       if (!response.ok) {
         throw new Error('삭제 중 오류가 발생했습니다. 3초 후 페이지를 새로고침 합니다.');
       }
       localStorage.removeItem('id');
-      setIsDelete(true);
+      setIsDeleteId(true);
       setTimeout(() => {
+        setIsDeleteId(true);
         navigate('/');
       }, 2000);
     } catch (err) {
@@ -73,7 +88,7 @@ const Answer = () => {
       try {
         setProfileLoading(true);
 
-        if (!isDelete) {
+        if (!isDeleteId) {
           if (LocalId === subjectId) {
             const response = await getSubjectById(subjectId);
             if (typeof response === 'string' && response.includes('에러')) {
@@ -97,7 +112,7 @@ const Answer = () => {
     };
 
     getProfile();
-  }, [subjectId, isDelete, LocalId, navigate]);
+  }, [subjectId, isDeleteId, LocalId, navigate]);
 
   useEffect(() => {
     const fetchQuestions = async () => {
@@ -161,9 +176,9 @@ const Answer = () => {
   return (
     <div className='h-screen bg-gray-20'>
       <Header imageSource={profile.imageSource} name={profile.name} />
-      <div className='flex flex-col items-center justify-center gap-[8px] p-[24px] pt-[176px] pb-[120px] bg-gray-20 md:gap-[19px] md:pt-[189px] md:px-[32px]'>
+      <div className='flex flex-col items-center justify-center gap-[8px] px-[24px] md:px-[32px] pt-[176px] md:pt-[189px] pb-[168px] md:pb-[140px] bg-gray-20 md:gap-[19px]'>
         <DeleteIdBtn onClick={handleDelete} id={subjectId} />
-        {isDelete ? (
+        {isDeleteId ? (
           <div className='w-full max-w-full bg-brown-10 border border-brown-20 rounded-[16px] pb-[16px] desktop:max-w-[716px] md:max-w-[704px]'>
             <CountQuestion count={0} />
             <img src={questionBoxImg} alt='질문 박스 이미지' className='mx-auto mt-[50px] mb-[86px] h-[118px] w-[114px] md:mt-[54px] md:mb-[49px] md:h-[154px] md:w-[150px]' />
@@ -171,7 +186,14 @@ const Answer = () => {
         ) : (
           <ul className='w-full max-w-full bg-brown-10 border border-brown-20 rounded-[16px] pb-[16px] desktop:max-w-[716px] md:max-w-[704px]'>
             <CountQuestion count={questionCount} />
-            <QnAList name={profile.name} imageSource={profile.imageSource} questionList={questionList} setQuestionList={setQuestionList} onDeleteQuestion={handleQuestionDelete} />
+            <QnAList
+              name={profile.name}
+              imageSource={profile.imageSource}
+              questionList={questionList}
+              setQuestionList={setQuestionList}
+              onDeleteQuestion={handleQuestionDelete}
+              setIsToast={setIsToast}
+            />
             {listLoading && (
               <div className='flex justify-center items-center my-10'>
                 <div className='w-10 h-10 border-4 border-t-transparent border-brown-30 rounded-full animate-spin' />
@@ -181,7 +203,9 @@ const Answer = () => {
           </ul>
         )}
       </div>
-      {isDelete && <ToastDeleteId />}
+      {isDeleteId && <ToastDeleteId />}
+      {isToast && <ToastDelete toastMsg={isToast} />}
+      <ConfirmModal isOpen={showModal} onConfirm={handleModalConfirm} onCancel={handleModalCancel} message='정말로 삭제하시겠습니까?' />
     </div>
   );
 };