ONAANDALL/frontend

Fork 0

Files

T

chanii8 d07c5fab1a [as] 프로젝트 생성

2026-05-12 14:31:45 +09:00

25 KiB

Raw Blame History

화면설계서: 결재선 관리

1. 기본 정보

항목	내용
버전	0.1 (초안)
프로세스명	UI설계
화면명	결재선 관리
화면 유형	[v] 조회 [v] 입력 [v] 수정 [v] 삭제 [ ] 출력
메뉴 경로	디지털행정지원 > 시스템관리 > 결재선 관리

2. 화면 목적

전자결재 처리에 사용할 결재서식(템플릿)을 등록·관리하고, 각 서식별로 결재선(접수 -> 검토 -> 승인 -> 최종승인 단계)을 구성한다. 상단의 결재서식 목록에서 하나를 선택하면 하단 영역에 해당 서식의 결재 단계(결재자/순서/구분)가 표시되며, 사용자는 결재자 추가·수정·삭제와 결재선 저장을 수행한다.

3. 화면 구성

3-1. 전체 레이아웃

┌──────────────────────────────────────────────────────────────────────────────┐
│  페이지 타이틀: 결재선 관리              브레드크럼: 디지털행정지원 > … >    │
├──────────────────────────────────────────────────────────────────────────────┤
│  [영역 A] 전자결재선 관리 목록                              [서식 등록]      │
│  ┌──────────────────────────────────────────────────────────────────────┐    │
│  │ 전자결재서식아이디 | 결재서식명 | 문서구분 | 등록일시 | 관리         │    │
│  ├──────────────────────────────────────────────────────────────────────┤    │
│  │  TMPL-0001 (선택 행 강조)  …                            [수정][삭제] │    │
│  │  TMPL-0002 …                                            [수정][삭제] │    │
│  └──────────────────────────────────────────────────────────────────────┘    │
├──────────────────────────────────────────────────────────────────────────────┤
│  [영역 B] 결재선 관리                            선택된 서식: TMPL-0001      │
│  ┌──────────────────────────────────────────────────────────────────────┐    │
│  │ [영역 B-1] 결재자 입력 폼                                            │    │
│  │ 결재선아이디(자동발급) | 결재구분 ▾ | 결재자명 [검토인력 선택]       │    │
│  │ 결재순서번호               [결재자 추가] [결재선 저장] [초기화]      │    │
│  ├──────────────────────────────────────────────────────────────────────┤    │
│  │ [영역 B-2] 결재선 그리드                                             │    │
│  │ 결재선아이디 | 결재순서번호 | 결재구분 | 결재자명 | 등록일시 | 관리 │    │
│  │  APLN-0001  |     1        | 접수     | 김민수   | …      |[수정][삭제] │
│  │  APLN-0002  |     2        | 검토     | 박지훈   | …      |[수정][삭제] │
│  │  APLN-0003  |     3        | 최종승인 | 이서연   | …      |[수정][삭제] │
│  └──────────────────────────────────────────────────────────────────────┘    │
└──────────────────────────────────────────────────────────────────────────────┘

3-2. 화면 데이터 흐름

BEGIN

  // 최초 진입
  CALL TBD.결재서식목록조회()
  DISPLAY 결재서식 그리드 (영역 A)
  DISPLAY 빈 상태 안내 (영역 B)            // 서식 미선택 시 폼·그리드 비활성

  // 영역 A: 서식 행 선택
  ON 영역 A 행 CLICK DO
      SET 선택된 서식 = 행.전자결재서식아이디  // 영역 B 상단 라벨에 표시
      CALL TBD.결재선목록조회(서식아이디)
      DISPLAY 결재선 그리드 (영역 B-2)
      RESET 결재자 입력 폼 (영역 B-1)
  END ON

  // 영역 A: 신규 서식 등록
  ON [서식 등록] 버튼 CLICK DO
      OPEN 결재서식 등록 다이얼로그
      ON 확인 DO
          CALL TBD.결재서식등록(서식정보)
          CALL TBD.결재서식목록조회()        // → 영역 A 갱신
      END ON
  END ON

  // 영역 A: 서식 수정·삭제
  ON 영역 A [수정] 버튼 CLICK DO
      OPEN 결재서식 수정 다이얼로그(선택 행)
      ON 확인 DO
          CALL TBD.결재서식수정(서식아이디, 서식정보)
          CALL TBD.결재서식목록조회()
      END ON
  END ON

  ON 영역 A [삭제] 버튼 CLICK DO
      CONFIRM "선택한 결재서식을 삭제하시겠습니까?"
      CALL TBD.결재서식삭제(서식아이디)
      CALL TBD.결재서식목록조회()
      IF 삭제된 서식이 현재 선택된 서식 THEN
          RESET 영역 B (그리드 비우기, 폼 비활성)
      END IF
  END ON

  // 영역 B-1: 결재자 입력 폼
  ON [검토인력 선택] 버튼 CLICK DO
      VALIDATE 서식 선택됨   // 미선택 시 안내 후 종료
      OPEN 검토인력 선택 다이얼로그
      ON 선택 DO
          SET 결재자명 = 선택인력.성명
          SET 결재자ID = 선택인력.사용자ID   // 내부 상태로 보관
      END ON
  END ON

  ON 결재구분 SELECT CHANGE DO
      SET 결재구분 = 선택값                // 접수 / 검토 / 최종승인
  END ON

  ON 결재순서번호 INPUT CHANGE DO
      SET 결재순서번호 = 값(숫자)
  END ON

  // 영역 B-1: 결재자 추가 (그리드에 행 추가, 미저장 상태)
  ON [결재자 추가] 버튼 CLICK DO
      VALIDATE 서식 선택됨
              · 결재구분 입력
              · 결재자 선택됨
              · 결재순서번호 > 0 (중복 시 안내)
      ADD 입력 폼 값을 영역 B-2 그리드에 임시 행으로 추가
      RESET 결재자 입력 폼 (영역 B-1)
      // 결재선아이디는 저장 시점에 서버에서 자동 발급되므로
      // 임시 행은 클라이언트 임시 키로 식별 (예: APLN-0007 같은 미발급 표기 또는 임시 ID)
  END ON

  // 영역 B-1: 결재선 저장 (그리드 전체 일괄 저장)
  ON [결재선 저장] 버튼 CLICK DO
      VALIDATE 서식 선택됨 · 결재선 1건 이상 · 순서번호 중복 없음
      CALL TBD.결재선일괄저장(서식아이디, 결재선목록)
      CALL TBD.결재선목록조회(서식아이디)    // → 영역 B-2 갱신
      TOAST "결재선이 저장되었습니다."
  END ON

  // 영역 B-1: 초기화
  ON [초기화] 버튼 CLICK DO
      RESET 결재자 입력 폼 (영역 B-1) → 기본값
                                     (결재구분=접수, 결재자명="", 결재순서번호=1)
  END ON

  // 영역 B-2: 그리드 행 수정·삭제
  ON 영역 B-2 [수정] 버튼 CLICK DO
      OPEN 결재자 수정 다이얼로그(선택 행)
      ON 확인 DO
          CALL TBD.결재선수정(결재선아이디, 결재선정보)
          CALL TBD.결재선목록조회(서식아이디)
      END ON
  END ON

  ON 영역 B-2 [삭제] 버튼 CLICK DO
      CONFIRM "선택한 결재자를 삭제하시겠습니까?"
      CALL TBD.결재선삭제(결재선아이디)
      CALL TBD.결재선목록조회(서식아이디)
  END ON

END

4. 영역 A: 전자결재선 관리 목록

선택된 결재서식이 영역 B의 작업 대상이 된다. 행 클릭으로 선택 상태를 표시(좌측 컬러 바·배경 강조)한다.

4-1. 헤더 / 툴바

항목	내용
섹션 타이틀	전자결재선 관리 목록
우측 버튼	[서식 등록] — 결재서식 등록 다이얼로그 오픈

4-2. 그리드 컬럼

컬럼명	Field	타입	비고
전자결재서식아이디	`elctAtrzTmpltId`	string	예) `TMPL-0001` (서버 자동 발급, TBD)
결재서식명	`atrzTmpltNm`	string	예) `설치인가 검토 결재`
문서구분	`docSeNm`	string	예) `설치인가`, `기본계획` (코드/명 매핑 TBD)
등록일시	`regDt`	string	`YYYY-MM-DD HH:mm:ss`
관리	—	—	행별 [수정] · [삭제] 버튼

행 클릭 시: 해당 서식을 선택 상태로 만들고 영역 B 라벨(선택된 서식: {전자결재서식아이디})과 영역 B-2 그리드를 갱신한다.
페이지네이션: TBD (스크린샷에는 미표시).

4-3. 버튼

버튼명	위치	동작
서식 등록	섹션 우측 상단	결재서식 등록 다이얼로그 오픈 (입력 항목·필수값 TBD)
수정	행별	결재서식 수정 다이얼로그 오픈 (해당 행 값으로 초기화)
삭제	행별	확인 다이얼로그 후 삭제. 선택 중인 서식이면 영역 B 상태도 초기화.

4-4. 다이얼로그(개요)

다이얼로그명	트리거	입력 항목(예상)	비고
결재서식 등록	[서식 등록] 클릭	결재서식명, 문서구분(드롭다운)	등록 성공 시 영역 A 갱신
결재서식 수정	행별 [수정]	결재서식명, 문서구분	기존 값으로 초기화
결재서식 삭제 확인	행별 [삭제]	(확인/취소)

5. 영역 B: 결재선 관리

영역 A에서 선택된 결재서식을 기준으로 결재 단계(접수·검토·최종승인)와 결재자, 순서를 관리한다. 영역 B는 상단 결재자 입력 폼(B-1) 과 하단 결재선 그리드(B-2) 로 구성된다.

5-1. 헤더 / 상태 표시

항목	내용
섹션 타이틀	결재선 관리
우측 라벨	`선택된 서식: {전자결재서식아이디}` — 영역 A에서 선택한 서식 ID를 강조 색으로 표시. 미선택 시 영역 B 비활성.

5-2. 영역 B-1: 결재자 입력 폼

필드 정의

표시명	입력 유형	필수	기본값	데이터 소스	API 파라미터 매핑	비고
결재선아이디(자동발급)	텍스트(읽기 전용)	—	`APLN-XXXX`	서버 자동 발급 (TBD)	TBD	입력 불가. 저장 시 서버 발급. 표시값은 미발급 자리표시(또는 임시 ID).
결재구분	드롭다운	예	`접수`	코드 (TBD)	TBD	옵션: 접수 / 검토 / 최종승인 (그리드 행 기준)
결재자명	텍스트(읽기 전용)	예	`""`	[검토인력 선택] 결과	TBD	자유 입력 불가. 다이얼로그 선택 결과로 채움.
결재순서번호	숫자 입력	예	`1`	—	TBD	1 이상의 정수. 동일 서식 내 중복 검증 필요.

플레이스홀더 / 표시 텍스트:

결재자명 입력란 플레이스홀더: 검토인력을 선택하세요
결재선아이디 표시 예시: APLN-0007 (다음 발급 예정 번호 노출 또는 빈 칸 — 표시 정책 TBD)

버튼

버튼명	동작
검토인력 선택	검토인력 선택 다이얼로그 오픈. 선택 시 `결재자명`과 내부 `결재자 ID`를 폼 상태에 반영.
결재자 추가	입력 폼 값을 영역 B-2 그리드에 임시 행으로 추가하고 폼을 초기화한다. (서버 호출 없음, 저장 시 일괄 반영.)
결재선 저장	영역 B-2의 결재선 목록을 일괄 저장 API로 전송한다. 성공 시 그리드 재조회 + 토스트 표시.
초기화	입력 폼을 기본값으로 리셋(결재구분=접수, 결재자명=빈값, 결재순서번호=1).

정책 메모: [결재자 추가] 와 [결재선 저장] 의 분리에 대해서는 두 가지 운영이 가능하다. 본 SPEC 초안은 그리드에 임시 행을 누적해 두고 [결재선 저장] 시점에 서버에 일괄 반영하는 모델을 가정한다. 실제 구현 방식(추가 즉시 저장 vs 일괄 저장)은 백엔드 API 확정 후 재정의(TBD).

다이얼로그

다이얼로그명	트리거	표시 내용 / 입력 항목	결과
검토인력 선택	[검토인력 선택]	사용자 검색 필터(이름/소속 등 TBD), 사용자 목록(단일 선택)	선택된 사용자 정보를 입력 폼에 반영
결재자 수정	B-2 행별 [수정]	결재구분, 결재자명(선택), 결재순서번호	확인 시 해당 행 갱신
결재자 삭제 확인	B-2 행별 [삭제]	(확인/취소)	확인 시 해당 행 삭제

5-3. 영역 B-2: 결재선 그리드

그리드 컬럼

컬럼명	Field	타입	비고
결재선아이디	`atrzLineId`	string	예) `APLN-0001` (서버 자동 발급, TBD)
결재순서번호	`atrzSeqNo`	number	1부터 시작. 단계 순서.
결재구분	`atrzSeNm`	string	`접수` / `검토` / `최종승인`
결재자명	`atrzUserNm`	string	검토인력 선택 시 채워짐
등록일시	`regDt`	string	`YYYY-MM-DD HH:mm:ss`
관리	—	—	행별 [수정] · [삭제] 버튼

표시 정렬: 기본 결재순서번호 오름차순.
임시 행(서버 미저장)과 저장된 행의 시각적 구분 필요(예: ID 컬럼 표기 또는 행 스타일). 세부 UI는 TBD.
페이지네이션: TBD.

6. API/DTO 명세

본 화면은 현재 UI 위주 초안으로, API/DTO는 백엔드 명세 확정 후 채운다.

6-1. 공통

항목	내용
Base prefix	TBD (예: `/server` 또는 결재 서비스 prefix)
인증	JWT 토큰 기반 (Authorization 헤더)
클라이언트	TBD (예: `@/entities/approval-line`)

6-2. 전자결재서식 (영역 A)

기능	Method	URL	Request DTO	Response DTO	API(클라이언트 함수명)
결재서식 목록 조회	TBD	TBD	TBD	TBD	TBD
결재서식 등록	TBD	TBD	TBD	TBD	TBD
결재서식 수정	TBD	TBD	TBD	TBD	TBD
결재서식 삭제	TBD	TBD	TBD	TBD	TBD

6-3. 결재선 (영역 B)

기능	Method	URL	Request DTO	Response DTO	API(클라이언트 함수명)
결재선 목록 조회(서식별)	TBD	TBD	`{ elctAtrzTmpltId }` (TBD)	TBD	TBD
결재선 추가/일괄 저장	TBD	TBD	`{ elctAtrzTmpltId, lines[] }` (TBD)	TBD	TBD
결재선 수정	TBD	TBD	TBD	TBD	TBD
결재선 삭제	TBD	TBD	TBD	TBD	TBD

6-4. 검토인력 (다이얼로그)

기능	Method	URL	Request DTO	Response DTO	API(클라이언트 함수명)
검토인력 목록 조회	TBD	TBD	TBD (검색 필터)	TBD	TBD

7. UI 구현 가이드

7-1. 기술 스택·원칙

공통 컴포넌트: @common/components (버튼, 셀렉트, 인풋, 카드 등 기존 패턴 재사용).
테이블: @tanstack/react-table, 프로젝트 표준 useDataTable 패턴이 있다면 동일하게 적용.
데이터: React Query 기반 조회/뮤테이션. API 확정 후 queryKey 와 무효화 정책 정리.
상태: 영역 A의 선택된 서식 ID, 영역 B-1의 결재자 입력 폼 값, 영역 B-2의 임시 결재선 배열은 페이지 로컬 상태로 관리. 다이얼로그 상태(검토인력 선택 등)는 컴포넌트 로컬 상태 또는 가벼운 상태 관리 훅으로 분리.
모의 데이터: 백엔드 명세 확정 전까지 @faker-js/faker 로 그리드 목데이터 구성(스크린샷 컬럼/값과 동일 형태).

7-2. 모듈·파일 배치(제안)

구분	경로
라우트(App Router)	`apps/as/app/(with-base-layout)/approval-line-management/page.tsx`
페이지 컴포넌트	`apps/as/src/pages/approval-line-management/index.ts` `.../ui/approval-line-management-page.tsx`
위젯(영역 단위)	`apps/as/src/widgets/approval-template-list/` `apps/as/src/widgets/approval-line-editor/`
피처(상호작용)	`apps/as/src/features/approver-picker/` (검토인력 선택 다이얼로그)
엔티티(도메인)	`apps/as/src/entities/approval-template/` `apps/as/src/entities/approval-line/`
그리드 컬럼 정의	`entities/approval-template/model/approval-template-table-columns.tsx` `entities/approval-line/model/approval-line-table-columns.tsx`
API 클라이언트	`entities/approval-template/api/`, `entities/approval-line/api/` (TBD)

7-3. 영역별 UI 매핑

영역	주요 UI	비고
A	섹션 헤더 + Button(`서식 등록`) + DataTable (행 선택, 행별 Action 버튼)	선택 행 강조, 행 클릭으로 영역 B 갱신
B 헤더	상태 라벨 `선택된 서식: {ID}`	미선택 시 영역 B-1·B-2 비활성
B-1	읽기 전용 Input(아이디), Select(결재구분), Input+Button(결재자/검토인력 선택), NumberInput(순서번호), Action 버튼 3종(`결재자 추가`/`결재선 저장`/`초기화`)	폼 유효성 검증 후 그리드에 임시 행 추가
B-2	DataTable (행별 [수정][삭제]), 임시 행 시각적 구분	기본 정렬: 결재순서번호 ASC
공통	Dialog(검토인력 선택, 서식 등록/수정, 결재자 수정, 삭제 확인)	디자인 시스템의 `Dialog` 컴포넌트 사용

7-4. 데이터 흐름(요약)

진입 시: 결재서식 목록 조회(TBD) → 영역 A 그리드 렌더. 영역 B는 안내/비활성 상태.
서식 선택 시: 선택된 elctAtrzTmpltId 를 페이지 상태로 보관 → 결재선 목록 조회(TBD) → 영역 B-2 그리드 갱신. 영역 B-1 폼 초기화.
결재자 추가: 입력 폼 값을 영역 B-2의 클라이언트 임시 배열에 push. 결재선아이디는 미발급 상태로 표시(또는 임시 키). 폼 리셋.
결재선 저장: 임시 배열 + 기존 그리드 행을 합쳐 일괄 저장 API(TBD) 호출 → 성공 시 그리드 재조회 + 토스트.
수정/삭제: 각각의 단건 API(TBD) 호출 후 그리드 재조회.
검토인력 선택 다이얼로그: 사용자 목록 조회(TBD) → 단일 선택 → 폼의 결재자명/결재자 ID 갱신.
서식 등록/수정/삭제: 다이얼로그 또는 확인 후 단건 API(TBD) 호출 → 영역 A 그리드 재조회. 삭제 대상이 현재 선택된 서식이면 영역 B 초기화.

7-5. 미확정 / 검증 필요 항목 (TBD)

모든 백엔드 API 경로·DTO·필드명.
결재선아이디(자동발급) 입력 박스의 표시 정책: (a) 다음 발급 예정 번호 미리 보여주기, (b) 저장 전에는 빈 칸 또는 자리표시자만, (c) 임시 ID.
[결재자 추가] 의 동작: 그리드에 임시 누적(현재 가정) vs 즉시 단건 저장.
결재구분 코드 값(접수/검토/최종승인)의 코드 매핑.
문서구분 코드 값(설치인가/기본계획 등)의 코드 매핑.
영역 A·B 그리드의 페이지네이션·정렬·검색 필터 유무.
검토인력 선택 다이얼로그의 검색 필드(부서/직급/이름 등) 및 다중 선택 허용 여부.
결재선 저장 시 순서번호 중복·누락(예: 1, 2, 4) 허용 정책.
권한(역할별 등록/수정/삭제 가능 여부).

25 KiB Raw Blame History