[ react ] 게시글 삭제하기

🐾 게시글을 삭제하려면 제일먼저 해야할것은❓

1. 로그인 된 사람만 삭제 가능
   • token으로 전달
2. 게시글 작성자로 로그인 되어야만 삭제 가능

몇번게시글 삭제? -> param을 사용.
'/api/activities/:id'

📝 1. 로그인 한 사람의 email

app.js

app.delete('/api/activities/:id', async (req, res) => {
   try {
       // 1. 로그인 한 사람의 email 
       let token = req.headers.authorization.replace('Bearer ', '');
       let user = jwt.verify(token, process.env.JWT_SECRET);
       // user.email --> 로그인 한 사람의 이메일
       let id = Number(req.params.id) // 삭제하려는 게시글 아이디 (문자열이니까 숫자로 바꿔줌)
       let [rows] = await pool.query(
           'select * from tbl_activities where id = ?', [id]
       ); //rows는 배열

       if (rows[0].writer_email !== user.email) { //로그인한 사람의 이메일과 게시글 작성자의 이메일이 다르면
           res.status(403).json('접근 권한 없음');
           return;
       }
      await pool.query('delete from tbl_activities where id = ?', [id]);
   }); //불가능하다 게시글을 삭제하려면, 문제가생긴다 

그런데❗️❗️ 여기서 문제가 생긴다.
게시글을 삭제하려는데 게시글에는 댓글이 있다. 이미지, 좋아요도 있다.

1. 해당 게시글에 달린 댓글 삭제
2. 해당 게시글에 달린 좋아요 삭제
3. 해당 게시글에 달린 이미지 삭제
4. 해당 게시글 삭제

    // 1.해당 게시글에 달린 댓글 삭제
    await pool.query('delete from tbl_comments where activity_id = ?', [id]);

    //2.해당 게시글에 달린 좋아요 삭제
    await pool.query('delete from tbl_activity_like where activity_id = ?', [id]);

    //3.해당 게시글에 달린 이미지 삭제
    let [imgs] = await pool.query('select * from tbl_activity_img where activity_id = ?', [id]); //sql만 삭제
    for (let i = 0; i < imgs.length; i++) { //실제 이미지 파일 삭제
        fs.unlinkSync(`../public${imgs[i].img_url}`); //이미지가 여러개일 수 있으니까 반복문 사용.
    }

    //4.해당 게시글 삭제
    await pool.query('delete from tbl_activity_img where activity_id = ?', [id]);

    //삭제 완료
    await pool.query('delete from tbl_activities where id = ?', [id]);
    res.json('삭제 성공');
} catch (err) {
    res.status(500).json('오류 발생');
}

---

activityDetailSection.js

   const navigate = useNavigate();

   const onDeleteClick = async () => {
       if (window.confirm('정말 삭제하시겠습니까?')) {
           try {
               await axios.delete(`/api/activities/${props.activityId}`, {
                   //  게시글 id 는 props로 받아옴
                   headers: { Authorization: `Bearer ${accessToken}` }
               });
               navigate('/activity', { replace: true });
           } catch (err) {
               console.log(err);
               alert('삭제 오류');
           }
       }
   }

   return (
     <WriteBtn
   		onClick={onDeleteClick}
   		style={{ backgroundColor: 'red' }}>삭제하기
	</WriteBtn>
)

app.js

app.delete('/api/activities/:id', async (req, res) => {
    try {
        // 1. 로그인 한 사람의 email 
        let token = req.headers.authorization.replace('Bearer ', '');
        let user = jwt.verify(token, process.env.JWT_SECRET);
        // user.email --> 로그인 한 사람의 이메일
        let id = Number(req.params.id) // 삭제하려는 게시글 아이디 (문자열이니까 숫자로 바꿔줌)
        let [rows] = await pool.query(
            'select * from tbl_activities where id = ?', [id]
        ); //rows는 배열

        if (rows[0].writer_email !== user.email) { //로그인한 사람의 이메일과 게시글 작성자의 이메일이 다르면
            res.status(403).json('접근 권한 없음');
            return;
        }

        // 1.해당 게시글에 달린 댓글 삭제
        await pool.query('delete from tbl_comments where activity_id = ?', [id]);

        //2.해당 게시글에 달린 좋아요 삭제
        await pool.query('delete from tbl_activity_like where activity_id = ?', [id]);

        //3.해당 게시글에 달린 이미지 삭제
        let [imgs] = await pool.query('select * from tbl_activity_img where activity_id = ?', [id]); //sql만 삭제
        for (let i = 0; i < imgs.length; i++) { //실제 이미지 파일 삭제
            fs.unlinkSync(`../public${imgs[i].img_url}`); //이미지가 여러개일 수 있으니까 반복문 사용.
        }

        //4.해당 게시글 삭제
        await pool.query('delete from tbl_activity_img where activity_id = ?', [id]);

        //삭제 완료
        await pool.query('delete from tbl_activities where id = ?', [id]);
        res.json('삭제 성공');
    } catch (err) {
        res.status(500).json('오류 발생');
    }
});