상품관리 Part 2 상품 삭제

상품 삭제 기능을 구현하는 방법 기록

---

상품 삭제는 관리자 권한을 가진 사용자가 상품을 목록에서 제거할 수 있도록 하는 기능입니다.

 

 

1. 삭제 기능 구현

삭제 버튼 클릭 시 삭제 기능을 수행하는 함수 removeProduct를 추가합니다

const removeProduct = async (productId) => {
  const confirmDelete = window.confirm("정말로 삭제하시겠습니까?");
  if (confirmDelete) {
    try {
      await kuwazawa_productDB.child(productId).remove();
      alert("상품이 삭제되었습니다.");
      dispatch(fetchProducts()); // 삭제 후 상품 목록 갱신
    } catch (error) {
      console.error("상품 삭제 중 오류 발생:", error);
      alert("상품 삭제 중 오류가 발생했습니다.");
    }
  }
};

 

 

2. 삭제 버튼에 이벤트 추가

삭제 버튼 클릭 시 removeProduct 함수가 호출되도록 이벤트를 추가합니다.

 {user && user.userId == "admin@example.com" && (
        <button
          className="delete"
          onClick={() => removeProduct(item.id)}
        >
          삭제
        </button>
      )}

 

 

3. Redux 상태 관리

삭제 후 상품 목록을 갱신하기 위해 fetchProducts 액션을 다시 호출하여 최신 상태를 반영합니다

const removeProduct = async (productId) => {
  const confirmDelete = window.confirm("정말로 삭제하시겠습니까?");
  if (confirmDelete) {
    try {
      await kuwazawa_productDB.child(productId).remove();
      alert("상품이 삭제되었습니다.");
      dispatch(fetchProducts()); // 삭제 후 상품 목록 갱신
    } catch (error) {
      console.error("상품 삭제 중 오류 발생:", error);
      alert("상품 삭제 중 오류가 발생했습니다.");
    }
  }
};