BodyManager Project

BodyManager — 헬스장 통합 운영 관리 플랫폼

1. 시스템 아키텍처 (System Architecture)

Spring Boot와 React를 분리하여 구축하고, JWT를 이용한 Stateless 인증 방식을 채택했습니다.

graph TD
    subgraph Client [Client Side]
        React["React Application
(Redux Toolkit)"]
    end

    subgraph Server [Server Side]
        SpringBoot["Spring Boot API Server
(Spring Security)"]
        WebSocket["WebSocket / STOMP"]
    end

    subgraph Data [Data Persistence]
        MariaDB[("MariaDB
(JPA / QueryDSL)")]
        S3[("AWS S3
(File Storage)")]
    end

    subgraph External [External Services]
        Toss["Toss Payments"]
        SMTP["Gmail SMTP"]
    end

    React -->|REST API / JWT| SpringBoot
    React -->|Real-time Chat| WebSocket
    SpringBoot -->|ORM| MariaDB
    SpringBoot -->|Image Upload| S3
    SpringBoot -->|Payment Verify| Toss
    SpringBoot -->|Email Auth| SMTP

2. 주요 기능 및 화면 (UI/UX)

체성분 시각화

Recharts 라이브러리를 활용하여 인바디 데이터의 변화 추이를 라인/바/레이더 차트로 직관적으로 보여줍니다.

실시간 상담 시스템

WebSocket을 활용한 실시간 양방향 통신으로 실시간 상담을 제공합니다.

3. 핵심 로직: STOMP 실시간 채팅

메시지 브로커 패턴을 활용한 실시간 양방향 통신 프로세스입니다.

sequenceDiagram
    participant UserA as Sender (Client)
    participant Server as Spring Boot (Broker)
    participant UserB as Receiver (Client)
    participant DB as MariaDB

    UserA->>Server: 1. CONNECT (SockJS/WS)
    UserB->>Server: 1. CONNECT (SockJS/WS)
    UserB->>Server: 2. SUBSCRIBE (/sub/room/1)
    
    UserA->>Server: 3. SEND (/pub/chat/message)
Content: "안녕하세요!"
    
    activate Server
    Server->>DB: 4. 메시지 영구 저장 (JPA)
    Server->>Server: 5. 메시지 브로커 라우팅
    Server-->>UserB: 6. MESSAGE (/sub/room/1)
Content: "안녕하세요!"
    deactivate Server

    UserB->>UserB: 7. UI 업데이트 (Redux State)

4. 데이터베이스 설계 (ERD)

회원 정보, 인바디 기록, 출석, 결제 정보가 유기적으로 연결된 관계형 데이터베이스 구조입니다.

▲ MariaDB 주요 엔티티 관계도 (JPA Entity 기반)

5. 기술 스택 (Tech Stack)

6. 트러블 슈팅

개발 과정에서 발생한 이슈를 증상 → 원인 → 해결 흐름으로 정리했습니다.

• [API] JSON 데이터가 정상적으로 전달되지 않음

  증상

  API 호출은 되지만 서버에서 요청 body가 비어 있거나, 기대한 JSON 구조가 전달되지 않아 처리 실패가 발생
  원인

  요청 헤더/바디 구성 오류 또는 Axios 요청 설정(데이터 전달 방식)이 맞지 않아 실제 전송 payload가 예상과 달라짐
  해결

  Axios 인터셉터로 요청/응답을 로깅하여 실제 전송되는 payload를 확인하고, 요청 형식(JSON body/headers)을 정상화하여 데이터 전달 문제를 해결

• [Auth] JWT 인증 토큰이 정상적으로 전달되지 않음

  증상

  로그인 이후에도 인증이 필요한 API에서 401 Unauthorized가 발생하거나, 토큰 누락으로 인해 인증 흐름이 끊김
  원인

  요청에 Authorization 헤더가 포함되지 않거나, 토큰 저장/추출/주입 과정에서 누락이 발생
  해결

  Axios interceptor에서 토큰을 읽어 Authorization: Bearer ... 형태로 자동 주입하도록 구성하여 인증 요청의 일관성을 확보

• [CORS] 브라우저에서 API 호출이 차단됨

  증상

  브라우저 콘솔에 CORS 오류가 발생하며 API 호출이 실패
  원인

  프론트/백엔드 Origin이 달라 브라우저가 보안 정책으로 요청을 차단하며, 서버의 CORS 허용 설정이 충분하지 않음
  해결

  프론트 작업자와 요청 URL/포트/인증 방식(쿠키/헤더)을 함께 점검하고, 서버 CORS 허용 정책을 맞춰 설정하여 문제를 해결

▲ Notion을 통한 협업 및 트러블 슈팅 기록