게시판 구현해보기(3)

이제 목록, 생성, 상세페이지를 전부 만들었으니 

상세페이지 안에서 수정페이지만 만들면 끝이난다. 만들어보도록하자.

 

 const {id} = useParams();
 const [ modify, setModify ] = useState(null);
 const [ form, setForm ] = useState({
        title : '',
        writer : '',
        contents : ''
    });

 

데이터의 id를 이용해서 원하는 데이터의 페이지를 수정하기위해 id 정의 해준다음

받을 데이터의 상태와 구성을 정의해준다.

 

  const getModifyData = async () => {
        try{
            const board = await axios.get(`/detail/${id}`);
            setModify(board.data[0]);
            setForm({
                title : board.data[0].title,
                contents : board.data[0].contents,
                writer : board.data[0].writer
            })
        }catch(err){
            console.log(err);
        }
    }

 

데이터를 받을때 setForm에 구성에서 title, contents, wirter를 빈값에서 내가 원래 입력했던 데이터를 받아준다.

데이터는 상세페이지에서 가져오기때문에 미리 만들었던 server.js 는  detail에서 get 미리 만들어놨던걸 이용.

 

useEffect(()=>{
        getModifyData();
    }, []);

 

 

랜더링 될 때마다 데이터를 받아주도록 구현을 끝내준다.

 

 

 const onChange = (e) => {
        const { name, value } = e.target;
        setForm({
            ...form,
            [name]: value,
        });
    };

 

수정 할 때 값이 변화해야하므로 onChange를 만들어 준다.

 

const onModify = async () => {

        if(form.title === ''){
            alert('제목을 입력해주세요.');
            return;
        }
        if(form.writer === ''){
            alert('작성자를 입력해주세요.');
            return;
        }
        if(form.contents === ''){
            alert('내용을 입력해주세요.');
            return;
        }
        if(window.confirm('수정하시겠습니까?')){
            try{
               await axios.post(`/modify/${id}`, form);           
                window.location.href = `/detail/${id}`;
            }catch(error){
                console.log(error);
            }
        }
    }

 

app.post('/modify/:id', (req, res) => {

    const { title, writer, contents } = req.body;

    const id = req.params.id;

    const sql = `update free_board set title = ? , writer =? , contents = ? where id = ${id}`;

    db.query(sql, [title, writer, contents], (err, data) => {
        if(!err){
            res.sendStatus(200); 
        } else {
            console.log(err);
            res.send('전송오류');
        }
    })
})

 

내용을 바꾼 form 데이터를 받아서 수정 할 수 있도록 구현해주도록 한다.

수정 후 다시 목록말고 상세페이지로 가도록 설정.

   if(modify !== null){
        return (
            <div className='modify'>
                <h2>자유게시판 글쓰기</h2>
                <hr />
                <div className='inputBox'>
                    <div>
                        <input className='titleInput' type="text" name='title' placeholder='제목을 입력해주세요' onChange={onChange} value={form.title}/>
                        <input className='nameInput' type="text" name='writer' placeholder='작성자' onChange={onChange} value={form.writer}/>
                    </div>
                </div>

                <textarea type="text" name='contents' placeholder='내용을 입력해주세요' onChange={onChange} value={form.contents}/>

                <br />

                <button onClick={onModify}>수정</button>
            </div>
        );
    };
};

 

이제 만들어둔 기능이 작동하도록 화면을 구현해주면 수정페이지도 구현이 끝이난다.

 

전부 만들고나니 게시글마다  총 댓글수도 리스트 제목옆에 나왔으면 좋겠다고 생각해서 만들어보았다.

 

  const sql = `
        SELECT fb.*, COUNT(c.co_id) AS commentCount 
        FROM free_board fb 
        LEFT JOIN comments c ON fb.id = c.board_id 
        GROUP BY fb.id 
        ORDER BY fb.id DESC
    `;

 

list 목록을 구현하는 app.get에  sql 구문을 이렇게 수정해줘서 보드와 댓글을 조인으로 연결해 댓글 id 개수를 카운팅 하도록 만들어주었다

 

    {b.commentCount > 0 && <span className="comment-count">({b.commentCount})</span>}

 

그리고 화면에다가 댓글이 0개를 넘어서면 숫자가 나오도록 표시해주면 끝.

 

---

 

완성

 

검색 , 페이지 ,  정렬 , 글 추가 / 삭제 / 수정 , 댓글 추가 / 삭제 전부 기능하는 것을 확인 할 수 있음.