← Case Studies
16개 화면 공통화Polestar 10

복잡한 설정 화면의 공통 Validation 플로우 설계

단계 간 의존성을 가진 설정 화면의 Step 기반 Validation 플로우를 설계해 16개 화면에 공통 적용

ReactTypeScript

배경·문제

알람 정책, 사용자 정의 항목, AIOps 정적 임계치 등 Polestar 10의 설정 화면은 다수의 입력값과 단계 간 의존성을 가지고 있습니다. 특히 알람 정책 Drawer는 7개의 설정 컴포넌트로 구성되어, 상위 단계의 입력이 하위 단계의 활성화 조건이 되는 구조였습니다.

이러한 화면이 도메인마다 반복해서 만들어지고 있어, Validation 로직 역시 화면별로 중복 구현될 가능성이 있었습니다.

설계 — Step 기반 Validation 플로우

  • 상위 단계의 필수값 충족 여부에 따라 다음 설정 영역을 활성화
  • 전체 필수값의 유효성에 따라 저장 가능 여부를 제어
  • 유사한 구조를 가진 16개 설정 화면에서 재사용할 수 있도록 Validation 로직 공통화

추가 개선

  • 입력 상태가 변경될 때마다 반복되던 Validation 로직에 debounce를 적용해 불필요한 실행과 상태 업데이트를 줄임
  • 관리대상을 조회한 뒤 조회 조건을 변경해도 이전 조회 결과로 저장할 수 있는 문제를 발견해, 조건 변경 시 기존 결과를 비활성화하고 재조회를 안내하는 방식을 제안·적용

결과

  • 16개 설정 화면에서 동일한 Validation 플로우 재사용
  • Validation 로직의 일관성을 확보하고 신규 설정 화면의 중복 구현을 줄임