기간 : 24. 01. 04 ~ 02. 08
프로젝트명 : Puppy Ground(퍼피 그라운드)
소개 : 반려견 중고 물품 거래 및 정보공유 플랫폼
설명 : 반려동물을 키우는 사람이 많아진 만큼 사용하지 않는 반려동물 용품을 가까운 이웃과 중고거래 할 수 있는 서비스를 만들어 보고자 하였습니다. 그와 더불어 유기동물 또한 많아져서 사지말고 입양을 권하는 취지로 전국 유기견보호소에 있는 아이들에 대한 정보를 제공하고자 하였고 반려견과 함께 할 수 있는 내 주변 장소를 공유하고 반려인들과 소통할 수 있는 플랫폼을 만들어보고자 하였습니다.
팀명 : 막내 온 TOP
팀원 : 염혜원, 천영륜, 손지원, 손창성, 이예지
디자이너 : 박애리
| 사용기술 | 선택한 이유 |
|---|---|
| Next.js | SSG와 SSR의 지원으로 검색엔진 최적화와 초기로딩 성능 향상, 이미지 최적화 등 |
| Typescript | - 런타임 환경에서의 오류를 예방하고 타입에러를 방지 - 자동완성 기능제공으로 휴먼에러를 줄이고 개발생산성 향상 |
| Zustand | - Redux와 유사하나 Redux에 비해 보일러플레이트가 적고 러닝커브가 낮음 - pasist와 같은 부가 기능을 지원함 |
| Tanstack Query | - 비동기 작업과 상태를 관리 - 데이터를 가져오는 로직이 심플하고, 데이터 업데이트가 신속하게 반영됨 - Devtool이 내장되어 있어서 디버깅에 용이 |
| Supabase | 관계형 데이터베이스를 기반으로 하여 중복되는 데이터를 한 테이블에서 관리할 수 있고 firebase에 비해 코드가 직관적이며 Query를 사용해서 비교적 자유롭게 데이터를 사용할 수 있음 |
- 회원가입 / 로그인
- Supabase Auth를 활용한 이메일 회원가입 및 로그인
- 소셜 로그인(카카오톡, 구글)
- react-hook-form 을 사용한 실시간 유효성 검사
- 메인 페이지
- 각 페이지 소개 및 이동버튼
- framer-motion 적용
- 헤더
- 반응형 햄버거버튼
- 좋아요, 찜 실시간 알림
- 채팅아이콘 클릭시 채팅리스트 오픈
- 중고거래 페이지
- 중고물품 리스트
- 물품 상세 정보로 이동할 수 있는 링크
- 거래장소, 찜, 채팅개수, 등록한 시간 확인가능
- 카테고리, 견종사이즈, 판매여부, 검색 등 다양한 필터링
- 페이지네이션
- 중고물품 등록하기
- 대표이미지, 드래그 앤 드롭
- 거래희망장소 지도로 마커 표시
- 중고물품 상세페이지
- 이미지 슬라이드
- 공유하기 (카카오톡, URL)
- 찜 선택 및 개수 확인가능
- 채팅하기
- 중고물품 리스트
- 멍스타그램 페이지
- 멍스타그램 리스트
- 등록한 유저 프로필, 게시글 태그 확인가능
- 멍스타그램 등록하기
- 모달창으로 등록가능
- 해시태그 등록
- 이미지 다중선택
- 멍스타그램 상세모달
- parallel routes를 활용한 모달로 이전, 다음게시물 바로 이동가능
- 이미지 슬라이드
- 좋아요 및 개수 확인가능
- 멍스타그램 리스트
- 반려견 동반시설 페이지
- 카카오맵API로 데이터 마커표시
- 위치권한 허용시 현재위치에서 시작
- 마커 마우스오버시 간단한 정보확인
- 보여지는 화면영역의 변화에 따라 리스트 확인가능한 토글버튼
- 보여지는 화면영역의 변화에 따른 리스트 확인가능
- 키워드 검색 및 장소명 클릭시 해당 위치로 이동
- 유기견 공고 페이지
- 공공API를 활용하여 전국 유기견 보호소의 유기견의 공고 목록을 표시
- 등록날짜, 지역별로 필터링가능
- 페이지네이션
- 마이페이지
- 프로필 사진 , 닉네임 변경
- 중고거래 등록한상품, 찜한상품 확인가능
- 멍스타그램 좋아요한 게시물, 등록한 게시물 확인가능
| 담당자 | 작업내용 |
|---|---|
| 염혜원 | 마이페이지 프로필수정 / 실시간 1:1 채팅 / 채팅알림 |
| 천영륜 | 중고거래 등록페이지 / 마이페이지 / 좋아요 및 찜 / 공유하기 / 멍스타그램 댓글 CRUD |
| 손지원 | 회원가입 / (소셜)로그인 / 로그인 유무 분기처리 / 유기견공고 필터링 |
| 손창성 | 중고거래 리스트페이지 / 상세페이지 / 멍스타그램 리스트페이지 / 등록모달 / 상세모달 |
| 이예지 | 메인페이지 / 동반시설페이지 / 유기견공고 상세페이지 / (좋아요 찜)실시간 알림 |