[FE] 예상 기술 스택
Redux toolkit, Thunk
- 상태 관리는 Redux toolit
- 서버와 통신관련 State 관리는 Thunk 사용
Axios
Kakao Map API
- API를 활용한 입양 정보 제공에서 반려 동물이 구조된 위치와 보호 되고 있는 기관의 위치 정보를 받아와서 Kakao map을 사용해 위치 정보를 제공합니다.
- geolocation → Kakao Maps API의 geolocation을 이용해 GPS 기능 (현재 위치 정보 받아오기)
→ 사용자가 현재 위치해 있는 위치 정보를 받아올 수 있습니다. 이를 이용해 게시물이 작성된 (유기된 동물의 위치) 정보를 게시물에 표시할 수 있습니다.
→ 사용자가 마커를 옮겨서 더 정확히 할 수 있도록 합니다.
→ 같은 유기 동물일 것이라고 판단되는 경우 묶어서 관리, 현재 위치 정보 주변의 유기 동물 정보를 리스트로 불러와 유저가 판단합니다. (고려) (카테고리까지 분류 하는 것도 고려)
browser-image-compression (이미지용량 줄여줌)
- 용량이 클 수 있는 이미지가 있기 때문에 용량을 줄여줍니다.
- 이미지 넘겨줄 때는 Form Data로 넘겨주기
styled-components
- css는 styled-components를 사용합니다.
Amazon S3
HTML Canvas를 사용하여 이미지 파일 생성
- html canvas를 사용하여
우리 개 찾아주세요 게시물의 전단지를 사용자가 빠르게 만들 수 있도록 이미지로 변환해서 사용자에게 제공하고 프린트 할 수 있게 합니다.
- 예시 사용
[HTML5 Canvas] 04 캔버스 이미지
SockJS, Stompjs
- 게시물(
이 동물 있어요, 우리 개 찾아주세요 또는 입양해주실 분)을 올린 사용자와 실시간으로 채팅을 할 수 있습니다.
- 게시물 올린 사람이 익명으로 올린다면, 채팅을 원하지 않는다고 가정하고 아예 실시간 채팅이 되지 않습니다.
[BE] 예상 기술 스택
공공API 활용
- 소셜 로그인
- 공공 API 연동해서 유기견 탭 구현(동물보호관리시스템 유기동물 정보 조회 서비스)
- 맵에서 보호소별 유기견, 유기묘 표시(날짜기준 sorting)
- 해당 카드 클릭시 상세보기 지원(협의 필요)
- 유저 개인의 관심카드 지정 토글 기능
- “소통”탭에서 유기견, 유기묘 의심 동물 보고 카드 CRUD
- “소통”탭에서 유기견, 유기묘 발생 신고 및 분양 신고 카드 CRUD
- 지점선택 및 유기반려동물 관련정보 CRUD 기능
- 댓글과 작성자와 실시간 채팅 기능 구현(소켓사용)
- 하단은 추출할 수 있는 데이터 별 방법인 것 같습니다