계속 이어 만들어보자.
일단 글작성을 만들기 전 헤더마무리
헤더는 로그인했을 때 로그인버튼이 유저정보로 바뀐다.
이제 그 유저정보를 누르면 마이페이지와 로그아웃 버튼이 나타나게끔 만들어보고 넘어가자.
대충 위와같은 드롭다운 메뉴를 만들어줬고
코드는 위 처럼 클래스이름으로 true false로 닫히고 열렸을 때 속성을 달리줘서 애니메이션 효과도 살짝 넣어줬다.
이제 글 작성 페이지를 만들자
새로운 글을 작성할 페이지를 만들기위해
New.js로 파일하나 만들어서 시작하겠다.
그리고 New.js에서는 Create.js를 불러와서 작업을하겠다.
이러한 모습을 띄고있는데 이 이유는 수정하기도 똑같은 모습일거라 재활용하기 편하기위해 미리 분리해두었다.
Create에서는 유저가 제목을 쓰고 본문을 쓰고 이미지를 넣고 글 작성하기를 누르면 글이 작성이되는걸 구현해주면 된다.
그러기위해 input과 textarea로 화면부터 만들어주자
디자인은 대충했기 때문에 이러한모습인데 여기서
input의 value값을 데이터베이스에 보내주면 그게 글쓰기기능 끝이다.
허나 나는 이미지도 같이 올려줄것이기때문에
강의에서는 이미지올리는 작업을 끝낸 뒤 가벼운 데이터인 글들을 보내는게 좋다했던거같다.
그래서 storage에 이미지올리는 작업이 성공했을 때 데이터베이스에 데이터를 올려줄것이다. 그래야 이미지의 url도 가져올 수 있으니 이 방법이 맞긴한거같다.
글 작성함수 만들기
글 작성함수는 addPost라는 이름으로 만들어주었는데
조건문을 사용했다. 그 이유는 유저가 이미지를 올릴수도 안올릴수도 있기때문에 데이터베이스에 url을 넣어야할때도 안넣어야할때도 있기때문이다.
이미지 파일을 받아올 state를 하나 만들어두고
input에 type이 file인곳에 onChange이벤트를 사용하여 유저가 올린 이미지파일을 postImg에 뽑아냈다.
그리고 addPost에 이미지가 있을 경우에
이러한 코드를 작성했는데
storage가 쓰인곳은 무조건 이미지를 올려주는 작업을 위한 코드다.
그리고 uploadPost가 성공했을 때 dbPostData라는 변수에 데이터베이스에 보내야 할 모든 데이터들을 미리 모아놨다.
그 후에 데이터베이스에 guest라는 폴더에 추가해주기만하면 끝이다.
반대로 유저가 이미지를 넣지않았을 때는
storage부분만 다 빼놓고 url도 빼놓은 뒤 그걸 보내주면 끝이다.
그리고 글 올리기가 성공했을 때 Navigate를 사용하여 홈화면으로 보내줄 예정이다.
결과로 잘 나타난다. 다만 순서가 뒤죽박죽인건 후에 데이터베이스에 date를 이용하여 시간순으로 정렬해줄 예정이다.
글 작성이 완성됐으니 상세페이지를 만들어줘야
글 작성이 됐으니 아이템을 클릭했을 때 그 아이템을 보여줄 상세페이지를 만들어주면 끝이다.
그러기위해서 userParams를 사용해주어야한다.
현재 메인화면에 아이템들은 데이터베이스에서 가져온 데이터들로 반복문을 돌려서 만들어주었다.
이화면인데 이녀석들은 데이터베이스의 데이터로 구성이되어있으니 id값도 잘 들어가있을것이다.
이곳을 useParams를 사용할 수 있게끔 id값을 보내줘야하는데
링크태그로 감싸준 뒤 경로에 id값을 넣어주면 끝이다.
이제 아무 게시글이나 눌러서 확인해보면
URL에 그 id값이 들어가있는걸 볼 수 있다.
데이터베이스에도
저 아이디값을 가진 아이템을 찾아볼 수 있다.
이제 이걸가지고 상세페이지를 꾸며주기만하면 끝이다.
다만 상세페이지를 저걸로 꾸며주기 전 데이터베이스에서 URL에있는 id값과 같은 데이터만 뽑아와야한다.
그러기위해 데이터베이스에서 데이터를 가져올건데
이렇게 한번 순서대로 찍어보면
res는 뭔가 이상한 t{_파이어스토어}뭐시기 이런게 들어있고
res.docs를 뽑아모녀 배열상태로 e,e,e,e,e이런게 들어있고
res.docs[0].id를 뽑아보면 id값을 가져오는걸 볼 수 있다.
그래서 res.docs[0].data()를 뽑아보면 저렇게 0번째만의 데이터를 확인할 수 있다.
그래서 결론이뭐냐 res.docs를 find함수를 사용해서 원하는아이디값만 찾도록하면 내가원하는 그 아이템만 뽑아올 수 있다는것이다.
굳이 모든데이터를 뽑아온 뒤 그걸 어디에 담아두고 담아둔걸 find돌릴 필요 없이 한번에 원하는데이터만 뽑는것이다.
이제 한번 find함수를 돌려본 뒤 확인해보자.
그 전에 URL에 있는 id값이 제대로 가져와지는지부터 봐야한다.
useParams를 사용하여 뽑아보았는데 제대로 나오는걸 확인할 수 있다.
이제 find함수를 돌릴때 저 id값과 같은지 확인해서 뽑으면된다.
이렇게 만들어준 뒤 콘솔찍어보면
이런게 뽑힌다. 그 이유는 data()를 사용해주지 않아서인데
데이터를 담아서 사용할 state를 만들어서 보내줄 때 해주면된다.
detailData에 담아둘 예정이고
useEffect에서 id값과 데이터베이스에 있는 모든 데이터들을 스프레드연산자로 넣어줬다. 사용할 수 있게끔 data()를 붙여서말이다. 콘솔에 찍어보면
제대로 뽑히는 걸 볼 수 있다. 이걸가지고 이제 화면을 꾸며주면
상세페이지는 끝이다.
디자인은 자신없기에 대충 만들어준 뒤 다음 포스팅에서 계속 이어가보겠다.
