포트폴리오
프로젝트 목록으로 돌아가기

프로젝트 상세

팀 프로젝트 · 백엔드 3명

BuildSync

건설 자재 발주 및 재고 관리 시스템

프로젝트 링크

GitHub 저장소 (새 창에서 열림)

새 창에서 BuildSync 공개 저장소를 엽니다.

프로젝트 자료

프로젝트 화면

BuildSync의 실제 화면과 프로젝트 시각 자료입니다.

BuildSync 건설 자재 발주·재고 관리 서비스 소개 화면
BuildSync 건설 자재 발주·재고 관리 서비스 소개 화면

개요

프로젝트 개요

백엔드 3인이 역할을 나누어 건설 현장의 발주, 재고, 일정과 비용 데이터를 통합 관리하도록 구현한 팀 프로젝트입니다.

프로젝트 형태
팀 프로젝트 · 백엔드 3명
서비스 유형
발주 및 재고 관리 시스템
개발 기간
2026.05.27 — 2026.06.30
발표
2026.07.03

개인 기여

담당 기능

인증과 계정, 거래처와 일정, 분석 기능을 구현하고 React 화면의 인증 상태와 백엔드 API를 연결했습니다.

  1. 인증 및 계정

    회원가입과 로그인, JWT 인증 흐름을 구성하고 PENDING·REJECTED·INACTIVE 상태에 따라 로그인을 제한했습니다. 계정 정보 수정과 회원 탈퇴 기능도 구현했습니다.

  2. 일정 관리

    공사 일정 CRUD와 캘린더 조회 API를 구현하고, 공사·자재 입고·납품 일정을 FullCalendar 이벤트 형식으로 연결했습니다.

  3. 거래처 관리

    거래처 등록·조회·수정·삭제 API와 목록 검색, 유형 필터, 페이지네이션을 구현했습니다.

  4. 데이터 분석

    건설업체의 월별 구매 비용과 현장별 자재 사용 비용, 공급업체의 월별 매출과 현장별 비용 조회를 구현했습니다.

  5. 프런트엔드 인증 연동

    로그인 정보를 Context와 localStorage로 관리하고 API 요청에 JWT를 전달했습니다. 인증이 필요한 일정·거래처·분석 화면에는 로그인 상태에 따른 접근 처리를 적용했습니다.

사용 기술

기술 스택

BuildSync 저장소의 README와 구성 파일에서 확인한 기술을 역할별로 정리했습니다.

백엔드

  • Java 17
  • Spring Boot 3.5.5
  • Spring Security 6.5.3
  • Spring Data JPA
  • JWT
  • MySQL 8

프런트엔드

  • React
  • Vite
  • TypeScript

인프라

  • Docker
  • Docker Compose
  • Nginx
  • AWS EC2

구성

시스템 아키텍처

Nginx가 진입점이 되어 React 프론트엔드와 Spring Boot API 요청을 분기하고, 백엔드는 MySQL과 연결됩니다.

BuildSync의 React 프런트엔드, Nginx 리버스 프록시, Spring Boot 백엔드, MySQL 데이터베이스와 AWS EC2 및 Docker Compose 배포 구성을 나타낸 시스템 아키텍처

핵심 흐름사용자 → React/Vite → Nginx → Spring Boot API → MySQL → 응답 반환

원본 크기로 보기 (새 창에서 열림)

핵심 기능

주요 기능

팀 전체가 구현한 BuildSync의 서비스 주요 기능을 사용자 흐름에 따라 정리했습니다.

사용자 및 권한 관리

회원가입과 로그인, 사용자 승인 상태 관리, 계정 설정과 탈퇴

현장 및 일정 관리

공사 현장과 일정을 등록·수정·삭제하고 캘린더에서 조회

발주 및 재고 관리

발주 요청·승인·취소와 입출고 처리, 재고 현황 및 부족 알림 관리

거래처 및 자재 관리

거래처와 자재 정보를 등록·조회·수정·삭제

데이터 분석

월별 구매·매출 비용과 현장별 자재 사용·비용을 조회

트러블슈팅

문제 해결

코드와 수정 커밋에서 확인된 인증, 화면 상태 동기화, 컨테이너 실행 문제를 정리했습니다.

JWT 인증과 사용자 승인 상태 분리

문제
아이디와 비밀번호가 일치하더라도 승인 대기, 반려 또는 비활성 상태의 계정은 서비스 접근을 허용하면 안 됐습니다.
해결
로그인 시 비밀번호 검증 후 CompanyStatus를 확인해 PENDING·REJECTED·INACTIVE 상태별로 요청을 중단하고, 정상 계정에만 JWT를 발급했습니다. 이후 요청은 OncePerRequestFilter에서 Bearer 토큰을 검증해 SecurityContext에 인증 정보를 설정했습니다.

결과

  • 계정 상태별 로그인 제한
  • JWT 기반 Stateless 인증 흐름 구성

비로그인 사용자의 보호 화면 접근

문제
토큰이 없는 사용자가 일정, 거래처, 분석 URL에 직접 접근하면 화면이 먼저 렌더링되고 인증 API가 호출될 수 있었습니다.
해결
AuthContext의 로그인 상태를 각 보호 화면에서 확인하고, 비로그인 상태에는 LoginRequired 화면을 반환하도록 라우팅 흐름을 보완했습니다.

결과

  • 보호 화면의 접근 조건 통일
  • 백엔드 인증과 프런트 화면 상태 연결

일정 변경 후 캘린더 데이터 미반영

문제
일정 목록이나 캘린더로 돌아왔을 때 이전에 불러온 데이터가 남아 변경 내용이 바로 표시되지 않았습니다.
해결
일정 조회 함수를 useCallback으로 고정하고 화면이 다시 포커스를 받을 때 목록과 캘린더 데이터를 재조회하도록 이벤트 등록과 정리 로직을 추가했습니다.

결과

  • 화면 복귀 시 일정 데이터 재조회
  • 이벤트 리스너 정리 처리

컨테이너 시작 순서와 SPA 라우팅

문제
Docker Compose의 단순 실행 순서만으로는 MySQL 준비 전에 백엔드가 시작될 수 있었고, 프런트엔드 컨테이너에서 직접 경로 접근을 처리할 Nginx 설정도 필요했습니다.
해결
MySQL healthcheck와 service_healthy 조건을 추가하고, 프런트 Nginx에 try_files를 설정해 React 진입점으로 대체하도록 구성했습니다.

결과

  • 데이터베이스 준비 상태 기반 백엔드 시작
  • React 클라이언트 라우트 직접 접근 지원

성과와 학습

결과 및 배운 점

BuildSync를 구현하고 통합하며 이해한 기술적 흐름과 협업 경험을 정리했습니다.

  • Spring Security 필터 체인과 JWT 발급·검증, 사용자 상태 검사를 연결하며 Stateless 인증 흐름을 이해했습니다.

  • 백엔드의 인증 결과를 React Context와 보호 화면에 연결하며 API 보안과 화면 접근 제어를 함께 고려했습니다.

  • 일정과 분석 기능을 구현하며 화면에 필요한 응답 구조와 월별·현장별 집계 기준을 설계했습니다.

  • Docker Compose의 의존성 조건과 Nginx 라우팅을 조정하며 컨테이너 간 연결과 실행 순서의 중요성을 확인했습니다.

  • 백엔드 3인이 기능을 나누어 개발하고 브랜치와 Pull Request로 변경을 통합하는 과정을 경험했습니다.