Feature : 레시피 삭제 버튼 구현

[dusunax]

레시피 삭제

레시피 삭제 버튼 구현

• 수정 버튼과 같은 디자인으로 제작합니다.
• 클릭 시 컨펌박스를 통해 삭제여부를 확인
  • '삭제합니다' 버튼을 클릭 시 레시피를 삭제
    • 삭제 후 /recipe로 이동
  • 'x' 버튼이나 박스 바깥을 클릭 시 창을 닫음

---

구현 내용

---

버튼

• src\components\recipeDetail\element\RecipeDescBody.jsx
• 레시피 작성자일때만 수정/삭제 버튼을 표시
  • onClick 함수는 src\pages\RecipeDetail.jsx에서 props로 전달(모달창이 있는 위치)

{recipeAuthor && (
  <div className="right">
    <button onClick={() => navigate(`/recipe/${recipeId}/edit`)}>
      수정
    </button>
    <button onClick={recipeDeleteButtonClickHandler}>삭제</button>
  </div>
)}

---

컨펌박스

• src\pages\RecipeDetail.jsx
• ConfirmBox : 재사용 컴포넌트

{showConfirmBox && (
  <ConfirmBox
    text={"레시피를 삭제하시겠습니까"}
    confirmButtonText={"삭제합니다."}
    onComfirmed={recipeDeleteConfirm}
    onDenied={recipeDeleteDenied}
  />
)}

---

함수

• src\pages\RecipeDetail.jsx

/** 레시피 삭제 버튼 핸들러 */
const recipeDeleteButtonClickHandler = () => {
  setShowConfirmBox(true);
};

const recipeDeleteConfirm = () => {
  setShowConfirmBox(false);
  recipeDeleting();
};

const recipeDeleteDenied = () => {
  setShowConfirmBox(false);
};

const confirmProps = {
  recipeDeleteButtonClickHandler,
  recipeDeleteConfirm,
  recipeDeleteDenied,
};

/** recipeId에 해당하는 레시피를 삭제하는 함수입니다. */
const recipeDeleting = async () => {
  let contentType = "application/json";

  try {
    const response = await api(contentType).delete(`/recipes/${recipeId}`);
    navigate("/recipe", { state: { message: "메시지가\n삭제 되었습니다." } });
  } catch (err) {
    console.log(err);
    navigate("/404");
  }
};