회사에서 한 일 / 1만 행 자산 편집 테이블과 규칙 컴파일러

1만 행 자산 편집 테이블과 규칙 컴파일러

대형 통신사 자회사 자산관리 웹(수탁), 3인 프론트엔드 팀 테크 리드

고객사가 엑셀로 관리하던 통신 장비와 부동산 자산 대장을 웹으로 옮긴 수탁 프로젝트입니다. 1만 행 편집 테이블은 제가 만들고 규칙 컴파일러는 제가 설계했습니다. 팀원 두 명은 자산 밖 메뉴 화면을 맡았습니다.

엘핀2025.07~11 (5개월)3인 프론트엔드 팀FE 테크 리드ReactTypeScriptTanStack RouterTanStack QueryTanStack TableTanStack VirtualVite

한 분류의 행 수1만+

자산 분류 하나만 1만 행이 넘음

편집 규칙1,208개

자산 분류 20종, 컬럼 70개(2025년 10월)

다시 생성한 규칙 파일39개

처리 모드 순서가 바뀐 2025년 11월

일정5개월

10월 통합 테스트, 11월 안정화 뒤 인계

배경

자산 분류 하나만 1만 행이 넘었고 행 상태와 권한에 따라 셀마다 편집 가능 여부가 바뀌었습니다. 한 컬럼에서 고른 값에 따라 다음 컬럼의 선택지가 바뀌는 종속 선택도 여러 단계로 얽혀 있었습니다.

현업은 엑셀처럼 많은 행을 한눈에 보고 그 자리에서 고치기를 기대했습니다.

상황: 이 프로젝트처럼 행 상태마다 편집 규칙이 다르면 완성형 그리드에서는 규칙을 컬럼 설정마다 나눠 적어야 했습니다.
고른 것: 헤드리스(headless) TanStack Table에 TanStack Virtual을 조합해 보이는 행만 그리는 편집 테이블을 만들고 편집 규칙은 데이터 모델 한곳에 두었습니다.
감수한 것: 그리드가 기본으로 주는 변경 내역 확인을 직접 만들어야 했습니다. 편집 규칙이 단순한 프로젝트라면 완성형 그리드를 고르겠습니다.

자산통합조회 화면 (예시 데이터, 1,000행씩 보기)

상황: 컬럼별 검사, 종속 선택, 조건부 편집 규칙 1,208개를 화면 코드에 흩어 쓰면 기획이 바뀔 때마다 여러 파일을 손으로 고쳐야 했습니다.
고른 것: 컬럼마다 조건, 우선순위, 타입을 JSON으로 선언하고 컴파일러가 이를 읽어 TypeScript 코드를 생성하게 설계했습니다.
결과: 11월에 기획 변경으로 처리 모드 순서가 바뀌었을 때 컬럼 규칙 파일 39개를 손으로 고치지 않고 컴파일러로 다시 생성했습니다.

문제: 보기 모드로 바꿔도 고치던 셀의 노란 편집 표시가 그대로 남았습니다. 행을 고친 뒤 필터나 페이지를 바꾸면 변경 내역 화면에서 그 행의 나머지 값이 비어 보였습니다.
원인: 보기 모드 버튼은 데이터만 보기 모드로 바꾸고 화면에 열려 있던 셀 편집은 닫지 않았습니다. 변경 내역에는 고친 칸의 값만 남아 있어서 필터나 페이지가 바뀌어 그 행이 화면 데이터에서 빠지면 나머지 칸을 채울 원래 값이 없었습니다.
해결: 모드를 바꾸기 전에 셀 편집부터 닫게 했습니다. 행을 처음 고칠 때 원래 행 전체를 따로 저장해 두고 변경 내역 화면은 이 값으로 채웁니다. 변경 내역 화면에서 되돌린 값이 다시 들어가지 않도록 이 화면이 열린 동안에는 고치던 행을 잠급니다.
확인: 모드 전환, 필터 변경, 페이지 이동을 섞어 가며 화면에서 확인했습니다.

상황: 프로젝트 초기에 기획 인력이 바뀌어 요구사항이 흐려졌습니다. 이대로 세 사람이 각자 화면을 만들면 같은 테이블과 모달을 여러 번 만들게 됩니다.
고른 것: PM과 화면 기준을 정하고 공통 컴포넌트와 레이아웃 규격을 먼저 정해 팀에 나눴습니다.
결과: 2025년 10월 통합 테스트와 11월 안정화까지 일정대로 마치고 유지보수를 팀원에게 인계했습니다.