/disCATch_Client

Primary LanguageJavaScript

disCATch - 동네 고양이 돌봄 플랫폼!😻

disCATch Link : https://discatch.site
시연 영상 : https://www.youtube.com/watch?v=fOGJ-bMrDto&t=0s


🔍 프로젝트 소개

무심코 동네에서 봤던 고양이들을 자주 보고싶은 마음이 드셨던적이 있으신가요?
disCATch는 그런 분들을 위해 고양이를 제보하고 고양이 돌봄을 공유하는 서비스입니다.
함께 하는 마음으로 어제보다 더 나은 묘생권을 위해 오늘부터 disCATch 하세요!

🎈기획 배경

현재 서울 시내 길고양이는 11만6,000여 마리입니다. 캣맘과 캣대디 그리고 지자체의 노력으로 길고양이의 인식이 많이 좋아졌다고는 하지만 아직도 길고양이에 불만이 지속해서 제기되고 있는 것이 현실입니다. 서울시 동물보호과 조사에 따르면 2015년부터 지난해까지 신고된 전체 5만402건의 동물 민원 중 길고양이와 관련된 민원이 2만6,328건으로 절반이 넘습니다.
이처럼 수많은 길고양이와의 공생방안 모색은 우리에게 늘 숙제처럼 남아있습니다. 우리가 사는 동네부터 자발적으로 체계적인 고양이 돌봄 활동을 한다면 조금이나마 이 문제가 해결될 것이라 생각하여 이 프로젝트를 기획하게 됐습니다.

👨‍👨‍👦‍👦팀원소개

프론트엔드

[React]

백엔드

[Spring]


개발 기간

  • 2021.09-2021.12

소스 형상 관리

  • git

협업 툴

  • git / Notion / figma / Gather

Front-End 사용 기술 스택

                       

🐱기능 소개 및 서비스 소개 🐱

  • WebSocket을 통한 실시간 채팅 구현
  • 소셜 로그인
  • 무한 스크롤
  • 토스트
  • 카카오맵
  • 캘린더

소셜로그인

- "소셜 로그인"(카카오, 네이버, 구글)을 통한 편리한 회원가입을 구축

고양이정보

  • 고양이 기본정보: 발견한 고양이의 대한 정보를 누구든 자유롭게 올리고 수정하여 고양이의 대한 가장 최근의 상태를 알 수 있게 함.
  • 고양이 상세정보: "캘린더", 집사일기, 갤러리를 통해 돌봄활동을 한눈에 확인 할 수 있음.
  • 고양이별 "댓글" : 자세한 소통 가능.
  • 고양이 리스트: "무한스크롤" 기능

커뮤니티

카테고리를 나눠 회원끼리 소통할 수 있는 공간을 만듬.

  • 전체 커뮤니티: 커뮤니티(고양이 정보글)
  • "동네별" 커뮤니티: 커뮤니티(동네 모임), 커뮤니티(용품 나눔)
  • 커뮤니티글 "댓글" : 자세한 소통 가능
  • 커뮤니티 리스트: "무한스크롤" 기능

지도

"카카오맵"을 이용한 지도 시스템 구현

  • 고양이 업로드: 고양이를 발견하면 지도에서 장소를 찾아 고양이를 올릴 수 있음.
  • 고양이 정보보기: 동네별 '고양이를 확인'가능 및 고양이 클릭시 고양이 정보로 이동.
  • 검색 기능 : 동네별 위치 '검색' 가능

채팅

  • "WebSocket"을 사용하여 회원간의 끊김없는 1:1 실시간 채팅이 가능함.
  • 채팅방 삭제 기능을 통해 깔끔한 채팅리스트 유지 가능.
  • 채팅 메시지: "무한스크롤" 기능

내정보

  • "레벨 시스템"을 도입하여 활동별로 등급을 확인 할 수 있음.
  • "좋아요"한 고양이 (무한스크롤 기능)
  • "활동 캘린더"를 통한 집사일기 모아보기 기능 및 활동일자 체크
  • 공지사항 확인 가능
  • 다른 회원의 활동 정보 및 회원 정보도 확인 가능

토스트

  • 모든 알람 토스트 형식으로 유저 사용감 향상.