🐾 Buddy Guard

반려동물과 보호자를 위한 스마트 케어 다이어리

😎 프로젝트 소개

BuddyGuard는 반려동물의 일상을 체계적으로 관리할 수 있는 통합 케어 플랫폼입니다.
산책 기록부터 건강 관리까지, 반려동물과의 모든 순간을 스마트하게 기록하고 관리할 수 있습니다.

• 개발 기간: 2024.09 ~ 2024.10 (6주)
• 타겟: 반려동물의 건강과 일상을 체계적으로 관리하고 싶은 보호자

👥 개발팀 소개

Frontend	Frontend
우디	재화니

Backend	Backend	Backend
데이	심바	진

🔗 Links

• 🐾 서비스 바로가기
• 📖 API 문서
• 📋 Notion
• 📋 GitHub 이슈 & 프로젝트
  

🚀 시작하기

frontend 실행

# 저장소 클론
$ 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

📱 주요 기능

1. 카카오 소셜 로그인

• 간편한 회원가입 및 로그인

  

2. 반려동물 산책 관리

실시간 위치 트래킹	현재위치로 이동 및 핀 닫기	산책 시간, 거리 측정 후 저장

- 주간 기록확인 - 산책 기록 시각화 (그래프) - 과거 산책 경로 지도 확인	- 월간 기록확인 - 산책 기록 시각화 (그래프) - 노트 수정	- 전체 기록확인 - 산책 기록 시각화 (캘린더)

3. 건강 관리

• 체중 관리
• 사료/간식 급여 기록
• 급여 시간 관리

4. 일정 관리

• 병원, 예방접종 등 일정 등록
• 캘린더 뷰 및 알림 기능

💻 UI/UX

반응형 디자인

• mobile 우선 설계
• PC에서는 mobile 프레임으로 제공

테마 설정

• 라이트/다크 모드 지원
• 시스템 설정 연동
• 수동 테마 변경 가능

mobile	PC

🔧 기술 스택

Frontend

• Config :

• Core :

• State Management :

• Form & Validation :

• Styling :

• Tools :

Backend

[백엔드 스택 정보]

🏗️ 아키텍처

Frontend

• 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] 개발 전략 문서를 참고해주세요.

Backend