망고

✋ 소개

망고는 실종 반려 동물을 찾을 수 있도록 도와주는 커뮤니티 서비스입니다. 실종 동물에 대한 정보를 등록하고 커뮤니티를 통해 찾을 수 있도록 돕습니다.

🧑‍🤝‍🧑 구성원

• 백엔드 및 프론트엔드 : 2명

💻 기술 스택

• Monorepo
• TypeScript, Next.js, React, Express
• NextAuth, Zustand, Zod, React-Hook-Form, Cloudinary, Socket.io, KakaoMap
• TailwindCSS, Shadcn/ui
• MariaDB, PrismaORM

내가 기여한 기능

로그인 및 회원 가입

• NextAuth를 활용하여 이메일 로그인 및 소셜 로그인 기능을 구현하였습니다.
• NextAuth의 signIn 콜백을 활용하여 이메일 인증 여부 및 2FA 인증 여부에 따른 접근을 제어했습니다.
• 회원 가입 시 토큰을 포함한 메일을 발송하여 인증 과정을 거치도록 하였습니다.
• 내 설정에서 2FA를 활성화한 사용자는 로그인 시 이메일로 발송된 인증 번호를 통해 로그인합니다.
• LocalStorage를 활용하여 이메일 저장 기능을 구현하였습니다.

내 설정 - 2FA 활성화 2FA 활성화 사용자 로그인

실종 반려 동물 게시판 및 댓글

• 실종 반려 동물을 조회할 수 있습니다.
  (제목 및 사례금으로 검색할 수 있습니다.)
• 로그인 한 사용자는 게시물을 직접 등록하고 관리할 수 있습니다.
  (카카오 지도 API를 활용하여 위치를 입력받았고 Cloudinary 스토리지에 이미지를 저장했습니다.)
• 로그인 한 사용자는 게시물에 댓글을 남길 수 있습니다.

실종 반려 동물 조회 및 검색 실종 반려 동물 등록 실종 반려 동물 상세 조회 실종 반려 동물 댓글 삭제

고객 지원 채팅 상담

• 사용자는 상담방을 개설하여 관리자와 실시간 채팅을 통해 상담을 진행할 수 있습니다.
• 관리자는 상담을 종료할 수 있으며 종료된 상담방에서는 더 이상의 채팅이 불가능합니다.
• 스크롤 위치를 추적하여 이전 채팅 내역을 무한 스크롤 방식으로 조회합니다.

고객 지원 상담 개설 고객 지원 채팅 상담 종료된 상담방

관리자 대시보드 접근 제어

• 미들웨어를 활용하여 권한이 없는 사용자의 관리자 페이지 접근을 차단하였습니다.

관리자 회원 관리, 실종 동물 관리

• 관리자는 회원 및 실종 반려 동물 게시물을 조회하고 검색할 수 있습니다.
• 회원 및 게시물 정보를 수정 및 삭제할 수 있습니다.

관리자의 회원 검색 관리자의 회원 수정