streetnyangfighter/takealook_frontend

Take a Look Front

❣ Take a Look! 서비스 바로가기

🔗 Backend github repository

🔗 AI github repository

😺 서비스 기획 의도

Take a Look! (떼껄룩)은 길고양이와 사람의 공존을 위한 길고양이 도감 웹서비스입니다.

❓🤷‍♂️ "길고양이를 왜 돌봐야 하나요? 저는 고양이를 싫어하는데요!"

• 길고양이 개체수를 조절하고 소음/악취/환경 훼손 등의 길고양이 관련 문제를 해결하려면, 적절한 먹이주기 및 중성화 등의 길고양이 돌봄 활동이 필수적입니다.
• Take a Look!은 길고양이 돌봄에 관한 체계화된 정보를 공유하고 건강한 길고양이 돌봄 문화를 활성화하여 지역사회 문제를 해결하는 데 일조합니다.

❓💁‍♀ "고양이가 아파 보여서 약을 먹여야 할 것 같은데.. 누가 이미 먹이지는 않았을까?"

• 길고양이 특성상 불특정 다수가 무작위로 돌봄을 제공할 수밖에 없어 올바르지 못한 처치가 이루어질 위험성이 항상 존재했습니다.
• 같은 고양이를 돌보는 이웃들과 도감을 공유하게 함으로써 길고양이 돌보미들이 느꼈던 불편함을 해소하고 시의적절한 돌봄이 제공될 기회를 높일 수 있습니다.

👨‍👧‍👧 팀원

• 신지혜 : 백엔드 개발, AWS 배포 관리 (백엔드 서버, DB)
• 배지수 : 백엔드 개발, AI 모델 설계
• 장혜민 : 프론트엔드 개발
• 방지원 : 프론트엔드 개발, AWS 배포 관리 (프론트엔드 서버)
• 박세은 : 프론트엔드 개발

🗓 개발 기간

2021.11.05 ~ 2021.12.26

⚙ 개발 환경

• Front-end :

• Back-end :

• AI Inference :

• DB :

• Deployment :

• IDE :

• Communication Tools :

🧬 서비스 구조

로그인 및 마이페이지

• OAuth2.0 프로토콜을 사용한 Google, Kakao 로그인
• 소셜로그인 정보로 회원 정보 수정 가능
  • 닉네임 중복 여부 확인 가능
  • 회원 사진 정보 수정 가능
• 내가 작성/좋아요 누른 글 리스트 모아보기
  • '더보기' 클릭시 내가 작성/좋아요 누른 전체 글 카드 형식으로 조회
• 내 도감에 등록된 고양이, 내가 작성한 글에 대한 변경사항 알람 제공
  • 아직 클릭하지 않은 알람 수 상단에 🔔아이콘과 함께 표시
  • 현시점으로부터 역순으로 '~ 시간 전' 표시

고양이 등록

• 내가 돌보는 길고양이를 내 도감에 등록해서 관리 가능
• 고양이 등록시, 다른 사용자가 이미 해당 고양이를 등록해놓았다면 그 도감을 공유할 수 있도록 AI 기반 유사 고양이 리스트 제공
  • 사용자가 등록한 고양이 사진으로부터 딥러닝 기반 얼굴 인식 → 고양이 얼굴 랜드마크 표시
  • 정확도 향상을 위해 랜드마크를 사용자가 직접 검수 및 수정할 수 있는 장치 마련
  • 인식된 얼굴 랜드마크를 기준으로 이미지 전처리 후, 기존에 등록된 고양이 이미지들과 유사도 비교
  • 이미지 유사도 및 추가 정보(고양이 최근 발견 위치, 털패턴 종류)를 바탕으로 유사도 점수 책정, 높은 순으로 리스트 제공
• 제공된 리스트 중 등록하려는 고양이와 일치한다고 판단되는 경우, 해당 고양이를 바로 내 도감에 추가하여 기존 돌보미들과 정보 공유 가능
• 제공된 리스트 중 등록하려는 고양이가 없는 경우, 새로운 고양이로 내 도감에 등록 가능

고양이 관리

• 고양이 관리에 대한 모든 정보는 해당 고양이를 함께 돌보는 이웃들과 공유 가능
  • 사진
  • 현재 건강상태
  • 최근 발견 위치(지도에 마커로 표시)
  • 돌봄 이력 (밥/간식/약 급여/병원치료 등)
  • 입양 혹은 사망 여부
• 다른 사용자가 등록한 고양이와 일치하는 줄 알고 내 도감에 추가했는데 알고보니 다른 고양이였던 걸로 판단되는 경우, 다른 고양이로 재등록 가능
  • 고양이 최초 등록시와 마찬가지로 AI 기반 유사 고양이 리스트 다시 제공
  • 리스트 중 다른 고양이를 내 도감에 추가하거나 아예 새로운 고양이로 내 도감에 재등록 가능

커뮤니티

• 게시글 카테고리별 조회 가능
  • 전국고양이자랑: 사용자 본인의 애완고양이이거나 직접 돌보는 길고양이들의 귀여운 모습을 다른 사용자에게 자랑하고 공유함으로써 takealook! 사이트만의 문화와 공감대 형성
  • 가출냥찾기: 사용자 본인의 애완고양이나 돌보는 길고양이가 집을 나가거나 발견 지역에 나타나지 않을 때 이웃들과 정보 공유 가능
  • 도와주세요: 추후 크라우드펀딩 기능 추가시 소규모 후원을 통해 길고양이 돌봄 생태계 안정 도모
• 게시글 제목 기준으로 검색 가능
• 글 작성시 React-Quill 에디터 사용
  • quill-image-resize 모듈 통해 이미지 등록후 사용자 직접 사이즈 조정 가능
  • quill-image-compress 모듈 통해 이미지 등록시 처음 사이즈 고정
• 글 상세 조회시 카테고리, 좋아요 수, 댓글 수, 작성자, 작성날짜, 댓글리스트 조회
  • 글 상세 하단 부분에 댓글 작성 및 삭제(댓글 작성자일 경우) 가능
  • 사용자가 좋아요 한 게시글일 경우 ❤하트 표시, 사용자가 좋아요 취소시 🤍하트 표시로 좋아요 클릭 여부 구분 가능
• 글 수정시 내용, 썸네일 수정 가능, 수정 완료후 글 상세페이지로 바로 이동
• 글 삭제시 게시글 리스트에서 확인 가능

🎞 시연 영상