자 이번엔 진짜 수정버튼을 만들어보자
수정페이지 만들기
자 지금은 수정페이지를 누르면
이러한 모습으로 넘어간다.
이제 URL에 있는 id값을 가지고 input에 원래있던 데이터들을 미리 넣어주려한다.
input에 원래 데이터를 넣기 위해
수정하기 버튼에 dispatch로 상세페이지에 있던 제목과 본문을 넘겨줬다.
수정페이지에서 잘 받아오는걸 볼 수 있다.
이제 업데이트버튼을 Edit페이지에서 만들어 준 다음
props로 전송해줄것이다.
Edit페이지에서 수정버튼을 위와같이 만들어줬는데
제대로 작동은 잘 한다.
코드는 updatebtn 함수에서
db 데이터베이스에서 collection폴더중 guest폴더안에
doc중 (id) id값은 useParams에서 가져온 id값을 가진 데이터를 업데이트해주면 끝이다.
결과적으로는 수정이 잘 된다.
이미지도 수정할 수있게 만들어주고싶다. 이제
그러면 수정기능은 끝이다! 이미지도 바꿔보자.
앞서 만들었던 New에서 처럼 유저가 올린파일을 가져오고 그 파일의 url을 받아낸뒤 데이터베이스에 있던 url을 변경시켜주면 이미지수정이 끝이지않을까싶다.
한번해보자
그러기위해 onChange로 파일을 가져와야한다.
이건 앞시간에 만들었던것과 똑같을테니 빠르게넘어가자.
빠르게 업데이트 함수를 보면
업데이트 버튼안에서는 스토리지에 이미지넣는 작업을하는데 이미지를 바꿀수도 안바꿀수도있기에 if문을 사용했고
그 외 안에 코드들은 여태 사용했던것과 거의 흡사하기에
자세한 설명은 써놓지않았다.
스토리지에 이미지가 업로드됐을 때 데이터베이스에 데이터를 변경시키게끔 만들어주었다.
사용해보니 잘 작동한다!
이제 삭제하기버튼을 만들어주면 끝이다.
삭제하기는 진짜 간단하다.
상세페이지에서 만들어주면 될거같다.
상세페이지에 삭제버튼 함수를 만들어주고 삭제하기에 넣어줬다.
삭제하기도 끝!
이제 남은거
이제 얼마 안남았다.
디자인이 구린부분을 좀 수정해주고..
마이페이지에서 유저의 이름과 프로필사진 수정을 만들어주고
정렬기능을 만들어주고 최적화까지 진행해주면 끝일거같다.
그 다음 마무리로 파이어베이스에서 유저의 uid가 같을때 수정과삭제가 가능하게끔 만들어줘야하고
로그인했을 때만 글 쓸 수 있게 해주고
이름과 비밀번호의 글자수 체크만 해주면 끝이다!
