1. 시스템 개요

1.1 주요 컴포넌트


2. 시스템 구성도

graph TD
    subgraph User["👤 User (Web/Mobile)"]
        FE["Frontend (Next.js + React)"]
    end

    subgraph Backend["☁️ Backend Server (Spring Boot)"]
        API["REST API"]
        DB[(MariaDB 11.4)]
    end

    subgraph AI["🧠 AI Server (FastAPI + LangChain)"]
        GPT["OpenAI GPT-3.5 API"]
        FAISS["FAISS Vector DB"]
    end

    FE -->|1. 기록 입력/조회| API
    API -->|2. 데이터 저장/조회| DB
    API -->|3. 추천 요청| AI
    AI -->|4. LLM 호출| GPT
    AI -->|5. 벡터 검색| FAISS
    AI -->|6. 추천 결과 반환| API
    API -->|7. 응답 전달| FE


3. 기술 스택

구분 기술 세부사항
Frontend Next.js 15, React 19 App Router 기반 SSR/CSR 혼합 구조
TypeScript 정적 타입 기반 개발
Zustand, React Query 상태 관리 및 비동기 데이터 캐싱
SCSS Modules, Shadcn/UI 스타일링 및 컴포넌트 디자인 시스템
Vitest, Cypress 단위·E2E 테스트
Backend Spring Boot 3.5.4 REST API 서버
Spring Data JPA ORM
Spring Security + JWT 인증/인가
Swagger (Springdoc) API 문서 자동화
Flyway DB 스키마 버전 관리
AWS S3, AWS Secrets Manager 파일 저장, 보안 설정 관리
AI Server FastAPI AI 게이트웨이 서버
LangChain Core / OpenAI / Mistral LLM 프롬프트 체인 구성
FAISS 벡터 검색 엔진
OpenAI GPT-3.5-turbo 식단/운동 추천 모델
AsyncMy, mysql-connector-python 비동기 DB 연동
Database MariaDB 11.4 정형 데이터 저장
Infra Docker Compose, Nginx, AWS EC2 배포 및 리버스 프록시 구성

4. 컴포넌트 구조

4.1 Frontend