제품 개요
무엇을 만들었는가
Next.js 관리자 웹과 Spring Boot API를 연결하고 교통 관리 업무 흐름을 화면에 반영했습니다.운영 화면과 실데이터는 공개하지 않고, 배포 파이프라인과 비동기 차량 제어 구조를 다이어그램과 사례로 정리했습니다.
기술
React
Next.js
TypeScript
Spring Boot
PostgreSQL
Tailwind CSS
Mantine
Git
DEVELOPMENT ENVIRONMENT
배포와 비동기 제어 흐름
코드가 컨테이너로 배포되고 차량 명령과 처리 결과가 서로 다른 메시지로 오가는 전체 흐름을 포트폴리오 관점에서 요약했습니다.배포 파이프라인
커밋부터 품질 검사와 이미지 저장소까지 이어지는 자동 배포 흐름
DeveloperGit push
Jenkins빌드 · 배포
SonarQube정적 분석
Harbor이미지 저장소
이미지 pull · 내부 서비스 배포
비동기 명령 처리
브라우저 요청을 차량 명령으로 전달하고 결과 상태를 별도 메시지로 회수
Client관리자 브라우저
내부망 · 서비스별 개발 서버
bims-controlNext.js 15 관리자 웹
bims-control-apiSpring Boot · 명령 상태
Kafka명령 큐 · 수집
mqtt-interfaceKafka ↔ MQTT
MQTT BrokerTLS 메시지 브로커
OBE차량 단말 · 외부
결과·상태 반환 · 비동기 응답 경로
상태 저장과 수집
명령 상태, 캐시와 수집 메시지를 분리해 처리
Redis캐시 · 게시
PostgreSQL공용 명령 상태
processing-interfaceKafka 수집 · 저장
작업 범위
주요 기여
- 01버스·노선·운영 데이터를 조회하고 관리하는 Next.js 기반 관리자 화면을 개발하고 Spring Boot API와 연동했습니다.
- 02버스 위치와 운행 이벤트를 지도에서 확인하는 모니터링 화면과 운행·돌발·위반 현황 대시보드를 구현했습니다.
- 03API 요청·응답 데이터를 화면 모델로 변환하고 교통 관리 업무 흐름을 테이블·지도·상세 화면에 반영했습니다.
- 04접속 추이, 로그인 이력과 관리자 권한을 확인하는 운영 화면을 구현했습니다.
- 05Mantine과 Tailwind CSS 기반 공통 UI를 적용하고 Git 기반 코드 리뷰와 이슈 대응에 참여했습니다.
제약과 판단
과제
- 01버스·노선·운영 이벤트가 서로 다른 화면과 API에 흩어져 있어 관리자가 업무 순서대로 확인할 수 있는 화면 흐름으로 묶어야 했습니다.
- 02지도·테이블·상세 화면마다 API 데이터 구조가 달라 화면 모델로 변환하면서 조회·수정 상태를 일관되게 유지해야 했습니다.
검증 가능한 결과
결과
01버스·노선·운영 데이터의 조회·수정 흐름과 지도 관제, 운영 대시보드, 접속 이력 화면을 개발 중인 관리자 시스템에 반영했습니다.
02민감한 운영 화면은 공개하지 않고, 배포 파이프라인과 비동기 차량 제어 흐름을 다이어그램으로 정리했습니다.
