BuddyGuard
는 반려동물의 일상을 체계적으로 관리할 수 있는 통합 케어 플랫폼입니다.
산책 기록부터 건강 관리까지, 반려동물과의 모든 순간을 스마트하게 기록하고 관리할 수 있습니다.
- 개발 기간: 2024.09 ~ 2024.10 (6주)
- 타겟: 반려동물의 건강과 일상을 체계적으로 관리하고 싶은 보호자
Frontend | Frontend |
---|---|
우디 | 재화니 |
Backend | Backend | Backend |
---|---|---|
데이 | 심바 | 진 |
# 저장소 클론
$ git clone https://github.com/myBuddyGuard/BuddyGuard.git
#프로젝트 디렉토리로 이동
$ cd fe
# Node.js 18 이상 사용 권장
$ corepack enable
# Node.js 16 이하 사용 시 corepack 전역 설치
# $ npm install -g corepack
$ pnpm install
$ pnpm dev
실시간 위치 트래킹 | 현재위치로 이동 및 핀 닫기 | 산책 시간, 거리 측정 후 저장 |
---|---|---|
![]() |
![]() |
![]() |
- 주간 기록확인 - 산책 기록 시각화 (그래프) - 과거 산책 경로 지도 확인 |
- 월간 기록확인 - 산책 기록 시각화 (그래프) - 노트 수정 |
- 전체 기록확인 - 산책 기록 시각화 (캘린더) |
---|---|---|
![]() |
![]() |
![]() |
- 체중 관리
- 사료/간식 급여 기록
- 급여 시간 관리
![3-health](https://private-user-images.githubusercontent.com/96780693/382480198-fad29323-61fc-4ee3-a3ae-e304d696166a.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQzOTI5NzgsIm5iZiI6MTczNDM5MjY3OCwicGF0aCI6Ii85Njc4MDY5My8zODI0ODAxOTgtZmFkMjkzMjMtNjFmYy00ZWUzLWEzYWUtZTMwNGQ2OTYxNjZhLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDEyMTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMjE2VDIzNDQzOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU0Nzg0ZDlkMzUwZWVjMGYxNzIzZjdiOTU0ZmFjM2IxNjljZmJhNGRiMmM4NTM4YWU1MWQ2ZGNkNzVlNmIzMzAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.2CTlRVpupmqvwuAfco7r3X055W9iAY0V6oVJVY4nwL8)
- 병원, 예방접종 등 일정 등록
- 캘린더 뷰 및 알림 기능
![4-plan](https://private-user-images.githubusercontent.com/96780693/382480237-f91bfbcd-7392-4395-a8ca-46102a20e8d5.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQzOTI5NzgsIm5iZiI6MTczNDM5MjY3OCwicGF0aCI6Ii85Njc4MDY5My8zODI0ODAyMzctZjkxYmZiY2QtNzM5Mi00Mzk1LWE4Y2EtNDYxMDJhMjBlOGQ1LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDEyMTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMjE2VDIzNDQzOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVhYjA2NGFhMzZhZGI0MWVjNWVkZjZmNmVlNDg1ZWIyYTI5YzAyZWI5MTE0MTFkYjNjOTI2ZGVjZTZhODU5ZDgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.sBU-HRmjjmb4m8pCFSOblBlEKhDoC5HgNfXYjlWVKWc)
![responsive-layout](https://private-user-images.githubusercontent.com/96780693/382483816-245b6a9d-0b30-4e1d-a9c4-8e45ae92cd75.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQzOTI5NzgsIm5iZiI6MTczNDM5MjY3OCwicGF0aCI6Ii85Njc4MDY5My8zODI0ODM4MTYtMjQ1YjZhOWQtMGIzMC00ZTFkLWE5YzQtOGU0NWFlOTJjZDc1LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDEyMTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMjE2VDIzNDQzOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJhN2MwNzVmYzcyNzBkNGI5NTM4Mjc5MjdlZGNhOGU0YjQ2NjQwZGY4NGY2NmFmMzQxNTRlN2Y0Zjg2ZTQzZDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.tWklpgF1BCViKNBWqxO3Cp1sPFXlGRHtehY3SJVUCas)
- mobile 우선 설계
- PC에서는 mobile 프레임으로 제공
- 라이트/다크 모드 지원
- 시스템 설정 연동
- 수동 테마 변경 가능
mobile | PC |
---|---|
![]() |
![]() |
[백엔드 스택 정보]
- Atomic Design Pattern 적용
- 모바일 우선 반응형 디자인
- Atomic Design Pattern 적용
atoms
: 버튼, 입력 필드 등 최소 단위의 컴포넌트molecules
: 여러 개의 atom을 결합한 복잡한 컴포넌트organisms
: molecules를 조합한 큰 단위의 컴포넌트templates
: 페이지 레이아웃을 담당하는 컴포넌트pages
: 실제 라우팅되는 페이지 컴포넌트
📦 be
📦 .vscode
┗ 📜setting.json # 저장 시 자동 포맷팅 설정
📦 fe # 프로젝트 FE 루트 (buddyGuard/fe)
┣ 📂.storybook # 컴포넌트 문서화 설정
┣ 📂public # 정적 리소스 (이미지, 아이콘 등)
┗ 📂src
┣ 📂apis # API 통신 관련 로직
┣ 📂components # Atomic Design 기반 컴포넌트
┃ ┣ 📂atoms # 기본 UI 요소
┃ ┣ 📂molecules # 기능 단위 컴포넌트
┃ ┣ 📂organisms # 섹션 단위 컴포넌트
┃ ┣ 📂templates # 레이아웃 템플릿
┃ ┗ 📂pages # 페이지 컴포넌트
┣ 📂hooks # 커스텀 훅
┣ 📂stores # 전역 상태 관리 (Zustand)
┣ 📂styles # 글로벌 스타일, 테마 설정
┗ 📂utils # 유틸리티 함수
자세한 코딩 컨벤션은 [FE] 개발 전략 문서를 참고해주세요.
![스크린샷 2024-11-05 오후 11 55 29](https://private-user-images.githubusercontent.com/140429591/383209588-15eede39-9503-479a-847e-5c85fe4aa9a4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQzOTI5NzgsIm5iZiI6MTczNDM5MjY3OCwicGF0aCI6Ii8xNDA0Mjk1OTEvMzgzMjA5NTg4LTE1ZWVkZTM5LTk1MDMtNDc5YS04NDdlLTVjODVmZTRhYTlhNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMjE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTIxNlQyMzQ0MzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01ZDgyYWM2NTE4NzRmMjA0ZjZiM2Y4MmQwYTYyMDhlNGEyNzg5ZDNiMDZhMDVlNTNkMmM4MzY5YzgyMjRlMmRmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.uC9X7amvPbg_N2Ijui7s66BwcuK4RXXkzSy6xJudwls)