Act99 기술블로그

항해99 3주차 주특기 기본 - 날짜별 별점 누르기 + (캘린더 일기 만들기) 완성 본문

개발팁저장소/react

항해99 3주차 주특기 기본 - 날짜별 별점 누르기 + (캘린더 일기 만들기) 완성

Act99 2022. 1. 25. 13:40

먼저 결과물을 이렇다.

 

 

캘린더를 누를 때 상태값을 유지시키고, 고양이 버튼을 클릭하면 글쓰기 모달페이지로 넘어간다. 글을 저장시키면 파이어베이스 파이어스토어에 저장되며, db 구조는 해당 날짜와 다이어리에 적은 일기, 별점 데이터이다. collection의 doc은 다이어리 날짜로 구성되며, 같은 doc이 있을 시, 글쓰기에서 중복방지 기능으로 저장이 안되게끔 만든다.

그리고 해당 날짜의 일주일 전 데이터는 우측 하단에 리스트 형태로 나타나며, 이 리스트를 클릭하면 해당 일기를 볼 수 있다. 

 

마지막 수정해야하는 사항은 일기가 있을 때 글쓰기 버튼을 누르면 update 형태로 바꿔주는 것이다.

 

하지만 항해99 기본과제 수행을 위해 프로젝트를 마무리짓고 수정사항은 추후 수정할 계획이다.

 

https://github.com/act99/hanghae-week3

 

GitHub - act99/hanghae-week3: hanghae-week3 / 항해 3주차 주특기 기본

hanghae-week3 / 항해 3주차 주특기 기본. Contribute to act99/hanghae-week3 development by creating an account on GitHub.

github.com

 

'개발팁저장소 > react' 카테고리의 다른 글

[React + Firebase] export 'default' (imported as 'firebase') was not found in 'firebase/app' 오류생길 때  (0) 2022.02.02
만약 npx create-react-app 이 실행되지 않을 경우/ please remove any global installs with one of the following commands  (0) 2022.01.26
항해99 3주차 주특기 기본 - 날짜별 별점 누르기 + (캘린더 일기 만들기)  (1) 2022.01.22
항해99 3주차 주특기 기본 - 날짜별 별점 누르기 + (캘린더 일기 만들기)  (0) 2022.01.21
[React] 주식사이트 만들기-5 실시간 코인 차트 만들기 [Redux, Crypto Compare] 차트 라이브러리x  (0) 2021.12.07
'개발팁저장소/react' Related Articles more