Body Manager — 헬스장 관리 시스템

헬스장/피트니스 클럽의 회원 관리, 출결, 운동 일정, 인바디 데이터 시각화, 결제 시스템을 통합한 관리 플랫폼

Body Manager는 헬스장 운영에 필요한 회원 관리, 출결 체크, 운동 일정, 식단 관리, 인바디 데이터 시각화, 멤버십 결제 등의 기능을 제공하는 풀스택 웹 애플리케이션입니다. 백엔드와 프론트엔드 개발을 총괄하여 RESTful API 서버와 React 기반 클라이언트 애플리케이션을 구축했습니다.

역할 및 담당 범위

백엔드 총괄

• Spring Boot 기반 RESTful API 설계 및 구현
• JWT 기반 Stateless 인증/인가 시스템 구축
• QueryDSL을 활용한 동적 쿼리 및 복잡한 검색 기능 구현
• STOMP 프로토콜 기반 실시간 채팅 시스템 구현
• AWS S3를 활용한 파일 업로드 및 관리 시스템
• MariaDB 데이터베이스 설계 및 최적화

프론트엔드 총괄

• React 18 기반 컴포넌트 아키텍처 설계 (Atomic Design Pattern)
• Redux Toolkit을 활용한 전역 상태 관리
• Recharts 기반 인바디 데이터 다차원 시각화
• Toss Payments SDK 연동을 통한 결제 시스템 구현
• STOMP 프로토콜 기반 실시간 채팅 기능 구현

문제 정의 및 해결 방향

해결한 문제

• 세션 기반 인증의 확장성 문제 → JWT 기반 Stateless 인증으로 서버 확장성 확보
• 복잡한 검색 조건 처리 → QueryDSL 동적 쿼리로 타입 세이프한 유연한 쿼리 생성
• 실시간 통신 부재 → STOMP WebSocket으로 회원-트레이너 간 양방향 통신
• 데이터 시각화 부재 → 라인/바/레이다 차트로 인바디 데이터 다차원 시각화
• 결제 프로세스 분산 → Toss Payments SDK 통합으로 단일 플랫폼 결제

주요 기능

• 회원 관리: 회원가입, 로그인, 이메일 인증, 비밀번호 찾기, 프로필 관리
• 인바디 관리: 인바디 데이터 등록/수정, 변화 추이 조회, 부위별 근육량/체지방량 분석
• 출결 관리: 출석 등록, 오늘 출석 조회, 월별 출석 통계
• 식단 관리: 식단 등록/수정, 날짜별 식단 조회
• 실시간 채팅: 회원-트레이너 간 STOMP 기반 실시간 메시징
• 결제 시스템: Toss Payments SDK를 통한 멤버십, PT, 부가 서비스 결제
• 데이터 시각화: 인바디 라인 차트, 바 차트, 레이더 차트

기술 스택

Backend

• Core: Spring Boot 2.6.14, Spring Security, Spring Data JPA
• Database: MariaDB, JPA/Hibernate, QueryDSL 5.0.0
• Authentication: JWT (jjwt 0.9.1), BCrypt Password Encoder
• Real-time: Spring WebSocket, STOMP, SockJS
• File Management: AWS S3, Thumbnailator 0.4.16
• API Documentation: Swagger (Springfox 3.0.0)
• Email: Spring Mail (Gmail SMTP)

Frontend

• Core: React 18.2.0, Redux Toolkit 1.9.0, React Router v6.4.3
• UI/UX: Styled Components 5.3.6, Recharts 2.1.16, React Icons 4.6.0
• Business Logic: Axios 1.1.3, Toss Payments SDK 1.2.3, STOMP.js 2.3.3
• Utilities: React DatePicker, React Daum Postcode, Moment.js

시스템 아키텍처

Backend: 클라이언트 (React) → REST API/WebSocket → Controller → Service Layer → Repository (JPA/QueryDSL) → MariaDB
Frontend: Pages → Templates → Organisms → Molecules → Atoms (Atomic Design) + Redux Store (Global State) → REST API/WebSocket

핵심 기술 구현

• JWT 기반 Stateless 인증: HS256 알고리즘으로 토큰 무결성 보장, 60분 만료 시간 설정, CORS 정책 적용
• QueryDSL 동적 쿼리: 날짜 범위별 인바디 데이터 집계, 역할 기반 채팅방 목록 조회 최적화 (N+1 문제 해결)
• STOMP 실시간 채팅: `/pub` 프리픽스로 메시지 수신, `/sub` 프리픽스로 브로드캐스트, SockJS 폴백 지원
• 인바디 데이터 시각화: Redux를 통한 데이터 정규화, 라인/바/레이다 차트로 다차원 시각화

협업 방식

• 모든 팀원 (4명): 백엔드 2명, 프론트엔드 1명, 백엔드+프론트엔드 1명 (본인)
• GitHub Flow 기반 브랜치 전략 (main / dev / feature)
• Notion으로 일정 및 문서 공유
• 회의 주기: 주 1회 (스프린트 리뷰)

프로젝트 경험

백엔드와 프론트엔드 개발을 총괄하여 풀스택 개발 역량을 키웠습니다. JWT 기반 Stateless 인증 시스템 구축으로 서버 확장성을 확보했고, QueryDSL을 활용한 동적 쿼리 작성으로 복잡한 비즈니스 로직을 효율적으로 처리했습니다. STOMP 프로토콜을 활용한 실시간 채팅 시스템 구현 경험을 쌓았으며, AWS S3를 활용한 파일 관리 시스템을 구축했습니다. 프론트엔드에서는 React 18과 Redux Toolkit을 활용한 상태 관리, Recharts를 활용한 데이터 시각화, Toss Payments SDK 연동을 통한 결제 시스템 구현 경험을 쌓았습니다.