✨ 프론트엔드 주요 기능 (Key Frontend Features)

• ✅ 사용자 및 펫 UI 관리

  회원가입/로그인 화면, 소셜 로그인(OAuth2)
  펫 등록 및 정보 수정 화면, 건강 기록 리포트 UI 제공

• ✅ 산책 경로 및 실시간 위치 시각화

  지도 기반 산책 경로 표시 및 실시간 위치 업데이트 (WebSocket)
  안전 구역(Geo-fencing) 시각화 및 알림 UI (FCM)

• ✅ 활동 및 건강 통계 시각화

  산책 기록, 활동량, 심박수, 수면 패턴 차트/그래프 표시
  통계 데이터 조회 UI 제공 (MySQL + MyBatis 기반 API 연동)

• ✅ 커뮤니티 UI

  게시글 목록/상세보기, 댓글 기능
  인기 게시글/검색 UI 제공

• ✅ 알림 및 푸시

  활동 목표 달성 알림, 지오펜싱 이탈 알림, 커뮤니티 댓글/답글 알림 등 UI 구현

• ✅ 성능 최적화

  데이터 로딩 최적화 및 캐싱, 비동기 UI 처리 (Redux/React Query 등 활용 가능)

⚙️ 기술 스택 (Tech Stack)

Frontend & Styling

Data Management & Real-time

🤖 프론트엔드 아키텍처 (Frontend System Architecture)

앱/웹 클라이언트를 중심으로 UI 요청과 실시간 데이터 처리 흐름 다이어그램
(사용자 입력 → React/TS 기반 UI 처리 → API 호출 → Spring Boot 서버 → MySQL/JPA/MyBatis 데이터 조회 → WebSocket/FCM 실시간 데이터 수신 → UI 업데이트)

🤝 Conventions

우리 프로젝트는 원활한 협업을 위해 아래와 같은 규칙을 따릅니다.

• Commit Convention

📊 프론트엔드 참고자료 출처

👉🏻 React + WebSocket 실시간 데이터 처리 예제

💁‍♂️ 팀원 소개 (Team Members)

조수빈

박태정