제품 개요
무엇을 만들었는가
디지털 건설기준 활용기술의 사용성을 높이기 위해 별도로 운영되는 사용자 지원 시스템입니다. 2026년 8월 현재 관계전문가 피드백을 위한 시범운영 단계이며, 자동검토 항목과 배포 자료를 지속적으로 확장하고 있습니다.표준 라이브러리와 사용자 라이브러리, 사용자 건설기준 작성, API 탐색·실행, 활용 SW·매뉴얼 다운로드, 공지·자료·Q&A·건의 게시판을 하나의 흐름으로 연결합니다.프런트엔드에서는 복잡한 건설기준 데이터를 잃지 않고 탐색할 수 있도록 다중 패널 편집 도구, 계층 검색과 빠른 이동, 유형별 상세 편집, 권한별 동작과 외부 연동을 구현했습니다.
기술
Next.js 14
React 18
TypeScript
Mantine
TanStack Query
Zustand
next-intl
TipTap
Jest
React Testing Library
Docker
Jenkins
USER SUPPORT SYSTEM
계층 탐색과 편집 상태 흐름
시설물부터 변수까지 이어지는 기준 계층을 다중 패널에서 다루고, 서버 상태와 로컬 편집을 분리해 API로 활용하는 흐름을 정리했습니다.기준 계층 탐색
시설물부터 변수까지 이어지는 깊은 계층을 한 화면에서 탐색
Object class시설물 · 객체분류
Review item검토항목
Review element검토요소
Variable입출력 · 판정 변수
다중 패널 기준맵 · 선택 맥락 유지
편집과 상태 분리
로컬 편집 상태와 서버 상태를 나눠 저장·검증 이후 화면을 동기화
standards-mapNext.js · Mantine 패널
편집과 상태 분리
Zustand로컬 편집 상태
TanStack Query서버 상태 · query key
Java API기준 CRUD
Pilot opsDocker · Jenkins
저장·삭제·검증 후 화면 동기화
활용과 운영
표준·사용자 라이브러리와 API Center를 시범운영 배포 흐름에 연결
Standard library표준 문서 탐색
User library사용자 기준 편집
API Center요청 실행 · 결과 복사
작업 범위
주요 기여
- 01객체분류, 검토항목, 검토요소와 상세 편집기를 연결하는 다중 패널 가변형 기준맵 도구와 포인터 기반 리사이저를 구현했습니다.
- 02트리 검색, 선택 상태, 하위 노드 CRUD, ID 빠른 이동과 공간정보 조회를 연결해 깊은 계층에서도 현재 작업 위치를 유지하도록 구성했습니다.
- 03건설기준 유형에 따라 본문, Python 룰, 입출력변수와 판정변수 탭을 전환하고 선택값·상위변수·관리변수 편집 흐름을 구현했습니다.
- 04원본 기준과 사용자 정의 기준을 구분해 사용자 코드, 변경 본문과 초기값을 조회·편집하고 외부 화면에서도 같은 데이터 규칙을 유지했습니다.
- 05API Center에 카테고리 탐색, 절대 요청 URL, 요청 본문 사전 입력, 파일 파라미터, 실행 결과와 복사 기능을 구성하고 관리자 권한별 동작을 분리했습니다.
- 06TanStack Query와 기능별 query key, 커스텀 fetch 계층을 사용해 Java 백엔드 CRUD 상태와 저장·삭제·검증 이후 화면 동기화를 관리했습니다.
- 07Jest와 React Testing Library로 사용자 기준 매핑, 관리변수 가시성, 권한, 트리와 편집 도구의 핵심 회귀 경로를 검증했습니다.
제약과 판단
과제
- 01시설물부터 변수까지 이어지는 깊은 계층을 한 화면에 보여주면서도 현재 선택과 편집 맥락을 잃지 않도록 정보 밀도와 패널 크기를 조율해야 했습니다.
- 02정성·정량·판정 유형마다 노출되는 탭과 입력 규칙이 달라, 유형 전환 중에도 기준 코드와 사용자 입력을 안전하게 보존해야 했습니다.
- 03역할별 권한, 쿠키 기반 인증, 외부 WebView·iframe 소비자와 Java API 응답 규약을 하나의 예측 가능한 화면 흐름으로 통합해야 했습니다.
검증 가능한 결과
결과
012026년 8월 기준 실제 사이트에서 표준·사용자 라이브러리, API Center, 활용 SW·매뉴얼과 지원 게시판이 시범운영되고 있습니다.
02기능별 서버 상태와 로컬 편집 상태를 분리하고 핵심 변환·권한 로직에 자동화 테스트를 더해 고도화 과정의 회귀 경로를 관리했습니다.
03Next.js standalone 빌드, Docker 이미지와 Jenkins 파이프라인에 맞는 운영 구조를 유지해 개발·운영 환경의 배포 흐름을 지원했습니다.
