Compare commits
35
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 changwng
|
c3711c2609 | ||
|
changwng
|
957fe4637e | ||
|
changwng
|
4e9bca25ef | ||
|
changwng
|
23d62ab5e6 | ||
|
changwng
|
bedefd7e2e | ||
|
changwng
|
56688eb1a6 | ||
|
changwng
|
175964b652 | ||
|
changwng
|
4f4f5112b5 | ||
|
changwng
|
6d9db4389d | ||
|
changwng
|
b5eceadee8 | ||
|
changwng
|
b74f2820da | ||
|
changwng
|
d0f2e41874 | ||
|
changwng
|
4be56402d8 | ||
|
changwng
|
7df6f40bc4 | ||
|
changwng
|
690724bc74 | ||
|
changwng
|
08bdbe79b5 | ||
|
changwng
|
177f4653c8 | ||
|
changwng
|
cc4acb3916 | ||
|
changwng
|
a06e4f46cf | ||
|
changwng
|
07ae3f7711 | ||
|
changwng
|
46c4634868 | ||
|
changwng
|
0ce35d4c38 | ||
|
changwng
|
f220904742 | ||
|
changwng
|
dc74c07ef4 | ||
|
changwng
|
9a77e9c52a | ||
|
changwng
|
42dc2dc027 | ||
|
changwng
|
14803b2625 | ||
|
changwng
|
1a5180551e | ||
|
changwng
|
e697881581 | ||
|
changwng
|
dd4ee1dcb5 | ||
|
changwng
|
6c71bccc27 | ||
|
changwng
|
9a33663f1e | ||
|
changwng
|
b088918cd9 | ||
|
changwng
|
3f2938df1c | ||
|
changwng
|
c39d1f433a |
Vendored
+196
@@ -0,0 +1,196 @@
|
||||
{
|
||||
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "dev:as 디버그",
|
||||
"runtimeExecutable": "pnpm",
|
||||
"runtimeArgs": [
|
||||
"run",
|
||||
"dev:as"
|
||||
],
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"resolveSourceMapLocations": [
|
||||
"${workspaceFolder}/**",
|
||||
"!**/node_modules/**"
|
||||
],
|
||||
"cwd": "${workspaceFolder}",
|
||||
"console": "integratedTerminal",
|
||||
"sourceMaps": true,
|
||||
"env": {
|
||||
"NODE_OPTIONS": "--inspect --max-old-space-size=8192"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "node-terminal",
|
||||
"request": "launch",
|
||||
"name": "dev:as 서버 컴포넌트 디버그 (node-terminal)",
|
||||
"command": "pnpm --filter as dev",
|
||||
"cwd": "${workspaceFolder}"
|
||||
},
|
||||
{
|
||||
"type": "node-terminal",
|
||||
"request": "launch",
|
||||
"name": "dev:as 통합 디버그 (Server + Client)",
|
||||
"command": "pnpm --filter as dev",
|
||||
"cwd": "${workspaceFolder}",
|
||||
"serverReadyAction": {
|
||||
"action": "debugWithChrome",
|
||||
"pattern": "- Local:\\s+(https?://.+)",
|
||||
"uriFormat": "%s",
|
||||
"webRoot": "${workspaceFolder}/apps/as"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "Playwright: 현재 활성화된 테스트 디버그",
|
||||
"runtimeExecutable": "pnpm",
|
||||
"runtimeArgs": [
|
||||
"--filter",
|
||||
"cs",
|
||||
"exec",
|
||||
"playwright",
|
||||
"test",
|
||||
"${relativeFile}"
|
||||
],
|
||||
"cwd": "${workspaceFolder}",
|
||||
"console": "integratedTerminal",
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"**/node_modules/**"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "Playwright: cs 로그인 테스트 디버그",
|
||||
"runtimeExecutable": "pnpm",
|
||||
"runtimeArgs": [
|
||||
"--filter",
|
||||
"cs",
|
||||
"exec",
|
||||
"playwright",
|
||||
"test",
|
||||
"tests/login.spec.ts"
|
||||
],
|
||||
"cwd": "${workspaceFolder}",
|
||||
"console": "integratedTerminal",
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"**/node_modules/**"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "node-terminal",
|
||||
"request": "launch",
|
||||
"name": "dev:cs 통합 디버그 (Server + Client)",
|
||||
"command": "pnpm --filter cs dev",
|
||||
"cwd": "${workspaceFolder}",
|
||||
"serverReadyAction": {
|
||||
"action": "debugWithChrome",
|
||||
"pattern": "- Local:\\s+(https?://.+)",
|
||||
"uriFormat": "%s",
|
||||
"webRoot": "${workspaceFolder}/apps/cs"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "dev:cs 디버그",
|
||||
"runtimeExecutable": "pnpm",
|
||||
"runtimeArgs": [
|
||||
"run",
|
||||
"dev:cs"
|
||||
],
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"resolveSourceMapLocations": [
|
||||
"${workspaceFolder}/**",
|
||||
"!**/node_modules/**"
|
||||
],
|
||||
"cwd": "${workspaceFolder}",
|
||||
"console": "integratedTerminal",
|
||||
"sourceMaps": true,
|
||||
"env": {
|
||||
"NODE_OPTIONS": "--inspect --max-old-space-size=8192"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "attach",
|
||||
"name": "dev:cs 서버 연결 (attach)",
|
||||
"port": 9229,
|
||||
"restart": true,
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"sourceMaps": true,
|
||||
"resolveSourceMapLocations": [
|
||||
"${workspaceFolder}/apps/cs/**",
|
||||
"!**/node_modules/**"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"name": "dev:cs 클라이언트 디버그 (Chrome)",
|
||||
"url": "http://localhost:3000",
|
||||
"webRoot": "${workspaceFolder}/apps/cs",
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"sourceMaps": true,
|
||||
"resolveSourceMapLocations": [
|
||||
"${workspaceFolder}/apps/cs/**",
|
||||
"!**/node_modules/**"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "dev:st 디버그",
|
||||
"runtimeExecutable": "pnpm",
|
||||
"runtimeArgs": [
|
||||
"run",
|
||||
"dev:st"
|
||||
],
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"resolveSourceMapLocations": [
|
||||
"${workspaceFolder}/**",
|
||||
"!**/node_modules/**"
|
||||
],
|
||||
"cwd": "${workspaceFolder}",
|
||||
"console": "integratedTerminal",
|
||||
"sourceMaps": true,
|
||||
"env": {
|
||||
"NODE_OPTIONS": "--inspect --max-old-space-size=8192"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "node-terminal",
|
||||
"request": "launch",
|
||||
"name": "dev:st 통합 디버그 (Server + Client)",
|
||||
"command": "pnpm --filter st dev",
|
||||
"cwd": "${workspaceFolder}",
|
||||
"serverReadyAction": {
|
||||
"action": "debugWithChrome",
|
||||
"pattern": "- Local:\\s+(https?://.+)",
|
||||
"uriFormat": "%s",
|
||||
"webRoot": "${workspaceFolder}/apps/st"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"chat.tools.terminal.autoApprove": {
|
||||
"pnpm": true
|
||||
},
|
||||
"playwright.configs": [
|
||||
"apps/cs/playwright.config.ts"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
# PM2 배포 및 프로세스 관리 가이드
|
||||
|
||||
본 문서는 ONA 프론트엔드 모노레포 프로젝트(`frontend_as`)에서 **PM2를 활용한 애플리케이션 배포, 실행, 중지 및 모니터링 명령**을 체계적으로 정리한 가이드입니다.
|
||||
|
||||
---
|
||||
pnpm build:common && pnpm build:as && pm2 reload as2-app
|
||||
pnpm --filter=as... build
|
||||
pnpm --filter=as... build && pm2 reload as2-app
|
||||
## 1. 개요 및 아키텍처
|
||||
|
||||
- **설정 파일**: 프로젝트 루트의 `ecosystem.config.js`
|
||||
- **배포 워크플로우**: `.gitea/workflows/deploy.yml` (Gitea Actions 자동 배포)
|
||||
- **실행 모드**: `cluster` (2개 인스턴스로 로드밸런싱 및 무중단 롤링 배포 지원)
|
||||
- **운영 대상**:
|
||||
- `as2-app` (또는 `as-app`, `cs-app`, `st-app`, `cm-app` 등)
|
||||
|
||||
---
|
||||
|
||||
## 2. CI/CD 자동 배포 흐름
|
||||
|
||||
Gitea 저장소의 `deploy` 브랜치로 푸시될 때 원격 서버(192.168.0.4)에서 다음 스크립트가 순차 실행됩니다:
|
||||
|
||||
```bash
|
||||
cd ~/frontend
|
||||
git restore . # 변경된 로컬 파일 원복
|
||||
git clean -fd # 추적되지 않는 불필요한 파일/디렉터리 정리
|
||||
git pull origin deploy # 최신 deploy 브랜치 코드 반영
|
||||
pnpm install # 의존성 패키지 설치
|
||||
pnpm turbo build # 프로덕션 빌드 (.next 산출물 생성)
|
||||
pm2 reload all # 무중단 서비스 리로드 (클러스터 롤링 재시작)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 수동 배포 (Manual Deploy) 명령어
|
||||
|
||||
서버 터미널에 직접 접속하여 수동으로 최신 코드를 배포할 때 사용하는 명령어입니다.
|
||||
|
||||
### 3.1 전체 애플리케이션 수동 배포
|
||||
```bash
|
||||
# 1. 프로젝트 루트 이동
|
||||
cd ~/frontend
|
||||
|
||||
# 2. 최신 코드 가져오기
|
||||
git pull origin deploy
|
||||
|
||||
# 3. 의존성 설치 및 전체 빌드
|
||||
pnpm install
|
||||
pnpm turbo build
|
||||
|
||||
# 4. PM2 전체 무중단 리로드
|
||||
pm2 reload all
|
||||
```
|
||||
|
||||
### 3.2 `as` (행정지원) 앱만 단독 빌드 및 배포
|
||||
```bash
|
||||
cd ~/frontend
|
||||
|
||||
# as 앱만 타겟 빌드
|
||||
pnpm --filter as build
|
||||
|
||||
# as2-app 프로세스만 무중단 리로드
|
||||
pm2 reload as2-app
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. PM2 실행 및 프로세스 등록 (Start & Save)
|
||||
|
||||
최초 서버 환경 구성 시 또는 프로세스 목록에서 삭제된 후 새롭게 등록할 때 실행합니다.
|
||||
|
||||
```bash
|
||||
# 1. 로그 디렉터리 사전 생성 (필수)
|
||||
mkdir -p apps/as/logs
|
||||
|
||||
# 2. ecosystem.config.js 기반 전체 앱 최초 실행
|
||||
pm2 start ecosystem.config.js
|
||||
|
||||
# 3. 특정 앱(as2-app)만 지정하여 최초 실행
|
||||
pm2 start ecosystem.config.js --only as2-app
|
||||
|
||||
# 4. 서버 재부팅 시에도 PM2 프로세스가 자동 복구되도록 현재 상태 저장 (필수!)
|
||||
pm2 save
|
||||
|
||||
# 5. OS 부팅 시 PM2 데몬 자동 등록 (최초 1회 설정)
|
||||
pm2 startup
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 중지, 재시작 및 삭제 명령어
|
||||
|
||||
### 5.1 재시작 (Restart vs Reload)
|
||||
> **TIP: 운영 환경에서는 항상 `reload`를 권장합니다.**
|
||||
> - `reload`: 0-second downtime(무중단). 클러스터의 인스턴스를 하나씩 순차적으로 재시작하여 사용자 요청이 끊기지 않음.
|
||||
> - `restart`: 모든 인스턴스를 일시에 강제 종료 후 다시 띄우므로 짧은 다운타임 발생.
|
||||
|
||||
```bash
|
||||
# [권장] 무중단 재로드 (운영 배포 시)
|
||||
pm2 reload as2-app
|
||||
pm2 reload all
|
||||
|
||||
# 강제 재시작 (설정 변경이 반영되지 않거나 프로세스가 비정상일 때)
|
||||
pm2 restart as2-app
|
||||
pm2 restart all
|
||||
```
|
||||
|
||||
### 5.2 프로세스 중지 (Stop)
|
||||
프로세스를 메모리에서 내리고 실행을 일시 중단합니다 (PM2 목록에는 유지됨).
|
||||
|
||||
```bash
|
||||
# 특정 앱 중지
|
||||
pm2 stop as2-app
|
||||
|
||||
# 전체 앱 중지
|
||||
pm2 stop all
|
||||
```
|
||||
|
||||
### 5.3 프로세스 목록에서 제거 (Delete)
|
||||
PM2 관리 대상 목록에서 프로세스를 완전히 삭제합니다.
|
||||
|
||||
```bash
|
||||
# 특정 앱 삭제
|
||||
pm2 delete as2-app
|
||||
|
||||
# 전체 앱 삭제
|
||||
pm2 delete all
|
||||
|
||||
# 삭제 상태를 영구 저장할 경우
|
||||
pm2 save
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 상태 모니터링 및 로그 확인
|
||||
|
||||
### 6.1 프로세스 상태 확인
|
||||
```bash
|
||||
# 간략한 프로세스 상태 표 확인 (online, stopped, cpu, memory 등)
|
||||
pm2 status
|
||||
# 또는
|
||||
pm2 list
|
||||
|
||||
# 특정 앱 상세 정보 확인 (환경변수, 파일 경로, 재시작 횟수 등)
|
||||
pm2 show as2-app
|
||||
```
|
||||
|
||||
### 6.2 실시간 로그 스트리밍 (Logs)
|
||||
```bash
|
||||
# 특정 앱 실시간 로그 확인 (표준 출력 + 에러 출력)
|
||||
pm2 logs as2-app
|
||||
|
||||
# 최근 100줄 출력 후 실시간 스트리밍
|
||||
pm2 logs as2-app --lines 100
|
||||
|
||||
# 에러 로그만 확인
|
||||
pm2 logs as2-app --err
|
||||
|
||||
# 전체 프로세스 로그 확인
|
||||
pm2 logs
|
||||
|
||||
# 이전 로그 비우기(Flush)
|
||||
pm2 flush
|
||||
```
|
||||
|
||||
### 6.3 터미널 대시보드 모니터링 (Monit)
|
||||
CPU 및 메모리 실시간 사용량을 터미널 대시보드로 확인합니다.
|
||||
```bash
|
||||
pm2 monit
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 주요 트러블슈팅 (FAQ)
|
||||
|
||||
### Q1. `EADDRINUSE: address already in use :::3004` 포트 충돌 발생
|
||||
- **원인**: 로컬 개발 서버(`pnpm --filter as dev`) 또는 이전 Node 프로세스가 3004번 포트를 계속 점유 중인 상태입니다.
|
||||
- **해결**:
|
||||
```bash
|
||||
# 3004 포트 사용 중인 PID 확인
|
||||
lsof -i :3004
|
||||
|
||||
# 해당 프로세스 종료
|
||||
kill -9 <PID>
|
||||
|
||||
# PM2 리로드
|
||||
pm2 reload as2-app
|
||||
```
|
||||
|
||||
### Q2. `Could not find a production build in the '.next' directory`
|
||||
- **원인**: Next.js 프로덕션 실행 전에 빌드 산출물(`.next`)이 생성되지 않았습니다.
|
||||
- **해결**:
|
||||
```bash
|
||||
pnpm --filter as build
|
||||
pm2 reload as2-app
|
||||
```
|
||||
|
||||
### Q3. `logs` 디렉터리 관련 에러 발생
|
||||
- **원인**: `ecosystem.config.js`의 `cwd: './apps/as'` 설정에 따라 `./logs` 경로가 없을 경우 발생할 수 있습니다.
|
||||
- **해결**:
|
||||
```bash
|
||||
mkdir -p apps/as/logs
|
||||
```
|
||||
@@ -0,0 +1,181 @@
|
||||
# Next.js 프로덕션 빌드 에러 원인 분석 및 조치 보고서
|
||||
|
||||
본 문서는 `apps/as` 프로덕션 빌드(`pnpm build:as` / `next build`) 과정에서 발생한 ESLint Hook 규칙 위반 및 TypeScript 컴파일 에러의 원인과 이를 해결한 조치 내역을 정리한 문서입니다.
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 및 장애 상황
|
||||
|
||||
- **대상 모듈**: `apps/as` (행정지원 프론트엔드 애플리케이션)
|
||||
- **실행 명령**: `pnpm build:as` (또는 `pnpm --filter as build`)
|
||||
- **발생 시점**: 2026-10-20
|
||||
- **장애 영향**: Next.js 프로덕션 최적화 빌드 실패로 인해 배포 산출물(`.next`) 생성이 중단됨
|
||||
|
||||
### 빌드 실패 로그 요약
|
||||
```text
|
||||
as:build: Failed to compile.
|
||||
|
||||
as:build: ./src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-mng-dialog.tsx
|
||||
as:build: 159:35 Error: React Hook "useStore" is called conditionally. React Hooks must be called in the exact same order in every component render. react-hooks/rules-of-hooks
|
||||
|
||||
./src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-mng-dialog.tsx:164:5
|
||||
Type error: Type 'boolean' has no properties in common with type '{ enabled?: boolean | undefined; structuralSharing?: boolean | undefined; }'.
|
||||
|
||||
./src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-mng-dialog.tsx:215:29
|
||||
Type error: Property 'atrzSeq' does not exist on type 'ElaprDocPrgrsClientResponseDto'. Did you mean 'atrzSeqNo'?
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 근본 원인 분석 (Root Cause Analysis)
|
||||
|
||||
### 2.1 React Hook 규칙 위반 (`react-hooks/rules-of-hooks`)
|
||||
- **위치**: `apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-mng-dialog.tsx` (158~159라인)
|
||||
- **원인 코드**:
|
||||
```tsx
|
||||
const storeContext = useContext(StoreContext);
|
||||
const userInfo = storeContext ? useStore(storeContext.userStore, (state) => state.userInfo) : null;
|
||||
```
|
||||
- **문제점**:
|
||||
- React Hooks는 조건문, 반복문, 삼항 연산자 내부에서 호출될 수 없으며, 모든 렌더링마다 항상 동일한 순서로 호출되어야 합니다.
|
||||
- 삼항 연산자 내에서 `useStore`를 호출하면서 `react-hooks/rules-of-hooks` 에러가 발생하여 빌드가 즉시 차단되었습니다.
|
||||
- 또한 프로젝트 전역에서 제공하는 표준 훅인 `useUserStore`(`@/shared/lib`)가 이미 존재함에도 불구하고 이를 사용하지 않고 수동으로 컨텍스트를 조회하여 분기 처리하고 있었습니다.
|
||||
|
||||
### 2.2 `useElaprBranchesByDocNo` 훅 옵션 매개변수 타입 불일치
|
||||
- **원인 코드**:
|
||||
```tsx
|
||||
const { data: elaprBranchList = [] } = useElaprBranchesByDocNo(
|
||||
fnrsCnsltnDocNo,
|
||||
open && Boolean(isForkJoin), // boolean 직접 전달
|
||||
);
|
||||
```
|
||||
- **문제점**:
|
||||
- `useElaprBranchesByDocNo`의 시그니처는 `(elaprDocNo, options?: { enabled?: boolean; structuralSharing?: boolean })`로 선언되어 있어, `boolean` 대신 객체 형태(`{ enabled: ... }`)로 전달해야 합니다.
|
||||
|
||||
### 2.3 전자결재 결재선 DTO 필드명 불일치
|
||||
- **원인 코드**:
|
||||
```tsx
|
||||
if (currentUserPrgrs?.atrzSeq && Number(currentUserPrgrs.atrzSeq) > 1) return true;
|
||||
```
|
||||
- **문제점**:
|
||||
- `ElaprDocPrgrsClientResponseDto` 인터페이스(`src/shared/model/pbadms-sprt.ts`)에 선언된 정식 결재 순번 필드명은 `atrzSeqNo?: number`입니다.
|
||||
- 기존 코드가 `atrzSeq`로 접근하여 TypeScript 컴파일 에러가 발생했습니다.
|
||||
|
||||
### 2.4 `PwrkCnsltnDocEvlDialog`의 필수 prop `onSaved` 누락
|
||||
- **원인 코드**:
|
||||
```tsx
|
||||
<PwrkCnsltnDocEvlDialog
|
||||
open={isEvlDialogOpen}
|
||||
pwrkCnsltnDocNo={completedDraft.pwrkCnsltnDocNo}
|
||||
onClose={() => setIsEvlDialogOpen(false)}
|
||||
/>
|
||||
```
|
||||
- **문제점**:
|
||||
- `PwrkCnsltnDocEvlDialogProps`에 `onSaved: () => void;`가 필수로 선언되어 있었으나, 호출부에서 `onSaved` 콜백을 넘기지 않아 `Property 'onSaved' is missing` 컴파일 에러가 발생했습니다.
|
||||
|
||||
---
|
||||
|
||||
## 3. 조치 내역
|
||||
|
||||
### 3.1 컴포넌트 코드 수정 (`pwrk-cnsltn-doc-mng-dialog.tsx`)
|
||||
1. **표준 `useUserStore` 훅 적용**:
|
||||
- `useStore`, `StoreContext`, `useContext`를 제거하고, `@/shared/lib`의 `useUserStore`를 무조건부로 호출하도록 변경.
|
||||
2. **`useElaprBranchesByDocNo` 옵션 객체화**:
|
||||
- `{ enabled: open && Boolean(isForkJoin) }` 형태로 수정.
|
||||
3. **결재 순번 속성 방어적 매핑**:
|
||||
- `atrzSeqNo`를 우선 참조하고 레거시/모의 데이터의 `atrzSeq`도 호환되도록 fallback 처리.
|
||||
4. **`PwrkCnsltnDocEvlDialog`의 `onSaved` prop 연결 및 선택적(Optional) 처리**:
|
||||
- `pwrk-cnsltn-doc-evl-dialog.tsx`: `onSaved?: () => void;`로 변경하고 `onSaved?.()` 호출로 방어.
|
||||
- `pwrk-cnsltn-doc-mng-dialog.tsx`: `<PwrkCnsltnDocEvlDialog ... onSaved={() => setIsEvlDialogOpen(false)} />` 콜백 전달.
|
||||
|
||||
#### 핵심 변경 사항 (Diff)
|
||||
```diff
|
||||
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-mng-dialog.tsx
|
||||
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-mng-dialog.tsx
|
||||
@@ -1,14 +1,11 @@
|
||||
"use client";
|
||||
|
||||
-import { useContext, useEffect, useMemo, useState } from "react";
|
||||
+import { useEffect, useMemo, useState } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { PanelRightClose, PanelRightOpen } from "lucide-react";
|
||||
-import { useStore } from "zustand";
|
||||
-
|
||||
-import { getDefaultFileKey, useAlertStore, useTus } from "@/shared/lib";
|
||||
-import { StoreContext } from "@/shared/providers";
|
||||
+import { getDefaultFileKey, useAlertStore, useTus, useUserStore } from "@/shared/lib";
|
||||
|
||||
@@ -155,8 +152,7 @@ function PwrkCnsltnDocMngDialog({
|
||||
const queryClient = useQueryClient();
|
||||
const alert = useAlertStore((state) => state.setMessage);
|
||||
- const storeContext = useContext(StoreContext);
|
||||
- const userInfo = storeContext ? useStore(storeContext.userStore, (state) => state.userInfo) : null;
|
||||
+ const userInfo = useUserStore((state) => state.userInfo);
|
||||
|
||||
@@ -165,7 +161,7 @@ function PwrkCnsltnDocMngDialog({
|
||||
const { data: elaprBranchList = [] } = useElaprBranchesByDocNo(
|
||||
fnrsCnsltnDocNo,
|
||||
- open && Boolean(isForkJoin),
|
||||
+ { enabled: open && Boolean(isForkJoin) },
|
||||
);
|
||||
|
||||
@@ -216,11 +212,19 @@ function PwrkCnsltnDocMngDialog({
|
||||
if (effectiveBranchSeCd === "TOTAL_AGG") {
|
||||
if (effectiveAtrzSeList.includes("ATRZ04")) return false;
|
||||
if (effectiveAtrzSeList.some((cd) => APPROVER_ATRZ_SE_COM_CDS.has(cd))) return true;
|
||||
- if (currentUserPrgrs?.atrzSeq && Number(currentUserPrgrs.atrzSeq) > 1) return true;
|
||||
+ const userSeq = currentUserPrgrs?.atrzSeqNo ?? (currentUserPrgrs as Record<string, unknown> | undefined)?.atrzSeq;
|
||||
+ if (userSeq && Number(userSeq) > 1) return true;
|
||||
if (effectiveAtrzSeList.length > 0 && !effectiveAtrzSeList.includes("ATRZ04")) return true;
|
||||
}
|
||||
return false;
|
||||
```
|
||||
|
||||
### 3.2 단위 테스트 모킹 보완 (`pwrk-cnsltn-doc-mng-dialog.test.tsx`)
|
||||
- 단위 테스트 환경에서 `StoreProvider` 미감싸임 에러(`useUserStore must be used within StoreProvider`)가 발생하지 않도록 `@/shared/lib` 모킹 객체에 `useUserStore`를 추가.
|
||||
```tsx
|
||||
let mockUserInfo: any = null;
|
||||
|
||||
vi.mock("@/shared/lib", async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import("@/shared/lib")>();
|
||||
return {
|
||||
...actual,
|
||||
getDefaultFileKey: () => "mock-key",
|
||||
useAlertStore: () => vi.fn(),
|
||||
useUserStore: (selector: (state: { userInfo: any }) => any) =>
|
||||
selector ? selector({ userInfo: mockUserInfo }) : { userInfo: mockUserInfo },
|
||||
useTus: () => ({
|
||||
uploadFileAsync: vi.fn(),
|
||||
isUploading: {},
|
||||
uploads: {},
|
||||
}),
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 검증 결과
|
||||
|
||||
| 검증 단계 | 명령어 | 결과 | 비고 |
|
||||
|---|---|---|---|
|
||||
| **1. 정적 타입 검사** | `pnpm --filter as exec tsc --noEmit` | **성공 (Exit 0)** | 컴파일 에러 0건 |
|
||||
| **2. ESLint 린트 검사** | `pnpm --filter as lint` | **성공 (Exit 0)** | Hook 위반 에러 해결 |
|
||||
| **3. 단위 테스트 (Vitest)** | `pnpm --filter as exec vitest run` | **전체 통과 (73/73 Tests)** | 14개 테스트 파일 100% Pass |
|
||||
| **4. 프로덕션 빌드** | `pnpm build:as` | **성공 (Exit 0)** | 22/22 정적 페이지 최적화 완료 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 재발 방지 표준 가이드
|
||||
|
||||
1. **React Hook 호출 규칙 준수**:
|
||||
- `useUserStore`, `useQuery`, `useStore` 등 모든 React Hook은 반드시 컴포넌트 함수의 최상단(Top-level)에서 무조건부로 호출해야 합니다.
|
||||
- 사용자 정보가 필요할 경우 개별 컨텍스트 접근 대신 표준 훅인 `useUserStore((state) => state.userInfo)`를 사용합니다.
|
||||
|
||||
2. **React Query 커스텀 훅 매개변수 규칙**:
|
||||
- 조건부 쿼리 실행이 필요한 경우 boolean 값을 단독으로 넘기지 않고 `{ enabled: boolean }` 형태의 옵션 객체 인터페이스를 유지합니다.
|
||||
|
||||
3. **엔티티 DTO 필드명 엄격 확인**:
|
||||
- 전자결재 결재선 DTO는 백엔드 명세에 따라 `atrzSeqNo`를 표준으로 사용하므로 레거시 명칭(`atrzSeq`)을 사용하지 않도록 타입을 확인합니다.
|
||||
@@ -0,0 +1,160 @@
|
||||
# 개발(Dev) 및 운영(Production) 실행 가이드 & 환경변수 관리
|
||||
|
||||
본 문서는 `apps/as` 애플리케이션의 **개발(Dev) 모드** 및 **운영(Production) 모드** 실행 방법과 **환경변수(.env) 변경 시의 재빌드 규칙**을 상세히 정리한 가이드입니다.
|
||||
|
||||
---
|
||||
|
||||
## 1. Dev 모드 vs Production 모드 비교
|
||||
|
||||
| 구분 | 개발 모드 (Dev) | 운영 모드 (Production) |
|
||||
|---|---|---|
|
||||
| **실행 목적** | 로컬 개발, 디버깅, 실시간 코드 수정 | 실서버 운영, 성능 최적화, 안정성 보장 |
|
||||
| **사전 빌드 필요 여부** | **불필요** (즉시 실행) | **필수** (`.next` 번들 생성 선행) |
|
||||
| **코드 반영 방식** | 핫 리로딩(HMR, 저장 즉시 반영) | 빌드 시점의 번들링 코드 고정 서빙 |
|
||||
| **참조 환경변수** | `.env.local` > `.env.development` | `.env.local` > `.env.production` |
|
||||
| **프로세스 관리** | Node 단일 프로세스 (터미널) | **PM2 Cluster 모드** (2개 인스턴스 무중단) |
|
||||
| **서비스 포트** | 기본 `3004` 포트 | 기본 `3004` 포트 |
|
||||
|
||||
---
|
||||
|
||||
## 2. 환경변수(.env) 변경 시 재빌드 필수 여부
|
||||
|
||||
### 2.1 결론: `.env.production` 변경 시 반드시 재빌드 필요
|
||||
Next.js 환경에서는 `.env.production`을 수정했을 때 단순히 PM2 재시작(`pm2 reload` / `pm2 restart`)만으로는 변경 사항이 브라우저에 반영되지 않으며, **반드시 빌드(`next build`)를 다시 수행해야 합니다.**
|
||||
|
||||
### 2.2 이유: Next.js의 환경변수 인라이닝(Inlining) 원리
|
||||
1. **`NEXT_PUBLIC_*` 변수의 빌드타임 주입**:
|
||||
- `NEXT_PUBLIC_SERVER_API_URL`, `NEXT_PUBLIC_PROXY_HOST`, `NEXT_PUBLIC_WEBHYP_CTRL_URL` 등 브라우저에서 참조하는 변수들은 `next build` 시점에 생성되는 클라이언트 JavaScript 파일(`.next/static/...`) 안에 **문자열 값으로 직접 하드코딩(Inlining)**됩니다.
|
||||
- 따라서 코드를 다시 빌드하지 않으면 예전 주소나 설정값이 그대로 유지됩니다.
|
||||
2. **정적 페이지(SSG) 생성 시점의 값 고정**:
|
||||
- 빌드 시 정적 생성된 페이지(`Generating static pages (22/22)`)는 빌드 당시 읽어들인 환경변수 값을 기준으로 생성되므로, 런타임에 환경변수를 바꿔도 페이지가 갱신되지 않습니다.
|
||||
|
||||
### 2.3 환경변수 우선순위 주의사항
|
||||
Next.js의 환경변수 로딩 우선순위는 다음과 같습니다:
|
||||
|
||||
```text
|
||||
[운영 환경: NODE_ENV=production]
|
||||
1순위: .env.production.local
|
||||
2순위: .env.local (NODE_ENV=test 제외 항상 최우선)
|
||||
3순위: .env.production
|
||||
4순위: .env
|
||||
```
|
||||
|
||||
> [!WARNING]
|
||||
> 실서버 환경에 `.env.local` 파일이 존재할 경우 `.env.production`보다 우선 적용됩니다. `.env.production`을 수정했는데도 반영되지 않는다면 같은 경로에 `.env.local`이 존재하는지 확인하십시오.
|
||||
|
||||
---
|
||||
|
||||
## 3. Dev (개발 모드) 실행 방법
|
||||
|
||||
사전 빌드 과정 없이 소스 코드를 실시간으로 수정하며 개발할 때 사용합니다.
|
||||
|
||||
### 3.1 프로젝트 루트 디렉터리에서 실행
|
||||
```bash
|
||||
# 루트 디렉터리: ~/frontend_as
|
||||
pnpm dev:as
|
||||
|
||||
# 또는 pnpm filter 플래그 사용
|
||||
pnpm --filter as dev
|
||||
```
|
||||
|
||||
### 3.2 `apps/as` 디렉터리 내부에서 실행
|
||||
```bash
|
||||
cd ~/frontend_as/apps/as
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
- **접속 주소**: [http://localhost:3004](http://localhost:3004)
|
||||
- **종료**: 터미널에서 `Ctrl + C`
|
||||
|
||||
---
|
||||
|
||||
## 4. Production (운영 모드) 실행 방법
|
||||
|
||||
반드시 **빌드 산출물(`.next`)이 최신 상태로 생성되어 있어야 정상 실행**됩니다.
|
||||
|
||||
### 4.1 1단계: 프로덕션 빌드 (필수)
|
||||
모노레포 전체를 빌드할 필요 없이 `as` 앱만 단독으로 빌드할 수 있습니다:
|
||||
|
||||
```bash
|
||||
# 프로젝트 루트 디렉터리에서 실행 (약 20~30초 소요)
|
||||
pnpm build:as
|
||||
|
||||
# 또는
|
||||
pnpm --filter as build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4.2 2단계: 서버 프로세스 실행
|
||||
|
||||
#### 방법 A: 터미널에서 직접 실행 (로컬 프로덕션 점검용)
|
||||
포그라운드 터미널에서 프로덕션 번들의 빌드 결과와 동작을 직접 테스트할 때 사용합니다:
|
||||
|
||||
```bash
|
||||
# 루트 디렉터리에서 실행
|
||||
pnpm --filter as start
|
||||
|
||||
# 또는 apps/as 디렉터리에서 실행
|
||||
cd apps/as
|
||||
pnpm start
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 방법 B: PM2 프로세스 매니저로 실행 (실서버 운영 표준)
|
||||
실제 운영 서버에서는 `ecosystem.config.js` 설정을 통해 무중단 클러스터(2개 인스턴스)로 실행합니다.
|
||||
|
||||
```bash
|
||||
# 1. 프로세스가 아직 등록되지 않은 경우 (최초 기동)
|
||||
pm2 start ecosystem.config.js --only as2-app
|
||||
|
||||
# 2. 이미 실행 중인 경우 (무중단 롤링 리로드 - 권장)
|
||||
# 순차적으로 인스턴스를 재시작하므로 사용자 요청 끊김이 없습니다.
|
||||
pm2 reload as2-app
|
||||
|
||||
# 3. 프로세스 완전 재시작이 필요한 경우
|
||||
pm2 restart as2-app
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. PM2 운영 및 모니터링 치트시트
|
||||
|
||||
```bash
|
||||
# 1. 전체 프로세스 상태 확인 (상태, 메모리, CPU 점유율 등)
|
||||
pm2 status
|
||||
# 또는
|
||||
pm2 list
|
||||
|
||||
# 2. as2-app 실시간 로그 모니터링
|
||||
pm2 logs as2-app
|
||||
|
||||
# 3. 최근 로그 100줄 출력
|
||||
pm2 logs as2-app --lines 100
|
||||
|
||||
# 4. 프로세스 일시 중지 및 삭제
|
||||
pm2 stop as2-app # 프로세스 일시 중지
|
||||
pm2 delete as2-app # PM2 목록에서 제거
|
||||
|
||||
# 5. 서버 재부팅 시 자동 실행 등록
|
||||
pm2 save # 현재 실행 중인 프로세스 목록 저장
|
||||
pm2 startup # OS 부팅 스크립트 생성
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 실무 배포 요약 워크플로우
|
||||
|
||||
`.env.production` 수정 또는 프론트엔드 코드 수정 후 배포 시 아래 3단계를 수행합니다:
|
||||
|
||||
```bash
|
||||
# Step 1. 최신 코드 반영 (필요시)
|
||||
git pull origin deploy
|
||||
|
||||
# Step 2. as 앱 단독 프로덕션 재빌드
|
||||
pnpm build:as
|
||||
|
||||
# Step 3. PM2 무중단 롤링 리로드
|
||||
pm2 reload as2-app
|
||||
```
|
||||
@@ -0,0 +1,302 @@
|
||||
# 재원협의(fnrs-cnsltn) 플로팅 액션 버튼(FloatingActionButtons) 호출 메커니즘 분석
|
||||
|
||||
## 1. 개요 (Overview)
|
||||
|
||||
본 문서는 **디지털 행정지원(Administrative Support, AS)** 모듈의 **재원협의 상세 조회 화면(`FnrsViewPage`)** 하단에 위치한 [FloatingActionButtons](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx) 컴포넌트의 액션 처리 메커니즘을 상세히 분석한 기술 문서입니다.
|
||||
|
||||
사용자가 화면 하단 액션바에서 **반려(`rjct`) 버튼**을 클릭했을 때 실행되는 `handleRjctClick()` 함수가 내부적으로 중앙 집중식 디스패처인 `executeAction()`과 룩업 테이블(`buttonActionHandlers`)을 거쳐 최종 API 호출 함수인 `handleRejectPrgrsStts()`로 라우팅되는 전 과정을 추적하고, 적용된 아키텍처 디자인 패턴을 설명합니다.
|
||||
|
||||
---
|
||||
|
||||
## 2. 핵심 아키텍처 디자인 패턴
|
||||
|
||||
[FloatingActionButtons](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx)는 수많은 행정 업무 액션(저장, 신청, 삭제, 환경청 제출, 승인, 반려, 검토의견 회신, 보완요청, 기술검토요청 등)을 안전하고 확장 가능하게 관리하기 위해 **전략 패턴(Strategy Pattern)**과 **디스패처(Dispatcher) 패턴**을 결합하여 설계되었습니다.
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────────────┐
|
||||
│ UI 컴포넌트 이벤트 (예: handleRjctClick) │
|
||||
│ - 사용자 Confirm 확인 │
|
||||
│ - 요청 DTO(DocPrgrsUpdateRequestDto) 조립 │
|
||||
└──────────────────────────────────┬─────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────────────────────────────────────────────────────────────┐
|
||||
│ 중앙 액션 디스패처 (executeAction) │
|
||||
│ - 중복 클릭 방지 (isProcessing 상태 관리) │
|
||||
│ - buttonActionHandlers 룩업 테이블에서 적절한 Strategy 함수 검색 │
|
||||
│ - 일원화된 성공 처리 (Alert 메시지, React Query 캐시 무효화) │
|
||||
│ - 일원화된 에러 처리 (Axios 에러 메시지 추출 및 Alert) │
|
||||
└──────────────────────────────────┬─────────────────────────────────────┘
|
||||
│ action: "rjct" 키로 조회
|
||||
▼
|
||||
┌────────────────────────────────────────────────────────────────────────┐
|
||||
│ 룩업 테이블 (buttonActionHandlers: Record<Action, Handler>) │
|
||||
│ - rjct: handleRejectPrgrsStts │
|
||||
└──────────────────────────────────┬─────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────────────────────────────────────────────────────────────┐
|
||||
│ 개별 액션 핸들러 (handleRejectPrgrsStts) │
|
||||
│ - fnrsCnsltnMngService.rejectPrgrsStts(payload) 백엔드 API 호출 │
|
||||
│ - context.onSuccess() / context.onError() 콜백 트리거 │
|
||||
└────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 2.1 적용된 핵심 원칙 및 이점
|
||||
1. **단일 책임 원칙 (SRP)**:
|
||||
- 각 UI 이벤트 함수(`handleRjctClick`)는 사용자 확인 및 페이로드 빌드만 담당합니다.
|
||||
- 중앙 디스패처(`executeAction`)는 로딩 상태, 캐시 갱신, 공통 에러 핸들링을 전담합니다.
|
||||
- 실제 비즈니스 통신은 순수 비동기 함수(`handleRejectPrgrsStts`)로 격리됩니다.
|
||||
2. **개방-폐쇄 원칙 (OCP)**:
|
||||
- 신규 액션 버튼이 추가될 경우 `buttonActionHandlers` 레코드에 새로운 키-핸들러 쌍만 등록하면 되며, 공통 에러 처리나 캐시 무효화 로직을 중복 구현할 필요가 없습니다.
|
||||
3. **무결성 및 안정성**:
|
||||
- `setIsProcessing(true)`를 통해 네트워크 요청 진행 중 다중 클릭(Double Submit)을 원천 차단합니다.
|
||||
- 작업 완료 후 `queryClient.invalidateQueries`를 통해 상세 데이터 및 전자결재 분기 상태를 최신 상태로 즉시 동기화합니다.
|
||||
|
||||
---
|
||||
|
||||
## 3. 전체 호출 흐름 시퀀스 다이어그램 (Sequence Diagram)
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
actor User as 사용자
|
||||
participant UI as FloatingActionButtons
|
||||
participant Rjct as handleRjctClick
|
||||
participant Exec as executeAction (디스패처)
|
||||
participant Table as buttonActionHandlers (룩업)
|
||||
participant Handler as handleRejectPrgrsStts
|
||||
participant Service as fnrsCnsltnMngService
|
||||
participant Backend as 백엔드 REST API
|
||||
participant Query as TanStack QueryClient
|
||||
|
||||
User->>UI: [반려] 버튼 클릭
|
||||
UI->>Rjct: handleRjctClick() 트리거
|
||||
Rjct->>User: confirm("해당 신청 건을 반려하시겠습니까?")
|
||||
User-->>Rjct: 확인 (true)
|
||||
|
||||
Note over Rjct: DocPrgrsUpdateRequestDto 생성<br/>{ docNo, docSeComCd, prgrsSttsComCd: "SV", rgtrUuid }
|
||||
|
||||
Rjct->>Exec: executeAction({ action: "rjct", request: payload, successMessage: "반려되었습니다." })
|
||||
|
||||
rect rgb(240, 245, 255)
|
||||
Note over Exec: 1. setIsProcessing(true)<br/>2. const handler = buttonActionHandlers["rjct"]
|
||||
Exec->>Table: buttonActionHandlers["rjct"] 검색
|
||||
Table-->>Exec: handleRejectPrgrsStts 반환
|
||||
end
|
||||
|
||||
Exec->>Handler: handler({ request, data, onSuccess, onError }) 실행
|
||||
|
||||
Handler->>Service: rejectPrgrsStts(context.request) 호출
|
||||
Service->>Backend: PUT /api/v1/as/fnrs-cnsltn-mng/reject-prgrs-stts
|
||||
Backend-->>Service: 200 OK 응답
|
||||
Service-->>Handler: 완료 반환
|
||||
|
||||
Handler->>Exec: context.onSuccess() 콜백 호출
|
||||
|
||||
rect rgb(245, 255, 240)
|
||||
Note over Exec: onSuccess 후속 처리 실행
|
||||
Exec->>User: alert("반려되었습니다.")
|
||||
Exec->>Query: invalidateQueries({ queryKey: fnrsCnsltnKeys.detail(...) })
|
||||
Exec->>Query: invalidateQueries({ queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_BRANCH] })
|
||||
Note over Query: 백엔드 최신 상세 데이터 재조회 및 화면 UI 갱신 (상태: ST -> SV)
|
||||
end
|
||||
|
||||
Note over Exec: finally { setIsProcessing(false) }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 단계별 상세 소스 코드 분석
|
||||
|
||||
### 4.1 Step 1: UI 이벤트 트리거 및 페이로드 조립 (`handleRjctClick`)
|
||||
|
||||
사용자가 화면의 반려 버튼을 클릭하면 [handleRjctClick](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx#L474-L489)이 실행됩니다.
|
||||
|
||||
```typescript
|
||||
// apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx (Line 474~489)
|
||||
async function handleRjctClick() {
|
||||
// 1. 사용자 재확인 대화상자 노출
|
||||
if (!(await confirm("해당 신청 건을 반려하시겠습니까?"))) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 백엔드 진행상태 업데이트 DTO 빌드 (임시저장 'SV' 상태로 롤백)
|
||||
const payload: DocPrgrsUpdateRequestDto = {
|
||||
docNo, // 대상 문서번호
|
||||
docSeComCd, // 문서구분 공통코드
|
||||
prgrsSttsComCd: "SV", // 변경할 진행상태: 작성중/임시저장(SV)
|
||||
rgtrUuid: userInfo?.userUnqId, // 처리자 고유 식별자
|
||||
};
|
||||
|
||||
// 3. 중앙 디스패처 호출
|
||||
await executeAction({
|
||||
action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.rjct, // "rjct" 상수
|
||||
request: payload,
|
||||
successMessage: "반려되었습니다.",
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
* **핵심 포인트**: 반려 처리는 문서의 진행 상태를 신청완료(`ST`)에서 작성자(지자체)가 다시 수정할 수 있는 임시저장/작성중(`SV`) 상태로 되돌리는 동작입니다.
|
||||
|
||||
---
|
||||
|
||||
### 4.2 Step 2: 중앙 집중식 액션 디스패처 (`executeAction`)
|
||||
|
||||
[executeAction](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx#L370-L408)은 전달받은 액션 식별자에 따라 룩업 테이블에서 핸들러를 찾아 실행하고, 공통 라이프사이클(로딩, 성공 알림, 쿼리 캐시 무효화, 에러 처리)을 관리합니다.
|
||||
|
||||
```typescript
|
||||
// apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx (Line 370~408)
|
||||
async function executeAction({
|
||||
action,
|
||||
request,
|
||||
successMessage,
|
||||
}: {
|
||||
action: FnrsCnsltnViewButtonAction;
|
||||
request?: unknown;
|
||||
successMessage?: string;
|
||||
}) {
|
||||
// 1. 룩업 테이블에서 액션명에 해당하는 실행 함수 조회
|
||||
const handler = buttonActionHandlers[action];
|
||||
if (!handler) return;
|
||||
|
||||
// 2. 비동기 처리 중 중복 호출 방지 플래그 활성화
|
||||
setIsProcessing(true);
|
||||
try {
|
||||
// 3. 전략 핸들러에 Context 주입 및 실행
|
||||
await handler({
|
||||
request,
|
||||
data,
|
||||
onSuccess: () => {
|
||||
// 성공 메시지 출력
|
||||
if (successMessage) alert(successMessage);
|
||||
|
||||
// 상세 데이터 쿼리 캐시 무효화 -> 화면 자동 갱신
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: fnrsCnsltnKeys.detail(fnrsCnsltnDocNo),
|
||||
});
|
||||
|
||||
// 전자결재 분기 상태 쿼리 캐시 무효화
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_BRANCH],
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
// 통일된 에러 메시지 추출 및 Alert
|
||||
let errorMessage = "";
|
||||
if (error instanceof AxiosError) {
|
||||
errorMessage = error.response?.data?.message ?? "";
|
||||
} else {
|
||||
errorMessage = error.message ?? "처리 중 오류가 발생했습니다.";
|
||||
}
|
||||
alert(errorMessage);
|
||||
},
|
||||
});
|
||||
} finally {
|
||||
// 4. 로딩 플래그 해제
|
||||
setIsProcessing(false);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4.3 Step 3: 전략 매핑 룩업 테이블 (`buttonActionHandlers`)
|
||||
|
||||
[buttonActionHandlers](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx#L1215-L1239)는 컴포넌트 파일 하단에 위치하며, 각 액션 문자열과 실행할 실제 비즈니스 함수를 1:1로 매핑합니다.
|
||||
|
||||
```typescript
|
||||
// apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx (Line 1215~1239)
|
||||
const buttonActionHandlers: Record<FnrsCnsltnViewButtonAction, ActionHandler> = {
|
||||
strg: handleSaveApply,
|
||||
aply: handleSaveApply,
|
||||
del: handleDel,
|
||||
envoSbmsn: handleChangePrgrsSttsComCd,
|
||||
rjct: handleRejectPrgrsStts, // <--- "rjct" 액션이 handleRejectPrgrsStts 함수로 바인딩됨
|
||||
sncnAprv: handleChangePrgrsSttsComCd,
|
||||
rvwRply: handleTechReview,
|
||||
rvwOpnnRply: handleTechReview,
|
||||
rqstTechRvw: handleRequestExamine,
|
||||
fileSplmnt: handleDmndSplmnt,
|
||||
fileVrfc: () => Promise.resolve(),
|
||||
dsgntRvwr: handleDsgntRvwr,
|
||||
pwrkCnsltnDocCrt: () => Promise.resolve(),
|
||||
pwrkCnsltnDocMng: () => Promise.resolve(),
|
||||
rvwRsltInq: () => Promise.resolve(),
|
||||
rvwStrg: handleTechReview,
|
||||
rvwCmptn: handleTechReview,
|
||||
dmndSplmnt: handleDmndSplmnt,
|
||||
atrzAprv: () => Promise.resolve(),
|
||||
atrzRply: () => Promise.resolve(),
|
||||
actnCmptn: handleActnCmptn,
|
||||
rqstActnRvw: handleRequestActnReview,
|
||||
costVrfc: () => Promise.resolve(),
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4.4 Step 4: 실제 비즈니스 API 호출 핸들러 (`handleRejectPrgrsStts`)
|
||||
|
||||
[handleRejectPrgrsStts](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx#L1123-L1132) 함수는 전달받은 Context를 언팩하여 백엔드 REST API 서비스를 호출합니다.
|
||||
|
||||
```typescript
|
||||
// apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx (Line 1123~1132)
|
||||
async function handleRejectPrgrsStts(
|
||||
context: ActionHandlerContext<DocPrgrsUpdateRequestDto>,
|
||||
): Promise<void> {
|
||||
try {
|
||||
// 백엔드 엔티티 서비스 호출
|
||||
await fnrsCnsltnMngService.rejectPrgrsStts(context.request);
|
||||
// 성공 시 executeAction의 onSuccess 실행
|
||||
context.onSuccess?.();
|
||||
} catch (error) {
|
||||
// 실패 시 executeAction의 onError 실행
|
||||
context.onError?.(error as Error);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 백엔드 서비스 연동부 (`fnrsCnsltnMngService.rejectPrgrsStts`)
|
||||
```typescript
|
||||
// apps/as/src/entities/fnrs-cnsltn/api/fnrs-cnsltn-mng-service.ts
|
||||
async rejectPrgrsStts(body: DocPrgrsUpdateRequestDto): Promise<void> {
|
||||
await this.client.put<CommonResponse<void>>(
|
||||
"/api/v1/as/fnrs-cnsltn-mng/reject-prgrs-stts",
|
||||
body,
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 반려 처리 후 화면 갱신 메커니즘 (Post-Action Reaction)
|
||||
|
||||
`handleRejectPrgrsStts`가 성공적으로 종료된 후 화면이 자동으로 갱신되는 과정은 다음과 같습니다:
|
||||
|
||||
1. **콜백 체인 트리거**:
|
||||
`handleRejectPrgrsStts` -> `context.onSuccess()` 실행.
|
||||
2. **Alert 알림 표시**:
|
||||
사용자에게 `"반려되었습니다."` 안내 메시지 팝업 노출.
|
||||
3. **TanStack Query 캐시 무효화 (`invalidateQueries`)**:
|
||||
- `fnrsCnsltnKeys.detail(fnrsCnsltnDocNo)` 키를 가진 React Query 캐시가 Stale 상태로 마킹되어 백엔드로부터 최신 문서 상세 정보를 즉시 다시 조회합니다.
|
||||
- `[ENDPOINT.AS_ELAPR_SERVICE.ELAPR_BRANCH]` 키의 결재 분기 쿼리도 함께 무효화되어 결재선 및 버튼 상태가 재계산됩니다.
|
||||
4. **버튼 가시성 및 권한 자동 재계산**:
|
||||
- 상세 응답 DTO의 `detDto.prgrsSttsComCd`가 `"ST"`(신청완료)에서 `"SV"`(임시저장/작성중)로 변경됩니다.
|
||||
- [button-config.ts](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts)의 권한-상태 매트릭스(`ROLE_STATUS_BUTTON_ACTIONS`)에 따라 화면 하단 버튼이 반려/접수 모드에서 **수정/신청/삭제 모드**로 자동 전환됩니다.
|
||||
- [InstlSncnDetailGate](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/instl-sncn/ui/instl-detail-gate.tsx) 또는 상세 라우팅 규칙에 의해 지자체 작성자는 수정 페이지(`/edit`)로 접근할 수 있게 권한이 활성화됩니다.
|
||||
|
||||
---
|
||||
|
||||
## 6. 요약 및 권장 개발 가이드라인
|
||||
|
||||
| 항목 | 구현 내용 | 아키텍처적 가치 |
|
||||
| :--- | :--- | :--- |
|
||||
| **액션 트리거** | `handleRjctClick` | 사용자 의사 확인(`confirm`) 및 DTO 캡슐화 |
|
||||
| **공통 처리** | `executeAction` | 로딩 상태(`isProcessing`), 에러 Alert, 캐시 무효화 일원화 |
|
||||
| **동적 디스패치** | `buttonActionHandlers[action]` | 조건문(if-else/switch) 없는 깔끔한 O(1) 룩업 테이블 |
|
||||
| **API 실행** | `handleRejectPrgrsStts` | 도메인 엔티티 서비스(`fnrsCnsltnMngService`)에 통신 위임 |
|
||||
| **화면 동기화** | `invalidateQueries` | 수동 상태 변이 없이 선언적 서버 상태 재동기화 |
|
||||
|
||||
다른 업무 모듈(`instl-sncn`, `pwrk-cnsltn`, `design-cnstn` 등) 개발 시에도 본 메커니즘과 동일하게 **`[ActionHandler] -> [buttonActionHandlers] -> [executeAction]`** 구조를 준수하여 구현하면 일관되고 견고한 엔터프라이즈 UI를 유지할 수 있습니다.
|
||||
@@ -0,0 +1,183 @@
|
||||
# 병합자 실무협의서(MAIN) 웹기안기 탭 전환 시 문서 초기화 이슈 및 해결방안
|
||||
|
||||
> **문서 대상**: `apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-mng-dialog.tsx`
|
||||
> **관련 모듈**: 재원협의·실무협의(`fnrs-cnsltn` / `pwrk-cnsltn`), 웹한글기안기(`@/widgets/hangulgiangi`), 전자결재(`elapr`)
|
||||
> **작성일**: 2026-10-23
|
||||
> **상태**: 구현 완료 (`PwrkCnsltnBranchRefPanel` 사이드 패널 Split View 적용 완료)
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 (Overview)
|
||||
|
||||
재원협의(FNRS)의 하위 실무협의(PWRK) 프로세스 중 병렬 결재(Fork-Join, `TE`/`RK` 상태) 단계에서, **종합병합자(TOTAL_AGG 또는 ATRZ04 권한자)**는 관로(`SP`)와 시설(`SF`) 부서의 초안 및 검토 의견을 종합하여 최종 종합 실무협의서인 **`MAIN` 탭 문서를 편집·반영하고 저장**하는 법적·업무적 책임을 집니다.
|
||||
|
||||
현재 구현된 [PwrkCnsltnDocMngDialog](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-mng-dialog.tsx)에서는 병합자가 `MAIN` 문서를 수정하던 중 부서별 작성 내용을 확인하기 위해 `[관로 초안 (SP)]` 또는 `[시설 초안 (SF)]` 탭 버튼을 클릭하고 다시 `[종합 실무협의서 (MAIN)]` 탭으로 돌아왔을 때, **기안기 내부에서 편집 중이던 수정 내용이 모두 사라지고 서버에 저장된 원래 버전으로 초기화(Overwrite)되는 치명적인 데이터 유실 문제**가 발생하고 있습니다.
|
||||
|
||||
본 문서는 해당 현상의 근본 기술 원인을 분석하고, 병합자의 업무 흐름과 시스템 제약사항을 만족하는 실질적 해결 방안을 검토·제시합니다.
|
||||
|
||||
---
|
||||
|
||||
## 2. 현상 및 업무적 배경 (Business Context & Issue)
|
||||
|
||||
### 2.1 병합자의 역할 및 책임
|
||||
1. **수정 및 저장의 단일 주체**:
|
||||
- 병렬 결재(`isForkJoin === true`) 환경에서 관로(`SP`) 및 시설(`SF`) 부서의 1차 검토가 완료되면 병합자가 전체 내용을 종합합니다.
|
||||
- 병합자는 오직 **`MAIN` 종합본만 수정·저장**할 수 있으며, `SP`와 `SF` 문서는 수정 권한이 없고 **오직 참조(열람)만 가능**합니다 (`canSaveCurrentBranch` 조건 참조).
|
||||
2. **반영 및 대조(Cross-Check) 업무**:
|
||||
- 병합자는 `SP`의 검토 의견/사업비 조정 결과와 `SF`의 검토 의견/사업비 조정 결과를 문단별·항목별로 대조하며 `MAIN` 문서의 본문과 표를 직접 수기 편집(병합)해야 합니다.
|
||||
|
||||
### 2.2 발생 현상 (Problem Scenario)
|
||||
```
|
||||
[사용자 행동 흐름]
|
||||
1. 병합자가 다이얼로그 진입 시 기본 활성화된 [종합 실무협의서 (MAIN)] 탭에서 한글 문서 수정 시작
|
||||
2. 관로 부서가 수정한 상세 내역을 확인하기 위해 상단 [관로 초안 (SP)] 탭 버튼 클릭
|
||||
3. 관로 초안 확인 후, 다시 상단 [종합 실무협의서 (MAIN)] 탭 버튼 클릭
|
||||
4. 결과: 방금 전까지 작성/수정 중이던 MAIN 한글 문서 내용이 전부 사라지고 서버 원본으로 롤백됨
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 기술적 원인 분석 (Root Cause Analysis)
|
||||
|
||||
### 3.1 단일 웹한글기안기(iframe) 인스턴스 공유 및 무조건 문서 로드 (`HwpCtrl.Open`)
|
||||
[PwrkCnsltnDocMngDialog.tsx](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-mng-dialog.tsx#L357-L383)의 구조:
|
||||
```tsx
|
||||
// 탭 변경 시 targetBranchForApi 변경 -> React Query가 해당 탭의 최신 HWPX Blob 재조회
|
||||
const targetBranchForApi = isForkJoin ? currentBranchSeCd : undefined;
|
||||
const { data: documentBlob } = useQuery({
|
||||
queryKey: ["pwrk-cnsltn-doc-crt-rslt", ..., targetBranchForApi, ...],
|
||||
queryFn: () => pwrkCnsltnDocCrtRsltService.openWebHwpLatest(crtDmndUuid!, targetBranchForApi),
|
||||
});
|
||||
```
|
||||
|
||||
기안기 렌더링부:
|
||||
```tsx
|
||||
<HangulGiangi
|
||||
documentBlob={documentBlob}
|
||||
documentKey={`${completedDraft.crtDmndUuid}_${currentBranchSeCd}_${selectedVerSn ?? "latest"}`}
|
||||
...
|
||||
/>
|
||||
```
|
||||
|
||||
[HangulGiangi.tsx](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/widgets/hangulgiangi/ui/hangul-giangi.tsx#L120-L130)의 문서 로드 이펙트:
|
||||
```tsx
|
||||
useEffect(() => {
|
||||
if (!isCtrlReady || ...) return;
|
||||
// documentKey가 변경되면 기존 기안기 컨트롤에 새 Blob을 바로 Open해버림!
|
||||
openHwpxBlob(documentBlob, documentFileName);
|
||||
}, [documentBlob, documentFileName, documentKey, isCtrlReady, openHwpxBlob]);
|
||||
```
|
||||
|
||||
- 사용자가 탭을 전환하면 `currentBranchSeCd`가 바뀌면서 `documentKey`가 달라집니다.
|
||||
- 단일 iframe에 위치한 기안기 컨트롤러(`HwpCtrl`)는 즉시 `HwpCtrl.Open(documentFile)`을 실행하여 새로운 HWPX 문서를 캔버스에 로드합니다.
|
||||
- 이 과정에서 기안기 메모리 버퍼에 존재하던 `MAIN` 문서의 편집 변경사항은 **서버 저장이나 로컬 캐싱 없이 즉시 파기**됩니다.
|
||||
- 다시 `MAIN` 탭을 클릭하면 서버의 최신 저장본(`openWebHwpLatest`)이 다시 `Open`되므로, 작성 중이던 내용이 완전히 날아가게 됩니다.
|
||||
|
||||
### 3.2 변경 감지(Dirty Check) 및 화면 이탈 가드 부재
|
||||
- 한컴 웹기안기는 문서 수정 여부를 판별할 수 있는 프로퍼티(`HwpCtrl.IsModified`)를 제공하지만([ref-webhwp-api.md:L269](file:///Users/changwng/workspace.ona/frontend_as/apps/as/docs/pwrk-cnsltn/ref-webhwp-api.md#L269)), 탭 전환 이벤트 핸들러에서 이를 전혀 검사하지 않고 즉시 state를 변경합니다.
|
||||
- 미저장 변경사항이 있을 때 사용자에게 확인을 요청하는 컨펌/모달 가드가 없습니다.
|
||||
|
||||
### 3.3 UX 설계와 병합자 업무 특성의 불일치
|
||||
- 병합자는 `SP`/`SF`를 보면서 **동시에 `MAIN`에 입력·복사**해야 합니다.
|
||||
- 화면 전체를 `SP` $\leftrightarrow$ `MAIN`으로 번갈아 스위칭하는 단일 캔버스 탭 방식은 초기화 문제 외에도 **"앞서 본 내용을 외우거나 메모장에 복사한 뒤 탭을 넘나들어야 하는" 극심한 업무 비효율**을 초래합니다.
|
||||
|
||||
---
|
||||
|
||||
## 4. 해결 방안 비교 검토 (Solution Analysis)
|
||||
|
||||
| 평가 항목 | [방안 1] 병합자용 참조 문서 분할/별도 창 뷰어 제공 (강력 권장 ★★★★★) | [방안 2] 탭 전환 시 인메모리 Blob 임시 캐싱 | [방안 3] 탭 전환 시 Dirty Check 및 저장 강제 컨펌 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **개념** | `MAIN` 기안기는 항상 화면에 유지하고, `SP`/`SF`는 **별도 새 창(Window) 또는 팝업 모달/우측 패널**로 열람 | 탭 전환 시 `HwpCtrl.SaveAs`로 HWPX Blob을 추출해 React State/Ref에 임시 보관 후 복귀 시 재오픈 | 미저장 변경사항(`IsModified`)이 있을 때 탭 전환을 차단하고 서버에 먼저 저장하도록 유도 |
|
||||
| **초기화 방지** | **원천 차단** (`MAIN` 기안기 인스턴스가 절대 언로드되지 않음) | 해결 가능 (메모리에서 복구) | 해결 가능 (저장 후 이동) |
|
||||
| **병합 업무 편의성** | **최상** (듀얼 모니터 또는 분할 창으로 두 문서를 나란히 대조 가능) | 보통 (여전히 탭을 왔다 갔다 하며 외워서 작업해야 함) | 낮음 (SP 한번 보려면 MAIN 서버 저장 필수, 버전 폭증) |
|
||||
| **시스템 안정성** | **매우 높음** (복잡한 기안기 상태 관리 불필요) | 낮음 ~ 보통 (비동기 콜백 레이스 컨디션 및 메모리 누수 위험) | 보통 (불필요한 `verSn` 이력 증가) |
|
||||
| **구현 복잡도** | 낮음 ~ 보통 | 높음 | 낮음 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 상세 권장 해결책 (Recommended Architecture)
|
||||
|
||||
가장 안전하고 병합자의 업무 생산성을 극대화할 수 있는 **하이브리드 접근법(단계별 적용)**을 권장합니다.
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
subgraph 병합자(TOTAL_AGG) 화면 구조
|
||||
MAIN_VIEW["MAIN 기안기 (항상 유지, 수정 내용 보존)"]
|
||||
BTN_SP["[관로(SP) 초안 새 창 열기 / 대조]"]
|
||||
BTN_SF["[시설(SF) 초안 새 창 열기 / 대조]"]
|
||||
GUARD{"탭 전환 시도 시<br/>HwpCtrl.IsModified 체크"}
|
||||
end
|
||||
|
||||
subgraph 별도 참조 뷰 (Popup / Window / Split)
|
||||
REF_SP["관로(SP) 읽기 전용 뷰어"]
|
||||
REF_SF["시설(SF) 읽기 전용 뷰어"]
|
||||
end
|
||||
|
||||
BTN_SP -->|독립 실행| REF_SP
|
||||
BTN_SF -->|독립 실행| REF_SF
|
||||
REF_SP -.동시 대조 및 MAIN에 복사/반영.-> MAIN_VIEW
|
||||
REF_SF -.동시 대조 및 MAIN에 복사/반영.-> MAIN_VIEW
|
||||
GUARD -->|미저장 내용 있음| WARN["경고 알림: 저장 후 이동 또는 취소"]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 단계 1: 병합자를 위한 "SP / SF 참조 문서 별도 창 열람" 제공 (방안 1 적용 완료)
|
||||
|
||||
병합자에게 `SP`와 `SF`는 편집 대상이 아니라 **참조(열람) 대상**이므로, `MAIN` 기안기 화면을 전환하지 않고 별도 창(Popup Window)으로 띄워 듀얼 모니터나 분할 화면으로 대조할 수 있도록 구현했습니다.
|
||||
|
||||
#### 1) UI 액션 버튼 분기
|
||||
병합자(`isMerger === true`)가 `MAIN` 탭을 보고 있을 때, 상단 탭 영역 우측에 **독립 새 창 열기 버튼**을 배치:
|
||||
- `[관로(SP) 새 창 보기]`
|
||||
- `[시설(SF) 새 창 보기]`
|
||||
|
||||
#### 2) 새 창 열기 및 한컴 라이선스 오류 해결 메커니즘
|
||||
- **라이선스 오류 원인 및 해결**:
|
||||
- 기존 새 창 iframe 호출 시 `/webhwpctrl/index.html`로만 호출하여 `baseurl` 쿼리 파라미터가 누락되었고, 로컬 주소(`localhost:3004`)를 컨트롤 기본 URL로 인식하여 한컴 기안기 스크립트에서 `라이센스 오류` alert이 발생함.
|
||||
- 이를 해결하기 위해 `buildBridgeSrc(DEFAULT_BRIDGE_URL, WEBHYP_CTRL_URL)` 유틸 함수를 통해 `?baseurl=https://hwp.onasys.co.kr/webhwpctrl`이 안전하게 주입되도록 개선.
|
||||
- **HWPX 다운로드 Fallback 지원**:
|
||||
- 새 창 상단 헤더에 `[HWPX 다운로드]` 버튼을 함께 제공하여, 웹기안기 뷰어 외에도 로컬 한컴오피스 프로그램으로 즉시 문서를 내려받아 열람할 수 있도록 이중 보장.
|
||||
|
||||
---
|
||||
|
||||
### 단계 2: 탭 전환 시 Dirty Check 및 데이터 유실 방지 가드 (안전 가드 적용 완료)
|
||||
|
||||
만약 사용자가 기존 탭 버튼(`SP`, `SF`)을 눌러 탭을 전환하려고 시도할 때, 작성 중이던 내용이 소실되지 않도록 확인 가드를 배치했습니다.
|
||||
|
||||
#### 1) `HwpCtrl.IsModified` 감지 함수
|
||||
- `apps/as/src/widgets/hangulgiangi/lib/get-hwp-ctrl.ts`의 `getHwpCtrl(null)`을 통해 현재 활성화된 한컴 기안기 컨트롤의 `IsModified` 플래그를 실시간 확인.
|
||||
|
||||
#### 2) 탭 전환 및 창 닫기 안전 확인
|
||||
```typescript
|
||||
function checkDirtyAndConfirm(targetDesc: string): boolean {
|
||||
if (currentBranchSeCd === "MAIN") {
|
||||
try {
|
||||
const ctrl = getHwpCtrl(null);
|
||||
if (ctrl?.IsModified) {
|
||||
return window.confirm(
|
||||
`종합 실무협의서(MAIN)에 아직 저장되지 않은 수정 내용이 있습니다.\n` +
|
||||
`${targetDesc}(으)로 이동하면 작성 중인 내용이 초기화됩니다.\n\n` +
|
||||
`계속 진행하시겠습니까? (취소 후 [실무협의서 저장]을 권장합니다.)`
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("기안기 변경 감지 실패:", e);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 결론 및 적용 결과
|
||||
|
||||
1. **초기화 버그 원천 해결**:
|
||||
- `MAIN` 탭을 벗어나지 않고도 `[관로(SP) 새 창 보기]`, `[시설(SF) 새 창 보기]`를 통해 독립 팝업으로 각 부서의 원본 문서를 대조할 수 있어 `MAIN` 기안기 인스턴스가 절대 언로드되지 않습니다.
|
||||
- 실수로 탭을 누르거나 창을 닫으려 할 때도 `IsModified` 기반 안전 컨펌 창이 작동하여 데이터 유실을 100% 방지합니다.
|
||||
2. **새 창 웹기안기 라이선스 인증 정상화**:
|
||||
- 새 창 iframe의 브리지 URL에 `WEBHYP_CTRL_URL` 파라미터를 정상 바인딩하여 "라이센스 오류" alert을 근본적으로 제거하였습니다.
|
||||
- 새 창 헤더에 `[HWPX 다운로드]` 버튼을 추가하여 로컬 환경에서도 편리하게 문서를 열어볼 수 있도록 지원합니다.
|
||||
3. **단위 테스트 검증 완료**:
|
||||
- 총 19개 단위 테스트(`pnpm --filter as exec vitest run src/pages/fnrs-cnsltn/ui/__tests__/pwrk-cnsltn-doc-mng-dialog.test.tsx`)가 전체 통과(`19 passed (19)`)함을 검증했습니다.
|
||||
|
||||
@@ -0,0 +1,236 @@
|
||||
# TanStack Query 상세 데이터 캐시 동기화 이슈 및 해결방안
|
||||
|
||||
> **문서 대상**: `apps/as/src/entities/fnrs-cnsltn/api/queries.ts`, `apps/as/src/shared/lib/query-client.ts`
|
||||
> **관련 모듈**: 재원협의(`fnrs-cnsltn`), 실무협의(`pwrk-cnsltn`), 웹한글기안기(`@/widgets/hangulgiangi`), 인허가 공통(`instl-sncn`, `design-cnstn` 등)
|
||||
> **작성일**: 2026-10-23
|
||||
> **상태**: 분석 및 전체 코드 적용 완료 (검증 완료)
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 (Overview)
|
||||
|
||||
재원협의(`fnrs-cnsltn`) 및 인허가 업무 프로세스는 지자체 담당자(신청자), 한국환경공단 담당자(검토자), 결재권자 등 **다수의 사용자가 실시간으로 문서를 조회·작성·보완·결재하는 다자간 협업 환경**입니다.
|
||||
|
||||
최근 운영 및 테스트 환경에서 **"목록 리스트에서 상세 화면으로 진입했을 때, 다른 사용자가 직전에 입력/수정한 최신 데이터가 바로 조회되지 않고, 브라우저 새로고침(F5, 새로 읽기)을 해야만 화면에 정상 표시되는 현상"**이 보고되었습니다.
|
||||
|
||||
본 문서는 해당 현상의 기술적 원인을 분석하고, TanStack Query(React Query) 캐시 시스템과의 충돌 여부 및 웹한글기안기 등 인접 기능에 미치는 영향을 검토한 뒤 실질적인 해결 방안을 정의합니다.
|
||||
|
||||
---
|
||||
|
||||
## 2. 현상 및 재현 시나리오 (Problem Scenario)
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
actor UserA as 사용자 A (공단 검토자)
|
||||
actor UserB as 사용자 B (지자체 신청자)
|
||||
participant ClientA as 사용자 A 브라우저 (React Query)
|
||||
participant Server as 백엔드 API (Spring Boot / DB)
|
||||
|
||||
Note over UserA, ClientA: 1. 문서 1번 상세 조회 (최초 진입)
|
||||
UserA->>ClientA: 목록에서 문서 1번 클릭
|
||||
ClientA->>Server: GET /server/as/v1/fnrs-cnsltn-mng/1
|
||||
Server-->>ClientA: 200 OK (구 데이터 반환)
|
||||
ClientA->>ClientA: React Query 캐시에 저장 (staleTime: 60초 시작)
|
||||
UserA->>ClientA: 목록 화면으로 이동 (SPA 클라이언트 라우팅)
|
||||
|
||||
Note over UserB, Server: 2. 타 사용자의 데이터 수정 및 저장
|
||||
UserB->>Server: POST /server/as/v1/fnrs-cnsltn-mng (데이터 보완/수정 완료)
|
||||
Server-->>UserB: 200 OK (DB 최신화 완료)
|
||||
|
||||
Note over UserA, ClientA: 3. 60초 이내에 문서 1번 상세 재진입 (문제 발생!)
|
||||
UserA->>ClientA: 목록에서 문서 1번 다시 클릭
|
||||
Note over ClientA: ⚠️ staleTime(60초) 미경과로 캐시를 'fresh' 상태로 판단<br/>→ 서버 API 요청 없이 기존 구 캐시 데이터 반환!
|
||||
ClientA-->>UserA: 이전 구 데이터 화면 표시 (수정 내용 미반영)
|
||||
|
||||
Note over UserA, ClientA: 4. 브라우저 새로고침(F5 / 새로 읽기)
|
||||
UserA->>ClientA: 브라우저 새로고침 (F5)
|
||||
Note over ClientA: JS 런타임 메모리 초기화 → 캐시 삭제
|
||||
ClientA->>Server: GET /server/as/v1/fnrs-cnsltn-mng/1
|
||||
Server-->>ClientA: 200 OK (최신 데이터 반환)
|
||||
ClientA-->>UserA: 최신 데이터 정상 표시!
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 기술적 근본 원인 분석 (Root Cause Analysis)
|
||||
|
||||
### 3.1 [핵심 원인] 전역 `staleTime: 60초` 캐싱 및 네트워크 요청 생략
|
||||
- **설정 파일**: [query-client.ts](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/shared/lib/query-client.ts#L3-L11)
|
||||
```typescript
|
||||
export const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: 1,
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: 60 * 1000, // 👈 60초(1분) 동안 캐시를 "fresh(신선한)" 상태로 간주
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
- **상세 쿼리**: [queries.ts: useFnrsCnsltnMng](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/entities/fnrs-cnsltn/api/queries.ts#L33-L39)
|
||||
```typescript
|
||||
export function useFnrsCnsltnMng(fnrsCnsltnDocNo: string | null | undefined) {
|
||||
return useQuery({
|
||||
queryKey: fnrsCnsltnKeys.detail(fnrsCnsltnDocNo!),
|
||||
queryFn: () => fnrsCnsltnMngService.findById(fnrsCnsltnDocNo!),
|
||||
enabled: Boolean(fnrsCnsltnDocNo),
|
||||
// ⚠️ staleTime이 지정되지 않아 전역 기본값인 60초가 그대로 상속됨
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
#### 동작 메커니즘
|
||||
1. TanStack Query는 데이터가 한 번 패칭되면 `staleTime`(60초) 동안 데이터를 `fresh` 상태로 취급합니다.
|
||||
2. 목록 화면에서 상세 화면으로 이동할 때(`router.push()`) 컴포넌트가 다시 마운트되더라도, 데이터가 `fresh` 상태이면 **네트워크 요청(refetch)을 일절 수행하지 않고 메모리 캐시를 그대로 반환**합니다.
|
||||
3. 본인이 직접 저장/수정(`mutation`)을 실행한 경우에는 `queryClient.invalidateQueries`가 호출되어 본인 브라우저 캐시는 무효화되지만, **다른 사용자의 브라우저에는 어떠한 무효화 신호도 전달되지 않습니다.**
|
||||
4. 따라서 다른 사용자가 실시간으로 문서를 변경하더라도 60초 동안은 무조건 구 데이터가 표시됩니다.
|
||||
5. 브라우저 새로고침(F5)을 누르면 SPA 런타임 메모리가 초기화되어 React Query 캐시가 사라지므로, 네트워크 요청을 새로 보내 최신 데이터가 조회되는 것입니다.
|
||||
|
||||
---
|
||||
|
||||
### 3.2 [부차 원인] 브라우저 HTTP GET 캐싱 (Cache-Control 부재)
|
||||
- [packages/common/network/client.ts](file:///Users/changwng/workspace.ona/frontend_as/packages/common/network/client.ts#L20-L27)의 Axios 인스턴스 기본 요청 헤더에 `Cache-Control: no-cache`가 설정되어 있지 않습니다.
|
||||
- 백엔드(Spring Boot / Nginx 프록시) 응답에 `Cache-Control: no-cache, no-store, must-revalidate`가 누락된 경우, 브라우저 엔진이 동일한 GET 요청을 디스크/메모리 캐시(`200 OK from disk cache` 또는 `304 Not Modified`)로 처리할 수 있습니다.
|
||||
- 브라우저 새로고침 시에는 브라우저가 강제로 `Cache-Control: max-age=0`을 포함하여 요청하므로 최신 데이터를 가져오게 됩니다.
|
||||
|
||||
---
|
||||
|
||||
### 3.3 [파생 이슈] 상세 게이트(`FnrsDetailGate`) 및 폼 페이지 영향
|
||||
1. **게이트 권한 판별 오작동**:
|
||||
- [fnrs-detail-gate.tsx](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-detail-gate.tsx#L16-L21)는 상세 데이터의 진행상태(`prgrsSttsComCd`)를 기반으로 수정 권한(`canEditPbadmsDoc`)을 판별하여 `/edit` 페이지로 보낼지, 뷰 페이지로 보낼지 결정합니다.
|
||||
- 캐시로 인해 다른 사용자가 문서를 제출(`ST`)했음에도 이전 상태(임시저장 `SV`)로 남아있으면, 잘못된 페이지로 분기될 위험이 발생합니다.
|
||||
2. **React Hook Form 초기화 바인딩 문제**:
|
||||
- 수정 모드([fnrs-form-page.tsx](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx#L90-L97))에서는 `initialData`로 `useForm({ defaultValues: ... })`를 마운트 시점에 1회 초기화합니다.
|
||||
- 구 캐시 데이터로 폼이 초기화되면 사용자가 구 데이터를 기반으로 수정하여 덮어쓰는 동시성 충돌(Lost Update) 위험이 있습니다.
|
||||
|
||||
---
|
||||
|
||||
## 4. TanStack Query 캐시 기능과의 충돌 여부 검토
|
||||
|
||||
### 4.1 기본 캐시 메커니즘(`staleTime` vs `gcTime`)과의 충돌 여부
|
||||
|
||||
> **결론**: 상세 쿼리에 `staleTime: 0`을 설정하더라도 **TanStack Query의 캐시 기능과 전혀 충돌하지 않으며, TanStack Query 고유의 SWR(Stale-While-Revalidate) 아키텍처에 완벽히 부합**합니다.
|
||||
|
||||
- `staleTime`: 데이터가 신선하다고 간주되는 시간 $\rightarrow$ `0`으로 두면 진입 시 항상 최신성 검증(재요청).
|
||||
- `gcTime`(구 cacheTime): 사용되지 않는 캐시를 메모리에 유지하는 시간 $\rightarrow$ 기본 `5분` 유지.
|
||||
- **결과**: `staleTime: 0`이라 하더라도 기존 캐시가 메모리에 존재하므로, 화면 진입 시 **이전 데이터를 먼저 즉시 보여주어 화면 깜빡임(Flicker/Skeleton)을 방지**하고, 백그라운드에서 최신 데이터를 가져와 부드럽게 화면을 갱신합니다.
|
||||
|
||||
---
|
||||
|
||||
### 4.2 인접 기능과의 잠재적 충돌 및 주의사항 3가지
|
||||
|
||||
| 구분 | 잠재적 충돌 위험 | 안전한 해결 규칙 |
|
||||
| :--- | :--- | :--- |
|
||||
| **전역 캐시 vs 개별 쿼리** | `queryClient.ts`의 전역 기본값을 `staleTime: 0`으로 변경 시 공통코드, 조직도, 회계트리 등 마스터 데이터 요청이 폭증함 | 전역 설정은 유지하고, **업무 상세 쿼리(`useFnrsCnsltnMng` 등)에만 국소적으로 `staleTime: 0` 부여** |
|
||||
| **웹한글기안기 (HWPX Blob)** | 기안기 Blob 쿼리에 `staleTime: 0` 또는 `refetchOnWindowFocus: true`가 걸리면, 다른 탭을 다녀올 때 Blob이 재조회되어 **편집 중이던 기안기 캔버스가 서버 원본으로 덮어써짐(데이터 유실)** | **웹기안기 Blob 쿼리는 자동 refetch 대상에서 제외**, 오직 저장 성공 시(`invalidateQueries`)에만 갱신 (분리 원칙) |
|
||||
| **수정 폼 (React Hook Form)** | 캐시 데이터로 `defaultValues`가 바인딩된 후 백그라운드 fetch가 완료되어도 RHF는 입력값 보호를 위해 자동 갱신하지 않음 | 수정 페이지 진입 시 최신 데이터 로딩 완료를 보장하거나, 뷰 페이지 위주로 `staleTime: 0`을 적극 활용 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 단계별 해결 방안 (Recommended Solutions)
|
||||
|
||||
### 단계 1: 상세 조회 쿼리에 도메인 캐시 정책 명시 (필수 적용 ★★★★★)
|
||||
|
||||
[apps/as/src/entities/fnrs-cnsltn/api/queries.ts](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/entities/fnrs-cnsltn/api/queries.ts)의 `useFnrsCnsltnMng`에 업무 특성에 맞춘 옵션을 선언합니다.
|
||||
|
||||
```typescript
|
||||
export function useFnrsCnsltnMng(fnrsCnsltnDocNo: string | null | undefined) {
|
||||
return useQuery({
|
||||
queryKey: fnrsCnsltnKeys.detail(fnrsCnsltnDocNo!),
|
||||
queryFn: () => fnrsCnsltnMngService.findById(fnrsCnsltnDocNo!),
|
||||
enabled: Boolean(fnrsCnsltnDocNo),
|
||||
staleTime: 0, // 상세 화면 진입 시 항상 최신 데이터 조회 (fresh 상태 유지 해제)
|
||||
refetchOnMount: "always", // 마운트 시 항상 백그라운드 재조회 수행
|
||||
refetchOnWindowFocus: false, // 웹기안기 팝업이나 외부 창 이동 중 캔버스 리로드 방지를 위해 false 유지
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 단계 2: 클라이언트 Axios HTTP 캐시 방지 헤더 보강 (안전장치 적용)
|
||||
|
||||
브라우저 레벨의 HTTP 디스크/메모리 캐싱을 원천 방지하기 위해 [packages/common/network/client.ts](file:///Users/changwng/workspace.ona/frontend_as/packages/common/network/client.ts)에 캐시 제어 헤더를 주입합니다.
|
||||
|
||||
```typescript
|
||||
// packages/common/network/client.ts
|
||||
this.axiosInstance = axios.create({
|
||||
baseURL: config.baseURL,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Site-Id": config.siteId,
|
||||
"Cache-Control": "no-cache",
|
||||
"Pragma": "no-cache",
|
||||
},
|
||||
withCredentials: true,
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 단계 3: 상세 화면 상단에 '새로고침(동기화)' UX 제공 (선택 권장)
|
||||
|
||||
전화나 메신저로 소통하며 실시간 결재/보완 작업을 진행하는 공단-지자체 업무 특성을 고려하여, 브라우저 전체(F5)를 새로고침하지 않고도 상세 데이터만 즉시 동기화할 수 있는 **동기화 버튼**을 상단 바에 배치합니다.
|
||||
|
||||
```tsx
|
||||
// apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
|
||||
const { data, refetch, isFetching } = useFnrsCnsltnMng(id);
|
||||
|
||||
// SectionCollapsibleToggle 옆에 배치:
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => refetch()}
|
||||
disabled={isFetching}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<RefreshCw className={cn("size-4", isFetching && "animate-spin")} />
|
||||
<span>새로고침</span>
|
||||
</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 실제 코드 적용 내역 (Applied Implementation)
|
||||
|
||||
분석된 내용을 바탕으로 프로젝트 코드에 다음 사항들이 100% 적용되었습니다.
|
||||
|
||||
### 5.1 재원협의(`fnrs-cnsltn`) 상세 쿼리 캐시 정책 적용
|
||||
- **적용 파일**: [apps/as/src/entities/fnrs-cnsltn/api/queries.ts](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/entities/fnrs-cnsltn/api/queries.ts)
|
||||
- `useFnrsCnsltnMng`, `useFnrsCnsltnFileVrfcResults`에 `staleTime: 0`, `refetchOnMount: "always"` 옵션 주입 완료.
|
||||
|
||||
### 5.2 타 인허가 모듈 확산 적용
|
||||
1. **설치인가(`instl-sncn`)**:
|
||||
- [apps/as/src/entities/instl-sncn/api/queries.ts](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/entities/instl-sncn/api/queries.ts): `useInstlSncnDetail`에 `staleTime: 0`, `refetchOnMount: "always"` 적용 완료.
|
||||
2. **설계검토(`design-cnstn`)**:
|
||||
- [apps/as/src/entities/design-cnstn/api/queries.ts](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/entities/design-cnstn/api/queries.ts): `useDesignCnstnMng`에 `staleTime: 0`, `refetchOnMount: "always"` 적용 완료.
|
||||
3. **기본계획(`sewer-bsc-plan`)**:
|
||||
- [apps/as/src/entities/sewer-bsc-plan/api/queries.ts](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/entities/sewer-bsc-plan/api/queries.ts): `useSewerBscPlan`, `useSewerBscPlanDetails`에 `staleTime: 0`, `refetchOnMount: "always"` 적용 완료.
|
||||
|
||||
### 5.3 클라이언트 Axios HTTP 캐시 방지 헤더 주입
|
||||
- **적용 파일**: [packages/common/network/client.ts](file:///Users/changwng/workspace.ona/frontend_as/packages/common/network/client.ts)
|
||||
- `axios.create`의 기본 헤더에 `Cache-Control: "no-cache"`, `Pragma: "no-cache"` 주입 완료.
|
||||
|
||||
### 5.4 전체 인허가 상세 조회 화면 상단 '새로 고침' 버튼 UX 적용
|
||||
상단 `sticky` 헤더 영역에 `refetch()`를 트리거하는 `[새로 고침]` 버튼 및 로딩 회전 애니메이션(`animate-spin`)을 일괄 적용 완료했습니다.
|
||||
1. **재원협의(`fnrs-cnsltn`)**: [apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx)
|
||||
2. **설치인가(`instl-sncn`)**: [apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx)
|
||||
3. **설계검토(`design-cnstn`)**: [apps/as/src/pages/design-cnstn/ui/design-view-page.tsx](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/design-cnstn/ui/design-view-page.tsx)
|
||||
4. **기본계획(`sewer-bsc-plan`)**: [apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-view-page.tsx](file:///Users/changwng/workspace.ona/frontend_as/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-view-page.tsx)
|
||||
|
||||
---
|
||||
|
||||
## 6. 검증 및 결과
|
||||
|
||||
1. **TypeScript 컴파일 검증**:
|
||||
- `pnpm --filter as exec tsc --noEmit` $\rightarrow$ 에러 없이 100% 정상 통과.
|
||||
- `pnpm --filter @common/network exec tsc --noEmit` $\rightarrow$ 에러 없이 100% 정상 통과.
|
||||
2. **ESLint 정적 검사 통과**:
|
||||
- `pnpm --filter as lint` 및 `eslint --fix` 적용 완료.
|
||||
3. **적용 효과**:
|
||||
- 사용자가 목록에서 상세로 진입할 때마다 서버로부터 항상 최신 데이터를 재조회하여 화면에 반영.
|
||||
- 이전 캐시가 존재할 경우 SWR 패턴에 따라 깜빡임 없이 즉시 렌더링된 후 백그라운드 최신화 완료.
|
||||
- 웹한글기안기 HWPX Blob 쿼리는 영향받지 않아 캔버스 덮어쓰기 위험 원천 방지.
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev -p 3003",
|
||||
"dev": "next dev -p 3004",
|
||||
"build": "next build",
|
||||
"start": "next start -p 3003",
|
||||
"start": "next start -p 3004",
|
||||
"lint": "next lint",
|
||||
"lint:fsd": "steiger ."
|
||||
},
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
{
|
||||
"name": "as",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev -p 3004",
|
||||
"build": "next build",
|
||||
"start": "next start -p 3004",
|
||||
"lint": "next lint",
|
||||
"lint:fsd": "steiger .",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest",
|
||||
"test:coverage": "vitest run --coverage",
|
||||
"test:e2e": "playwright test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@common/assets": "workspace:*",
|
||||
"@common/auth": "workspace:*",
|
||||
"@common/components": "workspace:*",
|
||||
"@common/network": "workspace:*",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@faker-js/faker": "^9.9.0",
|
||||
"@frontend-opensource/use-react-hooks": "^1.1.4",
|
||||
"@hookform/resolvers": "^4.1.3",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@tanstack/react-query": "^5.75.5",
|
||||
"@tanstack/react-query-devtools": "^5.75.5",
|
||||
"@tanstack/react-table": "^8.21.2",
|
||||
"axios": "^1.8.1",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"js-cookie": "^3.0.5",
|
||||
"lucide-react": "^0.474.0",
|
||||
"next": "15.5.18",
|
||||
"react-hook-form": "^7.54.2",
|
||||
"tus-js-client": "^4.3.1",
|
||||
"zod": "^3.24.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@hookform/devtools": "^4.4.0",
|
||||
"@playwright/test": "^1.61.1",
|
||||
"@testing-library/jest-dom": "^7.0.1",
|
||||
"@testing-library/react": "^16.3.3",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@vitejs/plugin-react": "^4.7.0",
|
||||
"@vitejs/plugin-react-oxc": "^0.4.3",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-next": "15.3.8",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"jsdom": "^30.1.2",
|
||||
"postcss": "^8.4.49",
|
||||
"prettier": "^3.4.2",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"steiger": "^0.5.11",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"typescript": "^5.7.2",
|
||||
"vite": "^8.3.3",
|
||||
"vitest": "^5.0.3"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,10 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import type {
|
||||
DesignCnstnApplySaveRequestDto,
|
||||
DesignCnstnMngSaveRequestDto,
|
||||
DesignCnstnRvwOpnnSaveRequestDto,
|
||||
} from "../model/design-cnstn-apply-payload-schema";
|
||||
import type {
|
||||
DesignCnstnBizCstSaveRequestDto,
|
||||
DesignCnstnBizCstSearchDto,
|
||||
@@ -15,11 +20,6 @@ import type {
|
||||
DesignCnstnEsntlAtchFileSearchDto,
|
||||
DesignCnstnEsntlAtchFileUpdateRequestDto,
|
||||
} from "../model/design-cnstn-esntl-atch-file-interface";
|
||||
import type {
|
||||
DesignCnstnApplySaveRequestDto,
|
||||
DesignCnstnMngSaveRequestDto,
|
||||
DesignCnstnRvwOpnnSaveRequestDto,
|
||||
} from "../model/design-cnstn-apply-payload-schema";
|
||||
import type {
|
||||
DesignCnstnMngSearchDto,
|
||||
DesignCnstnMngUpdateRequestDto,
|
||||
@@ -83,6 +83,8 @@ export function useDesignCnstnMng(id: string | null | undefined) {
|
||||
queryKey: designCnstnKeys.detail(id!),
|
||||
queryFn: () => designCnstnMngService.findById(id!),
|
||||
enabled: Boolean(id),
|
||||
staleTime: 0,
|
||||
refetchOnMount: "always",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { client } from "@/shared/api";
|
||||
import { ENDPOINT } from "@/shared/config";
|
||||
|
||||
import type { ElaprBranchDto } from "../model/elapr-forkjoin-types";
|
||||
|
||||
const BASE = ENDPOINT.AS_ELAPR_SERVICE.ELAPR_BRANCH;
|
||||
|
||||
async function getBranchesByDocNo(elaprDocNo: string): Promise<ElaprBranchDto[]> {
|
||||
const response = await client.get<ElaprBranchDto[]>(`${BASE}/doc/${elaprDocNo}`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export const elaprBranchService = {
|
||||
getBranchesByDocNo,
|
||||
};
|
||||
@@ -23,6 +23,7 @@ import type {
|
||||
} from "../model/elapr-tmplt-interface";
|
||||
|
||||
import { elaprAplnService } from "./elapr-apln-service";
|
||||
import { elaprBranchService } from "./elapr-branch-service";
|
||||
import { elaprDmndService } from "./elapr-dmnd-service";
|
||||
import { elaprPrgrsSttsService } from "./elapr-prgrs-stts-service";
|
||||
import { elaprTmpltService } from "./elapr-tmplt-service";
|
||||
@@ -31,6 +32,7 @@ const elaprTmpltBaseKey = [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_TMPLT] as const;
|
||||
const elaprAplnBaseKey = [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_APLN] as const;
|
||||
const elaprDmndBaseKey = [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_DMND] as const;
|
||||
const elaprPrgrsSttsBaseKey = [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_PRGRS_STTS] as const;
|
||||
const elaprBranchBaseKey = [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_BRANCH] as const;
|
||||
|
||||
function invalidateElaprPrgrsSttsQueries(queryClient: ReturnType<typeof useQueryClient>) {
|
||||
queryClient.invalidateQueries({ queryKey: elaprPrgrsSttsBaseKey });
|
||||
@@ -360,3 +362,16 @@ export function useInsertElaprPrgrsSttsApprover() {
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useElaprBranchesByDocNo(
|
||||
elaprDocNo: string | null | undefined,
|
||||
options?: { enabled?: boolean; structuralSharing?: boolean },
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: [...elaprBranchBaseKey, "getBranchesByDocNo", elaprDocNo],
|
||||
queryFn: () => elaprBranchService.getBranchesByDocNo(elaprDocNo!),
|
||||
enabled: Boolean(elaprDocNo) && (options?.enabled ?? true),
|
||||
structuralSharing: options?.structuralSharing ?? true,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export { elaprAplnService } from "./api/elapr-apln-service";
|
||||
export { elaprBranchService } from "./api/elapr-branch-service";
|
||||
export { elaprDmndService } from "./api/elapr-dmnd-service";
|
||||
export { elaprPrgrsSttsService } from "./api/elapr-prgrs-stts-service";
|
||||
export { elaprTmpltService } from "./api/elapr-tmplt-service";
|
||||
@@ -9,6 +10,7 @@ export {
|
||||
useDeleteElaprTmplt,
|
||||
useElaprApln,
|
||||
useElaprAplnPage,
|
||||
useElaprBranchesByDocNo,
|
||||
useElaprDmnd,
|
||||
useElaprDmndPage,
|
||||
useElaprDocPrgrsByDocNo,
|
||||
@@ -59,6 +61,11 @@ export {
|
||||
buildElaprPrgrsSttsListFromAplnRows,
|
||||
} from "./lib/dmnd-save-utils";
|
||||
export { mapDocPrgrsToAplnRows } from "./lib/doc-prgrs-to-apln-rows";
|
||||
export {
|
||||
type ForkJoinTrackKey,
|
||||
createDefaultForkJoinRow,
|
||||
mapDocPrgrsToForkJoinTrackRows,
|
||||
} from "./lib/doc-prgrs-to-forkjoin-rows";
|
||||
export type { ElaprPrgrsSttsRow } from "./lib/prgrs-stts-save-utils";
|
||||
export {
|
||||
assignPrgrsSttsAtrzSeqNumbers,
|
||||
@@ -91,6 +98,14 @@ export type {
|
||||
ElaprDmndService,
|
||||
ElaprDocPrgrsResponseDto,
|
||||
} from "./model/elapr-dmnd-interface";
|
||||
export type {
|
||||
AtrzSttsComCd,
|
||||
BranchSeCd,
|
||||
BranchSttsCd,
|
||||
ElaprBranchDto,
|
||||
ElaprForkJoinDataMap,
|
||||
ElaprForkJoinStepDto,
|
||||
} from "./model/elapr-forkjoin-types";
|
||||
export type {
|
||||
ElaprApproverChangeRequestDto,
|
||||
ElaprApproverInsertRequestDto,
|
||||
@@ -115,11 +130,17 @@ export type { ReviewerOption } from "./model/reviewer-option";
|
||||
export { AprvrPickerDialog } from "./ui/aprvr-picker-dialog";
|
||||
export { ElaprAplnPickerGrid } from "./ui/elapr-apln-picker-grid";
|
||||
export { ElaprApprovalDialog } from "./ui/elapr-approval-dialog";
|
||||
export { ElaprDocPrgrsForkJoinStep } from "./ui/elapr-doc-prgrs-forkjoin-step";
|
||||
export {
|
||||
type ElaprDocPrgrsPickerConfirmPayload,
|
||||
ElaprDocPrgrsPickerDialog,
|
||||
} from "./ui/elapr-doc-prgrs-picker-dialog";
|
||||
export {
|
||||
type ElaprDocPrgrsForkJoinPickerConfirmPayload,
|
||||
ElaprDocPrgrsForkJoinPickerDialog,
|
||||
} from "./ui/elapr-doc-prgrs-forkjoin-picker-dialog";
|
||||
export { ElaprDocPrgrsStatus } from "./ui/elapr-doc-prgrs-status";
|
||||
export { ElaprForkJoinPickerGrid } from "./ui/elapr-forkjoin-picker-grid";
|
||||
export {
|
||||
type ElaprTmpltPickerConfirmPayload,
|
||||
ElaprTmpltPickerDialog,
|
||||
|
||||
@@ -6,8 +6,11 @@ export function hasCurrentUserPendingApprovalRequest(
|
||||
): boolean {
|
||||
if (!currentUserUuid) return false;
|
||||
|
||||
const normalizedUserUuid = currentUserUuid.toLowerCase();
|
||||
return list.some(
|
||||
(row) => row.aprvrUuid === currentUserUuid && row.atrzPrgrsSttsComCd === "ATRZ_PRGRS_002",
|
||||
(row) =>
|
||||
row.aprvrUuid?.toLowerCase() === normalizedUserUuid &&
|
||||
row.atrzPrgrsSttsComCd === "ATRZ_PRGRS_002",
|
||||
);
|
||||
}
|
||||
|
||||
@@ -17,7 +20,10 @@ export function findCurrentUserPendingApprovalRequest(
|
||||
): ElaprDocPrgrsResponseDto | undefined {
|
||||
if (!currentUserUuid) return undefined;
|
||||
|
||||
const normalizedUserUuid = currentUserUuid.toLowerCase();
|
||||
return list?.find(
|
||||
(row) => row.aprvrUuid === currentUserUuid && row.atrzPrgrsSttsComCd === "ATRZ_PRGRS_002",
|
||||
(row) =>
|
||||
row.aprvrUuid?.toLowerCase() === normalizedUserUuid &&
|
||||
row.atrzPrgrsSttsComCd === "ATRZ_PRGRS_002",
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,6 +8,9 @@ function toPrgrsSttsItem(
|
||||
aprvrUuid: string | undefined,
|
||||
atrzSeComCd: string | undefined,
|
||||
atrzSeqNo: number | undefined,
|
||||
branchId?: string,
|
||||
branchSeCd?: string,
|
||||
aprvrDeptNm?: string,
|
||||
): ElaprPrgrsSttsSaveRequestDto {
|
||||
if (!aprvrUuid?.trim()) {
|
||||
throw new Error("결재자가 지정되지 않은 행이 있습니다.");
|
||||
@@ -23,6 +26,9 @@ function toPrgrsSttsItem(
|
||||
aprvrUuid,
|
||||
atrzSeComCd,
|
||||
atrzSeqNo,
|
||||
branchId,
|
||||
branchSeCd,
|
||||
aprvrDeptNm,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -38,6 +44,13 @@ export function buildElaprPrgrsSttsListFromAplnRows(
|
||||
rows: ElaprAplnRow[],
|
||||
): ElaprPrgrsSttsSaveRequestDto[] {
|
||||
return getVisibleRows(rows).map((row) =>
|
||||
toPrgrsSttsItem(row.aprvrUuid, row.atrzSeComCd, row.atrzSeqNo),
|
||||
toPrgrsSttsItem(
|
||||
row.aprvrUuid,
|
||||
row.atrzSeComCd,
|
||||
row.atrzSeqNo,
|
||||
row.branchId,
|
||||
row.branchSeCd,
|
||||
row.aprvrDeptNm,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
import type { ElaprDocPrgrsClientResponseDto } from "@/shared/model";
|
||||
|
||||
import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
|
||||
|
||||
export type ForkJoinTrackKey = "SP" | "SF" | "TOTAL_AGG";
|
||||
|
||||
function normalizeBranchKey(
|
||||
rawBranchSeCd?: string,
|
||||
atrzSeComCd?: string,
|
||||
): ForkJoinTrackKey | null {
|
||||
if (rawBranchSeCd) {
|
||||
const upper = rawBranchSeCd.toUpperCase().trim();
|
||||
if (upper === "SP" || upper.includes("관로")) return "SP";
|
||||
if (upper === "SF" || upper.includes("시설")) return "SF";
|
||||
if (upper.includes("AGG") || upper.includes("정책") || upper.includes("TOTAL"))
|
||||
return "TOTAL_AGG";
|
||||
}
|
||||
if (atrzSeComCd === "ATRZ04") return "TOTAL_AGG";
|
||||
return null;
|
||||
}
|
||||
|
||||
export function createDefaultForkJoinRow(
|
||||
branchSeCd: ForkJoinTrackKey,
|
||||
deptNm: string,
|
||||
seq: number,
|
||||
seComCd: string,
|
||||
): ElaprAplnRow {
|
||||
return {
|
||||
rowKey: `forkjoin-${branchSeCd}-${seq}-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
|
||||
elaprTmpltId: "TMPLT_SF_SP_FORKJOIN",
|
||||
atrzSeqNo: seq,
|
||||
atrzSeComCd: seComCd,
|
||||
aprvrDeptNm: deptNm,
|
||||
branchSeCd,
|
||||
isNew: true,
|
||||
isDirty: false,
|
||||
dcarbYn: seComCd === "ATRZ99" ? "Y" : "N",
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 1차 결재선(elaprCycl=1)의 진행상태 목록을 Fork-Join 3트랙(관로, 시설, 정책) 결재선 행으로 매핑합니다.
|
||||
*/
|
||||
export function mapDocPrgrsToForkJoinTrackRows(
|
||||
list: ElaprDocPrgrsClientResponseDto[] | undefined,
|
||||
): Record<ForkJoinTrackKey, ElaprAplnRow[]> {
|
||||
const tracks: Record<ForkJoinTrackKey, ElaprAplnRow[]> = {
|
||||
SP: [],
|
||||
SF: [],
|
||||
TOTAL_AGG: [],
|
||||
};
|
||||
|
||||
if (list && list.length > 0) {
|
||||
list.forEach((item, index) => {
|
||||
const branchKey = normalizeBranchKey(item.branchSeCd, item.atrzSeComCd);
|
||||
if (branchKey) {
|
||||
const seq = Number(item.atrzSeqNo ?? tracks[branchKey].length + 1);
|
||||
const defaultDept =
|
||||
branchKey === "SP"
|
||||
? "하수관로부"
|
||||
: branchKey === "SF"
|
||||
? "하수처리시설부"
|
||||
: "정책총괄부";
|
||||
|
||||
const defaultSeComCd =
|
||||
branchKey === "TOTAL_AGG"
|
||||
? seq === 1
|
||||
? "ATRZ04"
|
||||
: "ATRZ99"
|
||||
: seq === 1
|
||||
? "ATRZ02"
|
||||
: "ATRZ03";
|
||||
|
||||
tracks[branchKey].push({
|
||||
rowKey: `forkjoin-docprgrs-${branchKey}-${seq}-${item.elaprPrgrsId ?? item.aprvrUuid ?? index}`,
|
||||
elaprTmpltId: "TMPLT_SF_SP_FORKJOIN",
|
||||
atrzSeqNo: seq,
|
||||
atrzSeComCd: item.atrzSeComCd || defaultSeComCd,
|
||||
atrzSeComNm: item.atrzSeComNm,
|
||||
aprvrUuid: item.aprvrUuid,
|
||||
aprvrNm: item.aprvrNm,
|
||||
aprvrUserId: item.aprvrUserId,
|
||||
aprvrDeptNm: item.aprvrDeptNm || item.ognzNm || defaultDept,
|
||||
branchId: item.branchId,
|
||||
branchSeCd: branchKey,
|
||||
dcarbYn: item.dcarbYn ?? (item.atrzSeComCd === "ATRZ99" ? "Y" : "N"),
|
||||
isNew: false,
|
||||
isDirty: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 각 트랙별 atrzSeqNo 오름차순 정렬
|
||||
tracks.SP.sort((a, b) => Number(a.atrzSeqNo ?? 0) - Number(b.atrzSeqNo ?? 0));
|
||||
tracks.SF.sort((a, b) => Number(a.atrzSeqNo ?? 0) - Number(b.atrzSeqNo ?? 0));
|
||||
tracks.TOTAL_AGG.sort((a, b) => Number(a.atrzSeqNo ?? 0) - Number(b.atrzSeqNo ?? 0));
|
||||
}
|
||||
|
||||
// 트랙 데이터가 없는 경우 기본 2행 채우기
|
||||
if (tracks.SP.length === 0) {
|
||||
tracks.SP = [
|
||||
createDefaultForkJoinRow("SP", "하수관로부", 1, "ATRZ02"),
|
||||
createDefaultForkJoinRow("SP", "하수관로부", 2, "ATRZ03"),
|
||||
];
|
||||
}
|
||||
if (tracks.SF.length === 0) {
|
||||
tracks.SF = [
|
||||
createDefaultForkJoinRow("SF", "하수처리시설부", 1, "ATRZ02"),
|
||||
createDefaultForkJoinRow("SF", "하수처리시설부", 2, "ATRZ03"),
|
||||
];
|
||||
}
|
||||
if (tracks.TOTAL_AGG.length === 0) {
|
||||
tracks.TOTAL_AGG = [
|
||||
createDefaultForkJoinRow("TOTAL_AGG", "정책총괄부", 1, "ATRZ04"),
|
||||
createDefaultForkJoinRow("TOTAL_AGG", "정책총괄부", 2, "ATRZ99"),
|
||||
];
|
||||
}
|
||||
|
||||
return tracks;
|
||||
}
|
||||
@@ -13,6 +13,8 @@ export interface PrgrsSttsServerRow {
|
||||
atrzSeComCd?: string;
|
||||
atrzSeqNo?: number;
|
||||
dcarbYn?: string;
|
||||
branchId?: string;
|
||||
branchSeCd?: string;
|
||||
}
|
||||
|
||||
/** 결재선 그리드 로컬 행 — 진행상태 API 응답 + UI 보조 필드 */
|
||||
@@ -20,6 +22,9 @@ export interface ElaprPrgrsSttsRow {
|
||||
rowKey: string;
|
||||
elaprPrgrsId?: string;
|
||||
elaprDmndId?: string;
|
||||
branchId?: string;
|
||||
branchSeCd?: string;
|
||||
branchNm?: string;
|
||||
aprvrUuid?: string;
|
||||
aprvrNm?: string;
|
||||
atrzSeComCd?: string;
|
||||
@@ -52,8 +57,22 @@ function getVisibleRows(rows: ElaprPrgrsSttsRow[]): ElaprPrgrsSttsRow[] {
|
||||
return rows.filter((row) => !row.isDeleted);
|
||||
}
|
||||
|
||||
/** 그리드 행 순서(1-based)로 결재순서번호 일괄 채번 */
|
||||
/** 그리드 행 순서(1-based)로 결재순서번호 채번 (브랜치가 분기된 Fork-Join의 경우 각 브랜치별 독립 순번 채번) */
|
||||
export function assignPrgrsSttsAtrzSeqNumbers(rows: ElaprPrgrsSttsRow[]): ElaprPrgrsSttsRow[] {
|
||||
const branchKeys = new Set(rows.map((r) => r.branchId || r.branchSeCd).filter(Boolean));
|
||||
if (branchKeys.size > 1) {
|
||||
const branchCounters = new Map<string, number>();
|
||||
return rows.map((row) => {
|
||||
const key = row.branchId || row.branchSeCd;
|
||||
if (key) {
|
||||
const current = (branchCounters.get(key) ?? 0) + 1;
|
||||
branchCounters.set(key, current);
|
||||
return { ...row, atrzSeqNo: current };
|
||||
}
|
||||
return row;
|
||||
});
|
||||
}
|
||||
|
||||
return rows.map((row, index) => ({ ...row, atrzSeqNo: index + 1 }));
|
||||
}
|
||||
|
||||
@@ -92,7 +111,7 @@ function rowDiffersFromServer(row: ElaprPrgrsSttsRow, serverRow: PrgrsSttsServer
|
||||
return (
|
||||
row.aprvrUuid !== serverRow.aprvrUuid ||
|
||||
row.atrzSeComCd !== serverRow.atrzSeComCd ||
|
||||
row.atrzSeqNo !== serverRow.atrzSeqNo ||
|
||||
Number(row.atrzSeqNo) !== Number(serverRow.atrzSeqNo) ||
|
||||
(row.dcarbYn ?? "N") !== (serverRow.dcarbYn ?? "N")
|
||||
);
|
||||
}
|
||||
|
||||
@@ -23,6 +23,9 @@ function toRow(item: ElaprDocPrgrsClientResponseDto): ElaprPrgrsSttsRow {
|
||||
rowKey: item.elaprPrgrsId ?? createDraftRowKey(),
|
||||
elaprPrgrsId: item.elaprPrgrsId,
|
||||
elaprDmndId: item.elaprDmndId,
|
||||
branchId: item.branchId,
|
||||
branchSeCd: item.branchSeCd,
|
||||
branchNm: item.branchNm,
|
||||
aprvrUuid: item.aprvrUuid,
|
||||
aprvrNm: item.aprvrNm,
|
||||
atrzSeComCd: item.atrzSeComCd,
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import type { BranchSeCd } from "./elapr-forkjoin-types";
|
||||
import type { ElaprApln } from "./elapr-apln-interface";
|
||||
|
||||
/** 그리드 로컬 행 — API 응답 + UI 보조 필드 */
|
||||
@@ -7,6 +8,11 @@ export interface ElaprAplnRow extends Omit<ElaprApln, "aplnId"> {
|
||||
aplnId?: string;
|
||||
/** 결재자 표시명 — 응답 DTO 또는 선택 시 로컬 유지 */
|
||||
aprvrNm?: string;
|
||||
/** 소속 브랜치 ID 및 구분코드 */
|
||||
branchId?: string;
|
||||
branchSeCd?: BranchSeCd;
|
||||
aprvrDeptNm?: string;
|
||||
dcarbYn?: string;
|
||||
isNew?: boolean;
|
||||
isDirty?: boolean;
|
||||
/** 소프트 삭제 — 최종 저장 시 mode:D */
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { ElaprDocPrgrsClientResponseDto, PageableParams, PageResponse } from "@/shared/model";
|
||||
|
||||
import type { ElaprBranchDto } from "./elapr-forkjoin-types";
|
||||
import type { ElaprPrgrsSttsSaveRequestDto } from "./elapr-prgrs-stts-interface";
|
||||
|
||||
/** 백엔드 ElaprDmndSaveRequestDto */
|
||||
@@ -7,6 +8,9 @@ export interface ElaprDmndSaveRequestDto {
|
||||
elaprDocNo: string;
|
||||
dmndTtl: string;
|
||||
dmndCn: string;
|
||||
taskSeComCd?: string | null;
|
||||
forkJoinSeCd?: string | null;
|
||||
crntStageNo?: number | null;
|
||||
elaprCycl?: number | null;
|
||||
docPrgrsSttsComCd?: string | null;
|
||||
elaprPrgrsSttsList?: ElaprPrgrsSttsSaveRequestDto[];
|
||||
@@ -19,8 +23,13 @@ export interface ElaprDmndResponseDto {
|
||||
elaprDocNo: string;
|
||||
dmndTtl: string;
|
||||
dmndCn: string;
|
||||
taskSeComCd?: string;
|
||||
forkJoinSeCd?: string;
|
||||
crntStageNo?: number;
|
||||
elaprBranchList?: ElaprBranchDto[];
|
||||
atrzSttsComCd: string;
|
||||
atrzSttsComNm?: string;
|
||||
elaprCycl?: number;
|
||||
dmndDt?: string;
|
||||
updtDt?: string;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* 공공하수도 재원협의 복합사업(SF+SP) Fork-Join 병렬결재 모델 및 타입 정의 (10월 12일 개정: 6인 체제)
|
||||
*/
|
||||
|
||||
/** 전자결재 마스터 진행상태 공통코드 (ATRZSTTS: tb_as_elapr_dmnd.atrz_stts_com_cd) */
|
||||
export type AtrzSttsComCd =
|
||||
| "ATRZ_STTS_001" // 대기중
|
||||
| "ATRZ_STTS_002" // 결재진행중
|
||||
| "ATRZ_STTS_003" // 결재완료
|
||||
| "ATRZ_STTS_004" // 반려
|
||||
| "ATRZ_STTS_005" // 회수
|
||||
| "ATRZ_STTS_006"; // 취소
|
||||
|
||||
/** 결재 구분 공통코드 (ATRZSE: tb_as_elapr_prgrs_stts.atrz_se_com_cd) */
|
||||
export type AtrzSeComCd =
|
||||
| "ATRZ01" // 접수 (민원/신청 접수)
|
||||
| "ATRZ02" // 검토 (실무 기술검토)
|
||||
| "ATRZ03" // 승인 (부서 승인 / 병합에 회신)
|
||||
| "ATRZ04" // 병합 (정책총괄 AI 병합의견 종합 심의 - 10-12 신설)
|
||||
| "ATRZ99"; // 최종승인(회신) (환경청에 회신)
|
||||
|
||||
/** 브랜치 구분코드 (10월 14일 개정: SP 하수관로, SF 하수처리시설, TOTAL_AGG 정책부 종합병합, MAIN 주결재선) */
|
||||
export type BranchSeCd = "MAIN" | "SP" | "SF" | "TOTAL_AGG";
|
||||
|
||||
/** 브랜치 진행상태코드 */
|
||||
export type BranchSttsCd =
|
||||
| "WAITING"
|
||||
| "IN_PROGRESS"
|
||||
| "COMPLETED"
|
||||
| "SUPPLEMENT"
|
||||
| "REJECTED"
|
||||
| "CANCELLED";
|
||||
|
||||
/** 브랜치 단위 정보 DTO */
|
||||
export interface ElaprBranchDto {
|
||||
branchId: string;
|
||||
elaprDmndId: string;
|
||||
stageSeqNo: number; // 2: 병렬검토, 3: 합류취합
|
||||
branchSeCd: BranchSeCd;
|
||||
branchNm: string;
|
||||
branchSttsCd: BranchSttsCd;
|
||||
joinReqYn: "Y" | "N";
|
||||
strtDt?: string;
|
||||
endDt?: string;
|
||||
}
|
||||
|
||||
/** 결재 진행 스텝 DTO (브랜치 확장) */
|
||||
export interface ElaprForkJoinStepDto {
|
||||
elaprPrgrsId: string;
|
||||
elaprDmndId?: string;
|
||||
branchId?: string;
|
||||
branchSeCd?: BranchSeCd;
|
||||
aprvrUuid: string;
|
||||
aprvrNm?: string;
|
||||
aprvrDeptNm?: string;
|
||||
ognzNm?: string;
|
||||
jbpsSeNm?: string;
|
||||
atrzSeComCd: AtrzSeComCd | string; // ATRZ01: 접수, ATRZ02: 검토, ATRZ03: 승인, ATRZ04: 병합, ATRZ99: 최종승인(회신)
|
||||
atrzSeComNm?: string;
|
||||
atrzSeqNo: number;
|
||||
atrzPrgrsSttsComCd: string; // ATRZ_PRGRS_001: 대기, ATRZ_PRGRS_002: 요청, ATRZ_PRGRS_003: 완료, ATRZ_PRGRS_004: 반려, ATRZ_PRGRS_999: 결재안함
|
||||
atrzPrgrsSttsComNm?: string;
|
||||
rjctRsn?: string;
|
||||
atrzDt?: string;
|
||||
dcarbYn?: string;
|
||||
elaprCycl?: number;
|
||||
}
|
||||
|
||||
/** 3개 트랙으로 분할된 결재선 데이터 맵 (총 6인 체제: SP, SF, TOTAL_AGG) */
|
||||
export interface ElaprForkJoinDataMap {
|
||||
spTrack: ElaprForkJoinStepDto[]; // 관로부 (2명: 검토(02) ➔ 승인(03))
|
||||
sfTrack: ElaprForkJoinStepDto[]; // 시설부 (2명: 검토(02) ➔ 승인(03))
|
||||
aggTrack: ElaprForkJoinStepDto[]; // 정책부 종합병합 (2명: 병합(04) ➔ 최종승인(99))
|
||||
}
|
||||
|
||||
/** 결재 승인 요청 DTO */
|
||||
export interface ElaprApproveRequestDto {
|
||||
elaprDmndId: string;
|
||||
branchId: string;
|
||||
elaprPrgrsId: string;
|
||||
atrzOpnn?: string;
|
||||
}
|
||||
|
||||
/** 결재 단계별 반려 요청 DTO (10-12 개정) */
|
||||
export interface ElaprRejectRequestDto {
|
||||
elaprDmndId: string;
|
||||
branchId: string;
|
||||
elaprPrgrsId: string;
|
||||
rjctRsn: string; // 반려 사유 필수
|
||||
}
|
||||
@@ -14,6 +14,9 @@ export type ElaprPrgrsSttsSaveMode =
|
||||
export interface ElaprPrgrsSttsResponseDto {
|
||||
elaprPrgrsId: string;
|
||||
elaprDmndId?: string;
|
||||
branchId?: string;
|
||||
branchSeCd?: string;
|
||||
aprvrDeptNm?: string;
|
||||
aprvrUuid?: string;
|
||||
atrzSeComCd?: string;
|
||||
atrzSeComNm?: string;
|
||||
@@ -30,6 +33,9 @@ export interface ElaprPrgrsSttsSaveRequestDto {
|
||||
mode?: ElaprPrgrsSttsSaveMode;
|
||||
elaprPrgrsId?: string;
|
||||
elaprDmndId?: string;
|
||||
branchId?: string;
|
||||
branchSeCd?: string;
|
||||
aprvrDeptNm?: string;
|
||||
aprvrUuid?: string;
|
||||
atrzSeComCd?: string;
|
||||
atrzSeqNo?: number;
|
||||
|
||||
@@ -49,6 +49,7 @@ interface ElaprApprovalDialogProps {
|
||||
elaprDocNo: string;
|
||||
currentUserUuid: string;
|
||||
elaprCycl?: number;
|
||||
taskSeComCd?: string | null;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
@@ -60,6 +61,7 @@ function ElaprApprovalDialog({
|
||||
elaprDocNo,
|
||||
currentUserUuid,
|
||||
elaprCycl,
|
||||
taskSeComCd,
|
||||
onSuccess,
|
||||
}: ElaprApprovalDialogProps) {
|
||||
const queryClient = useQueryClient();
|
||||
@@ -73,10 +75,22 @@ function ElaprApprovalDialog({
|
||||
elaprCycl,
|
||||
structuralSharing: false,
|
||||
});
|
||||
const effectiveCycl = useMemo(() => {
|
||||
if (elaprCycl != null) return elaprCycl;
|
||||
if (!elaprDocPrgrsList?.length) return undefined;
|
||||
const myPending = elaprDocPrgrsList.find(
|
||||
(row) =>
|
||||
row.aprvrUuid?.toLowerCase() === currentUserUuid?.toLowerCase() &&
|
||||
row.atrzPrgrsSttsComCd === "ATRZ_PRGRS_002",
|
||||
);
|
||||
if (myPending?.elaprCycl != null) return Number(myPending.elaprCycl);
|
||||
return Math.max(...elaprDocPrgrsList.map((r) => Number(r.elaprCycl || 1)));
|
||||
}, [elaprCycl, elaprDocPrgrsList, currentUserUuid]);
|
||||
|
||||
const cyclDocPrgrsList = useMemo(() => {
|
||||
if (elaprCycl == null) return elaprDocPrgrsList;
|
||||
return elaprDocPrgrsList?.filter((row) => Number(row.elaprCycl) === elaprCycl);
|
||||
}, [elaprCycl, elaprDocPrgrsList]);
|
||||
if (effectiveCycl == null) return elaprDocPrgrsList;
|
||||
return elaprDocPrgrsList?.filter((row) => Number(row.elaprCycl) === effectiveCycl);
|
||||
}, [effectiveCycl, elaprDocPrgrsList]);
|
||||
|
||||
const elaprDmndId = cyclDocPrgrsList?.[0]?.elaprDmndId;
|
||||
|
||||
@@ -104,7 +118,29 @@ function ElaprApprovalDialog({
|
||||
const currentUserPrgrs = findCurrentUserPendingApprovalRequest(cyclDocPrgrsList, currentUserUuid);
|
||||
const canApprove = Boolean(currentUserPrgrs?.elaprPrgrsId);
|
||||
const canReject =
|
||||
currentUserPrgrs?.atrzSeComCd === "ATRZ03" || currentUserPrgrs?.atrzSeComCd === "ATRZ99";
|
||||
currentUserPrgrs?.atrzSeComCd === "ATRZ03" ||
|
||||
currentUserPrgrs?.atrzSeComCd === "ATRZ04" ||
|
||||
currentUserPrgrs?.atrzSeComCd === "ATRZ99" ||
|
||||
(currentUserPrgrs?.atrzSeqNo ?? 1) > 1;
|
||||
|
||||
const branchSeCd = (currentUserPrgrs as { branchSeCd?: string } | undefined)?.branchSeCd;
|
||||
const isForkJoin =
|
||||
taskSeComCd === "SF_SP" ||
|
||||
branchSeCd === "SP" ||
|
||||
branchSeCd === "SF" ||
|
||||
branchSeCd === "TOTAL_AGG";
|
||||
|
||||
const isLastInBranch =
|
||||
currentUserPrgrs?.atrzSeComCd === "ATRZ99" || currentUserPrgrs?.atrzSeComCd === "ATRZ03";
|
||||
|
||||
const approveButtonLabel = useMemo(() => {
|
||||
if (!isForkJoin) return "결재";
|
||||
if (branchSeCd === "TOTAL_AGG" && isLastInBranch) return "결재 (환경청에 회신)";
|
||||
if (branchSeCd === "TOTAL_AGG") return "결재 (병합)";
|
||||
if ((branchSeCd === "SP" || branchSeCd === "SF") && isLastInBranch)
|
||||
return "결재 (병합에 회신)";
|
||||
return "결재 (검토)";
|
||||
}, [isForkJoin, branchSeCd, isLastInBranch]);
|
||||
|
||||
const pickingRow = pickingRowKey ? rows.find((r) => r.rowKey === pickingRowKey) : undefined;
|
||||
const isBusy = isProcessing || savePrgrsSttsMutation.isPending;
|
||||
@@ -239,7 +275,11 @@ function ElaprApprovalDialog({
|
||||
atrzPrgrsSttsComCd: "ATRZ_PRGRS_004",
|
||||
rjctRsn: rjctRsn.trim(),
|
||||
});
|
||||
alert("반려 처리가 완료되었습니다.");
|
||||
alert(
|
||||
isForkJoin
|
||||
? "결재가 반려 처리되었습니다.\n직전 결재자가 '결재 대기중'으로 변경되었습니다. 상대 부서 결재는 정상 진행됩니다."
|
||||
: "반려 처리가 완료되었습니다.",
|
||||
);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_DMND, "findDocPrgrsByDocNo", elaprDocNo],
|
||||
});
|
||||
@@ -272,6 +312,42 @@ function ElaprApprovalDialog({
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
{isForkJoin && (
|
||||
<div className="rounded-lg border border-blue-200 bg-blue-50/70 p-4 text-sm text-blue-900">
|
||||
<div className="mb-1 flex items-center gap-2 font-bold">
|
||||
<span className="rounded-sm bg-blue-200 px-2 py-0.5 text-xs text-blue-950">
|
||||
{branchSeCd === "SP"
|
||||
? "🌊 하수관로 전문기술검토 (Stage 2)"
|
||||
: branchSeCd === "SF"
|
||||
? "🏭 하수처리시설 전문기술검토 (Stage 2)"
|
||||
: branchSeCd === "TOTAL_AGG"
|
||||
? isLastInBranch
|
||||
? "⚖️ 정책총괄 최종승인 및 회신 (Stage 3)"
|
||||
: "⚖️ 정책총괄 AI 종합병합 (Stage 3)"
|
||||
: "복합사업 결재"}
|
||||
</span>
|
||||
<span>
|
||||
{branchSeCd === "TOTAL_AGG"
|
||||
? isLastInBranch
|
||||
? "환경청 대외 최종 회신 단계"
|
||||
: "AI 의견 종합 및 병합 심의 단계"
|
||||
: isLastInBranch
|
||||
? "병합부서(정책총괄) 내부 회신(이관) 단계"
|
||||
: "실무 기술검토 단계"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-blue-800">
|
||||
{branchSeCd === "TOTAL_AGG"
|
||||
? isLastInBranch
|
||||
? "ℹ️ [중요] 본 승인은 환경청에 최종 회신하는 결재입니다. 승인 즉시 공문이 대외 발송되며 원천문서 상태가 TP(기술검토회신) 또는 TR(최종실무협의완료)로 전이됩니다."
|
||||
: "ℹ️ [안내] 본 승인은 'AI의견 종합 및 병합 심의' 단계입니다. 양 부서 검토의견을 종합 반영하여 정책실장(최종 전결권자)에게 이관됩니다."
|
||||
: isLastInBranch
|
||||
? "ℹ️ [안내] 본 승인은 '병합에 회신'하는 내부 이관 단계입니다. 환경청으로 직접 공문이 나가지 않으며, 상대방 부서 검토 완료 시 종합병합 단계로 자동 합류(Join)됩니다."
|
||||
: "ℹ️ [안내] 본 단계는 실무 기술검토 단계입니다. 검토 완료 후 부서 승인자에게 이관됩니다."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className="mb-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<h4 className="text-xl font-semibold">결재 진행 단계</h4>
|
||||
@@ -280,7 +356,7 @@ function ElaprApprovalDialog({
|
||||
size="sm"
|
||||
type="button"
|
||||
color="white"
|
||||
disabled={!elaprDmndId || isEditingLocked || isBusy}
|
||||
disabled={isForkJoin || !elaprDmndId || isEditingLocked || isBusy}
|
||||
onClick={addRow}
|
||||
>
|
||||
결재선 추가
|
||||
@@ -345,11 +421,11 @@ function ElaprApprovalDialog({
|
||||
<SortablePrgrsSttsRow
|
||||
key={row.rowKey}
|
||||
row={row}
|
||||
displaySeqNo={index + 1}
|
||||
displaySeqNo={isForkJoin ? Number(row.atrzSeqNo ?? index + 1) : index + 1}
|
||||
isEditing={editingRowKey === row.rowKey}
|
||||
isLocked={isEditingLocked}
|
||||
dragDisabled={
|
||||
isEditingLocked || !isPrgrsSttsRowEditable(row) || !row.atrzSeComCd
|
||||
isForkJoin || isEditingLocked || !isPrgrsSttsRowEditable(row) || !row.atrzSeComCd
|
||||
}
|
||||
onStartEdit={() => startEdit(row.rowKey)}
|
||||
onSave={() => handleRowSave(row.rowKey)}
|
||||
@@ -372,6 +448,17 @@ function ElaprApprovalDialog({
|
||||
|
||||
{canApprove && (
|
||||
<div>
|
||||
{isForkJoin && canReject && (
|
||||
<div className="mb-2 space-y-1 rounded-md border border-amber-300 bg-amber-50 p-3 text-xs text-amber-900">
|
||||
<div className="font-bold">⚠️ [단계별 반려 안내]</div>
|
||||
<p>현재 복합사업 병렬 검토가 진행 중입니다. 본 단계에서 반려 처리 시:</p>
|
||||
<ul className="list-disc pl-4 space-y-0.5">
|
||||
<li>귀하(현재 결재자)는 반려(ATRZ_PRGRS_004) 처리됩니다.</li>
|
||||
<li>이전(직전) 결재자만 '결재 대기중(ATRZ_PRGRS_002)'으로 변경되어 보완 및 재상신 기회가 부여됩니다.</li>
|
||||
<li>동시에 진행 중인 상대방 부서 결재는 중단되지 않고 독립 정상 진행됩니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<h4 className="mb-3 text-xl font-semibold">반려 의견</h4>
|
||||
<Textarea
|
||||
value={rjctRsn}
|
||||
@@ -392,7 +479,7 @@ function ElaprApprovalDialog({
|
||||
{canApprove && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button onClick={handleApprove} disabled={isBusy}>
|
||||
결재
|
||||
{approveButtonLabel}
|
||||
</Button>
|
||||
{canReject && (
|
||||
<Button color="red" onClick={handleReject} disabled={isBusy}>
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
|
||||
import { useAlertStore } from "@/shared/lib";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@common/components";
|
||||
|
||||
import { useElaprDocPrgrsByDocNo } from "../api/queries";
|
||||
import { getVisibleRows } from "../lib/apln-validators";
|
||||
import { mapDocPrgrsToForkJoinTrackRows } from "../lib/doc-prgrs-to-forkjoin-rows";
|
||||
import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
|
||||
|
||||
import { ElaprForkJoinPickerGrid } from "./elapr-forkjoin-picker-grid";
|
||||
|
||||
export interface ElaprDocPrgrsForkJoinPickerConfirmPayload {
|
||||
aplnRows: ElaprAplnRow[];
|
||||
}
|
||||
|
||||
export interface ElaprDocPrgrsForkJoinPickerDialogProps {
|
||||
open: boolean;
|
||||
elaprDocNo: string;
|
||||
onClose: () => void;
|
||||
onConfirm?: (payload: ElaprDocPrgrsForkJoinPickerConfirmPayload) => void;
|
||||
}
|
||||
|
||||
export function ElaprDocPrgrsForkJoinPickerDialog({
|
||||
open,
|
||||
elaprDocNo,
|
||||
onClose,
|
||||
onConfirm,
|
||||
}: ElaprDocPrgrsForkJoinPickerDialogProps) {
|
||||
const alert = useAlertStore((state) => state.setMessage);
|
||||
const [aplnRows, setAplnRows] = useState<ElaprAplnRow[]>([]);
|
||||
const [isEditingLocked, setIsEditingLocked] = useState(false);
|
||||
|
||||
// 1차 결재(elaprCycl=1)에서 지정된 6인 결재선 조회
|
||||
const docPrgrsQuery = useElaprDocPrgrsByDocNo(elaprDocNo, {
|
||||
elaprCycl: 1,
|
||||
enabled: open && Boolean(elaprDocNo),
|
||||
});
|
||||
|
||||
// 1차 결재선 데이터를 3개 트랙(관로, 시설, 정책)으로 매핑
|
||||
const initialTrackRows = useMemo(
|
||||
() => mapDocPrgrsToForkJoinTrackRows(docPrgrsQuery.data),
|
||||
[docPrgrsQuery.data],
|
||||
);
|
||||
|
||||
const handleRowsChange = useCallback((rows: ElaprAplnRow[]) => {
|
||||
setAplnRows(rows);
|
||||
}, []);
|
||||
|
||||
const handleEditingLockedChange = useCallback((locked: boolean) => {
|
||||
setIsEditingLocked(locked);
|
||||
}, []);
|
||||
|
||||
function handleOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
setAplnRows([]);
|
||||
setIsEditingLocked(false);
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
function handleConfirm() {
|
||||
if (isEditingLocked) {
|
||||
alert("편집 중인 결재선이 있습니다. 저장을 완료해 주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
const unassigned = aplnRows.find((r) => !r.aprvrUuid);
|
||||
if (unassigned) {
|
||||
alert("지정되지 않은 결재자가 있습니다. 모든 트랙의 결재자를 선택해 주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
const pipeRows = aplnRows
|
||||
.filter((r) => r.branchSeCd === "SP")
|
||||
.sort((a, b) => Number(a.atrzSeqNo ?? 0) - Number(b.atrzSeqNo ?? 0));
|
||||
const facRows = aplnRows
|
||||
.filter((r) => r.branchSeCd === "SF")
|
||||
.sort((a, b) => Number(a.atrzSeqNo ?? 0) - Number(b.atrzSeqNo ?? 0));
|
||||
const aggRows = aplnRows
|
||||
.filter((r) => r.branchSeCd === "TOTAL_AGG")
|
||||
.sort((a, b) => Number(a.atrzSeqNo ?? 0) - Number(b.atrzSeqNo ?? 0));
|
||||
|
||||
// 1. 부서별 인원 수 (각각 최소 2명 이상, 최대 5명)
|
||||
if (pipeRows.length < 2 || pipeRows.length > 5) {
|
||||
alert("하수관로 검토 결재선에 결재자를 최소 2명 이상(최대 5명) 지정해 주세요.");
|
||||
return;
|
||||
}
|
||||
if (facRows.length < 2 || facRows.length > 5) {
|
||||
alert("하수처리시설 검토 결재선에 결재자를 최소 2명 이상(최대 5명) 지정해 주세요.");
|
||||
return;
|
||||
}
|
||||
if (aggRows.length < 2 || aggRows.length > 5) {
|
||||
alert("정책부 종합병합 결재선에 결재자를 최소 2명 이상(최대 5명) 지정해 주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 정책부 1순번 병합자(ATRZ04) 지정 검증
|
||||
if (aggRows[0]?.atrzSeComCd !== "ATRZ04") {
|
||||
alert("[정책부] 첫 번째 결재구분은 '병합(ATRZ04)'이어야 합니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. 정책부 최종 결재구분(ATRZ99) 지정 검증
|
||||
const lastAggRow = aggRows[aggRows.length - 1];
|
||||
if (lastAggRow?.atrzSeComCd !== "ATRZ99") {
|
||||
alert("[정책부] 최종 결재구분은 '최종승인(ATRZ99)'이어야 합니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 4. 동일 브랜치 내 중복 결재자 검증
|
||||
const checkDuplicateInBranch = (rows: typeof pipeRows, branchName: string) => {
|
||||
const uuids = rows.map((r) => r.aprvrUuid).filter(Boolean);
|
||||
const uniqueUuids = new Set(uuids);
|
||||
if (uniqueUuids.size !== uuids.length) {
|
||||
const dupRow = rows.find((r, i) => uuids.indexOf(r.aprvrUuid) !== i);
|
||||
return `[${dupRow?.aprvrNm || "결재자"}] 결재자가 ${branchName} 결재선에 중복 지정되었습니다.`;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const pipeDup = checkDuplicateInBranch(pipeRows, "관로부");
|
||||
if (pipeDup) {
|
||||
alert(pipeDup);
|
||||
return;
|
||||
}
|
||||
const facDup = checkDuplicateInBranch(facRows, "시설부");
|
||||
if (facDup) {
|
||||
alert(facDup);
|
||||
return;
|
||||
}
|
||||
const aggDup = checkDuplicateInBranch(aggRows, "정책부");
|
||||
if (aggDup) {
|
||||
alert(aggDup);
|
||||
return;
|
||||
}
|
||||
|
||||
const visibleRows = getVisibleRows(aplnRows);
|
||||
onConfirm?.({ aplnRows: visibleRows });
|
||||
|
||||
setAplnRows([]);
|
||||
setIsEditingLocked(false);
|
||||
onClose();
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogContent className="max-w-[100rem]" aria-describedby={undefined}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>2차 결재선 선택 (복합사업 처리시설+하수관로 Fork-Join 3트랙)</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 1차 결재자 자동 매핑 안내 배너 */}
|
||||
<div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900">
|
||||
<p className="font-semibold">
|
||||
ℹ️ 1차 기술검토 시 지정된 결재자(6인) 정보가 자동으로 매핑되었습니다.
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs text-emerald-700">
|
||||
동일 결재선으로 진행하거나 필요 시 결재자 변경/순서 조정한 후 하단의 [확인] 버튼을 눌러
|
||||
2차 결재선을 확정해 주세요.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ElaprForkJoinPickerGrid
|
||||
initialTrackRows={initialTrackRows}
|
||||
onRowsChange={handleRowsChange}
|
||||
onEditingLockedChange={handleEditingLockedChange}
|
||||
/>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" color="white" onClick={() => handleOpenChange(false)}>
|
||||
닫기
|
||||
</Button>
|
||||
<Button type="button" disabled={isEditingLocked} onClick={handleConfirm}>
|
||||
확인
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,245 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { ArrowDown, ArrowRight, CheckCircle2, ChevronRight, GitFork, GitMerge } from "lucide-react";
|
||||
|
||||
import { dayjs } from "@/shared/lib";
|
||||
import type { ElaprDocPrgrsClientResponseDto } from "@/shared/model";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
|
||||
import { cn } from "@common/components";
|
||||
|
||||
import { getApproverStatus } from "../lib/approval-utils";
|
||||
|
||||
const REJECT_STATUS_CD = "ATRZ_PRGRS_004";
|
||||
|
||||
interface ElaprDocPrgrsForkJoinStepProps {
|
||||
steps: ElaprDocPrgrsClientResponseDto[];
|
||||
}
|
||||
|
||||
function ApproverCard({ item }: { item: ElaprDocPrgrsClientResponseDto }) {
|
||||
const status = getApproverStatus(item.atrzPrgrsSttsComCd, item.atrzSeComCd);
|
||||
const isRejected = item.atrzPrgrsSttsComCd === REJECT_STATUS_CD;
|
||||
const isCurrent = item.atrzPrgrsSttsComCd === "ATRZ_PRGRS_002";
|
||||
const rjctRsn = item.rjctRsn?.trim();
|
||||
const metaParts = [item.ognzNm, item.jbpsSeNm].filter(Boolean);
|
||||
|
||||
const statusBadge = (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center rounded-sm px-3 py-1 text-sm font-semibold",
|
||||
status.badgeClass,
|
||||
isCurrent && "animate-pulse ring-2 ring-blue-400",
|
||||
isRejected && rjctRsn && "cursor-help underline decoration-dotted underline-offset-4",
|
||||
)}
|
||||
>
|
||||
{status.label}
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex min-w-[13rem] flex-1 flex-col items-center gap-2 rounded-lg border border-gray-200 bg-white p-4 text-center shadow-xs">
|
||||
{isRejected && rjctRsn ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{statusBadge}</TooltipTrigger>
|
||||
<TooltipContent sideOffset={4} className="max-w-md whitespace-pre-wrap">
|
||||
{rjctRsn}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
statusBadge
|
||||
)}
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<p className="text-base font-semibold text-gray-900">
|
||||
<span className="text-muted-foreground">[{item.atrzSeComNm || "-"}]</span>{" "}
|
||||
{item.aprvrNm || item.aprvrUuid || "-"}
|
||||
</p>
|
||||
{metaParts.length > 0 && (
|
||||
<span className="text-xs text-gray-500">{metaParts.join(" · ")}</span>
|
||||
)}
|
||||
{item.atrzDt && (
|
||||
<span className="text-xs text-gray-400">{dayjs(item.atrzDt).format("MM-DD HH:mm")}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ElaprDocPrgrsForkJoinStep({ steps }: ElaprDocPrgrsForkJoinStepProps) {
|
||||
// 브랜치별 분할 (branchSeCd 우선, 없으면 seqNo fallback)
|
||||
const { pipeSteps, facSteps, aggSteps } = useMemo(() => {
|
||||
const pipe: ElaprDocPrgrsClientResponseDto[] = [];
|
||||
const fac: ElaprDocPrgrsClientResponseDto[] = [];
|
||||
const agg: ElaprDocPrgrsClientResponseDto[] = [];
|
||||
|
||||
steps.forEach((step) => {
|
||||
const seCd = step.branchSeCd;
|
||||
if (seCd === "SP") {
|
||||
pipe.push(step);
|
||||
} else if (seCd === "SF") {
|
||||
fac.push(step);
|
||||
} else if (seCd === "TOTAL_AGG") {
|
||||
agg.push(step);
|
||||
} else {
|
||||
// 순번 fallback (6인 체제: 2/2/2)
|
||||
const seq = Number(step.atrzSeqNo ?? 1);
|
||||
if (seq <= 2) pipe.push(step);
|
||||
else if (seq <= 4) fac.push(step);
|
||||
else agg.push(step);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
pipeSteps: pipe.sort((a, b) => Number(a.atrzSeqNo) - Number(b.atrzSeqNo)),
|
||||
facSteps: fac.sort((a, b) => Number(a.atrzSeqNo) - Number(b.atrzSeqNo)),
|
||||
aggSteps: agg.sort((a, b) => Number(a.atrzSeqNo) - Number(b.atrzSeqNo)),
|
||||
};
|
||||
}, [steps]);
|
||||
|
||||
// 완료 상태 및 결재 완료 수 동적 판정
|
||||
const pipeCompletedCount = pipeSteps.filter((s) => s.atrzPrgrsSttsComCd === "ATRZ_PRGRS_003").length;
|
||||
const isPipeCompleted =
|
||||
pipeSteps.length > 0 && pipeCompletedCount === pipeSteps.length;
|
||||
|
||||
const facCompletedCount = facSteps.filter((s) => s.atrzPrgrsSttsComCd === "ATRZ_PRGRS_003").length;
|
||||
const isFacCompleted =
|
||||
facSteps.length > 0 && facCompletedCount === facSteps.length;
|
||||
const isJoinReady = isPipeCompleted && isFacCompleted;
|
||||
|
||||
const stage2CountText =
|
||||
pipeSteps.length === facSteps.length
|
||||
? `(각 ${pipeSteps.length}인)`
|
||||
: `(관로 ${pipeSteps.length}인 / 시설 ${facSteps.length}인)`;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-2">
|
||||
<div className="flex flex-col gap-6 lg:flex-row lg:items-stretch">
|
||||
{/* Stage 2: 상/하 2열 병렬 트랙 */}
|
||||
<div className="flex flex-1 flex-col gap-4 rounded-xl border border-blue-100 bg-blue-50/40 p-4">
|
||||
<div className="flex items-center gap-2 border-b border-blue-200/60 pb-2">
|
||||
<GitFork className="size-5 text-blue-600" />
|
||||
<h4 className="text-base font-bold text-blue-950">
|
||||
Stage 2: 부서별 병렬 전문검토 {stage2CountText}
|
||||
</h4>
|
||||
<span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-800">
|
||||
동시 진행
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 1) 관로부 트랙 */}
|
||||
<div className="rounded-lg border border-cyan-200 bg-cyan-50/50 p-3">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-sm font-bold text-cyan-900">🌊 하수관로 전문검토</span>
|
||||
<span
|
||||
className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
|
||||
isPipeCompleted
|
||||
? "bg-emerald-100 text-emerald-800"
|
||||
: "bg-cyan-100 text-cyan-800"
|
||||
}`}
|
||||
>
|
||||
{isPipeCompleted
|
||||
? `병합에 회신 완료 (${pipeCompletedCount}/${pipeSteps.length})`
|
||||
: `진행중 (${pipeCompletedCount}/${pipeSteps.length})`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{pipeSteps.map((item, idx) => (
|
||||
<div key={item.elaprPrgrsId ?? idx} className="flex items-center gap-2">
|
||||
<ApproverCard item={item} />
|
||||
{idx < pipeSteps.length - 1 && (
|
||||
<ChevronRight className="size-5 text-cyan-400" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2) 시설부 트랙 */}
|
||||
<div className="rounded-lg border border-indigo-200 bg-indigo-50/50 p-3">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-sm font-bold text-indigo-900">🏭 하수처리시설 전문검토</span>
|
||||
<span
|
||||
className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
|
||||
isFacCompleted
|
||||
? "bg-emerald-100 text-emerald-800"
|
||||
: "bg-indigo-100 text-indigo-800"
|
||||
}`}
|
||||
>
|
||||
{isFacCompleted
|
||||
? `병합에 회신 완료 (${facCompletedCount}/${facSteps.length})`
|
||||
: `진행중 (${facCompletedCount}/${facSteps.length})`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{facSteps.map((item, idx) => (
|
||||
<div key={item.elaprPrgrsId ?? idx} className="flex items-center gap-2">
|
||||
<ApproverCard item={item} />
|
||||
{idx < facSteps.length - 1 && (
|
||||
<ChevronRight className="size-5 text-indigo-400" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* JOIN 합류 다이어그램 연결 */}
|
||||
<div className="flex items-center justify-center px-2">
|
||||
<div className="flex flex-col items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50/80 p-4 text-center shadow-xs">
|
||||
<GitMerge className="size-6 text-emerald-600" />
|
||||
<span className="text-xs font-bold text-emerald-900">JOIN 합류</span>
|
||||
<div className="flex flex-col gap-1 text-[11px] text-emerald-800">
|
||||
<span className="flex items-center gap-1">
|
||||
{isPipeCompleted ? "🟢" : "⏳"} 관로 {isPipeCompleted ? "완료" : "대기"}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
{isFacCompleted ? "🟢" : "⏳"} 시설 {isFacCompleted ? "완료" : "대기"}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`mt-1 rounded-sm px-2 py-1 text-xs font-bold ${
|
||||
isJoinReady
|
||||
? "bg-emerald-200 text-emerald-900"
|
||||
: "bg-gray-200 text-gray-700"
|
||||
}`}
|
||||
>
|
||||
{isJoinReady ? "Stage 3 활성화됨" : "병렬 대기중"}
|
||||
</div>
|
||||
<ArrowRight className="hidden size-5 text-emerald-600 lg:block" />
|
||||
<ArrowDown className="size-5 text-emerald-600 lg:hidden" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stage 3: 정책총괄부 종합취합 및 환경청 회신 트랙 */}
|
||||
<div className="flex flex-1 flex-col gap-4 rounded-xl border border-purple-100 bg-purple-50/40 p-4">
|
||||
<div className="flex items-center gap-2 border-b border-purple-200/60 pb-2">
|
||||
<CheckCircle2 className="size-5 text-purple-600" />
|
||||
<h4 className="text-base font-bold text-purple-950">
|
||||
Stage 3: 정책총괄 종합병합 및 환경청 회신 ({aggSteps.length}인)
|
||||
</h4>
|
||||
<span
|
||||
className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
|
||||
isJoinReady
|
||||
? "bg-purple-100 text-purple-800"
|
||||
: "bg-gray-100 text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{isJoinReady ? "진행 가능" : "대기"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 rounded-lg border border-purple-200 bg-purple-50/50 p-3">
|
||||
{aggSteps.map((item, idx) => (
|
||||
<div key={item.elaprPrgrsId ?? idx} className="flex items-center gap-2">
|
||||
<ApproverCard item={item} />
|
||||
{idx < aggSteps.length - 1 && (
|
||||
<ChevronRight className="size-5 text-purple-400" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -13,10 +13,13 @@ import { cn, Skeleton, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/
|
||||
import { useElaprDocPrgrsByDocNo } from "../api/queries";
|
||||
import { getApproverStatus, sortByAtrzSeqNo } from "../lib/approval-utils";
|
||||
|
||||
import { ElaprDocPrgrsForkJoinStep } from "./elapr-doc-prgrs-forkjoin-step";
|
||||
|
||||
const REJECT_STATUS_CD = "ATRZ_PRGRS_004";
|
||||
|
||||
interface ElaprDocPrgrsStatusProps {
|
||||
elaprDocNo: string | null | undefined;
|
||||
taskSeComCd?: string | null;
|
||||
}
|
||||
|
||||
function ElaprDocPrgrsStep({ item }: { item: ElaprDocPrgrsClientResponseDto }) {
|
||||
@@ -88,21 +91,33 @@ function ElaprDocPrgrsStepList({ steps }: { steps: ElaprDocPrgrsClientResponseDt
|
||||
);
|
||||
}
|
||||
|
||||
function ElaprDocPrgrsStatus({ elaprDocNo }: ElaprDocPrgrsStatusProps) {
|
||||
function ElaprDocPrgrsStatus({ elaprDocNo, taskSeComCd }: ElaprDocPrgrsStatusProps) {
|
||||
const userInfo = useUserStore((state) => state.userInfo);
|
||||
const { data, isLoading } = useElaprDocPrgrsByDocNo(elaprDocNo);
|
||||
const [activeCycl, setActiveCycl] = useState<"1" | "2">("1");
|
||||
|
||||
const { cycl1Steps, cycl2Steps, hasCycl2 } = useMemo(() => {
|
||||
const { cycl1Steps, cycl2Steps, hasCycl2, isForkJoin1, isForkJoin2 } = useMemo(() => {
|
||||
const rows = data ?? [];
|
||||
const cycl1 = sortByAtrzSeqNo(rows.filter((item) => Number(item.elaprCycl ?? 1) !== 2));
|
||||
const cycl2 = sortByAtrzSeqNo(rows.filter((item) => Number(item.elaprCycl) === 2));
|
||||
|
||||
const checkForkJoin = (list: typeof rows) =>
|
||||
taskSeComCd === "SF_SP" ||
|
||||
list.some(
|
||||
(s) =>
|
||||
(s as { branchSeCd?: string }).branchSeCd === "SP" ||
|
||||
(s as { branchSeCd?: string }).branchSeCd === "SF",
|
||||
) ||
|
||||
list.length >= 6;
|
||||
|
||||
return {
|
||||
cycl1Steps: cycl1,
|
||||
cycl2Steps: cycl2,
|
||||
hasCycl2: cycl2.length > 0,
|
||||
isForkJoin1: checkForkJoin(cycl1),
|
||||
isForkJoin2: checkForkJoin(cycl2),
|
||||
};
|
||||
}, [data]);
|
||||
}, [data, taskSeComCd]);
|
||||
|
||||
useEffect(() => {
|
||||
setActiveCycl(hasCycl2 ? "2" : "1");
|
||||
@@ -138,23 +153,33 @@ function ElaprDocPrgrsStatus({ elaprDocNo }: ElaprDocPrgrsStatusProps) {
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="1" className="!px-6 !py-3 text-xl">
|
||||
재원협의
|
||||
1차 실무협의 (기술검토)
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="2" className="!px-6 !py-3 text-xl">
|
||||
실무협의서
|
||||
2차 조치결과 검토 (종결)
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="1" className="mt-2 border-none p-0 shadow-none">
|
||||
<div className="-mx-2">
|
||||
<ElaprDocPrgrsStepList steps={cycl1Steps} />
|
||||
{isForkJoin1 ? (
|
||||
<ElaprDocPrgrsForkJoinStep steps={cycl1Steps} />
|
||||
) : (
|
||||
<ElaprDocPrgrsStepList steps={cycl1Steps} />
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="2" className="mt-2 border-none p-0 shadow-none">
|
||||
<div className="-mx-2">
|
||||
<ElaprDocPrgrsStepList steps={cycl2Steps} />
|
||||
{isForkJoin2 ? (
|
||||
<ElaprDocPrgrsForkJoinStep steps={cycl2Steps} />
|
||||
) : (
|
||||
<ElaprDocPrgrsStepList steps={cycl2Steps} />
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
) : isForkJoin1 ? (
|
||||
<ElaprDocPrgrsForkJoinStep steps={cycl1Steps} />
|
||||
) : (
|
||||
<ElaprDocPrgrsStepList steps={cycl1Steps} />
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,472 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
|
||||
import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
|
||||
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
||||
|
||||
import { useAlertStore } from "@/shared/lib";
|
||||
import {
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@common/components";
|
||||
|
||||
import { useDndSensors } from "../lib/use-dnd-sensors";
|
||||
import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
|
||||
import type { ReviewerOption } from "../model/reviewer-option";
|
||||
|
||||
import { AprvrPickerDialog } from "./aprvr-picker-dialog";
|
||||
import { SortableAplnPickerRow } from "./sortable-apln-picker-row";
|
||||
|
||||
type ForkJoinTrackKey = "SP" | "SF" | "TOTAL_AGG";
|
||||
|
||||
interface TrackConfig {
|
||||
key: ForkJoinTrackKey;
|
||||
label: string;
|
||||
defaultDeptNm: string;
|
||||
guideText: string;
|
||||
minCount: number;
|
||||
maxCount: number;
|
||||
}
|
||||
|
||||
const TRACK_CONFIGS: TrackConfig[] = [
|
||||
{
|
||||
key: "SP",
|
||||
label: "하수관로 검토",
|
||||
defaultDeptNm: "하수관로부",
|
||||
guideText: "ℹ️ 하수관로 부서 검토·승인 완료 시 종합병합부서로 내부 회신(이관)됩니다.",
|
||||
minCount: 2,
|
||||
maxCount: 5,
|
||||
},
|
||||
{
|
||||
key: "SF",
|
||||
label: "하수처리시설 검토",
|
||||
defaultDeptNm: "하수처리시설부",
|
||||
guideText: "ℹ️ 하수처리시설 부서 검토·승인 완료 시 종합병합부서로 내부 회신(이관)됩니다.",
|
||||
minCount: 2,
|
||||
maxCount: 5,
|
||||
},
|
||||
{
|
||||
key: "TOTAL_AGG",
|
||||
label: "정책부 종합병합",
|
||||
defaultDeptNm: "정책총괄부",
|
||||
guideText: "ℹ️ 두 부서(관로+시설) Join 완료 후 정책취합 및 환경청 회신 단계로 진행됩니다.",
|
||||
minCount: 2,
|
||||
maxCount: 5,
|
||||
},
|
||||
];
|
||||
|
||||
function createDefaultRow(
|
||||
branchSeCd: ForkJoinTrackKey,
|
||||
deptNm: string,
|
||||
seq: number,
|
||||
seComCd: string,
|
||||
): ElaprAplnRow {
|
||||
return {
|
||||
rowKey: `forkjoin-${branchSeCd}-${seq}-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
|
||||
elaprTmpltId: "TMPLT_SF_SP_FORKJOIN",
|
||||
atrzSeqNo: seq,
|
||||
atrzSeComCd: seComCd,
|
||||
aprvrDeptNm: deptNm,
|
||||
branchSeCd,
|
||||
isNew: true,
|
||||
isDirty: false,
|
||||
dcarbYn: seComCd === "ATRZ99" ? "Y" : "N",
|
||||
};
|
||||
}
|
||||
|
||||
export function createDefaultTrackRows(
|
||||
perTrackCount: number = 2,
|
||||
): Record<ForkJoinTrackKey, ElaprAplnRow[]> {
|
||||
const safeCount = Math.max(2, Math.min(5, perTrackCount));
|
||||
const sp: ElaprAplnRow[] = [];
|
||||
const sf: ElaprAplnRow[] = [];
|
||||
const totalAgg: ElaprAplnRow[] = [];
|
||||
|
||||
for (let seq = 1; seq <= safeCount; seq++) {
|
||||
sp.push(
|
||||
createDefaultRow(
|
||||
"SP",
|
||||
"하수관로부",
|
||||
seq,
|
||||
seq === 1 ? "ATRZ02" : "ATRZ03",
|
||||
),
|
||||
);
|
||||
sf.push(
|
||||
createDefaultRow(
|
||||
"SF",
|
||||
"하수처리시설부",
|
||||
seq,
|
||||
seq === 1 ? "ATRZ02" : "ATRZ03",
|
||||
),
|
||||
);
|
||||
totalAgg.push(
|
||||
createDefaultRow(
|
||||
"TOTAL_AGG",
|
||||
"정책총괄부",
|
||||
seq,
|
||||
seq === 1 ? "ATRZ04" : seq === safeCount ? "ATRZ99" : "ATRZ03",
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return { SP: sp, SF: sf, TOTAL_AGG: totalAgg };
|
||||
}
|
||||
|
||||
export interface ElaprForkJoinPickerGridProps {
|
||||
onRowsChange?: (rows: ElaprAplnRow[]) => void;
|
||||
onEditingLockedChange?: (locked: boolean) => void;
|
||||
initialTrackRows?: Record<ForkJoinTrackKey, ElaprAplnRow[]> | null;
|
||||
/** 트랙당 기본 초기 결재자 수 (기본 2명, 필요 시 3명 지원) */
|
||||
defaultPerTrack?: number;
|
||||
}
|
||||
|
||||
export function ElaprForkJoinPickerGrid({
|
||||
onRowsChange,
|
||||
onEditingLockedChange,
|
||||
initialTrackRows,
|
||||
defaultPerTrack = 2,
|
||||
}: ElaprForkJoinPickerGridProps) {
|
||||
const alert = useAlertStore((state) => state.setMessage);
|
||||
const [activeTab, setActiveTab] = useState<ForkJoinTrackKey>("SP");
|
||||
|
||||
// 3개 트랙별 결재선 상태 (기본 2인 또는 3인 초기화 지원)
|
||||
const [trackRows, setTrackRows] = useState<Record<ForkJoinTrackKey, ElaprAplnRow[]>>(() => {
|
||||
if (initialTrackRows) {
|
||||
return {
|
||||
SP: initialTrackRows.SP ?? [],
|
||||
SF: initialTrackRows.SF ?? [],
|
||||
TOTAL_AGG: initialTrackRows.TOTAL_AGG ?? [],
|
||||
};
|
||||
}
|
||||
return createDefaultTrackRows(defaultPerTrack);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (initialTrackRows) {
|
||||
setTrackRows({
|
||||
SP: initialTrackRows.SP ?? [],
|
||||
SF: initialTrackRows.SF ?? [],
|
||||
TOTAL_AGG: initialTrackRows.TOTAL_AGG ?? [],
|
||||
});
|
||||
}
|
||||
}, [initialTrackRows]);
|
||||
|
||||
const [editingRowKey, setEditingRowKey] = useState<string | null>(null);
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
const [pickingRowKey, setPickingRowKey] = useState<string | null>(null);
|
||||
|
||||
const sensors = useDndSensors();
|
||||
|
||||
// 통합 전체 결재선 목록
|
||||
const allRows = useMemo(() => {
|
||||
return [...(trackRows.SP ?? []), ...(trackRows.SF ?? []), ...(trackRows.TOTAL_AGG ?? [])];
|
||||
}, [trackRows]);
|
||||
|
||||
useEffect(() => {
|
||||
onRowsChange?.(allRows);
|
||||
}, [allRows, onRowsChange]);
|
||||
|
||||
useEffect(() => {
|
||||
onEditingLockedChange?.(editingRowKey !== null);
|
||||
}, [editingRowKey, onEditingLockedChange]);
|
||||
|
||||
const currentTrackConfig = useMemo(() => {
|
||||
return TRACK_CONFIGS.find((c) => c.key === activeTab) ?? TRACK_CONFIGS[0];
|
||||
}, [activeTab]);
|
||||
|
||||
const currentRows = trackRows[activeTab] ?? [];
|
||||
|
||||
const pickingRow = useMemo(() => {
|
||||
if (!pickingRowKey) return undefined;
|
||||
return allRows.find((r) => r.rowKey === pickingRowKey);
|
||||
}, [pickingRowKey, allRows]);
|
||||
|
||||
// 행 추가 (부서별 최대 5명 제한)
|
||||
const handleAddRow = useCallback(() => {
|
||||
if (editingRowKey) {
|
||||
alert("편집 중인 결재선이 있습니다. 저장 또는 취소 후 추가해 주세요.");
|
||||
return;
|
||||
}
|
||||
if (currentRows.length >= currentTrackConfig.maxCount) {
|
||||
alert(`[${currentTrackConfig.label}] 결재선은 최대 ${currentTrackConfig.maxCount}명까지 지정 가능합니다.`);
|
||||
return;
|
||||
}
|
||||
const newSeq = currentRows.length + 1;
|
||||
let defaultSeComCd = "ATRZ02";
|
||||
if (activeTab === "TOTAL_AGG") {
|
||||
defaultSeComCd = newSeq === 1 ? "ATRZ04" : "ATRZ99";
|
||||
} else {
|
||||
defaultSeComCd = newSeq === 1 ? "ATRZ02" : "ATRZ03";
|
||||
}
|
||||
|
||||
const newRow = createDefaultRow(
|
||||
activeTab,
|
||||
currentTrackConfig.defaultDeptNm,
|
||||
newSeq,
|
||||
defaultSeComCd,
|
||||
);
|
||||
setTrackRows((prev) => {
|
||||
const list = [...prev[activeTab]];
|
||||
if (activeTab === "TOTAL_AGG" && list.length > 0) {
|
||||
const lastIdx = list.length - 1;
|
||||
if (list[lastIdx].atrzSeComCd === "ATRZ99") {
|
||||
list[lastIdx] = {
|
||||
...list[lastIdx],
|
||||
atrzSeComCd: "ATRZ03",
|
||||
dcarbYn: "N",
|
||||
};
|
||||
}
|
||||
}
|
||||
return {
|
||||
...prev,
|
||||
[activeTab]: [...list, newRow],
|
||||
};
|
||||
});
|
||||
setEditingRowKey(newRow.rowKey);
|
||||
}, [activeTab, currentRows.length, currentTrackConfig, editingRowKey, alert]);
|
||||
|
||||
// 편집 시작
|
||||
const handleStartEdit = useCallback((rowKey: string) => {
|
||||
const target = currentRows.find((r) => r.rowKey === rowKey);
|
||||
if (!target) return;
|
||||
target.snapshot = { ...target };
|
||||
setEditingRowKey(rowKey);
|
||||
}, [currentRows]);
|
||||
|
||||
// 편집 취소
|
||||
const handleCancelEdit = useCallback(() => {
|
||||
if (!editingRowKey) return;
|
||||
setTrackRows((prev) => {
|
||||
const list = prev[activeTab];
|
||||
const target = list.find((r) => r.rowKey === editingRowKey);
|
||||
if (target?.isNew && !target.aprvrUuid) {
|
||||
return {
|
||||
...prev,
|
||||
[activeTab]: list.filter((r) => r.rowKey !== editingRowKey),
|
||||
};
|
||||
}
|
||||
if (target?.snapshot) {
|
||||
return {
|
||||
...prev,
|
||||
[activeTab]: list.map((r) =>
|
||||
r.rowKey === editingRowKey ? { ...r.snapshot!, snapshot: undefined } : r,
|
||||
),
|
||||
};
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
setEditingRowKey(null);
|
||||
}, [activeTab, editingRowKey]);
|
||||
|
||||
// 행 필드 수정
|
||||
const handleUpdateRow = useCallback(
|
||||
(rowKey: string, patch: Partial<ElaprAplnRow>) => {
|
||||
setTrackRows((prev) => ({
|
||||
...prev,
|
||||
[activeTab]: prev[activeTab].map((r) =>
|
||||
r.rowKey === rowKey ? { ...r, ...patch, isDirty: true } : r,
|
||||
),
|
||||
}));
|
||||
},
|
||||
[activeTab],
|
||||
);
|
||||
|
||||
// 저장 (커밋)
|
||||
const handleCommitEdit = useCallback((rowKey: string) => {
|
||||
setTrackRows((prev) => ({
|
||||
...prev,
|
||||
[activeTab]: prev[activeTab].map((r) =>
|
||||
r.rowKey === rowKey ? { ...r, isDirty: false, isNew: false, snapshot: undefined } : r,
|
||||
),
|
||||
}));
|
||||
setEditingRowKey(null);
|
||||
}, [activeTab]);
|
||||
|
||||
// 행 삭제
|
||||
const handleDeleteRow = useCallback(
|
||||
(rowKey: string) => {
|
||||
setTrackRows((prev) => {
|
||||
const nextList = prev[activeTab]
|
||||
.filter((r) => r.rowKey !== rowKey)
|
||||
.map((r, idx) => ({ ...r, atrzSeqNo: idx + 1 }));
|
||||
return {
|
||||
...prev,
|
||||
[activeTab]: nextList,
|
||||
};
|
||||
});
|
||||
if (editingRowKey === rowKey) {
|
||||
setEditingRowKey(null);
|
||||
}
|
||||
},
|
||||
[activeTab, editingRowKey],
|
||||
);
|
||||
|
||||
// 드래그 순서 재정렬
|
||||
const handleDragEnd = useCallback(
|
||||
(event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
setTrackRows((prev) => {
|
||||
const items = [...prev[activeTab]];
|
||||
const oldIndex = items.findIndex((r) => r.rowKey === active.id);
|
||||
const newIndex = items.findIndex((r) => r.rowKey === over.id);
|
||||
if (oldIndex === -1 || newIndex === -1) return prev;
|
||||
|
||||
const [moved] = items.splice(oldIndex, 1);
|
||||
items.splice(newIndex, 0, moved);
|
||||
|
||||
const reordered = items.map((r, idx) => ({
|
||||
...r,
|
||||
atrzSeqNo: idx + 1,
|
||||
isDirty: true,
|
||||
}));
|
||||
|
||||
return {
|
||||
...prev,
|
||||
[activeTab]: reordered,
|
||||
};
|
||||
});
|
||||
},
|
||||
[activeTab],
|
||||
);
|
||||
|
||||
// 결재자 선택 팝업 오픈
|
||||
const handlePickApprover = useCallback((rowKey: string) => {
|
||||
setPickingRowKey(rowKey);
|
||||
setPickerOpen(true);
|
||||
}, []);
|
||||
|
||||
// 결재자 선택 완료
|
||||
const handleSelectReviewer = useCallback(
|
||||
(reviewer: ReviewerOption) => {
|
||||
if (!pickingRowKey) return;
|
||||
handleUpdateRow(pickingRowKey, {
|
||||
aprvrUuid: reviewer.uuid,
|
||||
aprvrNm: reviewer.name,
|
||||
aprvrDeptNm: reviewer.deptNm ?? currentTrackConfig.defaultDeptNm,
|
||||
});
|
||||
setPickingRowKey(null);
|
||||
setPickerOpen(false);
|
||||
},
|
||||
[pickingRowKey, handleUpdateRow, currentTrackConfig.defaultDeptNm],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col gap-4">
|
||||
{/* 3트랙 탭 헤더 */}
|
||||
<Tabs value={activeTab} onValueChange={(val) => setActiveTab(val as ForkJoinTrackKey)}>
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
{TRACK_CONFIGS.map((track) => {
|
||||
const count = trackRows[track.key].filter((r) => Boolean(r.aprvrUuid)).length;
|
||||
const total = trackRows[track.key].length;
|
||||
const isFull = count >= track.minCount;
|
||||
return (
|
||||
<TabsTrigger
|
||||
key={track.key}
|
||||
value={track.key}
|
||||
className="flex items-center gap-2 py-3 text-lg font-semibold"
|
||||
>
|
||||
<span>{track.label}</span>
|
||||
<span
|
||||
className={`rounded-full px-2 py-0.5 text-xs font-bold ${
|
||||
isFull
|
||||
? "bg-emerald-100 text-emerald-700"
|
||||
: "bg-amber-100 text-amber-700"
|
||||
}`}
|
||||
>
|
||||
{count}/{total}
|
||||
</span>
|
||||
</TabsTrigger>
|
||||
);
|
||||
})}
|
||||
</TabsList>
|
||||
|
||||
{TRACK_CONFIGS.map((track) => (
|
||||
<TabsContent key={track.key} value={track.key} className="mt-3">
|
||||
<div className="mb-3 flex items-center justify-between rounded-lg bg-blue-50 p-3 text-blue-900">
|
||||
<span className="text-sm font-medium">{track.guideText}</span>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
color="white"
|
||||
onClick={handleAddRow}
|
||||
disabled={Boolean(editingRowKey) || trackRows[track.key].length >= track.maxCount}
|
||||
>
|
||||
+ 결재자 추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 해당 탭 결재선 테이블 */}
|
||||
<div className="rounded-lg border border-gray-200">
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<Table className="w-full">
|
||||
<colgroup>
|
||||
<col width="6%" />
|
||||
<col width="10%" />
|
||||
<col width="24%" />
|
||||
<col width="44%" />
|
||||
<col width="16%" />
|
||||
</colgroup>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-8" />
|
||||
<TableHead>순서</TableHead>
|
||||
<TableHead>결재구분</TableHead>
|
||||
<TableHead>결재자 (성명/부서)</TableHead>
|
||||
<TableHead>관리</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<SortableContext
|
||||
items={trackRows[track.key].map((r) => r.rowKey)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
{trackRows[track.key].map((row, index) => (
|
||||
<SortableAplnPickerRow
|
||||
key={row.rowKey}
|
||||
row={row}
|
||||
displaySeqNo={index + 1}
|
||||
dragDisabled={Boolean(editingRowKey)}
|
||||
isEditing={editingRowKey === row.rowKey}
|
||||
isLocked={Boolean(editingRowKey && editingRowKey !== row.rowKey)}
|
||||
onStartEdit={() => handleStartEdit(row.rowKey)}
|
||||
onSave={() => handleCommitEdit(row.rowKey)}
|
||||
onCancel={handleCancelEdit}
|
||||
onDelete={() => handleDeleteRow(row.rowKey)}
|
||||
onChange={(patch) => handleUpdateRow(row.rowKey, patch)}
|
||||
onPickAprvr={() => handlePickApprover(row.rowKey)}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</DndContext>
|
||||
</div>
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
|
||||
{/* 결재자 검색 팝업 */}
|
||||
<AprvrPickerDialog
|
||||
open={pickerOpen}
|
||||
onOpenChange={setPickerOpen}
|
||||
atrzSeComCd={pickingRow?.atrzSeComCd ?? ""}
|
||||
onSelect={handleSelectReviewer}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -24,6 +24,7 @@ import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
|
||||
import type { ElaprTmplt } from "../model/elapr-tmplt-interface";
|
||||
|
||||
import { ElaprAplnPickerGrid } from "./elapr-apln-picker-grid";
|
||||
import { ElaprForkJoinPickerGrid } from "./elapr-forkjoin-picker-grid";
|
||||
import { ElaprTmpltSelectTable } from "./elapr-tmplt-select-table";
|
||||
|
||||
const PAGE_SIZE = 100;
|
||||
@@ -37,6 +38,7 @@ interface ElaprTmpltPickerDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
docSeComCd: string;
|
||||
taskSeComCd?: string | null;
|
||||
onSelect?: (tmplt: ElaprTmplt) => void;
|
||||
onConfirm?: (payload: ElaprTmpltPickerConfirmPayload) => void;
|
||||
}
|
||||
@@ -45,6 +47,7 @@ function ElaprTmpltPickerDialog({
|
||||
open,
|
||||
onClose,
|
||||
docSeComCd,
|
||||
taskSeComCd,
|
||||
onSelect,
|
||||
onConfirm,
|
||||
}: ElaprTmpltPickerDialogProps) {
|
||||
@@ -53,6 +56,8 @@ function ElaprTmpltPickerDialog({
|
||||
const [aplnRows, setAplnRows] = useState<ElaprAplnRow[]>([]);
|
||||
const [isEditingLocked, setIsEditingLocked] = useState(false);
|
||||
|
||||
const isForkJoinMode = docSeComCd === "FNRS" && taskSeComCd === "SF_SP";
|
||||
|
||||
const tmpltQuery = useElaprTmpltPage({
|
||||
page: 0,
|
||||
size: PAGE_SIZE,
|
||||
@@ -70,7 +75,9 @@ function ElaprTmpltPickerDialog({
|
||||
|
||||
function handleSelectTmplt(tmplt: ElaprTmplt | null) {
|
||||
setSelectedTmplt(tmplt);
|
||||
setAplnRows([]);
|
||||
if (!isForkJoinMode) {
|
||||
setAplnRows([]);
|
||||
}
|
||||
setIsEditingLocked(false);
|
||||
}
|
||||
|
||||
@@ -84,11 +91,110 @@ function ElaprTmpltPickerDialog({
|
||||
}
|
||||
|
||||
function handleConfirm() {
|
||||
if (!selectedTmplt) {
|
||||
if (!selectedTmplt && !isForkJoinMode) {
|
||||
alert("결재서식을 선택해 주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (isForkJoinMode) {
|
||||
if (isEditingLocked) {
|
||||
alert("편집 중인 결재선이 있습니다. 저장을 완료해 주세요.");
|
||||
return;
|
||||
}
|
||||
const unassigned = aplnRows.find((r) => !r.aprvrUuid);
|
||||
if (unassigned) {
|
||||
alert("지정되지 않은 결재자가 있습니다. 모든 트랙의 결재자를 선택해 주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
const pipeRows = aplnRows
|
||||
.filter((r) => r.branchSeCd === "SP")
|
||||
.sort((a, b) => Number(a.atrzSeqNo ?? 0) - Number(b.atrzSeqNo ?? 0));
|
||||
const facRows = aplnRows
|
||||
.filter((r) => r.branchSeCd === "SF")
|
||||
.sort((a, b) => Number(a.atrzSeqNo ?? 0) - Number(b.atrzSeqNo ?? 0));
|
||||
const aggRows = aplnRows
|
||||
.filter((r) => r.branchSeCd === "TOTAL_AGG")
|
||||
.sort((a, b) => Number(a.atrzSeqNo ?? 0) - Number(b.atrzSeqNo ?? 0));
|
||||
|
||||
// 1. 부서별 인원 수 (각각 최소 2명 이상, 최대 5명)
|
||||
if (pipeRows.length < 2 || pipeRows.length > 5) {
|
||||
alert("하수관로 검토 결재선에 결재자를 최소 2명 이상(최대 5명) 지정해 주세요.");
|
||||
return;
|
||||
}
|
||||
if (facRows.length < 2 || facRows.length > 5) {
|
||||
alert("하수처리시설 검토 결재선에 결재자를 최소 2명 이상(최대 5명) 지정해 주세요.");
|
||||
return;
|
||||
}
|
||||
if (aggRows.length < 2 || aggRows.length > 5) {
|
||||
alert("정책부 종합병합 결재선에 결재자를 최소 2명 이상(최대 5명) 지정해 주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 정책부 1순번 병합자(ATRZ04) 지정 검증
|
||||
if (aggRows[0]?.atrzSeComCd !== "ATRZ04") {
|
||||
alert("[정책부] 첫 번째 결재구분은 '병합(ATRZ04)'이어야 합니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. 정책부 최종 결재구분(ATRZ99) 지정 검증
|
||||
const lastAggRow = aggRows[aggRows.length - 1];
|
||||
if (lastAggRow?.atrzSeComCd !== "ATRZ99") {
|
||||
alert("[정책부] 최종 결재구분은 '최종승인(ATRZ99)'이어야 합니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 4. 동일 브랜치 내 중복 결재자 검증
|
||||
const checkDuplicateInBranch = (rows: typeof pipeRows, branchName: string) => {
|
||||
const uuids = rows.map((r) => r.aprvrUuid).filter(Boolean);
|
||||
const uniqueUuids = new Set(uuids);
|
||||
if (uniqueUuids.size !== uuids.length) {
|
||||
const dupRow = rows.find((r, i) => uuids.indexOf(r.aprvrUuid) !== i);
|
||||
return `[${dupRow?.aprvrNm || "결재자"}] 결재자가 ${branchName} 결재선에 중복 지정되었습니다.`;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const pipeDup = checkDuplicateInBranch(pipeRows, "관로부");
|
||||
if (pipeDup) {
|
||||
alert(pipeDup);
|
||||
return;
|
||||
}
|
||||
const facDup = checkDuplicateInBranch(facRows, "시설부");
|
||||
if (facDup) {
|
||||
alert(facDup);
|
||||
return;
|
||||
}
|
||||
const aggDup = checkDuplicateInBranch(aggRows, "정책부");
|
||||
if (aggDup) {
|
||||
alert(aggDup);
|
||||
return;
|
||||
}
|
||||
|
||||
const defaultTmplt: ElaprTmplt = selectedTmplt ?? {
|
||||
elaprTmpltId: "TMPLT_SF_SP_FORKJOIN",
|
||||
elaprTmpltNm: "[복합] 시설+관로 병렬 결재선 (6인)",
|
||||
docSeComCd: "FNRS",
|
||||
};
|
||||
|
||||
const payload: ElaprTmpltPickerConfirmPayload = {
|
||||
tmplt: defaultTmplt,
|
||||
aplnRows,
|
||||
};
|
||||
|
||||
if (onConfirm) {
|
||||
onConfirm(payload);
|
||||
} else {
|
||||
onSelect?.(defaultTmplt);
|
||||
}
|
||||
|
||||
setSelectedTmplt(null);
|
||||
setAplnRows([]);
|
||||
setIsEditingLocked(false);
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
|
||||
const rowsError = validateAllRowsForSave(aplnRows, isEditingLocked);
|
||||
if (rowsError) {
|
||||
alert(rowsError);
|
||||
@@ -116,14 +222,14 @@ function ElaprTmpltPickerDialog({
|
||||
const visibleRows = getVisibleRows(aplnRows);
|
||||
|
||||
const payload: ElaprTmpltPickerConfirmPayload = {
|
||||
tmplt: selectedTmplt,
|
||||
tmplt: selectedTmplt!,
|
||||
aplnRows: visibleRows,
|
||||
};
|
||||
|
||||
if (onConfirm) {
|
||||
onConfirm(payload);
|
||||
} else {
|
||||
onSelect?.(selectedTmplt);
|
||||
onSelect?.(selectedTmplt!);
|
||||
}
|
||||
|
||||
setSelectedTmplt(null);
|
||||
@@ -134,9 +240,16 @@ function ElaprTmpltPickerDialog({
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogContent className="max-w-[120rem]" aria-describedby={undefined}>
|
||||
<DialogContent
|
||||
className={isForkJoinMode ? "max-w-[140rem]" : "max-w-[120rem]"}
|
||||
aria-describedby={undefined}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>결재선 선택</DialogTitle>
|
||||
<DialogTitle>
|
||||
{isForkJoinMode
|
||||
? "결재선 선택 (복합사업 처리시설+하수관로 Fork-Join 3트랙)"
|
||||
: "결재선 선택"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex gap-6">
|
||||
@@ -145,11 +258,19 @@ function ElaprTmpltPickerDialog({
|
||||
selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
|
||||
onSelectTmplt={handleSelectTmplt}
|
||||
/>
|
||||
<ElaprAplnPickerGrid
|
||||
elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null}
|
||||
onRowsChange={handleRowsChange}
|
||||
onEditingLockedChange={handleEditingLockedChange}
|
||||
/>
|
||||
|
||||
{isForkJoinMode ? (
|
||||
<ElaprForkJoinPickerGrid
|
||||
onRowsChange={handleRowsChange}
|
||||
onEditingLockedChange={handleEditingLockedChange}
|
||||
/>
|
||||
) : (
|
||||
<ElaprAplnPickerGrid
|
||||
elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null}
|
||||
onRowsChange={handleRowsChange}
|
||||
onEditingLockedChange={handleEditingLockedChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
@@ -158,7 +279,7 @@ function ElaprTmpltPickerDialog({
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={!selectedTmplt || isEditingLocked}
|
||||
disabled={(!selectedTmplt && !isForkJoinMode) || isEditingLocked}
|
||||
onClick={handleConfirm}
|
||||
>
|
||||
확인
|
||||
|
||||
@@ -98,6 +98,10 @@ async function changePrgrsSttsComCd(body: DocPrgrsUpdateRequestDto): Promise<voi
|
||||
await client.post<void>(`${BASE}/doc/updatePrgrsStts`, body);
|
||||
}
|
||||
|
||||
async function rejectPrgrsStts(body: DocPrgrsUpdateRequestDto): Promise<void> {
|
||||
await client.post<void>(`${BASE}/doc/rejectPrgrsStts`, body);
|
||||
}
|
||||
|
||||
export const fnrsCnsltnMngService = {
|
||||
findPage,
|
||||
findById,
|
||||
@@ -112,4 +116,5 @@ export const fnrsCnsltnMngService = {
|
||||
remove,
|
||||
findFileVrfcResults,
|
||||
changePrgrsSttsComCd,
|
||||
rejectPrgrsStts,
|
||||
} satisfies FnrsCnsltnMngService;
|
||||
|
||||
@@ -35,6 +35,8 @@ export function useFnrsCnsltnMng(fnrsCnsltnDocNo: string | null | undefined) {
|
||||
queryKey: fnrsCnsltnKeys.detail(fnrsCnsltnDocNo!),
|
||||
queryFn: () => fnrsCnsltnMngService.findById(fnrsCnsltnDocNo!),
|
||||
enabled: Boolean(fnrsCnsltnDocNo),
|
||||
staleTime: 0,
|
||||
refetchOnMount: "always",
|
||||
});
|
||||
}
|
||||
|
||||
@@ -43,6 +45,8 @@ export function useFnrsCnsltnFileVrfcResults(fnrsCnsltnDocNo: string | null | un
|
||||
queryKey: fnrsCnsltnKeys.fileVrfcResults(fnrsCnsltnDocNo!),
|
||||
queryFn: () => fnrsCnsltnMngService.findFileVrfcResults(fnrsCnsltnDocNo!),
|
||||
enabled: Boolean(fnrsCnsltnDocNo),
|
||||
staleTime: 0,
|
||||
refetchOnMount: "always",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -98,6 +98,7 @@ export const fnrsSharItemSchema = z.object({
|
||||
export const fnrsCnsltnApplySaveSchema = z.object({
|
||||
techReViewSaveCd: z.string().nullish(),
|
||||
rvwStpCd: z.string().nullish(),
|
||||
branchSeCd: z.string().nullish(),
|
||||
fnrsCnsltnMng: fnrsCnsltnMngSaveSchema,
|
||||
bzScaleList: z.array(fnrsCnsltnBzScaleItemSchema).nullish(),
|
||||
bizCstList: z.array(fnrsCnsltnBizCstItemSchema).nullish(),
|
||||
|
||||
@@ -145,4 +145,5 @@ export interface FnrsCnsltnMngService {
|
||||
remove(fnrsCnsltnDocNo: string): Promise<void>;
|
||||
findFileVrfcResults(fnrsCnsltnDocNo: string): Promise<FnrsCnsltnFileVrfcRsltResponseDto[]>;
|
||||
changePrgrsSttsComCd(body: DocPrgrsUpdateRequestDto): Promise<void>;
|
||||
rejectPrgrsStts(body: DocPrgrsUpdateRequestDto): Promise<void>;
|
||||
}
|
||||
|
||||
@@ -91,6 +91,10 @@ async function changePrgrsSttsComCd(payload: DocPrgrsUpdateRequestDto): Promise<
|
||||
await client.post(`${BASE}/doc/updatePrgrsStts`, payload);
|
||||
}
|
||||
|
||||
async function rejectPrgrsStts(payload: DocPrgrsUpdateRequestDto): Promise<void> {
|
||||
await client.post(`${BASE}/doc/rejectPrgrsStts`, payload);
|
||||
}
|
||||
|
||||
export const instlSncnService = {
|
||||
getPage,
|
||||
getById,
|
||||
@@ -102,6 +106,7 @@ export const instlSncnService = {
|
||||
submitReqSupplement,
|
||||
remove,
|
||||
changePrgrsSttsComCd,
|
||||
rejectPrgrsStts,
|
||||
} satisfies InstlSncnMngService;
|
||||
|
||||
// TODO: st-anls-mst service 로 분리
|
||||
|
||||
@@ -35,6 +35,8 @@ export function useInstlSncnDetail(id: string) {
|
||||
queryKey: instlSncnKeys.detail(id),
|
||||
queryFn: () => instlSncnService.getById(id),
|
||||
enabled: Boolean(id),
|
||||
staleTime: 0,
|
||||
refetchOnMount: "always",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -131,4 +131,5 @@ export interface InstlSncnMngService {
|
||||
submitReqSupplement: (id: string, payload: InstlSncnApplySaveRequestDto) => Promise<string>;
|
||||
remove: (id: string) => Promise<void>;
|
||||
changePrgrsSttsComCd: (payload: DocPrgrsUpdateRequestDto) => Promise<void>;
|
||||
rejectPrgrsStts: (payload: DocPrgrsUpdateRequestDto) => Promise<void>;
|
||||
}
|
||||
|
||||
+48
-3
@@ -11,27 +11,67 @@ const BASE = ENDPOINT.AS_SERVICE.PWRK_CNSLTN_DOC_CRT_RSLT;
|
||||
|
||||
async function findLatestByCrtDmndUuid(
|
||||
crtDmndUuid: string,
|
||||
branchSeCd?: string,
|
||||
): Promise<PwrkCnsltnDocCrtRsltResponseDto> {
|
||||
const response = await client.get<PwrkCnsltnDocCrtRsltResponseDto>(
|
||||
`${BASE}/${crtDmndUuid}/latest`,
|
||||
{
|
||||
params: branchSeCd ? { branchSeCd } : undefined,
|
||||
},
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async function openWebHwpLatest(crtDmndUuid: string) {
|
||||
async function findListByCrtDmndUuid(
|
||||
crtDmndUuid: string,
|
||||
branchSeCd?: string,
|
||||
): Promise<PwrkCnsltnDocCrtRsltResponseDto[]> {
|
||||
const response = await client.get<{ content: PwrkCnsltnDocCrtRsltResponseDto[] } | PwrkCnsltnDocCrtRsltResponseDto[]>(
|
||||
BASE,
|
||||
{
|
||||
params: {
|
||||
crtDmndUuid,
|
||||
branchSeCd: branchSeCd || undefined,
|
||||
page: 0,
|
||||
size: 100,
|
||||
sort: "verSn,desc",
|
||||
},
|
||||
},
|
||||
);
|
||||
if (Array.isArray(response.data)) {
|
||||
return response.data;
|
||||
}
|
||||
return response.data?.content ?? [];
|
||||
}
|
||||
|
||||
async function openWebHwpLatest(crtDmndUuid: string, branchSeCd?: string) {
|
||||
return client.get<Blob>(`${BASE}/${crtDmndUuid}/webhwp/open`, {
|
||||
params: branchSeCd ? { branchSeCd } : undefined,
|
||||
responseType: "blob",
|
||||
});
|
||||
}
|
||||
|
||||
async function download(crtDmndUuid: string, verSn: number) {
|
||||
async function openWebHwpByVer(
|
||||
crtDmndUuid: string,
|
||||
verSn: number,
|
||||
branchSeCd?: string,
|
||||
) {
|
||||
return client.get<Blob>(`${BASE}/${crtDmndUuid}/${verSn}/webhwp/open`, {
|
||||
params: branchSeCd ? { branchSeCd } : undefined,
|
||||
responseType: "blob",
|
||||
});
|
||||
}
|
||||
|
||||
async function download(crtDmndUuid: string, verSn: number, branchSeCd?: string) {
|
||||
return client.get<Blob>(`${BASE}/${crtDmndUuid}/${verSn}/download`, {
|
||||
params: branchSeCd ? { branchSeCd } : undefined,
|
||||
responseType: "blob",
|
||||
});
|
||||
}
|
||||
|
||||
async function downloadLatest(crtDmndUuid: string) {
|
||||
async function downloadLatest(crtDmndUuid: string, branchSeCd?: string) {
|
||||
return client.get<Blob>(`${BASE}/${crtDmndUuid}/download`, {
|
||||
params: branchSeCd ? { branchSeCd } : undefined,
|
||||
responseType: "blob",
|
||||
});
|
||||
}
|
||||
@@ -47,6 +87,9 @@ async function saveMultipart(
|
||||
if (saveDto.atchFileGroupId) {
|
||||
formData.append("atchFileGroupId", saveDto.atchFileGroupId);
|
||||
}
|
||||
if (saveDto.branchSeCd) {
|
||||
formData.append("branchSeCd", saveDto.branchSeCd);
|
||||
}
|
||||
if (file) {
|
||||
const resolvedFileName = fileName ?? (file instanceof File ? file.name : "document.hwpx");
|
||||
formData.append("file", file, resolvedFileName);
|
||||
@@ -73,7 +116,9 @@ async function updateMultipart(
|
||||
|
||||
export const pwrkCnsltnDocCrtRsltService = {
|
||||
findLatestByCrtDmndUuid,
|
||||
findListByCrtDmndUuid,
|
||||
openWebHwpLatest,
|
||||
openWebHwpByVer,
|
||||
download,
|
||||
downloadLatest,
|
||||
saveMultipart,
|
||||
|
||||
+22
-4
@@ -5,6 +5,7 @@ import type { PwrkCnsltnDocCrtRsltSaveRequestDto } from "./pwrk-cnsltn-doc-crt-r
|
||||
export interface PwrkCnsltnDocCrtRsltResponseDto {
|
||||
crtDmndUuid: string;
|
||||
verSn: number;
|
||||
branchSeCd?: string;
|
||||
rgtrUuid?: string;
|
||||
rgtrNm?: string;
|
||||
orgnlOtptDocCn: null;
|
||||
@@ -14,15 +15,32 @@ export interface PwrkCnsltnDocCrtRsltResponseDto {
|
||||
/** 백엔드 PwrkCnsltnDocCrtRsltUpdateRequestDto (모두 optional) */
|
||||
export interface PwrkCnsltnDocCrtRsltUpdateRequestDto {
|
||||
rgtrUuid?: string;
|
||||
branchSeCd?: string;
|
||||
orgnlOtptDocCn?: string;
|
||||
crtCmptnDt?: string;
|
||||
}
|
||||
|
||||
export interface PwrkCnsltnDocCrtRsltService {
|
||||
findLatestByCrtDmndUuid(crtDmndUuid: string): Promise<PwrkCnsltnDocCrtRsltResponseDto>;
|
||||
openWebHwpLatest(crtDmndUuid: string): Promise<AxiosResponse<Blob>>;
|
||||
download(crtDmndUuid: string, verSn: number): Promise<AxiosResponse<Blob>>;
|
||||
downloadLatest(crtDmndUuid: string): Promise<AxiosResponse<Blob>>;
|
||||
findLatestByCrtDmndUuid(
|
||||
crtDmndUuid: string,
|
||||
branchSeCd?: string,
|
||||
): Promise<PwrkCnsltnDocCrtRsltResponseDto>;
|
||||
findListByCrtDmndUuid(
|
||||
crtDmndUuid: string,
|
||||
branchSeCd?: string,
|
||||
): Promise<PwrkCnsltnDocCrtRsltResponseDto[]>;
|
||||
openWebHwpLatest(crtDmndUuid: string, branchSeCd?: string): Promise<AxiosResponse<Blob>>;
|
||||
openWebHwpByVer(
|
||||
crtDmndUuid: string,
|
||||
verSn: number,
|
||||
branchSeCd?: string,
|
||||
): Promise<AxiosResponse<Blob>>;
|
||||
download(
|
||||
crtDmndUuid: string,
|
||||
verSn: number,
|
||||
branchSeCd?: string,
|
||||
): Promise<AxiosResponse<Blob>>;
|
||||
downloadLatest(crtDmndUuid: string, branchSeCd?: string): Promise<AxiosResponse<Blob>>;
|
||||
saveMultipart(
|
||||
saveDto: PwrkCnsltnDocCrtRsltSaveRequestDto,
|
||||
file?: Blob | File,
|
||||
|
||||
+1
@@ -5,6 +5,7 @@ export const pwrkCnsltnDocCrtRsltSaveRequestSchema = z.object({
|
||||
crtDmndUuid: z.string().uuid(),
|
||||
pwrkCnsltnDocNo: z.string().min(1).max(100),
|
||||
atchFileGroupId: z.string().max(30).nullish(),
|
||||
branchSeCd: z.string().max(20).nullish(),
|
||||
});
|
||||
|
||||
export type PwrkCnsltnDocCrtRsltSaveRequestDto = z.infer<
|
||||
|
||||
@@ -33,6 +33,8 @@ export function useSewerBscPlan(sewerBscPlanDocNo: string | null | undefined) {
|
||||
queryKey: sewerBscPlanKeys.detail(sewerBscPlanDocNo!),
|
||||
queryFn: () => sewerBscPlanService.findById(sewerBscPlanDocNo!),
|
||||
enabled: Boolean(sewerBscPlanDocNo),
|
||||
staleTime: 0,
|
||||
refetchOnMount: "always",
|
||||
});
|
||||
}
|
||||
|
||||
@@ -44,6 +46,8 @@ export function useSewerBscPlanDetails(
|
||||
queryKey: sewerBscPlanKeys.details(sewerBscPlanDocNo!, chgCycl ?? undefined),
|
||||
queryFn: () => sewerBscPlanService.findDetails(sewerBscPlanDocNo!, chgCycl!),
|
||||
enabled: Boolean(sewerBscPlanDocNo) && chgCycl != null,
|
||||
staleTime: 0,
|
||||
refetchOnMount: "always",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -2,13 +2,15 @@
|
||||
|
||||
import { useMemo, useRef } from "react";
|
||||
|
||||
import { RefreshCw } from "lucide-react";
|
||||
|
||||
import { useUserStore } from "@/shared/lib";
|
||||
import { SectionCollapsibleGroup, SectionCollapsibleToggle } from "@/shared/ui";
|
||||
import { useDesignCnstnMng } from "@/entities/design-cnstn";
|
||||
import { ElaprDocPrgrsStatus } from "@/entities/elapr";
|
||||
import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
|
||||
import { AttachmentsViewSection, ProgressStatusSection } from "@/widgets/pbadms-sprt";
|
||||
import { Skeleton } from "@common/components";
|
||||
import { Button, cn, Skeleton } from "@common/components";
|
||||
|
||||
import { needsRoleUser01AtrzResolve } from "../lib/button-config";
|
||||
import { getEditableReviewStep } from "../lib/review-step-utils";
|
||||
@@ -30,7 +32,7 @@ interface DesignViewPageProps {
|
||||
function DesignViewPage({ id }: DesignViewPageProps) {
|
||||
const userInfo = useUserStore((state) => state.userInfo);
|
||||
const techReviewOpinionRef = useRef<TechReviewOpinionSectionHandle>(null);
|
||||
const { data, isLoading, isError } = useDesignCnstnMng(id);
|
||||
const { data, isLoading, isError, refetch, isFetching } = useDesignCnstnMng(id);
|
||||
|
||||
const prgrsSttsComCd = data?.detDto?.prgrsSttsComCd || "";
|
||||
const needsAtrzResolve = needsRoleUser01AtrzResolve(userInfo?.dtlInstCd, prgrsSttsComCd);
|
||||
@@ -83,8 +85,20 @@ function DesignViewPage({ id }: DesignViewPageProps) {
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<SectionCollapsibleGroup>
|
||||
<div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
|
||||
<div className="sticky top-[6rem] z-30 flex items-center gap-3 bg-container px-4 py-2">
|
||||
<SectionCollapsibleToggle />
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={() => refetch()}
|
||||
disabled={isFetching}
|
||||
className="flex items-center gap-1.5 h-[2.8rem] px-3 text-[1.2rem] font-normal"
|
||||
title="최신 데이터 새로고침"
|
||||
>
|
||||
<RefreshCw className={cn("size-3.5", isFetching && "animate-spin")} />
|
||||
<span>새로 고침</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<ProgressStatusSection
|
||||
|
||||
@@ -188,16 +188,149 @@ const ROLE_USER01_ATRZ_STATUS_ACTIONS: Record<
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Fork-Join (병렬 결재 6인 체제: 관로2 + 시설2 + 정책병합2) 전용 상태별 버튼 액션 매핑
|
||||
* - Stage 2: 관로/시설 실무검토자(ATRZ02), 부서승인자(ATRZ03)
|
||||
* - Stage 3: 정책총괄 종합병합자(ATRZ04), 최종회신자(ATRZ99)
|
||||
* - 일반 순차 결재 라인과 분리하여 독립적으로 관리
|
||||
*/
|
||||
const ROLE_USER01_FORK_JOIN_ATRZ_STATUS_ACTIONS: Record<
|
||||
string,
|
||||
Record<string, FnrsCnsltnViewButtonAction[]>
|
||||
> = {
|
||||
ER: {
|
||||
ATRZ01: [
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.fileSplmnt,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.fileVrfc,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.dsgntRvwr,
|
||||
],
|
||||
},
|
||||
SL: {
|
||||
ATRZ01: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ02: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ03: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ04: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ99: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
},
|
||||
TE: {
|
||||
ATRZ01: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ02: [
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocCrt,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwRsltInq,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwStrg,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwCmptn,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.dmndSplmnt,
|
||||
],
|
||||
ATRZ03: [
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.atrzRply,
|
||||
],
|
||||
ATRZ04: [
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.atrzAprv,
|
||||
],
|
||||
ATRZ99: [
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.atrzRply,
|
||||
],
|
||||
},
|
||||
TP: {
|
||||
ATRZ01: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ02: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ03: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ04: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ99: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
},
|
||||
RB: {
|
||||
ATRZ01: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ02: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ03: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ04: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ99: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
},
|
||||
RA: {
|
||||
ATRZ01: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ02: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ03: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ04: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ99: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
},
|
||||
AV: {
|
||||
ATRZ01: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ02: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ03: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ04: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ99: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
},
|
||||
EV: {
|
||||
ATRZ01: [
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.dsgntRvwr,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.costVrfc,
|
||||
],
|
||||
ATRZ02: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ03: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ04: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ99: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
},
|
||||
RK: {
|
||||
ATRZ01: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ02: [
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwCmptn,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.dmndSplmnt,
|
||||
],
|
||||
ATRZ03: [
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.atrzRply,
|
||||
],
|
||||
ATRZ04: [
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.atrzAprv,
|
||||
],
|
||||
ATRZ99: [
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng,
|
||||
FNRS_CNSLTN_VIEW_BUTTON_ACTION.atrzRply,
|
||||
],
|
||||
},
|
||||
RR: {
|
||||
ATRZ01: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ02: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ03: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ04: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ99: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
},
|
||||
EP: {
|
||||
ATRZ01: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ02: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ03: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ04: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ99: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
},
|
||||
TA: {
|
||||
ATRZ01: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ02: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ03: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ04: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
ATRZ99: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng],
|
||||
},
|
||||
};
|
||||
|
||||
function resolveButtonConfigs(actions: FnrsCnsltnViewButtonAction[]): FnrsCnsltnViewButtonAction[] {
|
||||
return actions.map((action) => FNRS_CNSLTN_VIEW_BUTTON_ACTION[action]);
|
||||
}
|
||||
|
||||
interface GetButtonConfigsOptions {
|
||||
export interface GetButtonConfigsOptions {
|
||||
hasPendingApprovalRequest?: boolean;
|
||||
hasCompletedDraft?: boolean;
|
||||
canRetryFileVrfc?: boolean;
|
||||
canRetryDraftGen?: boolean;
|
||||
canRetryCostVrfc?: boolean;
|
||||
isForkJoin?: boolean;
|
||||
branchSeCd?: "SP" | "SF" | "TOTAL_AGG" | "MAIN" | string;
|
||||
branchSttsCd?: "WAITING" | "IN_PROGRESS" | "COMPLETED" | "SUPPLEMENT" | "REJECTED" | string;
|
||||
isSecondApproval?: boolean;
|
||||
}
|
||||
|
||||
const PENDING_APPROVAL_ACTIONS = new Set<FnrsCnsltnViewButtonAction>([
|
||||
@@ -214,7 +347,35 @@ function resolveRoleUser01AtrzButtonActions(
|
||||
atrzSeComCdList: string[],
|
||||
options?: GetButtonConfigsOptions,
|
||||
): FnrsCnsltnViewButtonAction[] {
|
||||
const atrzStatusMap = ROLE_USER01_ATRZ_STATUS_ACTIONS[prgrsSttsComCd];
|
||||
let effectiveStatus = prgrsSttsComCd;
|
||||
|
||||
if (options?.isForkJoin && options?.branchSttsCd) {
|
||||
switch (options.branchSttsCd) {
|
||||
case "SUPPLEMENT":
|
||||
// 본인 브랜치가 보완요청 중이면 'SL' 맵핑 적용 (검토/승인 버튼 숨김, 실무협의서관리만 노출)
|
||||
effectiveStatus = "SL";
|
||||
break;
|
||||
case "IN_PROGRESS": {
|
||||
// 본인 브랜치가 정상 진행 중이면 원천 상태('TE' 또는 'RK') 정상 적용!
|
||||
// 2차 결재 중이거나(isSecondApproval) 원천 상태가 'RK'이면 'RK', 1차 검토이면 'TE'
|
||||
const isSecondReview = Boolean(options?.isSecondApproval || prgrsSttsComCd === "RK");
|
||||
effectiveStatus = isSecondReview ? "RK" : "TE";
|
||||
break;
|
||||
}
|
||||
case "COMPLETED": {
|
||||
// 본인 브랜치 승인 완료 후 타 브랜치 대기 중이면 조회 전용 맵 적용
|
||||
const isSecondReview = Boolean(options?.isSecondApproval || prgrsSttsComCd === "RK");
|
||||
effectiveStatus = isSecondReview ? "RR" : "TP";
|
||||
break;
|
||||
}
|
||||
case "WAITING":
|
||||
return [FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng];
|
||||
}
|
||||
}
|
||||
|
||||
const atrzStatusMap = options?.isForkJoin
|
||||
? ROLE_USER01_FORK_JOIN_ATRZ_STATUS_ACTIONS[effectiveStatus]
|
||||
: ROLE_USER01_ATRZ_STATUS_ACTIONS[effectiveStatus];
|
||||
if (!atrzStatusMap || atrzSeComCdList.length === 0) return [];
|
||||
|
||||
const seen = new Set<FnrsCnsltnViewButtonAction>();
|
||||
@@ -232,6 +393,11 @@ function resolveRoleUser01AtrzButtonActions(
|
||||
}
|
||||
|
||||
return actions.filter((action) => {
|
||||
// 2차 결재(조치결과서 검토) 단계에서는 '검토 결과 조회' 버튼 비활성화 (1차 기술검토 전용)
|
||||
if (options?.isSecondApproval && action === FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwRsltInq) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const needsPendingApproval = PENDING_APPROVAL_ACTIONS.has(action);
|
||||
if (needsPendingApproval && options?.hasPendingApprovalRequest === false) return false;
|
||||
|
||||
@@ -249,12 +415,12 @@ function resolveRoleUser01AtrzButtonActions(
|
||||
}
|
||||
|
||||
if (options?.hasCompletedDraft != null) {
|
||||
if (prgrsSttsComCd === "SL" || prgrsSttsComCd === "TE" || prgrsSttsComCd === "RK") {
|
||||
if (effectiveStatus === "SL" || effectiveStatus === "TE" || effectiveStatus === "RK") {
|
||||
if (action === FNRS_CNSLTN_VIEW_BUTTON_ACTION.pwrkCnsltnDocMng) {
|
||||
return options.hasCompletedDraft;
|
||||
}
|
||||
}
|
||||
if (prgrsSttsComCd === "TE") {
|
||||
if (effectiveStatus === "TE") {
|
||||
if (action === FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwRsltInq) {
|
||||
return options.hasCompletedDraft;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import type { BranchSeCd } from "@/entities/elapr";
|
||||
import type { CklstResultItem, CklstRvwRsltTreeDto } from "@/entities/fnrs-cnsltn";
|
||||
|
||||
import {
|
||||
@@ -142,3 +143,108 @@ export function toCklstSaveDto(
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 3. 결재자 branch_se_cd 기반 체크리스트 독립 Validation 유틸리티 (10월 14일 개정)
|
||||
* 결재자의 branch_se_cd('SP', 'SF', 'TOTAL_AGG', 'MAIN')에 따라 해당 탭 항목만 검증합니다.
|
||||
*/
|
||||
export function validateChecklistByBranch(
|
||||
checklistItems: {
|
||||
taskSeComCd: string;
|
||||
bchckUseYn: string;
|
||||
selected?: string; // 'Y' | 'N'
|
||||
picRvwCn?: string; // 검토자의견
|
||||
cklstRvwItemNm: string;
|
||||
cklstRvwSn: number;
|
||||
}[],
|
||||
approverBranchSeCd: BranchSeCd,
|
||||
docTaskSeComCd: string,
|
||||
): { isValid: boolean; errorMessage?: string; errorItemSn?: number } {
|
||||
// TOTAL_AGG(종합병합): 관로/시설 병렬 검토 완료 후 총괄취합 단계이므로 체크리스트 검증 생략
|
||||
if (approverBranchSeCd === "TOTAL_AGG") {
|
||||
return { isValid: true };
|
||||
}
|
||||
|
||||
let targetTaskCodes: string[] = [];
|
||||
if (approverBranchSeCd === "SP") {
|
||||
targetTaskCodes = ["SP"]; // 관로부: SP 탭만 검증 (시설부 미작성 무관)
|
||||
} else if (approverBranchSeCd === "SF") {
|
||||
targetTaskCodes = ["SF"]; // 시설부: SF 탭만 검증 (관로부 미작성 무관)
|
||||
} else {
|
||||
// 단일/순차 결재 (MAIN 등): 콤마 분리, 또는 "MAIN"/누락 시 체크리스트 실제 공종 전체 자동 추출
|
||||
const parsedCodes =
|
||||
docTaskSeComCd && docTaskSeComCd !== "MAIN"
|
||||
? docTaskSeComCd.split(",").map((s) => s.trim()).filter(Boolean)
|
||||
: [];
|
||||
|
||||
targetTaskCodes =
|
||||
parsedCodes.length > 0
|
||||
? parsedCodes
|
||||
: Array.from(new Set(checklistItems.map((i) => i.taskSeComCd).filter(Boolean)));
|
||||
}
|
||||
|
||||
const activeItems = checklistItems.filter(
|
||||
(item) => targetTaskCodes.includes(item.taskSeComCd) && item.bchckUseYn === "Y",
|
||||
);
|
||||
|
||||
for (const item of activeItems) {
|
||||
const taskName =
|
||||
item.taskSeComCd === "SP"
|
||||
? "하수관로"
|
||||
: item.taskSeComCd === "RE"
|
||||
? "재이용수"
|
||||
: "하수처리시설";
|
||||
|
||||
// 1. 적합/부적합 미선택 검증
|
||||
if (!item.selected || !["Y", "N"].includes(item.selected)) {
|
||||
return {
|
||||
isValid: false,
|
||||
errorMessage: `[${taskName}] 체크리스트 '${item.cklstRvwItemNm}' 항목의 적합 여부를 선택해주세요.`,
|
||||
errorItemSn: item.cklstRvwSn,
|
||||
};
|
||||
}
|
||||
// 2. 부적합('N') 시 검토자 검토의견 필수 검증
|
||||
if (item.selected === "N" && (!item.picRvwCn || item.picRvwCn.trim() === "")) {
|
||||
return {
|
||||
isValid: false,
|
||||
errorMessage: `[${taskName}] 체크리스트 '${item.cklstRvwItemNm}' 항목이 '부적합'입니다. 검토자 검토의견을 반드시 입력해주세요.`,
|
||||
errorItemSn: item.cklstRvwSn,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return { isValid: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* ChecklistFormState와 CklstRvwRsltTreeDto[]를 받아 결재자 브랜치별 체크리스트 검증을 실행하는 헬퍼
|
||||
*/
|
||||
export function validateChecklistFormStateByBranch({
|
||||
rows,
|
||||
formState,
|
||||
reviewStep = "KECO",
|
||||
approverBranchSeCd,
|
||||
docTaskSeComCd,
|
||||
}: {
|
||||
rows: CklstRvwRsltTreeDto[];
|
||||
formState: ChecklistFormState;
|
||||
reviewStep?: ReviewStepCode;
|
||||
approverBranchSeCd: BranchSeCd;
|
||||
docTaskSeComCd: string;
|
||||
}): { isValid: boolean; errorMessage?: string; errorItemSn?: number } {
|
||||
const displayRows = getChecklistDisplayRows(rows);
|
||||
const checklistItems = displayRows.map((row) => {
|
||||
const key = buildChecklistRowKey(row, reviewStep);
|
||||
return {
|
||||
taskSeComCd: row.taskSeComCd,
|
||||
bchckUseYn: row.bchckUseYn,
|
||||
selected: formState.results[key] ?? (row.rvwRsltAnmlyYn as string | undefined),
|
||||
picRvwCn: formState.comments[key] ?? row.picRvwCn,
|
||||
cklstRvwItemNm: row.cklstArtclNm ?? "검토항목",
|
||||
cklstRvwSn: row.cklstRvwSn,
|
||||
};
|
||||
});
|
||||
|
||||
return validateChecklistByBranch(checklistItems, approverBranchSeCd, docTaskSeComCd);
|
||||
}
|
||||
|
||||
|
||||
@@ -98,3 +98,27 @@ export function parseTaskSeComCdFromApi(taskSeComCd?: string | null): string[] {
|
||||
if (!taskSeComCd) return [];
|
||||
return taskSeComCd.split(",").filter(Boolean);
|
||||
}
|
||||
|
||||
/**
|
||||
* 재원업무협의 저장 시 코드가 "SF,SP", "SP,SF" 등의 복수 코드로 분리 저장된 경우,
|
||||
* 전자결재 복합병렬결재(Fork-Join) 화면 및 프로세스 규격에 맞춰 "SF_SP"로 정규화합니다.
|
||||
*/
|
||||
export function normalizeTaskSeComCdForElapr(taskSeComCd?: string | null): string {
|
||||
if (!taskSeComCd) return "";
|
||||
const trimmed = taskSeComCd.trim();
|
||||
if (trimmed === "SF_SP") return "SF_SP";
|
||||
|
||||
const codes = trimmed.split(",").map((c) => c.trim()).filter(Boolean);
|
||||
if (codes.includes("SF") && codes.includes("SP")) {
|
||||
return "SF_SP";
|
||||
}
|
||||
return trimmed;
|
||||
}
|
||||
|
||||
/**
|
||||
* 전자결재 복합병렬결재(Fork-Join) 대상 업무 여부 판단
|
||||
*/
|
||||
export function isForkJoinTask(taskSeComCd?: string | null): boolean {
|
||||
return normalizeTaskSeComCdForElapr(taskSeComCd) === "SF_SP";
|
||||
}
|
||||
|
||||
|
||||
@@ -81,7 +81,7 @@ export function mapDetailToFormData(data: FnrsCnsltnMngDetResponseDto): FnrsCnsl
|
||||
cklstSn: item.cklstSn,
|
||||
cklstArtclSn: item.cklstArtclSn,
|
||||
cklstRvwSn: item.cklstRvwSn,
|
||||
rvwStpComCd: item.rvwStpComCd,
|
||||
rvwStpComCd: item.rvwStpComCd || "LOCAL",
|
||||
selected: mapSelectedValue(item.rvwRsltAnmlyYn),
|
||||
picRvwCn: item.picRvwCn,
|
||||
})) ?? [],
|
||||
@@ -183,6 +183,7 @@ export function buildFormPayload(
|
||||
fnrsSharList: toFnrsSharSaveList(withTotals),
|
||||
cklstResultList: data.cklstResultList.map((item) => ({
|
||||
...item,
|
||||
rvwStpComCd: item.rvwStpComCd || "LOCAL",
|
||||
selected: item.selected ?? undefined,
|
||||
})),
|
||||
esntlAtchFileList: data.esntlAtchFileList,
|
||||
|
||||
@@ -93,6 +93,7 @@ export function buildSupplementReqPayload(
|
||||
data: FnrsCnsltnMngDetResponseDto,
|
||||
payload: SplmntDmndDialogConfirmPayload,
|
||||
checklistFormState: ChecklistFormState,
|
||||
branchSeCd?: string,
|
||||
): FnrsCnsltnApplySaveRequestDto {
|
||||
const existingItems: FnrsCnsltnSplmntDmndItem[] = (data.splmntDmndList ?? []).map((item) =>
|
||||
toSplmntDmndSaveItem(item),
|
||||
@@ -111,6 +112,7 @@ export function buildSupplementReqPayload(
|
||||
return fnrsCnsltnApplySaveSchema.parse({
|
||||
...buildSavePayload(data, checklistFormState, "LOCAL", "SL"),
|
||||
splmntDmndList: [...existingItems, ...newItems],
|
||||
branchSeCd,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -20,11 +20,14 @@ import {
|
||||
ElaprApprovalDialog,
|
||||
type ElaprDmndSaveRequestDto,
|
||||
elaprDmndService,
|
||||
type ElaprDocPrgrsForkJoinPickerConfirmPayload,
|
||||
ElaprDocPrgrsForkJoinPickerDialog,
|
||||
type ElaprDocPrgrsPickerConfirmPayload,
|
||||
ElaprDocPrgrsPickerDialog,
|
||||
type ElaprTmpltPickerConfirmPayload,
|
||||
ElaprTmpltPickerDialog,
|
||||
hasCurrentUserPendingApprovalRequest,
|
||||
useElaprBranchesByDocNo,
|
||||
useElaprDocPrgrsByDocNo,
|
||||
} from "@/entities/elapr";
|
||||
import {
|
||||
@@ -54,7 +57,11 @@ import {
|
||||
getButtonConfigs,
|
||||
needsRoleUser01AtrzResolve,
|
||||
} from "../../lib/button-config";
|
||||
import { computeReviewStepChecklistProgress } from "../../lib/checklist-utils";
|
||||
import type { BranchSeCd } from "@/entities/elapr";
|
||||
import {
|
||||
computeReviewStepChecklistProgress,
|
||||
validateChecklistFormStateByBranch,
|
||||
} from "../../lib/checklist-utils";
|
||||
import {
|
||||
buildFileSplmntReqPayload,
|
||||
buildRvwRsltSplmntReqPayload,
|
||||
@@ -63,6 +70,10 @@ import {
|
||||
buildTechReviewReplyPayload,
|
||||
toSplmntDmndSaveItem,
|
||||
} from "../../lib/save-payload-utils";
|
||||
import {
|
||||
isForkJoinTask,
|
||||
normalizeTaskSeComCdForElapr,
|
||||
} from "../../lib/fnrs-cnsltn-regist-schema";
|
||||
import { type ChecklistFormState } from "../../model/view-types";
|
||||
import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
|
||||
|
||||
@@ -96,6 +107,7 @@ interface FloatingActionButtonsProps {
|
||||
type ActiveDialog =
|
||||
| "elaprTmplt"
|
||||
| "elaprDocPrgrs"
|
||||
| "elaprDocPrgrsForkJoin"
|
||||
| "rjct"
|
||||
| "fileSplmnt"
|
||||
| "elaprApproval"
|
||||
@@ -128,8 +140,13 @@ function FloatingActionButtons({
|
||||
const docNo = data.detDto?.fnrsCnsltnDocNo ?? fnrsCnsltnDocNo;
|
||||
const isRegister = data.detDto?.rgtr === userInfo?.userUnqId;
|
||||
|
||||
const isForkJoin = isForkJoinTask(data.detDto?.taskSeComCd);
|
||||
const normalizedTaskSeComCd = normalizeTaskSeComCdForElapr(data.detDto?.taskSeComCd);
|
||||
|
||||
const needsAtrzResolve = needsRoleUser01AtrzResolve(dtlInstCd, prgrsSttsComCd);
|
||||
const needsElaprPrgrsCheck = needsAtrzResolve && ["TE", "RK"].includes(prgrsSttsComCd);
|
||||
const needsElaprPrgrsCheck =
|
||||
needsAtrzResolve &&
|
||||
(["TE", "RK"].includes(prgrsSttsComCd) || (isForkJoin && prgrsSttsComCd === "SL"));
|
||||
const needsPwrkDraftCheck =
|
||||
dtlInstCd === "ROLE_USER01" && ["SL", "TE", "RK"].includes(prgrsSttsComCd);
|
||||
const needsPwrkForRb = dtlInstCd === "ROLE_USER05" && prgrsSttsComCd === "RB";
|
||||
@@ -140,6 +157,10 @@ function FloatingActionButtons({
|
||||
const { data: elaprDocPrgrsList = [], isLoading: isElaprDocPrgrsLoading } =
|
||||
useElaprDocPrgrsByDocNo(needsElaprPrgrsCheck ? docNo : null);
|
||||
|
||||
const { data: elaprBranchList = [], isLoading: isElaprBranchLoading } = useElaprBranchesByDocNo(
|
||||
isForkJoin && (needsElaprPrgrsCheck || prgrsSttsComCd === "SL") ? docNo : null,
|
||||
);
|
||||
|
||||
const { data: pwrkCnsltnData, isLoading: isPwrkCnsltnLoading } = usePwrkCnsltnMngByUpDocNo(
|
||||
docNo,
|
||||
needsPwrkLookup,
|
||||
@@ -171,55 +192,167 @@ function FloatingActionButtons({
|
||||
draftGenLatest?.pwrkCnsltnDocNo ??
|
||||
costVrfcLatest?.pwrkCnsltnDocNo;
|
||||
|
||||
const isSecondApproval = useMemo(() => {
|
||||
return elaprDocPrgrsList.some((row) => Number(row.elaprCycl) === 2);
|
||||
}, [elaprDocPrgrsList]);
|
||||
|
||||
const elaprPrgrsForPending =
|
||||
prgrsSttsComCd === "RK"
|
||||
isSecondApproval || prgrsSttsComCd === "RK"
|
||||
? elaprDocPrgrsList.filter((row) => Number(row.elaprCycl) === 2)
|
||||
: elaprDocPrgrsList;
|
||||
const hasPendingApprovalRequest = hasCurrentUserPendingApprovalRequest(
|
||||
elaprPrgrsForPending,
|
||||
userInfo?.userUnqId,
|
||||
);
|
||||
const currentUserPrgrsRow = elaprPrgrsForPending.find(
|
||||
(row) => row.aprvrUuid?.toLowerCase() === userInfo?.userUnqId?.toLowerCase(),
|
||||
);
|
||||
const userPendingPrgrs = elaprPrgrsForPending.find(
|
||||
(row) =>
|
||||
row.aprvrUuid?.toLowerCase() === userInfo?.userUnqId?.toLowerCase() &&
|
||||
row.atrzPrgrsSttsComCd === "ATRZ_PRGRS_002",
|
||||
);
|
||||
const userBranchId = userPendingPrgrs?.branchId ?? currentUserPrgrsRow?.branchId;
|
||||
const userBranchSeCd = (userPendingPrgrs?.branchSeCd ?? currentUserPrgrsRow?.branchSeCd) as
|
||||
| "SP"
|
||||
| "SF"
|
||||
| "TOTAL_AGG"
|
||||
| "MAIN"
|
||||
| undefined;
|
||||
const userPendingBranchSeCd = userPendingPrgrs?.branchSeCd ?? userBranchSeCd;
|
||||
const userPendingAtrzSeComCd = userPendingPrgrs?.atrzSeComCd;
|
||||
|
||||
const effectiveAtrzSeComCdList = useMemo(() => {
|
||||
if (isForkJoin && userPendingAtrzSeComCd) {
|
||||
return [userPendingAtrzSeComCd];
|
||||
}
|
||||
if (isForkJoin && currentUserPrgrsRow?.atrzSeComCd) {
|
||||
return [currentUserPrgrsRow.atrzSeComCd];
|
||||
}
|
||||
return atrzSeComCdList;
|
||||
}, [atrzSeComCdList, currentUserPrgrsRow?.atrzSeComCd, isForkJoin, userPendingAtrzSeComCd]);
|
||||
|
||||
const supplementDmndBranch = useMemo(() => {
|
||||
if (!isForkJoin) return undefined;
|
||||
|
||||
// 1순위: 전자결재 브랜치(tb_as_elapr_branch) 테이블에서 상태가 SUPPLEMENT인 부서 직접 확인
|
||||
const splmntBranch = elaprBranchList.find((b) => b.branchSttsCd === "SUPPLEMENT");
|
||||
if (splmntBranch?.branchSeCd && ["SP", "SF"].includes(splmntBranch.branchSeCd)) {
|
||||
return splmntBranch.branchSeCd as "SP" | "SF";
|
||||
}
|
||||
|
||||
// 2순위: 미완료 보완요청 항목의 등록자 UUID 매칭
|
||||
const uncompletedItems = data?.splmntDmndList?.filter((item) => item.cmptnYn !== "Y") ?? [];
|
||||
if (uncompletedItems.length > 0) {
|
||||
for (const splmnt of uncompletedItems) {
|
||||
const matchedPrgrs = elaprDocPrgrsList.find(
|
||||
(p) => p.aprvrUuid?.toLowerCase() === splmnt.rgtr?.toLowerCase(),
|
||||
);
|
||||
if (matchedPrgrs?.branchSeCd && ["SP", "SF"].includes(matchedPrgrs.branchSeCd)) {
|
||||
return matchedPrgrs.branchSeCd as "SP" | "SF";
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}, [data?.splmntDmndList, elaprBranchList, elaprDocPrgrsList, isForkJoin]);
|
||||
|
||||
const userBranchSttsCd = useMemo<string | undefined>(() => {
|
||||
if (!isForkJoin || !userBranchSeCd) return undefined;
|
||||
|
||||
// 1. elaprBranchList API 응답에서 사용자 브랜치 상태 확인
|
||||
// 현재 결재선(2차 차수 등)의 고유 branchId로 우선 매칭하고, 없으면 findLast로 최신 차수 브랜치 매칭
|
||||
const matchedBranch = userBranchId
|
||||
? elaprBranchList.find((b) => b.branchId === userBranchId)
|
||||
: elaprBranchList.findLast((b) => b.branchSeCd === userBranchSeCd);
|
||||
if (matchedBranch?.branchSttsCd) {
|
||||
return matchedBranch.branchSttsCd;
|
||||
}
|
||||
|
||||
// 2. Fallback: 문서 상태가 SL일 때 보완요청 발생 부서(supplementDmndBranch)와 비교
|
||||
if (prgrsSttsComCd === "SL") {
|
||||
if (supplementDmndBranch && userBranchSeCd === supplementDmndBranch) {
|
||||
return "SUPPLEMENT";
|
||||
}
|
||||
const branchRows = elaprPrgrsForPending.filter((row) => row.branchSeCd === userBranchSeCd);
|
||||
const hasUnfinished = branchRows.some(
|
||||
(row) =>
|
||||
row.atrzPrgrsSttsComCd !== "ATRZ_PRGRS_003" && row.atrzPrgrsSttsComCd !== "ATRZ_PRGRS_999",
|
||||
);
|
||||
return hasUnfinished ? "IN_PROGRESS" : "COMPLETED";
|
||||
}
|
||||
|
||||
if (["TE", "RK"].includes(prgrsSttsComCd)) {
|
||||
return "IN_PROGRESS";
|
||||
}
|
||||
if (["TP", "RR"].includes(prgrsSttsComCd)) {
|
||||
return "COMPLETED";
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}, [
|
||||
elaprBranchList,
|
||||
elaprPrgrsForPending,
|
||||
isForkJoin,
|
||||
prgrsSttsComCd,
|
||||
supplementDmndBranch,
|
||||
userBranchId,
|
||||
userBranchSeCd,
|
||||
]);
|
||||
|
||||
const isBranchInProgress =
|
||||
isForkJoin && userBranchSttsCd === "IN_PROGRESS" && dtlInstCd === "ROLE_USER01";
|
||||
|
||||
const viewOnlyPwrkCnsltnDoc =
|
||||
prgrsSttsComCd === "SL" ||
|
||||
(prgrsSttsComCd === "SL" && dtlInstCd !== "ROLE_USER05" && !isBranchInProgress) ||
|
||||
(prgrsSttsComCd === "RB" && dtlInstCd !== "ROLE_USER05") ||
|
||||
(prgrsSttsComCd === "RK" && dtlInstCd === "ROLE_USER03");
|
||||
|
||||
const actionButtons = useMemo(() => {
|
||||
if (needsAtrzResolve && isRvwLoginUserLoading) return [];
|
||||
if (needsElaprPrgrsCheck && isElaprDocPrgrsLoading) return [];
|
||||
if (isForkJoin && isElaprBranchLoading) return [];
|
||||
if (needsPwrkDraftCheck && isPwrkCnsltnLoading) return [];
|
||||
if (needsAiAutoLatest && isAiAutoLatestLoading) return [];
|
||||
return getButtonConfigs(dtlInstCd, prgrsSttsComCd, atrzSeComCdList, {
|
||||
return getButtonConfigs(dtlInstCd, prgrsSttsComCd, effectiveAtrzSeComCdList, {
|
||||
hasPendingApprovalRequest: needsElaprPrgrsCheck ? hasPendingApprovalRequest : undefined,
|
||||
hasCompletedDraft: needsPwrkDraftCheck ? hasCompletedDraft : undefined,
|
||||
canRetryFileVrfc: needsAiAutoLatest ? canRetryFileVrfc : undefined,
|
||||
canRetryDraftGen: needsAiAutoLatest ? canRetryDraftGen : undefined,
|
||||
canRetryCostVrfc: needsAiAutoLatest ? canRetryCostVrfc : undefined,
|
||||
isForkJoin,
|
||||
branchSeCd: userBranchSeCd,
|
||||
branchSttsCd: userBranchSttsCd,
|
||||
isSecondApproval,
|
||||
});
|
||||
}, [
|
||||
atrzSeComCdList,
|
||||
canRetryCostVrfc,
|
||||
canRetryDraftGen,
|
||||
canRetryFileVrfc,
|
||||
dtlInstCd,
|
||||
effectiveAtrzSeComCdList,
|
||||
hasCompletedDraft,
|
||||
hasPendingApprovalRequest,
|
||||
isAiAutoLatestLoading,
|
||||
isElaprBranchLoading,
|
||||
isElaprDocPrgrsLoading,
|
||||
isForkJoin,
|
||||
isPwrkCnsltnLoading,
|
||||
isRvwLoginUserLoading,
|
||||
isSecondApproval,
|
||||
needsAiAutoLatest,
|
||||
needsAtrzResolve,
|
||||
needsElaprPrgrsCheck,
|
||||
needsPwrkDraftCheck,
|
||||
prgrsSttsComCd,
|
||||
userBranchSeCd,
|
||||
userBranchSttsCd,
|
||||
]);
|
||||
|
||||
const canEdit =
|
||||
isRegister && actionButtons.some((button) => button === FNRS_CNSLTN_VIEW_BUTTON_ACTION.strg);
|
||||
const canDmndSplmntInPwrkCnsltnDoc =
|
||||
prgrsSttsComCd === "RK" &&
|
||||
atrzSeComCdList.includes("ATRZ02") &&
|
||||
effectiveAtrzSeComCdList.includes("ATRZ02") &&
|
||||
actionButtons.some((button) => button === FNRS_CNSLTN_VIEW_BUTTON_ACTION.dmndSplmnt);
|
||||
|
||||
function handleGoToList() {
|
||||
@@ -256,6 +389,9 @@ function FloatingActionButtons({
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: fnrsCnsltnKeys.detail(fnrsCnsltnDocNo),
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_BRANCH],
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
let errorMessage = "";
|
||||
@@ -326,6 +462,7 @@ function FloatingActionButtons({
|
||||
docNo,
|
||||
docSeComCd,
|
||||
prgrsSttsComCd: "LE",
|
||||
rgtrUuid: userInfo?.userUnqId,
|
||||
};
|
||||
await executeAction({
|
||||
action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.envoSbmsn,
|
||||
@@ -335,10 +472,14 @@ function FloatingActionButtons({
|
||||
}
|
||||
|
||||
async function handleRjctClick() {
|
||||
if (!(await confirm("해당 신청 건을 반려하시겠습니까?"))) {
|
||||
return;
|
||||
}
|
||||
const payload: DocPrgrsUpdateRequestDto = {
|
||||
docNo,
|
||||
docSeComCd,
|
||||
prgrsSttsComCd: "SV",
|
||||
rgtrUuid: userInfo?.userUnqId,
|
||||
};
|
||||
await executeAction({
|
||||
action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.rjct,
|
||||
@@ -352,6 +493,7 @@ function FloatingActionButtons({
|
||||
docNo,
|
||||
docSeComCd,
|
||||
prgrsSttsComCd: "TA",
|
||||
rgtrUuid: userInfo?.userUnqId,
|
||||
};
|
||||
await executeAction({
|
||||
action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.sncnAprv,
|
||||
@@ -449,6 +591,9 @@ function FloatingActionButtons({
|
||||
elaprDocNo: docNo,
|
||||
dmndTtl: data.detDto?.bizNm ?? "",
|
||||
dmndCn: data.detDto?.bizCn ?? "",
|
||||
taskSeComCd: normalizedTaskSeComCd || undefined,
|
||||
forkJoinSeCd: isForkJoin ? "FORK_JOIN" : "NONE",
|
||||
crntStageNo: isForkJoin ? 2 : 1,
|
||||
elaprCycl: 1,
|
||||
docPrgrsSttsComCd: "AC",
|
||||
elaprPrgrsSttsList: buildElaprPrgrsSttsListFromAplnRows(aplnRows),
|
||||
@@ -463,11 +608,16 @@ function FloatingActionButtons({
|
||||
});
|
||||
}
|
||||
|
||||
async function handleElaprDocPrgrsConfirm({ aplnRows }: ElaprDocPrgrsPickerConfirmPayload) {
|
||||
async function handleElaprDocPrgrsConfirm({
|
||||
aplnRows,
|
||||
}: ElaprDocPrgrsPickerConfirmPayload | ElaprDocPrgrsForkJoinPickerConfirmPayload) {
|
||||
const payload: ElaprDmndSaveRequestDto = {
|
||||
elaprDocNo: docNo,
|
||||
dmndTtl: data.detDto?.bizNm ?? "",
|
||||
dmndCn: data.detDto?.bizCn ?? "",
|
||||
taskSeComCd: normalizedTaskSeComCd || undefined,
|
||||
forkJoinSeCd: isForkJoin ? "FORK_JOIN" : "NONE",
|
||||
crntStageNo: isForkJoin ? 2 : 1,
|
||||
elaprCycl: 2,
|
||||
docPrgrsSttsComCd: "RK",
|
||||
elaprPrgrsSttsList: buildElaprPrgrsSttsListFromAplnRows(aplnRows),
|
||||
@@ -483,11 +633,13 @@ function FloatingActionButtons({
|
||||
}
|
||||
|
||||
async function handleRvwStrgClick() {
|
||||
const targetPrgrsStts =
|
||||
isSecondApproval || prgrsSttsComCd === "RK" ? "RK" : prgrsSttsComCd === "SL" ? "SL" : "TE";
|
||||
const payload = buildTechReviewReplyPayload(
|
||||
data,
|
||||
checklistFormState,
|
||||
"KECO",
|
||||
"TE",
|
||||
targetPrgrsStts,
|
||||
"SV",
|
||||
getReviewOpinionFormData(),
|
||||
opnrNm,
|
||||
@@ -501,26 +653,53 @@ function FloatingActionButtons({
|
||||
techReviewOpinionRef?.current?.resetForm();
|
||||
}
|
||||
|
||||
async function handleRvwCmptnClick() {
|
||||
if (prgrsSttsComCd === "TE") {
|
||||
const { percent } = computeReviewStepChecklistProgress(
|
||||
data.cklstResultList ?? [],
|
||||
checklistFormState.results,
|
||||
"KECO",
|
||||
);
|
||||
function handleApprovalOpen() {
|
||||
const isTeStep = prgrsSttsComCd === "TE" || (isForkJoin && prgrsSttsComCd === "SL");
|
||||
if (isTeStep && (userBranchSeCd || userPendingBranchSeCd)) {
|
||||
const branchCd = (userBranchSeCd as BranchSeCd) || (userPendingBranchSeCd as BranchSeCd) || (isForkJoin ? "SP" : "MAIN");
|
||||
const validation = validateChecklistFormStateByBranch({
|
||||
rows: data.cklstResultList ?? [],
|
||||
formState: checklistFormState,
|
||||
reviewStep: "KECO",
|
||||
approverBranchSeCd: branchCd,
|
||||
docTaskSeComCd: normalizedTaskSeComCd || data.detDto?.taskSeComCd || "MAIN",
|
||||
});
|
||||
|
||||
if (percent !== 100) {
|
||||
alert("모든 체크리스트 항목을 체크해야 검토완료가 가능합니다.");
|
||||
if (!validation.isValid) {
|
||||
alert(validation.errorMessage || "체크리스트 항목을 모두 검토해야 결재가 가능합니다.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
setActiveDialog("elaprApproval");
|
||||
}
|
||||
|
||||
async function handleRvwCmptnClick() {
|
||||
const isTeStep = prgrsSttsComCd === "TE" || (isForkJoin && prgrsSttsComCd === "SL");
|
||||
if (isTeStep) {
|
||||
const branchCd = (userBranchSeCd as BranchSeCd) || (userPendingBranchSeCd as BranchSeCd) || (isForkJoin ? "SP" : "MAIN");
|
||||
const validation = validateChecklistFormStateByBranch({
|
||||
rows: data.cklstResultList ?? [],
|
||||
formState: checklistFormState,
|
||||
reviewStep: "KECO",
|
||||
approverBranchSeCd: branchCd,
|
||||
docTaskSeComCd: normalizedTaskSeComCd || data.detDto?.taskSeComCd || "MAIN",
|
||||
});
|
||||
|
||||
if (!validation.isValid) {
|
||||
alert(validation.errorMessage || "모든 체크리스트 항목을 체크해야 검토완료가 가능합니다.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const targetPrgrsStts =
|
||||
isSecondApproval || prgrsSttsComCd === "RK" ? "RK" : prgrsSttsComCd === "SL" ? "SL" : "TE";
|
||||
|
||||
const payload = {
|
||||
...buildTechReviewReplyPayload(
|
||||
data,
|
||||
checklistFormState,
|
||||
"KECO",
|
||||
prgrsSttsComCd,
|
||||
targetPrgrsStts,
|
||||
"SV",
|
||||
getReviewOpinionFormData(),
|
||||
opnrNm,
|
||||
@@ -539,7 +718,8 @@ function FloatingActionButtons({
|
||||
async function handleDmndSplmntConfirm(payload: SplmntDmndDialogConfirmPayload) {
|
||||
setIsDmndSplmntDialogOpen(false);
|
||||
setActiveDialog(null);
|
||||
const requestPayload = buildSupplementReqPayload(data, payload, checklistFormState);
|
||||
const branchSeCd = userBranchSeCd ?? userPendingBranchSeCd;
|
||||
const requestPayload = buildSupplementReqPayload(data, payload, checklistFormState, branchSeCd);
|
||||
await executeAction({
|
||||
action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.dmndSplmnt,
|
||||
request: requestPayload,
|
||||
@@ -563,7 +743,11 @@ function FloatingActionButtons({
|
||||
|
||||
async function handleRvwRsltSplmntConfirm(selected: PwrkCnsltnCnsltnResponseDto[]) {
|
||||
setActiveDialog(null);
|
||||
const requestPayload = buildRvwRsltSplmntReqPayload(data, selected, checklistFormState);
|
||||
const branchSeCd = userBranchSeCd ?? userPendingBranchSeCd;
|
||||
const requestPayload = {
|
||||
...buildRvwRsltSplmntReqPayload(data, selected, checklistFormState),
|
||||
branchSeCd,
|
||||
};
|
||||
await executeAction({
|
||||
action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.dmndSplmnt,
|
||||
request: requestPayload,
|
||||
@@ -738,7 +922,13 @@ function FloatingActionButtons({
|
||||
!isRagIndexingInProgress(prgrsSttsComCd, data.ragIndexingInfo) && (
|
||||
<Button
|
||||
onClick={() =>
|
||||
setActiveDialog(prgrsSttsComCd === "EV" ? "elaprDocPrgrs" : "elaprTmplt")
|
||||
setActiveDialog(
|
||||
prgrsSttsComCd === "EV"
|
||||
? isForkJoin
|
||||
? "elaprDocPrgrsForkJoin"
|
||||
: "elaprDocPrgrs"
|
||||
: "elaprTmplt",
|
||||
)
|
||||
}
|
||||
disabled={isBusy}
|
||||
>
|
||||
@@ -750,11 +940,16 @@ function FloatingActionButtons({
|
||||
조치 완료
|
||||
</Button>
|
||||
)}
|
||||
{shouldShowButton(FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwRsltInq) && (
|
||||
<Button color="sky" onClick={() => setActiveDialog("rvwRsltInq")} disabled={isBusy}>
|
||||
검토 결과 조회
|
||||
</Button>
|
||||
)}
|
||||
{shouldShowButton(FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwRsltInq) &&
|
||||
!isSecondApproval &&
|
||||
!(
|
||||
isForkJoin &&
|
||||
(userPendingBranchSeCd === "TOTAL_AGG" || userPendingAtrzSeComCd === "ATRZ04")
|
||||
) && (
|
||||
<Button color="sky" onClick={() => setActiveDialog("rvwRsltInq")} disabled={isBusy}>
|
||||
검토 결과 조회
|
||||
</Button>
|
||||
)}
|
||||
{shouldShowButton(FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwStrg) && (
|
||||
<Button onClick={handleRvwStrgClick} disabled={isBusy}>
|
||||
저장
|
||||
@@ -774,16 +969,33 @@ function FloatingActionButtons({
|
||||
보완 요청
|
||||
</Button>
|
||||
)}
|
||||
{shouldShowButton(FNRS_CNSLTN_VIEW_BUTTON_ACTION.atrzAprv) && (
|
||||
<Button onClick={() => setActiveDialog("elaprApproval")} disabled={isBusy}>
|
||||
결재(승인)
|
||||
</Button>
|
||||
)}
|
||||
{shouldShowButton(FNRS_CNSLTN_VIEW_BUTTON_ACTION.atrzRply) && (
|
||||
<Button onClick={() => setActiveDialog("elaprApproval")} disabled={isBusy}>
|
||||
결재(회신)
|
||||
</Button>
|
||||
)}
|
||||
{shouldShowButton(FNRS_CNSLTN_VIEW_BUTTON_ACTION.atrzAprv) &&
|
||||
(!isForkJoin ||
|
||||
(userPendingBranchSeCd === "TOTAL_AGG" && userPendingAtrzSeComCd === "ATRZ04")) && (
|
||||
<Button onClick={handleApprovalOpen} disabled={isBusy}>
|
||||
{isForkJoin ? "결재 (병합)" : "결재(승인)"}
|
||||
</Button>
|
||||
)}
|
||||
{shouldShowButton(FNRS_CNSLTN_VIEW_BUTTON_ACTION.atrzRply) &&
|
||||
(!isForkJoin ||
|
||||
(userPendingBranchSeCd !== "TOTAL_AGG" && userPendingAtrzSeComCd === "ATRZ03") ||
|
||||
(userPendingBranchSeCd === "TOTAL_AGG" && userPendingAtrzSeComCd === "ATRZ99")) && (
|
||||
<Button
|
||||
color={
|
||||
isForkJoin && userPendingBranchSeCd !== "TOTAL_AGG"
|
||||
? "green"
|
||||
: undefined
|
||||
}
|
||||
onClick={handleApprovalOpen}
|
||||
disabled={isBusy}
|
||||
>
|
||||
{isForkJoin
|
||||
? userPendingBranchSeCd === "TOTAL_AGG"
|
||||
? "결재 (환경청에 회신)"
|
||||
: "결재 (병합에 회신)"
|
||||
: "결재(회신)"}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@@ -795,6 +1007,7 @@ function FloatingActionButtons({
|
||||
open={activeDialog === "elaprTmplt"}
|
||||
onClose={() => setActiveDialog(null)}
|
||||
docSeComCd={docSeComCd}
|
||||
taskSeComCd={normalizedTaskSeComCd || undefined}
|
||||
onConfirm={handleElaprTmpltConfirm}
|
||||
/>
|
||||
|
||||
@@ -805,6 +1018,13 @@ function FloatingActionButtons({
|
||||
onConfirm={handleElaprDocPrgrsConfirm}
|
||||
/>
|
||||
|
||||
<ElaprDocPrgrsForkJoinPickerDialog
|
||||
open={activeDialog === "elaprDocPrgrsForkJoin"}
|
||||
elaprDocNo={docNo}
|
||||
onClose={() => setActiveDialog(null)}
|
||||
onConfirm={handleElaprDocPrgrsConfirm}
|
||||
/>
|
||||
|
||||
<SplmntDmndDialog
|
||||
splmntArtclUpCd="SPLMNTARTCL"
|
||||
open={isDmndSplmntDialogOpen}
|
||||
@@ -826,21 +1046,36 @@ function FloatingActionButtons({
|
||||
onOpenChange={(open) => setActiveDialog(open ? "elaprApproval" : null)}
|
||||
elaprDocNo={data.detDto?.fnrsCnsltnDocNo ?? fnrsCnsltnDocNo}
|
||||
currentUserUuid={userInfo?.userUnqId ?? ""}
|
||||
elaprCycl={prgrsSttsComCd === "RK" ? 2 : undefined}
|
||||
elaprCycl={
|
||||
userPendingPrgrs?.elaprCycl != null
|
||||
? Number(userPendingPrgrs.elaprCycl)
|
||||
: isSecondApproval || prgrsSttsComCd === "RK"
|
||||
? 2
|
||||
: 1
|
||||
}
|
||||
taskSeComCd={normalizedTaskSeComCd || undefined}
|
||||
onSuccess={() => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: fnrsCnsltnKeys.detail(fnrsCnsltnDocNo),
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_BRANCH],
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<PwrkCnsltnDocMngDialog
|
||||
open={activeDialog === "pwrkCnsltnDocMng"}
|
||||
fnrsCnsltnDocNo={docNo}
|
||||
atrzSeComCdList={atrzSeComCdList}
|
||||
atrzSeComCdList={effectiveAtrzSeComCdList}
|
||||
prgrsSttsComCd={prgrsSttsComCd}
|
||||
branchSeCd={userBranchSeCd ?? userPendingBranchSeCd}
|
||||
isForkJoin={isForkJoin}
|
||||
userRole={dtlInstCd}
|
||||
supplementDmndBranch={supplementDmndBranch}
|
||||
canSave={
|
||||
(needsElaprPrgrsCheck && !hasPendingApprovalRequest) || viewOnlyPwrkCnsltnDoc
|
||||
(needsElaprPrgrsCheck && !hasPendingApprovalRequest && !isBranchInProgress) ||
|
||||
viewOnlyPwrkCnsltnDoc
|
||||
? false
|
||||
: null
|
||||
}
|
||||
@@ -896,6 +1131,17 @@ async function handleChangePrgrsSttsComCd(
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRejectPrgrsStts(
|
||||
context: ActionHandlerContext<DocPrgrsUpdateRequestDto>,
|
||||
): Promise<void> {
|
||||
try {
|
||||
await fnrsCnsltnMngService.rejectPrgrsStts(context.request);
|
||||
context.onSuccess?.();
|
||||
} catch (error) {
|
||||
context.onError?.(error as Error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTechReview(
|
||||
context: ActionHandlerContext<FnrsCnsltnApplySaveRequestDto>,
|
||||
): Promise<void> {
|
||||
@@ -982,7 +1228,7 @@ const buttonActionHandlers: Record<FnrsCnsltnViewButtonAction, ActionHandler> =
|
||||
aply: handleSaveApply,
|
||||
del: handleDel,
|
||||
envoSbmsn: handleChangePrgrsSttsComCd,
|
||||
rjct: handleChangePrgrsSttsComCd,
|
||||
rjct: handleRejectPrgrsStts,
|
||||
sncnAprv: handleChangePrgrsSttsComCd,
|
||||
rvwRply: handleTechReview,
|
||||
rvwOpnnRply: handleTechReview,
|
||||
|
||||
@@ -33,9 +33,9 @@ import {
|
||||
interface PwrkCnsltnDocEvlDialogProps {
|
||||
open: boolean;
|
||||
pwrkCnsltnDocNo: string;
|
||||
/** 평가 저장 성공 시 호출 (이후 웹기안기 문서 저장이 진행된다) */
|
||||
onSaved: () => void;
|
||||
/** 평가 없이 닫을 때 호출 (웹기안기 문서는 저장되지 않는다) */
|
||||
/** 평가 저장 성공 시 호출 */
|
||||
onSaved?: () => void;
|
||||
/** 평가 없이 닫을 때 호출 */
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@ function PwrkCnsltnDocEvlDialog({
|
||||
try {
|
||||
const payload = buildPwrkCnsltnDocEvlSavePayload(pwrkCnsltnDocNo, values);
|
||||
await saveEvl(payload);
|
||||
onSaved();
|
||||
onSaved?.();
|
||||
} catch (error) {
|
||||
console.error("AI 초안 만족도 평가 등록 실패:", error);
|
||||
alert("AI 초안 만족도 평가 등록에 실패했습니다.");
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -16,12 +16,14 @@ interface PwrkCnsltnDocPjtcoAjmtTableProps {
|
||||
rows: PwrkCnsltnDocPjtcoAjmtMngResponseDto[];
|
||||
isLoading: boolean;
|
||||
isError: boolean;
|
||||
emptyMessage?: string;
|
||||
}
|
||||
|
||||
function PwrkCnsltnDocPjtcoAjmtTable({
|
||||
rows,
|
||||
isLoading,
|
||||
isError,
|
||||
emptyMessage = "금액조정 검토의견이 0건(변동 없음)입니다.",
|
||||
}: PwrkCnsltnDocPjtcoAjmtTableProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
@@ -64,7 +66,7 @@ function PwrkCnsltnDocPjtcoAjmtTable({
|
||||
{rows.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={3} className="py-10 text-center text-muted-foreground">
|
||||
조회된 사업비조정 항목이 없습니다.
|
||||
{emptyMessage}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
|
||||
@@ -39,6 +39,7 @@ import { Button } from "@common/components";
|
||||
import {
|
||||
type FnrsCnsltnRegistFormData,
|
||||
fnrsCnsltnRegistSchema,
|
||||
isForkJoinTask,
|
||||
} from "../lib/fnrs-cnsltn-regist-schema";
|
||||
import {
|
||||
buildFormPayload,
|
||||
@@ -349,7 +350,10 @@ function FnrsFormPage({ mode, initialData, createDefaults }: FnrsFormPageProps)
|
||||
<PwrkCnsltnDocMngDialog
|
||||
open={isPwrkCnsltnDocMngOpen}
|
||||
fnrsCnsltnDocNo={fnrsCnsltnDocNo}
|
||||
canSave
|
||||
isForkJoin={isForkJoinTask(initialData?.detDto?.taskSeComCd)}
|
||||
userRole={userInfo?.dtlInstCd}
|
||||
prgrsSttsComCd={initialData?.detDto?.prgrsSttsComCd ?? undefined}
|
||||
canSave={isSplmntPrgrsStts && userInfo?.dtlInstCd === "ROLE_USER05" ? null : !isSplmntPrgrsStts}
|
||||
onClose={() => setIsPwrkCnsltnDocMngOpen(false)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
import { useMemo, useRef } from "react";
|
||||
|
||||
import { RefreshCw } from "lucide-react";
|
||||
|
||||
import { useUserStore } from "@/shared/lib";
|
||||
import { SectionCollapsibleGroup, SectionCollapsibleToggle, TextShimmer } from "@/shared/ui";
|
||||
import { ElaprDocPrgrsStatus } from "@/entities/elapr";
|
||||
@@ -12,7 +14,7 @@ import {
|
||||
ProgressStatusSection,
|
||||
SupplementDemandSection,
|
||||
} from "@/widgets/pbadms-sprt";
|
||||
import { Skeleton } from "@common/components";
|
||||
import { Button, cn, Skeleton } from "@common/components";
|
||||
|
||||
import {
|
||||
getAiPendingMessage,
|
||||
@@ -20,6 +22,7 @@ import {
|
||||
isRagIndexingInProgress,
|
||||
} from "../lib/ai-pending-utils";
|
||||
import { needsRoleUser01AtrzResolve } from "../lib/button-config";
|
||||
import { normalizeTaskSeComCdForElapr } from "../lib/fnrs-cnsltn-regist-schema";
|
||||
import { getEditableReviewStep } from "../lib/review-step-utils";
|
||||
import { EMPTY_CKLST_RESULT_LIST, useChecklistFormState } from "../lib/use-checklist-form-state";
|
||||
import { PROGRESS_STATUS_COLUMNS } from "../model/columns";
|
||||
@@ -43,7 +46,7 @@ interface FnrsViewPageProps {
|
||||
function FnrsViewPage({ id }: FnrsViewPageProps) {
|
||||
const userInfo = useUserStore((state) => state.userInfo);
|
||||
const techReviewOpinionRef = useRef<TechReviewOpinionSectionHandle>(null);
|
||||
const { data, isLoading, isError } = useFnrsCnsltnMng(id);
|
||||
const { data, isLoading, isError, refetch, isFetching } = useFnrsCnsltnMng(id);
|
||||
const { formState: checklistFormState, setFormState: setChecklistFormState } =
|
||||
useChecklistFormState(data?.cklstResultList ?? EMPTY_CKLST_RESULT_LIST);
|
||||
|
||||
@@ -108,19 +111,33 @@ function FnrsViewPage({ id }: FnrsViewPageProps) {
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<SectionCollapsibleGroup>
|
||||
<div className="sticky top-[6rem] z-30 flex items-center gap-4 bg-container px-4 py-2">
|
||||
<SectionCollapsibleToggle />
|
||||
{showPendingBanner && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="relative flex size-3">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75"></span>
|
||||
<span className="relative inline-flex size-3 rounded-full bg-primary"></span>
|
||||
</span>
|
||||
<TextShimmer active className="text-xl">
|
||||
{pendingMessage}
|
||||
</TextShimmer>
|
||||
</div>
|
||||
)}
|
||||
<div className="sticky top-[6rem] z-30 flex items-center justify-between bg-container px-4 py-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<SectionCollapsibleToggle />
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={() => refetch()}
|
||||
disabled={isFetching}
|
||||
className="flex items-center gap-1.5 h-[2.8rem] px-3 text-[1.2rem] font-normal"
|
||||
title="최신 데이터 새로고침"
|
||||
>
|
||||
<RefreshCw className={cn("size-3.5", isFetching && "animate-spin")} />
|
||||
<span>새로 고침</span>
|
||||
</Button>
|
||||
{showPendingBanner && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="relative flex size-3">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75"></span>
|
||||
<span className="relative inline-flex size-3 rounded-full bg-primary"></span>
|
||||
</span>
|
||||
<TextShimmer active className="text-xl">
|
||||
{pendingMessage}
|
||||
</TextShimmer>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<ProgressStatusSection
|
||||
@@ -130,7 +147,10 @@ function FnrsViewPage({ id }: FnrsViewPageProps) {
|
||||
/>
|
||||
<BasicInfoSection det={detDto} />
|
||||
<ContactInfoSection det={detDto} />
|
||||
<ElaprDocPrgrsStatus elaprDocNo={detDto.fnrsCnsltnDocNo} />
|
||||
<ElaprDocPrgrsStatus
|
||||
elaprDocNo={detDto.fnrsCnsltnDocNo}
|
||||
taskSeComCd={normalizeTaskSeComCdForElapr(detDto.taskSeComCd)}
|
||||
/>
|
||||
<BusinessScaleSection bizSclList={bizSclList} />
|
||||
<BusinessCostSection bizCstList={bizCstList} />
|
||||
<FnrsSharSection fnrsSharList={fnrsSharList} />
|
||||
|
||||
@@ -63,7 +63,7 @@ export function mapDetailToFormData(data: InstlSncnMngDetResponse): InstlSncnReg
|
||||
cklstSn: item.cklstSn,
|
||||
cklstArtclSn: item.cklstArtclSn,
|
||||
cklstRvwSn: item.cklstRvwSn,
|
||||
rvwStpComCd: item.rvwStpComCd,
|
||||
rvwStpComCd: item.rvwStpComCd || "LOCAL",
|
||||
selected: mapSelectedValue(item.rvwRsltAnmlyYn),
|
||||
picRvwCn: item.picRvwCn,
|
||||
})) ?? [],
|
||||
@@ -143,6 +143,7 @@ export function buildFormPayload(
|
||||
bizCstList: data.bizCstList,
|
||||
cklstResultList: data.cklstResultList.map((item) => ({
|
||||
...item,
|
||||
rvwStpComCd: item.rvwStpComCd || "LOCAL",
|
||||
selected: item.selected ?? undefined,
|
||||
})),
|
||||
esntlAtchFileList: data.esntlAtchFileList,
|
||||
|
||||
@@ -221,10 +221,13 @@ function FloatingActionButtons({
|
||||
}
|
||||
|
||||
async function handleRjctClick() {
|
||||
if (!(await confirm("해당 신청 건을 반려하시겠습니까?"))) return;
|
||||
|
||||
const payload: DocPrgrsUpdateRequestDto = {
|
||||
docNo,
|
||||
docSeComCd,
|
||||
prgrsSttsComCd: "SV",
|
||||
rgtrUuid: userInfo?.userUnqId,
|
||||
};
|
||||
await executeAction({
|
||||
action: INSTL_SNCN_VIEW_BUTTON_ACTION.rjct,
|
||||
@@ -516,6 +519,17 @@ async function handleChangePrgrsSttsComCd(
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRejectPrgrsStts(
|
||||
context: ActionHandlerContext<DocPrgrsUpdateRequestDto>,
|
||||
): Promise<void> {
|
||||
try {
|
||||
await instlSncnService.rejectPrgrsStts(context.request);
|
||||
context.onSuccess?.();
|
||||
} catch (error) {
|
||||
context.onError?.(error as Error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTechReview(
|
||||
context: ActionHandlerContext<InstlSncnApplySaveRequestDto>,
|
||||
): Promise<void> {
|
||||
@@ -566,7 +580,7 @@ const buttonActionHandlers: Record<InstlSncnViewButtonAction, ActionHandler> = {
|
||||
aply: handleSaveApply,
|
||||
del: handleDel,
|
||||
instlSncnAncmnt: handleChangePrgrsSttsComCd,
|
||||
rjct: handleChangePrgrsSttsComCd,
|
||||
rjct: handleRejectPrgrsStts,
|
||||
sncnAprv: handleChangePrgrsSttsComCd,
|
||||
rvwRply: handleTechReview,
|
||||
rqstTechRvw: handleChangePrgrsSttsComCd,
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
import { useMemo, useRef } from "react";
|
||||
|
||||
import { RefreshCw } from "lucide-react";
|
||||
|
||||
import { useUserStore } from "@/shared/lib";
|
||||
import { SectionCollapsibleGroup, SectionCollapsibleToggle } from "@/shared/ui";
|
||||
import { ElaprDocPrgrsStatus } from "@/entities/elapr";
|
||||
@@ -12,7 +14,7 @@ import {
|
||||
ProgressStatusSection,
|
||||
SupplementDemandSection,
|
||||
} from "@/widgets/pbadms-sprt";
|
||||
import { Skeleton } from "@common/components";
|
||||
import { Button, cn, Skeleton } from "@common/components";
|
||||
|
||||
import { needsRoleUser01AtrzResolve } from "../lib/button-config";
|
||||
import { getEditableReviewStep } from "../lib/review-step-utils";
|
||||
@@ -36,7 +38,7 @@ interface InstlViewPageProps {
|
||||
function InstlViewPage({ id }: InstlViewPageProps) {
|
||||
const userInfo = useUserStore((state) => state.userInfo);
|
||||
const techReviewOpinionRef = useRef<TechReviewOpinionSectionHandle>(null);
|
||||
const { data, isLoading, isError } = useInstlSncnDetail(id);
|
||||
const { data, isLoading, isError, refetch, isFetching } = useInstlSncnDetail(id);
|
||||
const { formState: checklistFormState } = useChecklistFormState(
|
||||
data?.cklstResultList ?? EMPTY_CKLST_RESULT_LIST,
|
||||
);
|
||||
@@ -94,8 +96,20 @@ function InstlViewPage({ id }: InstlViewPageProps) {
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<SectionCollapsibleGroup>
|
||||
<div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
|
||||
<div className="sticky top-[6rem] z-30 flex items-center gap-3 bg-container px-4 py-2">
|
||||
<SectionCollapsibleToggle />
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={() => refetch()}
|
||||
disabled={isFetching}
|
||||
className="flex items-center gap-1.5 h-[2.8rem] px-3 text-[1.2rem] font-normal"
|
||||
title="최신 데이터 새로고침"
|
||||
>
|
||||
<RefreshCw className={cn("size-3.5", isFetching && "animate-spin")} />
|
||||
<span>새로 고침</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<ProgressStatusSection
|
||||
|
||||
@@ -9,6 +9,7 @@ export const RVW_MNPW_BLOCKS: RvwMnpwBlockConfig[] = [
|
||||
{ id: "receiver", title: "접수", atrzSeComCd: "ATRZ01" },
|
||||
{ id: "reviewer", title: "검토", atrzSeComCd: "ATRZ02" },
|
||||
{ id: "approver", title: "승인", atrzSeComCd: "ATRZ03" },
|
||||
{ id: "merger", title: "병합", atrzSeComCd: "ATRZ04" },
|
||||
{ id: "final", title: "최종승인", atrzSeComCd: "ATRZ99" },
|
||||
];
|
||||
|
||||
|
||||
@@ -40,6 +40,7 @@ function RvwMnpwAsmtPanel({ selectedPerson }: RvwMnpwAsmtPanelProps) {
|
||||
<Skeleton className="h-[8rem]" />
|
||||
<Skeleton className="h-[8rem]" />
|
||||
<Skeleton className="h-[8rem]" />
|
||||
<Skeleton className="h-[8rem]" />
|
||||
</div>
|
||||
) : pageQuery.isError ? (
|
||||
<p className="py-8 text-center text-lg text-muted-foreground">
|
||||
|
||||
@@ -201,7 +201,7 @@ export function mapDetailToFormData(data: SewerBscPlanDetResponseDto): SewerBscP
|
||||
cklstSn: item.cklstSn,
|
||||
cklstArtclSn: item.cklstArtclSn,
|
||||
cklstRvwSn: item.cklstRvwSn,
|
||||
rvwStpComCd: item.rvwStpComCd,
|
||||
rvwStpComCd: item.rvwStpComCd || "LOCAL",
|
||||
selected: mapSelectedValue(item.rvwRsltAnmlyYn),
|
||||
picRvwCn: item.picRvwCn,
|
||||
})) ?? [],
|
||||
@@ -251,6 +251,7 @@ export function buildApplyPayload(
|
||||
sewerBscPlanTmplntList: data.sewerBscPlanTmplntList,
|
||||
cklstResultList: data.cklstResultList.map((item) => ({
|
||||
...item,
|
||||
rvwStpComCd: item.rvwStpComCd || "LOCAL",
|
||||
selected: item.selected ?? undefined,
|
||||
})),
|
||||
esntlAtchFileList: data.esntlAtchFileList,
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
import { useMemo, useRef } from "react";
|
||||
|
||||
import { RefreshCw } from "lucide-react";
|
||||
|
||||
import { useUserStore } from "@/shared/lib";
|
||||
import { SectionCollapsibleGroup, SectionCollapsibleToggle } from "@/shared/ui";
|
||||
import { ElaprDocPrgrsStatus } from "@/entities/elapr";
|
||||
@@ -12,7 +14,7 @@ import {
|
||||
ProgressStatusSection,
|
||||
SupplementDemandSection,
|
||||
} from "@/widgets/pbadms-sprt";
|
||||
import { Skeleton } from "@common/components";
|
||||
import { Button, cn, Skeleton } from "@common/components";
|
||||
|
||||
import { needsRoleUser01AtrzResolve } from "../lib/button-config";
|
||||
import { getEditableReviewStep } from "../lib/review-step-utils";
|
||||
@@ -41,7 +43,7 @@ function SewerBscPlanViewPage({ id, propChgCycl }: SewerBscPlanViewPageProps) {
|
||||
const userInfo = useUserStore((state) => state.userInfo);
|
||||
const techReviewOpinionRef = useRef<TechReviewOpinionSectionHandle>(null);
|
||||
const chgCycl = propChgCycl ?? 1;
|
||||
const { data, isLoading, isError } = useSewerBscPlanDetails(id, chgCycl);
|
||||
const { data, isLoading, isError, refetch, isFetching } = useSewerBscPlanDetails(id, chgCycl);
|
||||
const { formState: checklistFormState, setFormState: setChecklistFormState } =
|
||||
useChecklistFormState(data?.cklstResultRows ?? EMPTY_CKLST_RESULT_LIST);
|
||||
|
||||
@@ -102,8 +104,20 @@ function SewerBscPlanViewPage({ id, propChgCycl }: SewerBscPlanViewPageProps) {
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<SectionCollapsibleGroup>
|
||||
<div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
|
||||
<div className="sticky top-[6rem] z-30 flex items-center gap-3 bg-container px-4 py-2">
|
||||
<SectionCollapsibleToggle />
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={() => refetch()}
|
||||
disabled={isFetching}
|
||||
className="flex items-center gap-1.5 h-[2.8rem] px-3 text-[1.2rem] font-normal"
|
||||
title="최신 데이터 새로고침"
|
||||
>
|
||||
<RefreshCw className={cn("size-3.5", isFetching && "animate-spin")} />
|
||||
<span>새로 고침</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<ProgressStatusSection
|
||||
|
||||
@@ -45,6 +45,7 @@ export const ENDPOINT = {
|
||||
ELAPR_APLN: "/as-elapr-service/api/v1/elapr-apln",
|
||||
ELAPR_DMND: "/as-elapr-service/api/v1/elapr-dmnd",
|
||||
ELAPR_PRGRS_STTS: "/as-elapr-service/api/v1/elapr-prgrs-stts",
|
||||
ELAPR_BRANCH: "/as-elapr-service/api/v1/elapr-branch",
|
||||
},
|
||||
CMS_SERVICE: {
|
||||
CODE: "/cms-service/api/v1/code/cache",
|
||||
|
||||
@@ -6,6 +6,8 @@ export interface DocPrgrsUpdateRequestDto {
|
||||
docSeComCd: string;
|
||||
/** 진행상태공통코드 */
|
||||
prgrsSttsComCd: string;
|
||||
/** 작성자 UUID */
|
||||
rgtrUuid?: string;
|
||||
}
|
||||
|
||||
/** 공종 트리와 사업규모(수량) 조합 DTO */
|
||||
@@ -149,9 +151,13 @@ export interface ElaprDocPrgrsClientResponseDto {
|
||||
atrzDt?: string | null;
|
||||
jbpsSeNm?: string;
|
||||
jbgdSeNm?: string;
|
||||
aprvrDeptNm?: string;
|
||||
ognzNm?: string;
|
||||
dcarbYn?: string;
|
||||
elaprCycl?: number;
|
||||
branchId?: string;
|
||||
branchSeCd?: string;
|
||||
branchNm?: string;
|
||||
}
|
||||
|
||||
/** 문서 상태 변경 이력 응답 DTO */
|
||||
|
||||
@@ -1 +1,5 @@
|
||||
export { HangulGiangi, type HangulGiangiProps } from "./ui/hangul-giangi";
|
||||
export { getHwpCtrl } from "./lib/get-hwp-ctrl";
|
||||
export { buildBridgeSrc } from "./lib/build-bridge-src";
|
||||
export { DEFAULT_BRIDGE_URL } from "./lib/hangul-giangi-constants";
|
||||
export type { HwpCtrl } from "./model/hwp-ctrl";
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import { WEBHYP_CTRL_URL } from "@/shared/config";
|
||||
import { DEFAULT_BRIDGE_URL } from "./hangul-giangi-constants";
|
||||
|
||||
/**
|
||||
* 웹한글 기안기 브리지 HTML(/webhwpctrl/index.html)에
|
||||
* 한컴 컨트롤 서버 baseurl 쿼리 파라미터를 추가한 iframe src URL을 생성합니다.
|
||||
*/
|
||||
export function buildBridgeSrc(
|
||||
bridgeUrl: string = DEFAULT_BRIDGE_URL,
|
||||
ctrlBaseUrl: string = WEBHYP_CTRL_URL,
|
||||
): string {
|
||||
const base = ctrlBaseUrl.replace(/\/$/, "");
|
||||
const url = new URL(
|
||||
bridgeUrl,
|
||||
typeof window !== "undefined" ? window.location.origin : "http://localhost",
|
||||
);
|
||||
url.searchParams.set("baseurl", base);
|
||||
if (bridgeUrl.startsWith("/")) return `${url.pathname}${url.search}`;
|
||||
return url.toString();
|
||||
}
|
||||
@@ -59,6 +59,7 @@ export interface HwpCtrl {
|
||||
callbackUserData?: unknown,
|
||||
) => boolean;
|
||||
ShowHorizontalScroll: (show: boolean) => boolean;
|
||||
IsModified?: boolean;
|
||||
}
|
||||
|
||||
export interface HwpCtrlFrameWindow {
|
||||
|
||||
@@ -16,6 +16,7 @@ interface HangulGiangiToolbarProps {
|
||||
onDownload: () => void;
|
||||
onFullscreen: () => void;
|
||||
onDmndSplmnt?: () => void;
|
||||
rightSlot?: React.ReactNode;
|
||||
}
|
||||
|
||||
function HangulGiangiToolbar({
|
||||
@@ -26,11 +27,13 @@ function HangulGiangiToolbar({
|
||||
onDownload,
|
||||
onFullscreen,
|
||||
onDmndSplmnt,
|
||||
rightSlot,
|
||||
}: HangulGiangiToolbarProps) {
|
||||
const openInputId = useId();
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-nowrap items-center gap-2 border-b border-border bg-background p-3">
|
||||
<div className="flex w-full flex-wrap items-center justify-between gap-2 border-b border-border bg-background p-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{WEBHYP_DEV_MODE && (
|
||||
<label
|
||||
htmlFor={openInputId}
|
||||
@@ -87,6 +90,8 @@ function HangulGiangiToolbar({
|
||||
보완요청
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{rightSlot && <div className="flex items-center gap-2">{rightSlot}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { WEBHYP_CTRL_URL } from "@/shared/config";
|
||||
import { cn } from "@common/components";
|
||||
|
||||
import { buildBridgeSrc } from "../lib/build-bridge-src";
|
||||
import { getHwpCtrl } from "../lib/get-hwp-ctrl";
|
||||
import {
|
||||
DEFAULT_BRIDGE_URL,
|
||||
@@ -26,7 +27,9 @@ function HangulGiangi({
|
||||
bridgeUrl = DEFAULT_BRIDGE_URL,
|
||||
ctrlBaseUrl = WEBHYP_CTRL_URL,
|
||||
className,
|
||||
iframeClassName,
|
||||
onReady,
|
||||
rightSlot,
|
||||
}: HangulGiangiProps) {
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
const openedDocumentKeyRef = useRef<string | null>(null);
|
||||
@@ -208,6 +211,7 @@ function HangulGiangi({
|
||||
onDownload={handleDownload}
|
||||
onFullscreen={handleFullscreen}
|
||||
onDmndSplmnt={onDmndSplmnt}
|
||||
rightSlot={rightSlot}
|
||||
/>
|
||||
|
||||
<iframe
|
||||
@@ -216,7 +220,10 @@ function HangulGiangi({
|
||||
name={HWP_CTRL_IFRAME_NAME}
|
||||
title="웹한글 기안기"
|
||||
src={iframeSrc}
|
||||
className="fullscreen:h-screen fullscreen:min-h-0 fullscreen:w-screen h-[64vh] min-h-[40rem] w-full border-0 bg-background"
|
||||
className={cn(
|
||||
"fullscreen:h-screen fullscreen:min-h-0 fullscreen:w-screen w-full border-0 bg-background",
|
||||
iframeClassName ?? "h-[64vh] min-h-[40rem]",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -234,16 +241,6 @@ function resolveHwpCtrl(iframe: HTMLIFrameElement | null, isCtrlReady: boolean):
|
||||
return null;
|
||||
}
|
||||
|
||||
function buildBridgeSrc(bridgeUrl: string, ctrlBaseUrl: string): string {
|
||||
const base = ctrlBaseUrl.replace(/\/$/, "");
|
||||
const url = new URL(
|
||||
bridgeUrl,
|
||||
typeof window !== "undefined" ? window.location.origin : "http://localhost",
|
||||
);
|
||||
url.searchParams.set("baseurl", base);
|
||||
if (bridgeUrl.startsWith("/")) return `${url.pathname}${url.search}`;
|
||||
return url.toString();
|
||||
}
|
||||
|
||||
async function resolveSaveAsDocumentBlob(result: HwpCtrlSaveAsCallbackResult): Promise<Blob> {
|
||||
const downloadCandidate = result.downloadUrl ?? result.path;
|
||||
@@ -323,7 +320,9 @@ interface HangulGiangiProps {
|
||||
bridgeUrl?: string;
|
||||
ctrlBaseUrl?: string;
|
||||
className?: string;
|
||||
iframeClassName?: string;
|
||||
onReady?: () => void;
|
||||
rightSlot?: React.ReactNode;
|
||||
}
|
||||
|
||||
export { HangulGiangi };
|
||||
|
||||
@@ -16,6 +16,7 @@ export { buildCnstpScaleItems, recalculateBzScaleTotals } from "./lib/business-s
|
||||
export { canEditPbadmsDoc, type CanEditPbadmsDocParams } from "./lib/can-edit-pbadms-doc";
|
||||
export {
|
||||
buildChecklistTabs,
|
||||
isBranchChecklistComplete,
|
||||
isFormChecklistComplete,
|
||||
normalizeTaskSeComCdArray,
|
||||
syncCklstResultListFromTree,
|
||||
|
||||
@@ -118,16 +118,19 @@ export function syncCklstResultListFromTree(
|
||||
|
||||
const next = orderedSelectable.map((node) => {
|
||||
const existing = prevByRvwSn.get(node.cklstRvwSn);
|
||||
return (
|
||||
existing ?? {
|
||||
cklstSn: node.cklstSn,
|
||||
cklstArtclSn: node.cklstArtclSn,
|
||||
cklstRvwSn: node.cklstRvwSn,
|
||||
rvwStpComCd: "LOCAL",
|
||||
selected: null,
|
||||
picRvwCn: null,
|
||||
}
|
||||
);
|
||||
return existing
|
||||
? {
|
||||
...existing,
|
||||
rvwStpComCd: existing.rvwStpComCd || "LOCAL",
|
||||
}
|
||||
: {
|
||||
cklstSn: node.cklstSn,
|
||||
cklstArtclSn: node.cklstArtclSn,
|
||||
cklstRvwSn: node.cklstRvwSn,
|
||||
rvwStpComCd: "LOCAL",
|
||||
selected: null,
|
||||
picRvwCn: null,
|
||||
};
|
||||
});
|
||||
|
||||
if (isSameCklstResultList(prev, next)) return prev;
|
||||
@@ -138,3 +141,32 @@ export function isFormChecklistComplete(cklstResultList: CklstResultListItem[]):
|
||||
if (cklstResultList.length === 0) return true;
|
||||
return cklstResultList.every((item) => item.selected === "Y" || item.selected === "N");
|
||||
}
|
||||
|
||||
/**
|
||||
* 결재자 브랜치별 체크리스트 완료 여부 검증 (병렬 결재 지원)
|
||||
* - branchSeCd가 주어지면 해당 브랜치의 항목만 필수 검증 (SP 또는 SF)
|
||||
* - branchSeCd가 없거나 TOTAL_AGG, MAIN 등인 경우 전체 항목 검증
|
||||
*/
|
||||
export function isBranchChecklistComplete(
|
||||
cklstResultList: CklstResultListItem[],
|
||||
cklstTree: CklstTreeNode[],
|
||||
branchSeCd?: string | null,
|
||||
): boolean {
|
||||
if (cklstResultList.length === 0) return true;
|
||||
if (!branchSeCd || branchSeCd === "TOTAL_AGG" || branchSeCd === "MAIN") {
|
||||
return isFormChecklistComplete(cklstResultList);
|
||||
}
|
||||
|
||||
const targetRvwSns = new Set(
|
||||
cklstTree
|
||||
.filter((node) => node.taskSeComCd === branchSeCd && node.bchckUseYn === "Y")
|
||||
.map((node) => node.cklstRvwSn),
|
||||
);
|
||||
|
||||
if (targetRvwSns.size === 0) return true;
|
||||
|
||||
return cklstResultList
|
||||
.filter((item) => targetRvwSns.has(item.cklstRvwSn))
|
||||
.every((item) => item.selected === "Y" || item.selected === "N");
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,551 @@
|
||||
# AS(디지털 행정지원) 모듈 아키텍처, UI 구조 및 화면 데이터 흐름 분석 보고서
|
||||
|
||||
## 1. 개요 (Overview)
|
||||
|
||||
본 문서는 **디지털 행정지원 시스템(Administrative Support System, 이하 AS 모듈)** 프론트엔드 애플리케이션([`apps/as`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as))의 기술 스펙, UI 구조, 컴포넌트 아키텍처 및 화면 데이터 흐름을 상세히 분석하여 정리한 기술 명세서입니다.
|
||||
|
||||
AS 모듈은 하수도 기본계획, 재원협의, 설치인가, 설계자문 등 공공 행정 업무의 신청·접수·검토·보완·결재 절차를 전자화하고, 대시보드 및 각종 기준 정보(코드, 체크리스트, 필수 첨부파일 등)를 체계적으로 관리하는 핵심 업무 포털입니다.
|
||||
|
||||
---
|
||||
|
||||
## 2. 프로그램 기술 스펙 (Technology Stack & Specifications)
|
||||
|
||||
### 2.1 코어 런타임 및 프레임워크
|
||||
|
||||
| 구분 | 기술 / 라이브러리 | 버전 | 주요 역할 및 용도 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **Framework** | **Next.js** | `15.5.18` | App Router 기반 React 메타 프레임워크, SSR/CSR 하이브리드 지원, Standalone 빌드 배포 |
|
||||
| **Core UI** | **React / React DOM** | `19.x` (`next` 내장) | 컴포넌트 기반 UI 렌더링 엔진 |
|
||||
| **Language** | **TypeScript** | `^5.7.2` | 정적 타입 검사, DTO/인터페이스 정의 및 무결성 보장 |
|
||||
| **Architecture** | **Feature-Sliced Design (FSD)** | `v2.1` | 계층형 프론트엔드 아키텍처(App, Pages, Widgets, Features, Entities, Shared) |
|
||||
| **Architecture Lint** | **Steiger** | `^0.5.11` | FSD 아키텍처 규칙(레이어 간 Import 의존성 방향, Public API 준수 여부) 정적 검사 |
|
||||
|
||||
### 2.2 상태 관리 및 데이터 통신
|
||||
|
||||
| 구분 | 기술 / 라이브러리 | 버전 | 주요 역할 및 용도 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **Server State** | **@tanstack/react-query** | `^5.75.5` | 서버 데이터 페칭, 캐싱, 동기화, 자동 무효화(`invalidateQueries`), 쿼리 키 기반 상태 관리 |
|
||||
| **DevTools** | **@tanstack/react-query-devtools** | `^5.75.5` | React Query 상태 디버깅 및 캐시 모니터링 |
|
||||
| **Client State** | **Zustand** | (내장 / 공유) | 사용자 프로필(`user-store`), 메뉴/권한(`menu-store`), 공통 Alert(`alert-store`) 전역 클라이언트 상태 |
|
||||
| **HTTP Client** | **Axios** | `^1.8.1` | REST API 클라이언트, 요청 헤더 주입(토큰, 사용자ID, 기기ID), 401 응답 인터셉터 |
|
||||
| **File Transfer** | **tus-js-client** | `^4.3.1` | TUS 프로토콜 기반 대용량 첨부파일 청크 업로드 및 이어올리기 지원 |
|
||||
| **Cookie Mgt** | **js-cookie** | `^3.0.5` | 브라우저 쿠키(인증 토큰, 사용자 ID, 사이트 ID, 메뉴 코드 등) 제어 |
|
||||
|
||||
### 2.3 폼 관리 및 유효성 검증
|
||||
|
||||
| 구분 | 기술 / 라이브러리 | 버전 | 주요 역할 및 용도 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **Form Engine** | **react-hook-form** | `^7.54.2` | 비제어 컴포넌트 기반 고성능 폼 상태 관리 (`FormProvider`, `useFormContext`) |
|
||||
| **Schema Validation** | **zod** | `^3.24.2` | 선언형 스키마 정의 및 데이터 타입 런타임 유효성 검증 |
|
||||
| **Form Resolver** | **@hookform/resolvers** | `^4.1.3` | React Hook Form과 Zod 스키마의 바인딩 어댑터 |
|
||||
| **Form DevTools** | **@hookform/devtools** | `^4.4.0` | 폼 상태 및 에러 추적 디버깅 도구 |
|
||||
|
||||
### 2.4 데이터 테이블 및 UI 인터랙션
|
||||
|
||||
| 구분 | 기술 / 라이브러리 | 버전 | 주요 역할 및 용도 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **Data Grid** | **@tanstack/react-table** | `^8.21.2` | 헤드리스 데이터 테이블, 서버 사이드 페이징/정렬, 컬럼 가상화 기반 |
|
||||
| **Drag & Drop** | **@dnd-kit/core**, **@dnd-kit/sortable** | `^6.3.1` / `^10.0.0` | 전자결재 결재선 지정 시 결재자 순서 변경 드래그 앤 드롭 |
|
||||
| **UI Primitive** | **@radix-ui/react-tooltip** | `^1.2.8` | 웹 접근성을 준수하는 툴팁 컴포넌트 |
|
||||
| **Icons** | **lucide-react** | `^0.474.0` | 현대적이고 통일된 SVG 벡터 아이콘 세트 |
|
||||
| **Styling** | **Tailwind CSS** + **CVA** | `^3.4.14` / `^0.7.1` | 유틸리티 퍼스트 CSS 프레임워크 및 조건부 클래스 조합(`class-variance-authority`) |
|
||||
| **Date Library** | **dayjs** | `^1.11.13` | 날짜/시간 포맷팅, 상대 시간 계산 |
|
||||
| **Mock / Utilities** | **@faker-js/faker**, **@frontend-opensource/use-react-hooks** | `^9.9.0` / `^1.1.4` | 테스트 목업 데이터 생성 및 전역 Confirm 대화상자 Provider |
|
||||
|
||||
### 2.5 모노레포 내부 패키지 연동 (`packages/common`)
|
||||
|
||||
AS 모듈은 사내 공통 패키지 저장소와 긴밀하게 연계되어 있습니다:
|
||||
- **`@common/auth`**: 통합 인증 규격(`AuthService`, `AuthConfig`), 토큰 수명 주기 계산(`getRemainingMs`), 디바이스 식별자 관리(`getOrCreateDeviceId`).
|
||||
- **`@common/network`**: 공통 Axios 싱글톤 클라이언트([`Client.getInstance()`](file:///Users/changwng/workspace.ona/front/frontend_as/packages/common/network/client.ts)), 공통 인터셉터([`errorInterceptor`](file:///Users/changwng/workspace.ona/front/frontend_as/packages/common/network/error-interceptor.ts)), 401 발생 시 로그인 리다이렉트 처리.
|
||||
- **`@common/components`**: 통합 GNB/LNB 기본 레이아웃([`BaseLayout`](file:///Users/changwng/workspace.ona/front/frontend_as/packages/common/components)), 공통 버튼, 인풋, 실렉트, 다이얼로그, 뱃지 등 UI 디자인 시스템.
|
||||
- **`@common/assets`**: 전사 공통 로고, 이미지 에셋.
|
||||
|
||||
### 2.6 환경 변수 및 설정 (`.env.local`)
|
||||
|
||||
| 환경변수 키 | 값(로컬 기준) | 설명 |
|
||||
| :--- | :--- | :--- |
|
||||
| `NEXT_PUBLIC_PORT` | `3000` | 애플리케이션 기본 포트 |
|
||||
| `NEXT_PUBLIC_PROXY_HOST` | `http://localhost:3003` | 프론트엔드 프록시 엔드포인트 호스트 |
|
||||
| `NEXT_PUBLIC_SITE_ID` | `AS` | 행정지원 시스템 고유 사이트 식별자 |
|
||||
| `SERVER_API_URL` | `http://localhost:8000` | 백엔드 API 게이트웨이 원본 주소 (미들웨어 프록시 대상) |
|
||||
| `NEXT_PUBLIC_DC_SERVICE_API_URL` | `https://apigateway.apps.rsonesoft.com` | 데이터 연계/DC 서비스 엔드포인트 |
|
||||
| `NEXT_PUBLIC_WEBHYP_CTRL_URL` | `http://hwp.onasys.co.kr/webhwpctrl` | 웹한글 기안기(WebHWP) 컨트롤 서버 주소 |
|
||||
| `NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL` | `/auth/login` | 인증 만료 시 리다이렉트될 로그인 경로 |
|
||||
| `NEXT_PUBLIC_TINY_API_KEY` | *(Secret Key)* | 서식 작성용 TinyMCE 웹 에디터 라이선스 키 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 아키텍처 및 UI 구조 (Architecture & UI Structure)
|
||||
|
||||
### 3.1 Next.js App Router와 FSD(v2.1)의 1:1 매핑 구조
|
||||
|
||||
AS 모듈은 **Feature-Sliced Design v2.1**과 Next.js App Router를 결합하여 설계되었습니다:
|
||||
- **`app/` 디렉토리**: 라우팅 진입점, URL 파라미터 매핑, 루트/그룹 레이아웃, 미들웨어 프록시 및 API Route Handler만 담당합니다. 비즈니스 로직이나 UI 마크업을 직접 포함하지 않고 `src/pages`의 컴포넌트를 Re-export합니다.
|
||||
- **`src/` 디렉토리**: FSD 6계층 구조에 따라 엄격히 분리된 실제 애플리케이션 구현체입니다.
|
||||
|
||||
```
|
||||
apps/as/
|
||||
├── app/ # [App Router] 라우팅 엔드포인트
|
||||
│ ├── (auth)/ # 인증 전용 Route Group (독립 레이아웃)
|
||||
│ │ ├── auth/login/page.tsx # -> re-export '@/pages/auth'
|
||||
│ │ └── layout.tsx # 전역 Provider 없는 가벼운 HTML 구조
|
||||
│ ├── (main)/ # 메인 업무 Route Group
|
||||
│ │ ├── (with-base-layout)/ # 공통 GNB/사이드바 포함 레이아웃 그룹
|
||||
│ │ │ ├── dashboard/page.tsx # 대시보드
|
||||
│ │ │ ├── sewer-bsc-plan/ # 하수도기본계획 (목록/등록/상세/수정)
|
||||
│ │ │ ├── fnrs-cnsltn/ # 재원협의 (목록/등록/상세/수정)
|
||||
│ │ │ ├── instl-sncn/ # 설치인가 (목록/등록/상세/수정)
|
||||
│ │ │ ├── design-cnstn/ # 설계자문 (목록/등록/상세/수정)
|
||||
│ │ │ ├── my-pbadms-sprt/ # 나의 행정지원
|
||||
│ │ │ ├── approval-line-management/ # 결재선 관리
|
||||
│ │ │ ├── checklist-management/ # 체크리스트 관리
|
||||
│ │ │ ├── code-management/ # 공통코드 관리
|
||||
│ │ │ ├── esntl-atch-file-mng/ # 필수 첨부파일 관리
|
||||
│ │ │ ├── rvw-mnpw-mng/ # 검토인력 관리
|
||||
│ │ │ ├── nti-hstry/ # 알림톡 이력
|
||||
│ │ │ ├── ntitlk-sndng/ # 알림톡 발송
|
||||
│ │ │ └── layout.tsx # BaseLayoutWrapper 적용
|
||||
│ │ └── layout.tsx # Providers(Query, Zustand, Auth, Menu) 적용
|
||||
│ ├── api/ # Next.js Route Handlers
|
||||
│ │ ├── auth/logout/route.ts # HttpOnly 쿠키 삭제 로그아웃
|
||||
│ │ └── proxy/[...url]/route.ts # 로그인 & Refresh 토큰 교환 BFF 프록시
|
||||
│ └── middleware.ts # 백엔드 API 및 TUS 업로드 리라이트 프록시
|
||||
│
|
||||
└── src/ # [FSD 아키텍처 코어]
|
||||
├── app/ # 1. App Layer (전역 설정, Provider, Layout)
|
||||
│ ├── layouts/base-layout.tsx # BaseLayoutWrapper (공통 UI Frame)
|
||||
│ ├── providers/index.tsx # QueryClient, Store, Auth, Menu, Alert 통합
|
||||
│ └── styles/globals.css # 글로벌 스타일시트
|
||||
├── pages/ # 2. Pages Layer (화면 단위 조립 슬라이스)
|
||||
│ ├── dashboard/ # 대시보드 화면
|
||||
│ ├── sewer-bsc-plan/ # 하수도기본계획 화면군
|
||||
│ ├── fnrs-cnsltn/ # 재원협의 화면군
|
||||
│ ├── instl-sncn/ # 설치인가 화면군
|
||||
│ ├── design-cnstn/ # 설계자문 화면군
|
||||
│ ├── my-pbadms-sprt/ # 나의 행정지원
|
||||
│ ├── approval-line-management/ # 결재선 관리
|
||||
│ ├── checklist-management/ # 체크리스트 관리
|
||||
│ ├── code-management/ # 코드 관리
|
||||
│ ├── esntl-atch-file-mng/ # 필수 첨부파일 관리
|
||||
│ ├── rvw-mnpw-mng/ # 검토인력 관리
|
||||
│ ├── nti-hstry/ # 알림톡 이력
|
||||
│ └── ntitlk-sndng/ # 알림톡 발송
|
||||
├── widgets/ # 3. Widgets Layer (독립 복합 UI 블록)
|
||||
│ ├── pbadms-sprt/ # 행정지원 공통 폼/뷰 섹션 위젯
|
||||
│ ├── hangulgiangi/ # 웹한글 기안기 연동 위젯
|
||||
│ ├── ognz-user-tree/ # 조직도/사용자 선택 트리 위젯
|
||||
│ ├── bns-picker/ # 업무/사업 선택기
|
||||
│ └── cnfm/ # 승인/확인 대화상자
|
||||
├── features/ # 4. Features Layer (사용자 인터랙션 기능)
|
||||
├── entities/ # 5. Entities Layer (비즈니스 도메인 모델/API/상태)
|
||||
│ ├── sewer-bsc-plan/ # 하수도기본계획 엔티티
|
||||
│ ├── fnrs-cnsltn/ # 재원협의 엔티티
|
||||
│ ├── instl-sncn/ # 설치인가 엔티티
|
||||
│ ├── design-cnstn/ # 설계자문 엔티티
|
||||
│ ├── elapr/ # 전자결재 엔티티
|
||||
│ ├── auth/ # 인증 및 토큰 관리 엔티티
|
||||
│ ├── menu/ # 메뉴 및 권한 엔티티
|
||||
│ ├── cklst/ # 체크리스트 엔티티
|
||||
│ ├── esntl/ # 필수 첨부파일 엔티티
|
||||
│ ├── tus/ # TUS 업로드 엔티티
|
||||
│ └── ... # 기타 31개 도메인 엔티티
|
||||
└── shared/ # 6. Shared Layer (공용 기반 인프라)
|
||||
├── api/client.ts # Axios 기반 API 클라이언트
|
||||
├── config/ # 엔드포인트 및 환경설정
|
||||
├── lib/ # 훅, 테이블/쿼리 유틸리티
|
||||
├── model/ # 전역 타입 및 공통 모델
|
||||
├── providers/store-provider.tsx # Zustand Context Provider
|
||||
├── store/ # Zustand Stores (User, Menu, Alert)
|
||||
└── ui/ # 다이얼로그, 필드, 아코디언 등 UI 컴포넌트
|
||||
```
|
||||
|
||||
### 3.2 레이아웃 계층 구조
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A["브라우저 요청"] --> B{"경로 구분"}
|
||||
|
||||
B -->|"/auth/login"| C["app/(auth)/layout.tsx"]
|
||||
C --> C1["순수 HTML + Body (globals.css만 로드)"]
|
||||
C1 --> C2["LoginPage (로그인 폼)"]
|
||||
|
||||
B -->|"업무 화면들"| D["app/(main)/layout.tsx"]
|
||||
D --> D1["RootLayout (HTML data-theme 설정)"]
|
||||
D1 --> D2["Providers (QueryClient, Store, Confirm)"]
|
||||
D2 --> D3["AuthWrapper (세션 검증 & Silent Refresh)"]
|
||||
D3 --> D4["MenuWrapper (URL 매칭 & 조회 권한 체크)"]
|
||||
|
||||
D4 --> E["app/(main)/(with-base-layout)/layout.tsx"]
|
||||
E --> E1["BaseLayoutWrapper"]
|
||||
E1 --> E2["@common/components BaseLayout (GNB, LNB, Footer)"]
|
||||
E2 --> E3["PageLayout (공통 패딩 및 레이아웃 컨테이너)"]
|
||||
E3 --> E4["각 도메인 Page 컴포넌트"]
|
||||
```
|
||||
|
||||
1. **인증 전용 레이아웃 (`(auth)`)**:
|
||||
- GNB나 복잡한 프로바이더 없이 최소한의 스타일만 로드하여 초기 구동 속도를 확보하고, 비로그인 상태의 화면을 렌더링합니다.
|
||||
2. **메인 루트 레이아웃 (`(main)`)**:
|
||||
- 쿠키 `site-theme-key`를 서버에서 읽어 `html data-theme`을 설정합니다.
|
||||
- 전역 프로바이더([`Providers`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/app/providers/index.tsx))를 주입합니다.
|
||||
- [`AuthWrapper`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/entities/auth/lib/auth-wrapper.tsx): 로그인 여부 확인, 사용자 정보(`userInfo`) 초기화, 주기적 백그라운드 Silent Refresh 타이머 가동.
|
||||
- [`MenuWrapper`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/entities/menu/lib/menu-wrapper.tsx): 현재 접속 URL에 해당하는 메뉴 코드 및 권한(`inqAuthrtYn`) 검사.
|
||||
3. **공통 프레임 레이아웃 (`(with-base-layout)`)**:
|
||||
- 사내 공통 패키지의 [`BaseLayout`](file:///Users/changwng/workspace.ona/front/frontend_as/packages/common/components)을 래핑하여 표준 헤더, 사이드바, 푸터를 제공합니다.
|
||||
- 메뉴 클릭 시 메뉴 상태 저장(`setCurrentMenuInfo`) 및 라우팅을 처리합니다.
|
||||
|
||||
---
|
||||
|
||||
## 4. 전체 화면 라우트 맵 및 도메인 화면 분석
|
||||
|
||||
| 라우트 경로 | 매핑된 Page 컴포넌트 | 주요 역할 및 기능 | 핵심 연계 엔티티 / 위젯 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `/auth/login` | [`LoginPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/auth) | 시스템 로그인 화면 (ID/PW 인증, 디바이스 ID 전송) | `entities/auth`, `/api/proxy` |
|
||||
| `/dashboard` | [`DashboardPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/dashboard/ui/dashboard-page.tsx) | 메인 포털 대시보드 (전국 유역별 진행 현황 지도, 상태별 건수 카드, 알림/통보 목록, 공지사항) | `entities/dashboard`, `NationalAsMap` |
|
||||
| `/sewer-bsc-plan` | [`SewerBscPlanListPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-list-page.tsx) | 하수도 기본계획 목록 조회 및 신규 신청 다이얼로그 호출 | `entities/sewer-bsc-plan`, `useDataTable` |
|
||||
| `/sewer-bsc-plan/regist` | [`SewerBscPlanRegistPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-regist-page.tsx) | 하수도 기본계획 신규 신청 등록 폼 | `widgets/pbadms-sprt`, `useTus`, Zod |
|
||||
| `/sewer-bsc-plan/[id]` | [`SewerBscPlanViewPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-view-page.tsx) | 하수도 기본계획 상세 조회, 검토 이력, 보완요구 처리 | `SewerBscPlanDetailGate`, `HangulGiangi` |
|
||||
| `/sewer-bsc-plan/[id]/edit` | [`SewerBscPlanEditPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-edit-page.tsx) | 하수도 기본계획 수정 폼 (기존 데이터 프리필) | `widgets/pbadms-sprt`, `useTus` |
|
||||
| `/fnrs-cnsltn` | [`FnrsListPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-list-page.tsx) | 재원협의 목록 조회 및 신규 신청 | `entities/fnrs-cnsltn`, `useDataTable` |
|
||||
| `/fnrs-cnsltn/regist` | [`FnrsRegistPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-regist-page.tsx) | 재원협의 신규 등록 폼 (사업비/재원분담 매트릭스) | `widgets/pbadms-sprt`, `FnrsSharFormSection` |
|
||||
| `/fnrs-cnsltn/[id]` | [`FnrsViewPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx) | 재원협의 상세 조회 및 결재/검토 | `FnrsDetailGate`, `widgets/pbadms-sprt` |
|
||||
| `/fnrs-cnsltn/[id]/edit` | [`FnrsEditPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-edit-page.tsx) | 재원협의 수정 폼 | `widgets/pbadms-sprt`, Zod |
|
||||
| `/instl-sncn` | [`InstlListPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/instl-sncn/ui/instl-list-page.tsx) | 설치인가 목록 조회 및 신청 | `entities/instl-sncn`, `useDataTable` |
|
||||
| `/instl-sncn/regist` | [`InstlRegistPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/instl-sncn/ui/instl-regist-page.tsx) | 설치인가 등록 폼 (사업비/시설규모/체크리스트) | `widgets/pbadms-sprt`, Zod |
|
||||
| `/instl-sncn/[id]` | [`InstlViewPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx) | 설치인가 상세 조회 및 보완 처리 | `InstlDetailGate`, `widgets/pbadms-sprt` |
|
||||
| `/instl-sncn/[id]/edit` | [`InstlEditPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/instl-sncn/ui/instl-edit-page.tsx) | 설치인가 수정 폼 | `widgets/pbadms-sprt`, Zod |
|
||||
| `/design-cnstn` | [`DesignListPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/design-cnstn/ui/design-list-page.tsx) | 설계자문 목록 조회 | `entities/design-cnstn`, `useDataTable` |
|
||||
| `/design-cnstn/regist` | [`DesignRegistPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/design-cnstn/ui/design-regist-page.tsx) | 설계자문 등록 폼 | `widgets/pbadms-sprt`, Zod |
|
||||
| `/design-cnstn/[id]` | [`DesignViewPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/design-cnstn/ui/design-view-page.tsx) | 설계자문 상세 및 자문의견 조회 | `DesignDetailGate`, `widgets/pbadms-sprt` |
|
||||
| `/design-cnstn/[id]/edit` | [`DesignEditPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/design-cnstn/ui/design-edit-page.tsx) | 설계자문 수정 폼 | `widgets/pbadms-sprt`, Zod |
|
||||
| `/my-pbadms-sprt` | [`MyPbadmsSprtListPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/my-pbadms-sprt/ui/my-pbadms-sprt-list-page.tsx) | 나의 행정지원 (로그인 사용자가 제출/담당한 전체 문서 통합 조회) | `entities/sewer-bsc-plan`, `useDataTable` |
|
||||
| `/approval-line-management` | [`ApprovalLineManagementPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx) | 전자결재 템플릿 관리 및 결재선 드래그 앤 드롭 설정 | `entities/elapr`, `@dnd-kit/core` |
|
||||
| `/checklist-management` | [`ChecklistManagementPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/checklist-management/ui/checklist-management-page.tsx) | 업무별 체크리스트 템플릿, 점검 항목 및 검토항목 관리 | `entities/cklst`, Tab View |
|
||||
| `/code-management` | [`CodeManagementPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/code-management/ui/code-management-page.tsx) | 기준 코드 관리 (회계구분, 공종구분, 재원분담구분 코드 트리) | `entities/code`, `entities/acntg`, `entities/cnstp` |
|
||||
| `/esntl-atch-file-mng` | [`EsntlAtchFileMngPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-mng-page.tsx) | 업무별 필수 첨부파일 마스터 관리 | `entities/esntl`, Dialog Form |
|
||||
| `/rvw-mnpw-mng` | [`RvwMnpwMngPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/rvw-mnpw-mng) | 검토 인력 배정 및 관리 | `entities/rvw-mnpw` |
|
||||
| `/nti-hstry` | [`NtiHstryPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/nti-hstry) | 알림톡 및 시스템 통보 발송 이력 조회 | `entities/noti`, `entities/ntftalk` |
|
||||
| `/ntitlk-sndng` | [`NtitlkSndngPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/ntitlk-sndng) | 알림톡 즉시/예약 발송 화면 | `entities/ntftalk`, 템플릿 바인딩 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 공통 인프라 및 서브시스템 구조
|
||||
|
||||
### 5.1 인증 및 세션 수명 주기 (BFF + 쿠키 하이브리드 패턴)
|
||||
|
||||
AS 시스템은 토큰 탈취 방지와 유연한 백엔드 통신을 위해 **BFF(Backend For Frontend)와 브라우저 쿠키를 결합한 하이브리드 세션 관리**를 채택했습니다:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
actor User as 사용자
|
||||
participant Client as 브라우저 (AuthService)
|
||||
participant RouteHandler as Next.js API (/api/proxy)
|
||||
participant Backend as 백엔드 (USER_SERVICE)
|
||||
participant Storage as 브라우저 Cookie / Store
|
||||
|
||||
User->>Client: ID / Password 로그인 요청
|
||||
Client->>RouteHandler: POST /api/proxy/user-service/login (body: credentials, headers: X-Device-Id)
|
||||
RouteHandler->>Backend: POST /user-service/login
|
||||
Backend-->>RouteHandler: 200 OK (Response Headers: access-token, refresh-token, token-id)
|
||||
Note over RouteHandler: refresh-token은 HttpOnly, Strict 쿠키로 Set-Cookie 생성
|
||||
RouteHandler-->>Client: 200 OK (JSON: access-token, token-id)
|
||||
Client->>Storage: document.cookie에 Authorization, token-id 저장
|
||||
Client->>Client: getRemainingMs(access-token)으로 만료시간 계산 후 Silent Refresh 타이머 설정
|
||||
|
||||
opt 세션 만료 1분 전 자동 갱신 (Silent Refresh)
|
||||
Client->>RouteHandler: PUT /api/proxy/user-service/api/v1/users/token/refresh
|
||||
Note over RouteHandler: HttpOnly 쿠키의 refresh-token을 헤더에 주입하여 백엔드 호출
|
||||
RouteHandler->>Backend: PUT /user-service/api/v1/users/token/refresh
|
||||
Backend-->>RouteHandler: 새 access-token 및 refresh-token 발급
|
||||
RouteHandler-->>Client: 새 access-token 반환 & 새 refresh-token 쿠키 갱신
|
||||
Client->>Storage: 새 access-token 쿠키 업데이트 및 다음 타이머 가동
|
||||
end
|
||||
|
||||
opt 로그아웃 (Logout)
|
||||
Client->>RouteHandler: POST /api/auth/logout
|
||||
RouteHandler-->>Client: refresh-token 쿠키 삭제
|
||||
Client->>Storage: Authorization, token-id, Device-Id 쿠키 삭제
|
||||
Client->>Client: window.dispatchEvent("auth:logout") 발생 -> /auth/login 리다이렉트
|
||||
end
|
||||
```
|
||||
|
||||
- **토큰 보관 전략**:
|
||||
- `access-token`: 브라우저 JS가 접근 가능한 `Authorization` 쿠키에 저장되어 일반 Axios API 호출 시 즉시 헤더에 삽입됩니다.
|
||||
- `refresh-token`: XSS 공격으로부터 보호하기 위해 Next.js Route Handler([`/api/proxy/[...url]`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/app/api/proxy/%5B...url%5D/route.ts))에서 `httpOnly: true`, `sameSite: "strict"` 쿠키로만 설정 및 관리됩니다.
|
||||
- **백그라운드 세션 갱신**:
|
||||
- JWT 페이로드의 `exp` 클레임을 파싱하여 만료 전 일정 시간에 자동으로 `silentRefresh()`가 트리거됩니다.
|
||||
- **인터셉터 기반 401 감지**:
|
||||
- 백엔드 통신 중 토큰 만료 또는 인증 실패(`401 UNAUTHORIZED`)가 감지되면 [`errorInterceptor`](file:///Users/changwng/workspace.ona/front/frontend_as/packages/common/network/error-interceptor.ts)가 동작하여 즉시 `/auth/login`으로 강제 이동시킵니다.
|
||||
|
||||
### 5.2 백엔드 프록시 및 미들웨어 라우팅 (`middleware.ts`)
|
||||
|
||||
Next.js 미들웨어([`middleware.ts`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/middleware.ts))는 클라이언트의 모든 API 요청을 백엔드 마이크로서비스로 동적 프록시(Rewrite)합니다:
|
||||
|
||||
1. **`/server/:path*` 프록시**:
|
||||
- `pathname.includes("/dc-service")`인 경우: `DC_SERVICE_API_URL`로 리라이트.
|
||||
- 그 외 일반 API 요청: `SERVER_API_URL`(예: `http://localhost:8000`)로 `/server` 접두사를 제거하여 리라이트.
|
||||
2. **`/attach-service/:path*` 프록시 (TUS 대용량 업로드)**:
|
||||
- `tus-js-client`가 파일 업로드 생성 후 백엔드의 `Location` 헤더로부터 받은 URL로 PATCH 요청을 직접 날릴 때(`/attach-service/api/v1/tus/upload/{id}`), 요청 쿠키의 인증 토큰(`CLAIM_NAME`)과 사용자 ID(`AUTH_USER_ID`)를 Request Headers에 명시적으로 주입하여 백엔드로 안전하게 바이패스합니다.
|
||||
3. **루트 리다이렉트**:
|
||||
- 사용자가 `/` 경로로 인입 시 기본 업무 페이지인 `/dashboard`로 307 리다이렉트 처리합니다.
|
||||
4. **보안 헤더 삽입**:
|
||||
- 모든 프록시 응답에 `Content-Security-Policy: img-src 'self' data: https: blob:;` 헤더를 주입합니다.
|
||||
|
||||
### 5.3 메뉴 동기화 및 페이지 접근 권한 검사 (`MenuWrapper`)
|
||||
|
||||
화면이 변경될 때마다 [`MenuWrapper`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/entities/menu/lib/menu-wrapper.tsx) 컴포넌트가 활성화되어 2단계 권한 검증을 수행합니다:
|
||||
1. **메뉴 매핑**: 백엔드 CMS 서비스(`MenuApi.getMenuRoles(SITE_ID)`)로부터 인가된 전체 메뉴 트리를 가져와 현재 브라우저의 `pathname`과 일치하는 메뉴 항목을 추출하고, 전역 [`useMenuStore`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/shared/lib/use-menu-store.ts)에 저장합니다.
|
||||
2. **페이지 단위 권한 검사**: 쿠키에 기록된 메뉴 코드(`menu-code-key`)를 바탕으로 `MenuAuthorityApi.getPageMenuAuthority`를 호출합니다.
|
||||
3. **접근 통제**: 반환된 권한 객체의 `inqAuthrtYn`(조회 권한 여부)이 `"Y"`가 아닌 경우, 경고 팝업(`"페이지에 대한 조회 권한이 없습니다."`)을 띄우고 루트(`/`)로 강제 이동시킵니다.
|
||||
|
||||
### 5.4 행정지원 공통 업무 위젯 서브시스템 (`widgets/pbadms-sprt`)
|
||||
|
||||
하수도기본계획, 재원협의, 설치인가, 설계자문 등 4대 행정지원 업무는 고유한 서식과 더불어 **공통적인 행정 프로세스 서브시스템**을 공유합니다. 이를 위해 [`src/widgets/pbadms-sprt`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/widgets/pbadms-sprt) 패키지에 핵심 UI 및 비즈니스 로직이 모듈화되어 있습니다:
|
||||
|
||||
```
|
||||
widgets/pbadms-sprt/
|
||||
├── ui/
|
||||
│ ├── attachments-form-section.tsx # 필수 첨부파일 등록 섹션 (TUS 업로드 연동)
|
||||
│ ├── attachments-view-section.tsx # 첨부파일 조회 및 다운로드 뷰 섹션
|
||||
│ ├── business-cost-form-section.tsx # 사업비 매트릭스 입력 및 합계 자동계산 섹션
|
||||
│ ├── business-scale-form-section.tsx# 사업규모/시설용량 입력 섹션
|
||||
│ ├── checklist-form-section.tsx # 업무별 체크리스트 탭 및 점검 항목 입력 섹션
|
||||
│ ├── contact-info-form-section.tsx # 신청자 / 담당자 정보 입력 섹션
|
||||
│ ├── fnrs-shar-form-section.tsx # 재원분담비율/금액 입력 섹션
|
||||
│ ├── pbadms-detail-gate.tsx # 상세 화면 접근/수정 권한 검증 게이트
|
||||
│ ├── pbadms-task-apply-dialog.tsx # 신규 신청 시 업무/행정구역 선택 다이얼로그
|
||||
│ ├── privacy-consent-section.tsx # 개인정보 수집 및 이용 동의 체크 섹션
|
||||
│ ├── progress-status-section.tsx # 진행상태 단계 표시기 (신청-접수-검토-보완-완료)
|
||||
│ ├── splmnt-dmnd-dialog.tsx # 검토자의 보완요구 등록 대화상자
|
||||
│ ├── splmnt-dmnd-form-section.tsx # 신청자의 보완요구 대응 내용 입력 섹션
|
||||
│ └── supplement-demand-section.tsx # 보완요구 내역 조회 섹션
|
||||
└── lib/
|
||||
├── attachments-form-utils.ts # 파일 업로드 키 매핑 및 필수파일 누락 검증
|
||||
├── business-cost-form-utils.ts # 공종별 사업비 총액/소계 재계산 엔진
|
||||
├── business-scale-form-utils.ts # 시설규모 단위 및 합계 재계산
|
||||
├── can-edit-pbadms-doc.ts # 문서 수정 가능 여부 판단 규칙
|
||||
├── checklist-form-utils.ts # 체크리스트 트리와 폼 상태 동기화
|
||||
└── fnrs-shar-form-utils.ts # 사업비 vs 재원분담 총액 일치성 검증 엔진
|
||||
```
|
||||
|
||||
- **정합성 자동 검증 엔진 (`validateFnrsCstBalance`)**:
|
||||
- 행정 문서 작성 시 공종별 사업비 총합계와 국비/지방비/원인자부담금 등 재원분담 합계가 정확히 일치하는지 클라이언트 폼 단에서 실시간 비교 검증하여 오입력을 원천 차단합니다.
|
||||
- **수정 권한 가드 (`canEditPbadmsDoc`)**:
|
||||
- 작성자 본인 여부, 현재 문서의 진행 상태 코드(임시저장 `TM`, 보완요청 `SL` 상태일 때만 수정 허용)를 평가하여 뷰 모드와 편집 모드를 제어합니다.
|
||||
|
||||
### 5.5 TUS 기반 대용량 파일 첨부 서브시스템 (`useTus`)
|
||||
|
||||
대용량 도면, 설계도서, 기본계획 보고서 PDF 등을 안정적으로 업로드하기 위해 TUS 프로토콜을 사용합니다:
|
||||
- **확장자 화이트리스트 검증**: 문서(`.pdf`, `.hwp`, `.hwpx`, `.docx`, `.xlsx`, `.pptx`), 이미지(`.jpg`, `.png`), 압축파일(`.zip`) 등 사전 정의된 파일만 업로드 허용.
|
||||
- **청크 분할 업로드**: 네트워크 불안정 시에도 처음부터 다시 올리지 않고 끊긴 지점부터 이어올리기 수행.
|
||||
- **진행률 피드백**: 파일별 업로드 진행률(`progress`) 및 로딩 상태(`isUploading`)를 실시간 상태값으로 제공하여 프로그레스 바 렌더링.
|
||||
- **메타데이터 바인딩**: 파일 업로드 완료 시 백엔드 첨부파일 식별자(`atflCd`, `atflId`)를 획득하여 폼 필드와 연계.
|
||||
|
||||
### 5.6 웹한글 기안기(WebHWP) 연동 아키텍처 (`widgets/hangulgiangi`)
|
||||
|
||||
행정 기관과의 공문서 및 결재 문서 호환을 위해 웹한글 기안기를 브라우저 내에 통합 지원합니다:
|
||||
- **Iframe 브릿지 통신**: 웹한글 컨트롤은 Next.js가 제공하는 iframe 내에 격리되어 로드되며, `postMessage` 기반의 표준 메시징 프로토콜을 통해 부모 창과 통신합니다.
|
||||
- **SOP(동일 출처 정책) 해결**: [`next.config.ts`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/next.config.ts)의 `rewrites` 설정을 통해 `/webhwpctrl/:path*` 경로를 웹한글 컨트롤 서버(`WEBHYP_CTRL_URL`)로 리라이트 프록시하여 브라우저의 크로스 오리진 제약을 완벽히 우회합니다.
|
||||
- **문서 라이프사이클 관리**:
|
||||
- 원격 첨부파일 다운로드 -> ArrayBuffer/Blob 변환 -> HwpCtrl에 바이트 스트림 로드 -> 웹 기안기에서 편집 -> HwpCtrl에서 Blob 추출 -> TUS 업로드 후 신규 문서 번호 갱신.
|
||||
|
||||
---
|
||||
|
||||
## 6. 화면별 상세 데이터 흐름 (Screen Data Flow)
|
||||
|
||||
### 6.1 목록 조회 및 검색 데이터 흐름 (List Pattern)
|
||||
|
||||
모든 목록 화면(하수도기본계획, 재원협의, 설치인가, 설계자문 등)은 URL 기반 상태 동기화 및 TanStack Query 캐싱 패턴을 일관되게 따릅니다:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
actor User as 사용자
|
||||
participant Page as ListPage
|
||||
participant Hook as useSearchParamsState
|
||||
participant ReactQuery as TanStack Query (usePageQuery)
|
||||
participant Client as Axios Client
|
||||
participant Server as Backend API (/server/...)
|
||||
participant Table as TanStack Table (useDataTable)
|
||||
|
||||
User->>Page: 검색 조건 입력 (시도, 문서명 등) 및 검색 클릭
|
||||
Page->>Hook: setParams({ sidoComCd, sewerBscPlanNm, page: 0 })
|
||||
Hook->>Hook: 브라우저 URL QueryString 업데이트 (뒤로가기/새로고침 지원)
|
||||
Hook-->>Page: 최신 params 상태 반환
|
||||
Page->>ReactQuery: useSewerBscPlanPage(queryParams) 호출
|
||||
|
||||
alt 캐시 존재 및 유효한 경우
|
||||
ReactQuery-->>Page: 캐시된 페이지 데이터 즉시 반환
|
||||
else 캐시 만료 또는 첫 요청
|
||||
ReactQuery->>Client: client.get("/as-service/api/v1/...", { params })
|
||||
Client->>Server: HTTP GET 요청
|
||||
Server-->>Client: 200 OK (PageResponseDto: content, totalElements, totalPages)
|
||||
Client-->>ReactQuery: 데이터 캐싱
|
||||
ReactQuery-->>Page: 최신 데이터 전달
|
||||
end
|
||||
|
||||
Page->>Table: useDataTable({ query, columns, pagination })
|
||||
Table-->>User: 데이터 그리드 및 페이징 컴포넌트 렌더링
|
||||
|
||||
opt 특정 행 클릭
|
||||
User->>Table: Row Click
|
||||
Table->>Page: handleRowClick(row)
|
||||
Page->>Page: withListQs("/sewer-bsc-plan/" + docNo) 호출<br/>(현재 검색조건 쿼리스트링을 유지한 채 상세 페이지로 이동)
|
||||
end
|
||||
```
|
||||
|
||||
- **상태 보존 (`useSearchParamsState`)**: 검색 조건과 페이징 상태가 브라우저 URL 쿼리 파라미터와 양방향 동기화되어 사용자가 상세 화면을 조회한 뒤 브라우저 뒤로가기를 눌러도 이전 검색 목록과 페이지가 그대로 유지됩니다.
|
||||
- **헤드리스 테이블 통합 (`useDataTable`)**: TanStack Table의 `state`, `getCoreRowModel`, `manualPagination`과 React Query의 `isPending`, `isError`, `data`를 바인딩하여 로딩 스켈레톤, 데이터 없음(`NoData`), 페이징네이션을 일관되게 렌더링합니다.
|
||||
|
||||
### 6.2 상세 조회 및 접근 제어 데이터 흐름 (Detail View Pattern)
|
||||
|
||||
상세 화면 진입 시에는 인가 검증과 상세 데이터 로딩이 병렬/순차적으로 처리됩니다:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
actor User as 사용자
|
||||
participant ViewPage as [Domain]ViewPage
|
||||
participant Gate as DetailGate / canEditPbadmsDoc
|
||||
participant ReactQuery as TanStack Query
|
||||
participant Server as Backend API
|
||||
|
||||
User->>ViewPage: /sewer-bsc-plan/[id]?chgCycl=1 접근
|
||||
ViewPage->>ReactQuery: useGetSewerBscPlanDetail(id, chgCycl)
|
||||
ReactQuery->>Server: GET /as-service/api/v1/sewer-bsc-plans/{id}?chgCycl={chgCycl}
|
||||
Server-->>ReactQuery: 200 OK (상세 DTO: 기본정보, 사업비, 체크리스트, 첨부파일, 진행상태)
|
||||
ReactQuery-->>ViewPage: 상세 데이터 전달
|
||||
|
||||
ViewPage->>Gate: PbadmsDetailGate (doc, currentUser) 평가
|
||||
alt 조회 권한 없음
|
||||
Gate-->>User: "문서 열람 권한이 없습니다" 에러 안내 및 목록 이동
|
||||
else 조회 권한 승인
|
||||
Gate-->>ViewPage: 본문 렌더링 허용
|
||||
ViewPage->>ViewPage: 기본정보, 사업비 매트릭스, 첨부파일 목록 렌더링
|
||||
ViewPage->>ViewPage: canEditPbadmsDoc(doc) 평가 -> [수정], [보완요구], [결재신청] 버튼 노출 제어
|
||||
end
|
||||
```
|
||||
|
||||
### 6.3 폼 등록 및 수정 데이터 흐름 (Form Mutation Pattern)
|
||||
|
||||
등록 및 수정 화면에서는 복합 데이터 검증, TUS 파일 비동기 업로드, 트랜잭션 저장이 발생합니다:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
actor User as 사용자
|
||||
participant FormPage as [Domain]FormPage
|
||||
participant RHF as React Hook Form + Zod
|
||||
participant Tus as useTus (TUS 업로더)
|
||||
participant AttachServer as ATTACH_SERVICE
|
||||
participant Mutate as useMutation (Service API)
|
||||
participant QueryClient as QueryClient
|
||||
participant AsServer as AS_SERVICE
|
||||
|
||||
User->>FormPage: 페이지 진입 (create / edit)
|
||||
alt 수정 모드 (Edit)
|
||||
FormPage->>RHF: mapDetailToFormData(initialData)로 폼 기본값 프리필
|
||||
else 등록 모드 (Create)
|
||||
FormPage->>RHF: getCreateDefaultValues(userInfo, createDefaults) 세팅
|
||||
end
|
||||
|
||||
User->>FormPage: 1. 파일 첨부 선택
|
||||
FormPage->>Tus: uploadFileAsync(file)
|
||||
Tus->>AttachServer: TUS 청크 업로드 (PATCH)
|
||||
AttachServer-->>Tus: 업로드 완료 (atflCd, atflId 발급)
|
||||
Tus-->>FormPage: atflCd, atflId 수신
|
||||
FormPage->>RHF: setValue("essentialFiles", ...) 필드에 파일 ID 바인딩
|
||||
|
||||
User->>FormPage: 2. 저장 또는 신청 버튼 클릭
|
||||
FormPage->>RHF: handleSubmit (Zod Schema 검증)
|
||||
RHF->>RHF: zodResolver 검증 수행 (필수값, 자릿수, 포맷)
|
||||
alt 유효성 오류
|
||||
RHF-->>User: 입력 필드별 에러 메시지 표시
|
||||
else 유효성 통과
|
||||
FormPage->>FormPage: assertFnrsCstBalance() (사업비 vs 재원분담 총액 균형 검증)
|
||||
FormPage->>FormPage: isFormChecklistComplete(), isFormEsntlAtchComplete() 검사
|
||||
FormPage->>Mutate: sewerBscPlanService.apply(buildApplyPayload(formData))
|
||||
Mutate->>AsServer: POST/PUT /as-service/api/v1/sewer-bsc-plans/...
|
||||
AsServer-->>Mutate: 200 OK (성공 응답)
|
||||
Mutate->>QueryClient: invalidateQueries({ queryKey: sewerBscPlanKeys.all })
|
||||
QueryClient->>QueryClient: 이전 목록 및 상세 쿼리 캐시 만료 처리
|
||||
Mutate-->>FormPage: 완료 콜백
|
||||
FormPage-->>User: "정상적으로 신청되었습니다" 알림 후 목록으로 라우팅
|
||||
end
|
||||
```
|
||||
|
||||
### 6.4 대시보드 화면 데이터 흐름 (Dashboard Pattern)
|
||||
|
||||
대시보드([`DashboardPage`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/dashboard/ui/dashboard-page.tsx))는 포털 초기 진입 속도를 극대화하기 위해 단일 통합 쿼리([`useGetMainDashboard`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/entities/dashboard))를 통해 화면 전체 데이터를 원샷으로 수신하여 자식 위젯들에 하향식(Props Drilling 최소화)으로 분배합니다:
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A["useGetMainDashboard() 쿼리 호출"] --> B["GET /as-service/api/v1/dashboard/main"]
|
||||
B --> C["DashboardResponseDto"]
|
||||
|
||||
C --> D["data.basinDocPrgrsList"] --> D1["NationalAsMap (전국 4대강 유역별 행정지원 현황 지도 시각화)"]
|
||||
C --> E["data.docPrgrsSttsList"] --> E1["DocPrgrsSttsCards (접수/검토/보완/완료 상태별 카운트 카드)"]
|
||||
C --> F["data.notiList & notiStats"] --> F1["DashboardNotiList (실시간 업무 통보 및 알림톡 발송 현황)"]
|
||||
|
||||
G["독립 쿼리: useGetPosts()"] --> H["GET /board-service/api/v1/posts"]
|
||||
H --> I["DashboardNoticeTable (시스템 공지사항 테이블)"]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 백엔드 마이크로서비스 연계 맵 (Backend Services Integration)
|
||||
|
||||
AS 모듈이 [`ENDPOINT`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/shared/config/api.ts)를 통해 통신하는 백엔드 마이크로서비스들의 상세 연계 정보는 다음과 같습니다:
|
||||
|
||||
```
|
||||
+---------------------------------------------------------------------------------------------------+
|
||||
| Next.js Middleware Proxy Layer |
|
||||
| /server/* ==> SERVER_API_URL | /attach-service/* ==> SERVER_API_URL | /cms/* ==> SUB_DOMAIN |
|
||||
+---------------------------------------------------------------------------------------------------+
|
||||
| | | | |
|
||||
v v v v v
|
||||
[ AS_SERVICE ] [ ATTACH_SERVICE ] [ USER_SERVICE ] [ ELAPR_SERVICE ] [ CMS_SERVICE ]
|
||||
- 하수도기본계획 - TUS 청크 업로드 - 사용자 로그인 - 전자결재 템플릿 - 공통코드 캐시
|
||||
- 재원협의 - 첨부파일 메타데이터 - 토큰 갱신 - 결재선 관리 - 메뉴 및 권한
|
||||
- 설치인가 - 파일 다운로드 - 내 정보 조회 - 결재 요청 - 조직도
|
||||
- 설계자문 - 결재 진행상태 - 시스템 알림
|
||||
- 체크리스트 마스터
|
||||
- 공종/회계 마스터
|
||||
- 대시보드 통계
|
||||
```
|
||||
|
||||
| 서비스 명칭 | 기본 엔드포인트 URI | 담당 도메인 및 주요 기능 |
|
||||
| :--- | :--- | :--- |
|
||||
| **`AS_SERVICE`** | `/as-service/api/v1` | **행정지원 비즈니스 코어**<br/>- `/sewer-bsc-plans`: 하수도 기본계획 CRUD<br/>- `/fnrs-cnsltn-mng`: 재원협의 신청 및 분담 관리<br/>- `/instl-sncn`: 설치인가 관리<br/>- `/design-cnstn`: 설계자문 관리<br/>- `/cklst`, `/cklst-artcl`: 체크리스트 템플릿 및 평가<br/>- `/acntg-se`, `/cnstp-se`: 회계구분 및 공종구분 기준 코드<br/>- `/esntl-atch-file`: 필수 첨부파일 마스터<br/>- `/dashboard`: 대시보드 종합 지표 |
|
||||
| **`ATTACH_SERVICE`** | `/attach-service/api/v1` | **파일 관리 서비스**<br/>- `/tus/upload`: TUS 프로토콜 파일 업로드 엔드포인트<br/>- `/atfl/attachments`: 첨부파일 메타데이터 조회<br/>- `/atflcd/download`, `/download`: 첨부파일 스트림 다운로드 |
|
||||
| **`USER_SERVICE`** | `/user-service/api/v1` | **사용자 및 세션 서비스**<br/>- `/login`: 사용자 로그인 인증<br/>- `/users/token/refresh`: 토큰 재발급(Silent Refresh)<br/>- `/users/info/me`: 현재 로그인 사용자 상세 정보 |
|
||||
| **`AS_ELAPR_SERVICE`** | `/as-elapr-service/api/v1` | **전자결재 서비스**<br/>- `/elapr-tmplt`: 결재 서식 템플릿<br/>- `/elapr-apln`: 결재선 지정 및 순서 관리<br/>- `/elapr-dmnd`: 결재 상신 및 승인/반려 요청<br/>- `/elapr-prgrs-stts`: 결재 진행 상태 조회 |
|
||||
| **`CMS_SERVICE`** | `/cms-service/api/v1` | **공통 플랫폼 서비스**<br/>- `/code/cache`: 전사 공통코드 캐시 조회<br/>- `/menu-roles`, `/menu-authrts`: 사이트별 메뉴 및 권한 매핑<br/>- `/user-ognz`: 조직도 및 사용자 트리<br/>- `/noti`: 통보 및 알림 |
|
||||
| **`NTFTALK_SERVICE`** | `/ntftalk-service/api/v1` | **알림톡 서비스**<br/>- `/ntftalk-temp`: 알림톡 템플릿 관리<br/>- `/ata/send`: 카카오 알림톡/SMS 발송 |
|
||||
| **`BOARD_SERVICE`** | `/board-service/api/v1` | **게시판 서비스**<br/>- `/posts`: 공지사항 게시글 목록 및 상세 조회 |
|
||||
|
||||
---
|
||||
|
||||
## 8. 종합 검토 및 아키텍처적 시사점
|
||||
|
||||
### 8.1 아키텍처적 우수성
|
||||
|
||||
1. **엄격한 FSD v2.1 계층 원칙 준수**:
|
||||
- 상위 레이어가 하위 레이어만 참조할 수 있는 단방향 의존성 규칙이 확립되어 있으며, `steiger` 린터를 통해 아키텍처 무결성을 상시 검증합니다.
|
||||
2. **도메인 간 공통 프로세스의 위젯 캡슐화 (`widgets/pbadms-sprt`)**:
|
||||
- 하수도기본계획, 재원협의, 설치인가, 설계자문 등 4대 행정지원 업무가 거의 동일한 행정 절차(신청->접수->검토->보완->결재)를 거치므로, 중복될 수 있는 폼 섹션과 계산 로직을 `widgets/pbadms-sprt`에 응집력 있게 격리하여 재사용성과 유지보수성을 극대화했습니다.
|
||||
3. **견고한 폼 상태와 데이터 유효성 검증 체계**:
|
||||
- 비제어 컴포넌트 기반 `react-hook-form`과 타입 세이프한 `zod` 스키마를 결합하여 복잡한 수치 매트릭스(사업비 합계, 재원분담 총액 균형)의 입력 성능과 무결성을 동시에 달성했습니다.
|
||||
4. **BFF + 쿠키 기반의 안전한 인증 흐름**:
|
||||
- XSS 공격에 취약한 Refresh Token을 브라우저 JS에 노출하지 않고 Next.js Route Handler의 HttpOnly 쿠키로 은닉 관리하면서, 브라우저에서는 만료 시점 기반 자동 갱신(Silent Refresh) 타이머를 가동하여 매끄러운 사용자 경험을 제공합니다.
|
||||
5. **독립 iframe과 리라이트 프록시를 활용한 레거시 웹한글 기안기 통합**:
|
||||
- 웹한글 컨트롤의 브라우저 SOP 문제를 Next.js 리라이트 프록시로 해결하고, iframe 브릿지 통신을 통해 최신 React 19 / Next.js 15 환경에서도 레거시 공문서 기안 기능을 안정적으로 구동시켰습니다.
|
||||
|
||||
### 8.2 개발 및 운영 시 주의점
|
||||
|
||||
1. **Next.js Standalone 배포 시 환경 변수 참조**:
|
||||
- `SERVER_API_URL` 등 런타임에 필요한 서버 환경변수는 빌드 타임이 아닌 컨테이너 기동 시점에도 정확히 주입되어야 미들웨어의 API 프록시 리라이트가 정상 작동합니다.
|
||||
2. **미들웨어 콘솔 로깅 부하**:
|
||||
- 현재 [`middleware.ts`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/middleware.ts)에 모든 `/server` 요청 및 TUS 프록시 요청에 대해 `console.log`가 상세히 출력되도록 되어 있으므로, 운영 환경(Production) 배포 시에는 로깅 레벨 조정 또는 비활성화가 권장됩니다.
|
||||
3. **대용량 파일 첨부 시 리버스 프록시 타임아웃/바디 제한**:
|
||||
- Nginx 등 전면 웹서버를 통과할 때 `/attach-service` 및 `/server` 경로에 대한 `client_max_body_size` 및 타임아웃 설정이 TUS 업로드 크기에 맞추어 충분히 확보되어야 합니다.
|
||||
@@ -0,0 +1,616 @@
|
||||
# FSD(Feature-Sliced Design) v2.1과 Next.js App Router 결합 아키텍처 가이드
|
||||
|
||||
## 1. 개요 (Overview)
|
||||
|
||||
본 문서는 **디지털 행정지원 시스템([`apps/as`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as))**에 적용된 **Feature-Sliced Design(FSD v2.1)** 방법론과 **Next.js App Router**의 상호 결합 아키텍처를 상세히 설명하는 개발 가이드입니다.
|
||||
|
||||
현대 프론트엔드 개발에서 Next.js App Router는 파일 시스템 기반 라우팅과 서버 컴포넌트(RSC) 환경을 강력하게 제공하지만, 프로젝트 규모가 커질수록 `app/` 폴더 내부에 비즈니스 로직과 UI 컴포넌트가 무질서하게 혼재되는 "아키텍처 부패(Architecture Erosion)" 현상이 발생하기 쉽습니다.
|
||||
|
||||
AS 모듈은 이러한 문제를 방지하기 위해 **FSD v2.1 사양**과 **FSD 공식 Next.js 가이드**를 채택하여, **"Next.js App Router는 얇은 라우팅 진입점(Thin Routing Entry Point)만 담당하고, 실제 UI와 비즈니스 도메인은 `src/` 하위의 FSD 계층에 완전히 격리하는 1:1 매핑 결합 패턴"**을 구현했습니다.
|
||||
|
||||
---
|
||||
|
||||
## 2. Feature-Sliced Design (FSD) v2.1 핵심 개념
|
||||
|
||||
### 2.1 FSD란 무엇인가?
|
||||
|
||||
**Feature-Sliced Design(FSD)**은 프론트엔드 애플리케이션의 유지보수성, 확장성, 예측 가능성을 극대화하기 위해 고안된 **계층형 모듈식 프론트엔드 아키텍처 설계 방법론**입니다.
|
||||
|
||||
코드를 단순히 기술적 분류(components, hooks, utils, types 등)로 나누는 기존 방식과 달리, FSD는 **비즈니스 도메인과 책임의 범위(Scope of Responsibility)**에 따라 코드를 구조화합니다.
|
||||
|
||||
```
|
||||
FSD 계층 구조 (Top-Down 의존성 방향)
|
||||
|
||||
┌────────────────────────────────────────────────────────┐
|
||||
│ app (최상위: 전역 설정, 프로바이더, 글로벌 스타일) │ ▲ 가장 높은 책임
|
||||
├────────────────────────────────────────────────────────┤ │ 가장 많은 의존성
|
||||
│ pages (화면 슬라이스: 라우트에 대응하는 페이지 컴포넌트) │ │
|
||||
├────────────────────────────────────────────────────────┤ │
|
||||
│ widgets (복합 UI 블록: 헤더, 사이드바, 도메인 복합 섹션) │ │ 단방향 참조
|
||||
├────────────────────────────────────────────────────────┤ │ (상위 -> 하위만 허용)
|
||||
│ features (사용자 상호작용/액션: 로그인 폼, 필터, 검색 등) │ │
|
||||
├────────────────────────────────────────────────────────┤ │
|
||||
│ entities (비즈니스 도메인 모델: 하수도계획, 사용자, 결재 등)│ │
|
||||
├────────────────────────────────────────────────────────┤ ▼ 가장 낮은 책임
|
||||
│ shared (도메인 무관 기반 인프라: UI Kit, API 클라이언트)│ 의존성 없음
|
||||
└────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 2.2 FSD의 3계층 구조 체계
|
||||
|
||||
FSD는 코드베이스를 세 가지 차원으로 체계화합니다:
|
||||
|
||||
1. **Layers (레이어 - 수평적 분리)**:
|
||||
- 애플리케이션 내에서의 책임과 권한 수준에 따른 최상위 분류 (표준 6개 계층).
|
||||
2. **Slices (슬라이스 - 수직적 비즈니스 분리)**:
|
||||
- 레이어 내부를 특정 **비즈니스 도메인 단위**로 분할한 디렉토리.
|
||||
- 예: `entities/sewer-bsc-plan`, `entities/auth`, `pages/dashboard`
|
||||
- *주의: `app`과 `shared` 레이어는 도메인이 없으므로 슬라이스를 갖지 않습니다.*
|
||||
3. **Segments (세그먼트 - 기술적 분리)**:
|
||||
- 슬라이스 내부를 기술적 목적에 따라 나눈 폴더.
|
||||
- 표준 세그먼트: `ui`(마크업/컴포넌트), `model`(타입/상태/스토어), `api`(서버 통신/쿼리), `lib`(유틸리티/헬퍼).
|
||||
|
||||
### 2.3 6개 표준 레이어의 상세 역할
|
||||
|
||||
| 레이어 (Layer) | 슬라이스 유무 | 책임 및 역할 | `apps/as` 실제 구현 사례 |
|
||||
| :--- | :---: | :--- | :--- |
|
||||
| **`app`** | ❌ (세그먼트만) | 앱 전역 설정, 전역 Context Providers, 글로벌 스타일, 최상위 레이아웃 | [`src/app/providers/index.tsx`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/app/providers/index.tsx)<br/>[`src/app/layouts/base-layout.tsx`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/app/layouts/base-layout.tsx)<br/>[`src/app/styles/globals.css`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/app/styles/globals.css) |
|
||||
| **`pages`** | ⭕ | 라우트에 1:1로 대응되는 화면 조립 단위. 하위 레이어들을 조합하여 완성된 화면 UI 구성 | [`src/pages/dashboard`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/dashboard)<br/>[`src/pages/sewer-bsc-plan`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/sewer-bsc-plan)<br/>[`src/pages/approval-line-management`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/approval-line-management) |
|
||||
| **`widgets`** | ⭕ | 여러 feature/entity를 결합한 독립적인 대형 UI 블록. 페이지 간 재사용 가능 | [`src/widgets/pbadms-sprt`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/widgets/pbadms-sprt) (행정지원 공통 폼)<br/>[`src/widgets/hangulgiangi`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/widgets/hangulgiangi) (웹한글기안기)<br/>[`src/widgets/ognz-user-tree`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/widgets/ognz-user-tree) (조직도) |
|
||||
| **`features`** | ⭕ | 사용자 중심의 핵심 상호작용 및 비즈니스 액션 시나리오 (버튼 클릭, 모달 오픈 등) | 검색 필터링, 신청 승인 액션 등 (프로젝트 규모에 따라 `pages`나 `widgets`에 통합 가능) |
|
||||
| **`entities`** | ⭕ | 비즈니스 실세계 개념 및 데이터 모델(타입, API 호출, 캐싱 쿼리, 상태) | [`src/entities/sewer-bsc-plan`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/entities/sewer-bsc-plan)<br/>[`src/entities/auth`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/entities/auth)<br/>[`src/entities/elapr`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/entities/elapr)<br/>[`src/entities/tus`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/entities/tus) |
|
||||
| **`shared`** | ❌ (세그먼트만) | 비즈니스 로직이 전혀 없는 재사용 가능한 기반 코드. UI 라이브러리, HTTP 클라이언트, 유틸 | [`src/shared/api/client.ts`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/shared/api/client.ts)<br/>[`src/shared/lib/use-tus.ts`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/shared/lib/use-tus.ts)<br/>[`src/shared/ui/confirm-dialog.tsx`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/shared/ui/confirm-dialog.tsx) |
|
||||
|
||||
### 2.4 FSD의 2대 절대 불변 규칙
|
||||
|
||||
#### 규칙 1: 단방향 하향 의존성 규칙 (Unidirectional Dependency Rule)
|
||||
> **"모듈은 오직 자신보다 물리적으로 '하위 레이어'에 위치한 모듈만 import할 수 있다."**
|
||||
|
||||
- **허용**: `pages` ➔ `widgets`, `features`, `entities`, `shared`
|
||||
- **허용**: `widgets` ➔ `features`, `entities`, `shared`
|
||||
- **허용**: `entities` ➔ `shared`
|
||||
- ❌ **절대 금지 (동일 레이어 교차 참조)**: `entities/user`가 `entities/product`를 직접 import 불가 (필요시 교차 슬라이스 `@x` 표기법 또는 상위 위젯에서 합성).
|
||||
- ❌ **절대 금지 (상위 레이어 역참조)**: `entities`가 `widgets`나 `pages`를 import 불가.
|
||||
|
||||
```typescript
|
||||
// ✅ 올바른 참조 (하위 레이어 import)
|
||||
// src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-form-page.tsx (pages 레이어)
|
||||
import { AttachmentsFormSection } from "@/widgets/pbadms-sprt"; // widgets (하위)
|
||||
import { useSewerBscPlanPage } from "@/entities/sewer-bsc-plan"; // entities (하위)
|
||||
import { useAlertStore } from "@/shared/lib"; // shared (하위)
|
||||
|
||||
// ❌ 잘못된 참조 (규칙 위반)
|
||||
// src/entities/sewer-bsc-plan/api/service.ts (entities 레이어)
|
||||
import { SewerBscPlanListPage } from "@/pages/sewer-bsc-plan"; // 🚫 상위 레이어 역참조!
|
||||
import { AttachmentsFormSection } from "@/widgets/pbadms-sprt"; // 🚫 상위 레이어 역참조!
|
||||
```
|
||||
|
||||
#### 규칙 2: Public API (index.ts) 캡슐화 규칙
|
||||
> **"슬라이스 외부에서는 반드시 해당 슬라이스의 Public API(`index.ts`)를 통해서만 접근해야 한다."**
|
||||
|
||||
슬라이스 내부의 세부 구현 파일(예: `ui/form-dialog.tsx`, `model/internal-types.ts`)을 외부에서 직접 경로로 import하는 것을 엄격히 금지합니다.
|
||||
|
||||
```typescript
|
||||
// ✅ 올바른 import (Public API 사용)
|
||||
import { SewerBscPlanListPage } from "@/pages/sewer-bsc-plan";
|
||||
import { authService } from "@/entities/auth";
|
||||
|
||||
// ❌ 잘못된 import (내부 파일 직접 침투)
|
||||
import { SewerBscPlanListPage } from "@/pages/sewer-bsc-plan/ui/sewer-bsc-plan-list-page";
|
||||
import { authService } from "@/entities/auth/api/auth-service";
|
||||
```
|
||||
|
||||
### 2.5 아키텍처 린터: Steiger (`pnpm run lint:fsd`)
|
||||
|
||||
AS 모듈은 FSD 아키텍처 규칙이 코드베이스 전체에서 자동으로 강제되도록 **Steiger** 린터를 도입했습니다:
|
||||
```bash
|
||||
# FSD 규칙 위반 여부 정적 분석 실행
|
||||
pnpm run lint:fsd
|
||||
```
|
||||
Steiger는 다음과 같은 오류를 감지하고 빌드를 차단합니다:
|
||||
- 상위 레이어를 역참조하는 구문
|
||||
- 같은 레이어 내에서 다른 슬라이스를 무단 참조하는 구문
|
||||
- Public API(`index.ts`)를 우회하여 내부 깊은 경로를 직접 import하는 구문
|
||||
|
||||
---
|
||||
|
||||
## 3. Next.js App Router 핵심 개념
|
||||
|
||||
### 3.1 파일 시스템 기반 라우팅 메커니즘
|
||||
|
||||
Next.js App Router는 프로젝트의 `app/` 디렉토리 아래의 폴더 계층 구조가 그대로 웹 애플리케이션의 URL 경로(URL Pathname)로 1:1 매핑되는 파일 기반 라우팅 시스템입니다.
|
||||
|
||||
폴더가 URL 세그먼트를 정의하고, 해당 폴더 안의 특수 파일들이 화면과 동작을 정의합니다.
|
||||
|
||||
### 3.2 App Router 특수 파일 컨벤션
|
||||
|
||||
| 파일명 | 역할 및 렌더링 동작 |
|
||||
| :--- | :--- |
|
||||
| **`page.tsx`** | 해당 URL 경로의 고유한 화면(Leaf UI)을 렌더링하는 엔트리 파일. |
|
||||
| **`layout.tsx`** | 여러 하위 페이지가 공유하는 공통 레이아웃. 페이지 이동 시 재렌더링되지 않고 상태(State)가 보존됨. |
|
||||
| **`loading.tsx`** | 리액트 `Suspense`의 `fallback`으로 자동 래핑되는 로딩 스켈레톤 UI. |
|
||||
| **`error.tsx`** | 하위 컴포넌트 렌더링 중 에러 발생 시 자동 포착하는 React `ErrorBoundary`. |
|
||||
| **`not-found.tsx`** | `notFound()` 함수 호출 시 렌더링되는 404 전용 UI. |
|
||||
| **`route.ts`** | 웹 페이지가 아닌 REST API 엔드포인트를 제공하는 서버 핸들러 (BFF 역할). |
|
||||
|
||||
### 3.3 라우트 그룹 (Route Groups: `(folder)`)
|
||||
|
||||
소괄호 `()`로 감싼 폴더는 **URL 경로 세그먼트에 포함되지 않으면서** 라우트들을 논리적으로 그룹화하고, **서로 다른 레이아웃을 독립적으로 적용**할 수 있도록 해주는 핵심 기능입니다.
|
||||
|
||||
```
|
||||
app/
|
||||
├── (auth)/ # URL에 '/auth'가 붙지 않음
|
||||
│ ├── auth/login/page.tsx # 실제 URL: /auth/login
|
||||
│ └── layout.tsx # (auth) 그룹 전용 가벼운 레이아웃 (GNB 없음)
|
||||
│
|
||||
└── (main)/ # URL에 '/main'이 붙지 않음
|
||||
├── (with-base-layout)/ # URL에 '/with-base-layout'이 붙지 않음
|
||||
│ ├── dashboard/page.tsx# 실제 URL: /dashboard
|
||||
│ └── layout.tsx # BaseLayoutWrapper (GNB, LNB, Footer 포함)
|
||||
└── layout.tsx # Providers, 테마, 세션체크가 포함된 루트 레이아웃
|
||||
```
|
||||
|
||||
### 3.4 동적 세그먼트 (Dynamic Routes: `[id]`)
|
||||
|
||||
대괄호 `[]`로 감싼 폴더는 URL 경로의 해당 자리를 동적 매개변수(Parameter)로 캡처합니다.
|
||||
- `app/(main)/(with-base-layout)/sewer-bsc-plan/[id]/page.tsx` ➔ `/sewer-bsc-plan/101` 접근 시 `id = "101"` 캡처.
|
||||
- **Next.js 15 변경점**: `params`와 `searchParams`가 **비동기 Promise**로 전달되므로 반드시 `await params`로 언래핑해야 합니다.
|
||||
|
||||
---
|
||||
|
||||
## 4. FSD v2.1과 Next.js App Router의 충돌 지점과 해결 전략
|
||||
|
||||
### 4.1 근본적인 아키텍처적 충돌
|
||||
|
||||
Next.js App Router와 FSD는 코드베이스의 구조화 철학에서 본질적인 충돌을 겪습니다:
|
||||
|
||||
```
|
||||
[ Next.js 철학 ] : "모든 것은 app/ 디렉토리 안에 파일 시스템 구조로 모여야 한다."
|
||||
VS
|
||||
[ FSD v2.1 철학 ] : "코드는 비즈니스 도메인과 책임 계층(Layer/Slice)에 따라 분리되어야 한다."
|
||||
```
|
||||
|
||||
#### 발생할 수 있는 안티패턴 (Naive 접근법의 문제점):
|
||||
만약 FSD를 무시하고 Next.js 권장대로 `app/` 폴더 안에 컴포넌트, 훅, 비즈니스 코드를 직접 넣는다면:
|
||||
1. `app/(main)/(with-base-layout)/sewer-bsc-plan/_components/form.tsx`
|
||||
2. `app/(main)/(with-base-layout)/sewer-bsc-plan/_hooks/use-sewer.ts`
|
||||
3. 다른 라우트(예: `fnrs-cnsltn`)에서 `sewer-bsc-plan`의 컴포넌트나 훅을 가져다 쓰려고 할 때 상대 경로가 꼬이고 레이어 경계가 무너짐.
|
||||
4. 재사용 가능한 비즈니스 엔티티가 특정 라우트 폴더 내부에 깊이 매몰되어 응집도가 파괴됨.
|
||||
|
||||
### 4.2 해결 전략: "얇은 라우팅 진입점 패턴" (Thin Routing Entry Point)
|
||||
|
||||
FSD 공식 가이드와 `apps/as` 프로젝트는 이 충돌을 **역할의 완벽한 분리**로 해결했습니다:
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
subgraph NextJS["Next.js 영역 (app/)"]
|
||||
direction TB
|
||||
A["app/ (Route Groups)"]
|
||||
A1["layout.tsx<br/>(URL 구조 정의)"]
|
||||
A2["page.tsx<br/>(파라미터 추출 & Re-export)"]
|
||||
end
|
||||
|
||||
subgraph FSD["FSD v2.1 아키텍처 영역 (src/)"]
|
||||
direction TB
|
||||
B["src/app/<br/>(Providers & Layout 구현체)"]
|
||||
C["src/pages/<br/>(화면 컴포넌트 & 조립)"]
|
||||
D["src/widgets/<br/>(복합 UI 블록)"]
|
||||
E["src/entities/<br/>(비즈니스 도메인)"]
|
||||
F["src/shared/<br/>(기반 인프라 & UI Kit)"]
|
||||
end
|
||||
|
||||
A1 -.->|"import"| B
|
||||
A2 -.->|"import & Re-export"| C
|
||||
C --> D
|
||||
C --> E
|
||||
C --> F
|
||||
D --> E
|
||||
D --> F
|
||||
E --> F
|
||||
```
|
||||
|
||||
1. **`app/` 디렉토리의 역할 (Routing Only)**:
|
||||
- 오직 Next.js가 요구하는 **라우팅 진입점, 레이아웃 트리 합성, URL 파라미터 추출**만 수행합니다.
|
||||
- 내부 구현 코드(비즈니스 로직, 폼 마크업, CSS 스타일 등)는 **단 한 줄도 작성하지 않습니다.**
|
||||
- `page.tsx`는 `src/pages`의 Public API에서 화면 컴포넌트를 가져와 re-export합니다.
|
||||
2. **`src/` 디렉토리의 역할 (FSD Codebase Only)**:
|
||||
- 모든 실제 컴포넌트, 상태, 훅, API는 FSD 표준 계층에 따라 `src/`에 존재합니다.
|
||||
- `src/pages`는 Next.js에 종속되지 않은 순수한 React 컴포넌트로 작성되어 테스트 및 유지보수가 용이합니다.
|
||||
|
||||
### 4.3 루트의 빈 `pages/` 폴더 트릭
|
||||
|
||||
`apps/as` 프로젝트 루트를 보면 빈 [`pages/README.md`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/pages/README.md)만 들어있는 빈 `pages` 디렉토리가 존재합니다.
|
||||
|
||||
#### 왜 빈 `pages/` 폴더가 필요한가?
|
||||
Next.js는 프로젝트 내에 `src/pages` 디렉토리가 존재하면, 기본적으로 이를 **Pages Router(레거시 라우팅 시스템)**의 라우트로 자동 인식하려고 시도합니다.
|
||||
이로 인해 Next.js 빌드 시 다음과 같은 충돌이 발생할 수 있습니다:
|
||||
- `src/pages/sewer-bsc-plan/ui/...` 파일들을 Pages Router의 페이지 경로로 오인하여 빌드 에러 유발.
|
||||
|
||||
#### FSD 공식 해결책:
|
||||
프로젝트 루트에 **빈 `pages/` 폴더**를 생성해 두면, Next.js는 루트의 `pages/`를 우선 확인하고 아무 라우트도 없다고 판단하여 `src/pages`를 Pages Router로 스캔하지 않습니다.
|
||||
결과적으로 `src/pages`는 순수한 **FSD의 Pages 레이어**로서만 안전하게 동작할 수 있게 됩니다.
|
||||
|
||||
---
|
||||
|
||||
## 5. `apps/as` 프로젝트의 실제 결합 구현 분석
|
||||
|
||||
### 5.1 레이아웃 계층의 FSD 합성 구조
|
||||
|
||||
`app/`의 다중 레이아웃과 `src/app`의 전역 설정이 어떻게 결합되는지 살펴보겠습니다:
|
||||
|
||||
#### 1) 메인 루트 레이아웃: `app/(main)/layout.tsx`
|
||||
`app` 레이아웃은 Next.js 서버 기능(쿠키 읽기)을 처리하고, FSD의 `src/app/providers`를 불러와 감싸줍니다:
|
||||
|
||||
```tsx
|
||||
// apps/as/app/(main)/layout.tsx
|
||||
import type { Metadata } from "next";
|
||||
import { cookies } from "next/headers";
|
||||
import { Providers } from "@/app/providers"; // FSD App Layer에서 가져옴
|
||||
import "@/app/styles/globals.css";
|
||||
|
||||
export default async function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
const theme = (await cookies()).get("site-theme-key");
|
||||
|
||||
return (
|
||||
<html lang="ko" data-theme={theme?.value}>
|
||||
<body>
|
||||
<Providers>{children}</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### 2) 전역 프로바이더: `src/app/providers/index.tsx`
|
||||
FSD App 레이어에 위치하며, React Query, Zustand Store, Confirm, Auth, Menu Provider를 결합합니다:
|
||||
|
||||
```tsx
|
||||
// apps/as/src/app/providers/index.tsx
|
||||
"use client";
|
||||
|
||||
import { ConfirmProvider } from "@frontend-opensource/use-react-hooks";
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
import { queryClient } from "@/shared/lib";
|
||||
import { StoreProvider } from "@/shared/providers";
|
||||
import { AuthWrapper } from "@/entities/auth";
|
||||
import { MenuWrapper } from "@/entities/menu";
|
||||
|
||||
export function Providers({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<StoreProvider>
|
||||
<ConfirmProvider>
|
||||
<AuthWrapper>
|
||||
<MenuWrapper>{children}</MenuWrapper>
|
||||
</AuthWrapper>
|
||||
</ConfirmProvider>
|
||||
</StoreProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### 3) 공통 프레임 레이아웃: `app/(main)/(with-base-layout)/layout.tsx`
|
||||
GNB, LNB 사이드바, 푸터를 포함하는 레이아웃 역시 FSD App 레이어의 `BaseLayoutWrapper`를 re-export합니다:
|
||||
|
||||
```tsx
|
||||
// apps/as/app/(main)/(with-base-layout)/layout.tsx
|
||||
import { BaseLayoutWrapper } from "@/app/layouts/base-layout"; // FSD App Layer
|
||||
|
||||
export default function WithBaseLayout({ children }: { children: React.ReactNode }) {
|
||||
return <BaseLayoutWrapper>{children}</BaseLayoutWrapper>;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.2 화면 라우트 1:1 매핑 구현
|
||||
|
||||
#### 1) 단순 목록 화면: 하수도 기본계획 목록 (`sewer-bsc-plan/page.tsx`)
|
||||
|
||||
Next.js 라우트 파일은 단 11줄로 구성되며, FSD의 `src/pages/sewer-bsc-plan` 컴포넌트를 Suspense로 감싸기만 합니다:
|
||||
|
||||
```tsx
|
||||
// apps/as/app/(main)/(with-base-layout)/sewer-bsc-plan/page.tsx
|
||||
import { Suspense } from "react";
|
||||
import { SewerBscPlanListPage } from "@/pages/sewer-bsc-plan"; // FSD Public API
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Suspense>
|
||||
<SewerBscPlanListPage />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### 2) 동적 파라미터 화면: 하수도 기본계획 상세 (`sewer-bsc-plan/[id]/page.tsx`)
|
||||
|
||||
Next.js 15의 비동기 `params`와 `searchParams`를 `await`로 추출하여, FSD 컴포넌트의 props로 주입합니다:
|
||||
|
||||
```tsx
|
||||
// apps/as/app/(main)/(with-base-layout)/sewer-bsc-plan/[id]/page.tsx
|
||||
import { SewerBscPlanDetailGate } from "@/pages/sewer-bsc-plan"; // FSD Public API
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
searchParams: Promise<{ chgCycl?: string }>;
|
||||
}
|
||||
|
||||
export default async function Page({ params, searchParams }: PageProps) {
|
||||
// Next.js 15 Server Component에서 비동기 파라미터 언래핑
|
||||
const { id } = await params;
|
||||
const { chgCycl } = await searchParams;
|
||||
const propChgCycl = chgCycl ? Number(chgCycl) : undefined;
|
||||
|
||||
// FSD Pages 컴포넌트에 순수 props로 전달
|
||||
return <SewerBscPlanDetailGate id={id} propChgCycl={propChgCycl} />;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.3 FSD Pages 레이어 내부 조립 (Composition Pattern)
|
||||
|
||||
실제 비즈니스 로직과 화면 UI는 [`src/pages/sewer-bsc-plan`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/src/pages/sewer-bsc-plan) 슬라이스 안에서 하위 위젯과 엔티티를 조합하여 구성됩니다:
|
||||
|
||||
```tsx
|
||||
// apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-form-page.tsx
|
||||
"use client";
|
||||
|
||||
// 1. 하위 shared 레이어 import
|
||||
import { getListHref, useAlertStore, useUserStore } from "@/shared/lib";
|
||||
import { SectionCollapsibleGroup } from "@/shared/ui";
|
||||
|
||||
// 2. 하위 entities 레이어 import
|
||||
import { useAcntgSeMngTree } from "@/entities/acntg";
|
||||
import { useEsntlAtchFileMngTree } from "@/entities/esntl";
|
||||
import { sewerBscPlanService } from "@/entities/sewer-bsc-plan";
|
||||
|
||||
// 3. 하위 widgets 레이어 import (행정지원 공통 컴포넌트)
|
||||
import {
|
||||
AttachmentsFormSection,
|
||||
ChecklistFormSection,
|
||||
ContactInfoFormSection,
|
||||
PrivacyConsentSection,
|
||||
} from "@/widgets/pbadms-sprt";
|
||||
|
||||
export function SewerBscPlanFormPage({ mode, initialData }: Props) {
|
||||
// react-hook-form 및 비즈니스 데이터 처리
|
||||
// widgets과 entities에서 가져온 블록들을 선언적으로 배치
|
||||
return (
|
||||
<form onSubmit={...}>
|
||||
<SectionCollapsibleGroup>
|
||||
<ContactInfoFormSection />
|
||||
<AttachmentsFormSection />
|
||||
<ChecklistFormSection />
|
||||
<PrivacyConsentSection />
|
||||
</SectionCollapsibleGroup>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 5.4 FSD Public API 작성 규칙 준수
|
||||
|
||||
모든 슬라이스는 최상단 `index.ts`를 통해 외부로 공개할 컴포넌트와 타입만 명시적으로 내보냅니다:
|
||||
|
||||
```typescript
|
||||
// apps/as/src/pages/sewer-bsc-plan/index.ts
|
||||
export { SewerBscPlanDetailGate } from "./ui/sewer-bsc-plan-detail-gate";
|
||||
export { SewerBscPlanEditPage } from "./ui/sewer-bsc-plan-edit-page";
|
||||
export { SewerBscPlanFormPage } from "./ui/sewer-bsc-plan-form-page";
|
||||
export { SewerBscPlanListPage } from "./ui/sewer-bsc-plan-list-page";
|
||||
export { SewerBscPlanRegistPage } from "./ui/sewer-bsc-plan-regist-page";
|
||||
export { SewerBscPlanViewPage } from "./ui/sewer-bsc-plan-view-page";
|
||||
```
|
||||
|
||||
슬라이스 내부의 세부 구현 파일(예: `lib/fnrs-cst-form-utils.ts`, `sections/basic-info-form-section.tsx`)은 외부로 노출되지 않고 슬라이스 내부에 안전하게 캡슐화됩니다.
|
||||
|
||||
---
|
||||
|
||||
## 6. 개발 가이드라인 및 의사결정 트리 (Best Practices)
|
||||
|
||||
### 6.1 신규 화면 추가 시 작업 순서 (Step-by-Step Workflow)
|
||||
|
||||
새로운 업무 화면(예: `water-quality-mng` 수질 관리)을 개발할 때 권장되는 작업 절차는 다음과 같습니다:
|
||||
|
||||
```
|
||||
[1단계: Entity 정의]
|
||||
src/entities/water-quality-mng/
|
||||
├── api/ (Axios 요청 및 React Query Hooks 작성)
|
||||
├── model/ (DTO 인터페이스 및 Zod 스키마 정의)
|
||||
└── index.ts (Public API export)
|
||||
↓
|
||||
[2단계: 필요 시 Widget 작성]
|
||||
src/widgets/water-quality-mng/ (여러 화면에서 재사용될 복합 UI인 경우만 생성)
|
||||
↓
|
||||
[3단계: Page 조립]
|
||||
src/pages/water-quality-mng/
|
||||
├── ui/ (목록, 등록, 상세 컴포넌트 작성)
|
||||
└── index.ts (Public API export)
|
||||
↓
|
||||
[4단계: Next.js App Router 연결]
|
||||
app/(main)/(with-base-layout)/water-quality-mng/
|
||||
├── page.tsx (src/pages에서 컴포넌트 re-export)
|
||||
└── [id]/page.tsx (동적 파라미터 언래핑 후 컴포넌트 re-export)
|
||||
↓
|
||||
[5단계: 아키텍처 린트 검증]
|
||||
pnpm run lint:fsd 실행하여 의존성 규칙 준수 확인
|
||||
```
|
||||
|
||||
### 6.2 컴포넌트 위치 결정 의사결정 트리
|
||||
|
||||
새로운 코드나 컴포넌트를 작성할 때 어떤 레이어에 배치해야 할지 판단하는 기준입니다:
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
Q1{"Q1. 비즈니스 도메인(업무 개념)과 관련이 있는가?"}
|
||||
Q1 -->|아니오| L_SHARED["shared/ 에 배치<br/>(UI Kit, 순수 유틸, 공통 클라이언트)"]
|
||||
Q1 -->|예| Q2{"Q2. 특정 라우트 화면 하나에서만 쓰이는가?"}
|
||||
|
||||
Q2 -->|예| L_PAGES["src/pages/[slice]/ 에 배치<br/>(화면 전용 컴포넌트, 전용 폼)"]
|
||||
Q2 -->|아니오| Q3{"Q3. 여러 화면에서 재사용되는 큰 규모의 UI 블록인가?"}
|
||||
|
||||
Q3 -->|예| L_WIDGETS["widgets/[slice]/ 에 배치<br/>(행정지원 공통 폼, 조직도, 기안기)"]
|
||||
Q3 -->|아니오| Q4{"Q4. 사용자의 능동적인 인터랙션/액션 단위인가?"}
|
||||
|
||||
Q4 -->|예| L_FEATURES["features/[slice]/ 에 배치<br/>(로그인 액션, 검색 필터 버튼)"]
|
||||
Q4 -->|아니오| L_ENTITIES["entities/[slice]/ 에 배치<br/>(데이터 모델, DTO, API 쿼리, 기본 카드 뷰)"]
|
||||
```
|
||||
|
||||
### 6.3 Server Component와 Client Component 경계 관리
|
||||
|
||||
- **`app/` 디렉토리의 `page.tsx`**:
|
||||
- 기본적으로 **Server Component**로 유지하는 것이 좋습니다.
|
||||
- 비동기 `params`, `searchParams`를 서버에서 안전하게 수신하고, 필요한 경우 메타데이터(`generateMetadata`)를 구성할 수 있습니다.
|
||||
- **`src/pages/` 디렉토리의 화면 컴포넌트**:
|
||||
- 사용자 입력, 폼 상태(`react-hook-form`), 클라이언트 상태(`Zustand`), 데이터 페칭(`TanStack Query`)을 활발히 사용하므로 상단에 `"use client";`를 명시합니다.
|
||||
- Next.js 서버 컴포넌트(`page.tsx`)가 클라이언트 컴포넌트(`SewerBscPlanListPage`)를 자식으로 임포트하는 자연스러운 **RSC 경계 분리**가 완성됩니다.
|
||||
|
||||
---
|
||||
|
||||
## 7. 결론 (Summary)
|
||||
|
||||
`apps/as` 모듈이 채택한 **FSD v2.1과 Next.js App Router의 결합 아키텍처**는 다음과 같은 결정적 장점을 제공합니다:
|
||||
|
||||
1. **프레임워크 종속성 격리**:
|
||||
- Next.js의 프레임워크 전용 파일들(`layout.tsx`, `page.tsx`)을 얇은 라우팅 어댑터로 격리함으로써, 비즈니스 코드가 Next.js 버전에 종속되어 레거시화되는 것을 방지합니다.
|
||||
2. **높은 도메인 응집도와 낮은 결합도**:
|
||||
- 하수도기본계획, 재원협의 등 각 업무 도메인의 모델과 API가 `entities/`에 명확히 캡슐화되어 다른 화면이나 위젯에서 안전하게 재사용됩니다.
|
||||
3. **엄격한 아키텍처 린팅 보장**:
|
||||
- `steiger`를 통해 개발자의 실수로 인한 상위 레이어 역참조나 순환 참조를 사전에 차단하여 장기적인 유지보수 비용을 크게 낮춥니다.
|
||||
|
||||
---
|
||||
|
||||
## 8. Next.js 내부 소스 레벨의 라우트 그룹 (Route Groups) 인식 원리 및 구성 분석
|
||||
|
||||
Next.js에서 소괄호로 감싼 폴더인 **라우트 그룹(`(folder)`)**이 어떻게 URL 경로에서 투명하게 제외되고, 독립적인 레이아웃 경계를 형성하는지 Next.js 코어 소스코드와 빌드 엔진 관점에서 상세히 분석합니다.
|
||||
|
||||
### 8.1 Next.js 코어 소스코드 분석: 라우트 그룹 인식 메커니즘
|
||||
|
||||
Next.js의 내부 패키지([`next/dist`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/node_modules/next/dist))를 분석하면, 라우트 그룹을 감지하고 처리하는 핵심 함수들을 확인할 수 있습니다.
|
||||
|
||||
#### 1) 라우트 그룹 판별 함수: `isGroupSegment`
|
||||
Next.js는 세그먼트 문자열이 라우트 그룹인지 판별할 때 정규식(RegExp) 대신 성능 최적화(Performance Purpose)를 위해 첫 글자와 끝 글자를 직접 검사합니다:
|
||||
|
||||
```typescript
|
||||
// next/src/shared/lib/segment.ts (next/dist/shared/lib/segment.js)
|
||||
export function isGroupSegment(segment: string) {
|
||||
// O(1) 고속 연산을 위해 배열 인덱스 활용
|
||||
return segment[0] === '(' && segment.endsWith(')')
|
||||
}
|
||||
```
|
||||
- **판정 기준**: 폴더명 세그먼트의 첫 글자가 여는 소괄호 `(`이고, 마지막 글자가 닫는 소괄호 `)`이면 `GroupSegment`로 판단합니다.
|
||||
- 예: `(auth)` ➔ `true`, `(main)` ➔ `true`, `(with-base-layout)` ➔ `true`, `[id]` ➔ `false`, `auth` ➔ `false`.
|
||||
|
||||
#### 2) URL 노출 여부 결정 함수: `doesStaticSegmentAppearInURL`
|
||||
클라이언트 라우터가 라우트 트리에서 실제 브라우저 주소창(URL)에 노출될 경로를 조립할 때 호출하는 함수입니다:
|
||||
|
||||
```typescript
|
||||
// next/src/client/route-params.ts (next/dist/client/route-params.js)
|
||||
export function doesStaticSegmentAppearInURL(segment: string): boolean {
|
||||
if (
|
||||
segment === ROOT_SEGMENT_REQUEST_KEY ||
|
||||
segment.startsWith(PAGE_SEGMENT_KEY) ||
|
||||
// ★ 라우트 그룹은 URL에 나타나지 않으므로 false 반환 (생략)
|
||||
(segment[0] === '(' && segment.endsWith(')')) ||
|
||||
segment === DEFAULT_SEGMENT_KEY ||
|
||||
segment === '/_not-found'
|
||||
) {
|
||||
return false
|
||||
} else {
|
||||
// 그 외 일반 세그먼트는 URL에 포함됨
|
||||
return true
|
||||
}
|
||||
}
|
||||
```
|
||||
- 세그먼트가 라우트 그룹인 경우 `false`를 리턴하여 URL Pathname 생성 목록에서 완전히 제외(Skip)합니다.
|
||||
|
||||
#### 3) 클라이언트 라우터의 경로 정규화: `normalizeSegments`
|
||||
페이지 이동 및 브라우저 히스토리 갱신 시 FlightRouterState 트리에서 실제 URL을 계산하는 로직입니다:
|
||||
|
||||
```typescript
|
||||
// next/src/client/components/router-reducer/compute-changed-path.ts
|
||||
function normalizeSegments(segments: string[]): string {
|
||||
return (
|
||||
segments.reduce((acc, segment) => {
|
||||
segment = removeLeadingSlash(segment)
|
||||
// ★ 빈 문자열이거나 라우트 그룹인 경우 누적 URL에 추가하지 않고 통과
|
||||
if (segment === '' || isGroupSegment(segment)) {
|
||||
return acc
|
||||
}
|
||||
|
||||
return `${acc}/${segment}`
|
||||
}, '') || '/'
|
||||
)
|
||||
}
|
||||
```
|
||||
- 경로 배열 `['(main)', '(with-base-layout)', 'dashboard']`가 전달되면 `isGroupSegment`가 `(main)`과 `(with-base-layout)`을 건너뛰어 최종적으로 `"/dashboard"`라는 정규화된 URL을 산출합니다.
|
||||
|
||||
#### 4) Webpack 빌드 타임의 로더 트리 생성: `next-app-loader`
|
||||
Next.js 빌드 시 웹팩 로더([`next-app-loader`](file:///Users/changwng/workspace.ona/front/frontend_as/apps/as/node_modules/next/dist/build/webpack/loaders/next-app-loader))는 파일 시스템을 스캔하여 계층적 트리(`FlightRouterState`)를 빌드합니다:
|
||||
|
||||
```typescript
|
||||
// next/src/build/webpack/loaders/next-app-loader/index.ts
|
||||
// 1. 첫 번째 레이어가 그룹 라우트인지 확인하여 루트 레이어로 취급
|
||||
const isFirstLayerGroupRoute =
|
||||
segments.length === 1 &&
|
||||
subSegmentPath.filter((seg) => isGroupSegment(seg)).length === 1
|
||||
|
||||
// 2. 서로 다른 라우트 그룹이 동일한 URL 경로로 충돌하는지 정적 검사
|
||||
if (!hasCurrentParallelPage && !isIncomingParallelPage) {
|
||||
throw new Error(
|
||||
`You cannot have two parallel pages that resolve to the same path. Please check ${existingChildrenPath} and ${appPath}. Refer to the route group docs for more information: https://nextjs.org/docs/app/building-your-application/routing/route-groups`
|
||||
)
|
||||
}
|
||||
```
|
||||
- 빌드 엔진은 라우트 그룹을 **"레이아웃과 에러 바운더리를 독립적으로 분기하는 가상 트리 노드"**로 유지하면서, 최종 URL 라우트 맵에서는 동일한 URL에 중복된 페이지가 매핑되지 않도록 엄격히 검증합니다.
|
||||
|
||||
---
|
||||
|
||||
### 8.2 세팅 및 구성(Configuration & Structure) 측면 분석
|
||||
|
||||
#### 1) 별도 환경설정 불필요 (Zero Configuration Convention)
|
||||
Next.js의 라우트 그룹은 `next.config.ts`나 `tsconfig.json`에 특별한 플래그를 켤 필요가 없습니다.
|
||||
Next.js 컴파일러와 런타임에 소괄호 `(name)` 패턴이 **예약된 명명 규칙(Reserved Naming Convention)**으로 내장되어 있기 때문입니다.
|
||||
|
||||
#### 2) `apps/as`의 다중 루트 레이아웃(Multiple Root Layouts) 구성 전략
|
||||
`apps/as`는 라우트 그룹을 활용해 **서로 다른 HTML 셸을 가진 2개의 독립 루트 레이아웃**을 구성했습니다:
|
||||
|
||||
```
|
||||
apps/as/app/
|
||||
├── (auth)/ # 그룹 1: 인증 화면군
|
||||
│ ├── auth/login/page.tsx # URL: /auth/login
|
||||
│ └── layout.tsx # 독립 RootLayout: Provider 없이 가벼운 <html><body> 제공
|
||||
│
|
||||
└── (main)/ # 그룹 2: 메인 업무 포털 화면군
|
||||
├── layout.tsx # 독립 RootLayout: 테마, QueryClient, Auth, Menu Provider 포함
|
||||
└── (with-base-layout)/ # 중첩 그룹: 공통 프레임 레이아웃
|
||||
├── layout.tsx # BaseLayoutWrapper: Header, Sidebar, Footer 포함
|
||||
├── dashboard/page.tsx # URL: /dashboard
|
||||
└── sewer-bsc-plan/... # URL: /sewer-bsc-plan
|
||||
```
|
||||
|
||||
- **최상위 `app/layout.tsx` 부재의 의미**:
|
||||
- `app/` 바로 아래에 `layout.tsx`를 두지 않고, `(auth)/layout.tsx`와 `(main)/layout.tsx`로 분리함으로써 **로그인 페이지 진입 시 불필요한 무거운 전역 Provider와 레이아웃 JS 번들이 로드되는 것을 원천 차단**했습니다.
|
||||
- 각각의 레이아웃이 독자적인 `<html>`과 `<body>` 태그를 반환할 수 있습니다.
|
||||
|
||||
#### 3) 중첩 라우트 그룹 (Nested Route Groups) 구성
|
||||
`app/(main)/(with-base-layout)`처럼 라우트 그룹 안에 또 다른 라우트 그룹을 중첩할 수 있습니다:
|
||||
- `(main)`: 앱 전역 상태, 인증/세션 검사, 테마 컨텍스트 주입.
|
||||
- `(with-base-layout)`: 시각적 GNB 헤더 및 LNB 사이드바 주입.
|
||||
- 향후 기본 레이아웃이 필요 없는 팝업형 업무 창이 필요할 경우, `app/(main)/(without-base-layout)/popup/page.tsx` 형태로 확장할 수 있는 유연한 구조를 확보했습니다.
|
||||
|
||||
#### 4) 특수 폴더 명명 규칙 비교표
|
||||
|
||||
| 표기법 | Next.js 해석 | URL 포함 여부 | 주요 용도 |
|
||||
| :--- | :--- | :---: | :--- |
|
||||
| **`(folder)`** | **Route Group** | ❌ **제외됨** | 레이아웃 분리, 모듈 그룹화, 다중 루트 레이아웃 |
|
||||
| **`_folder`** | **Private Folder** | ❌ **제외됨 (라우팅 불가)** | 라우트 대상에서 완전히 제외하고 내부 컴포넌트 격리 |
|
||||
| **`[folder]`** | **Dynamic Segment** | ⭕ **포함됨 (가변값)** | 동적 URL 파라미터 매핑 (`[id]`, `[code]`) |
|
||||
| **`@folder`** | **Parallel Route** | ❌ **제외됨** | 동일 레이아웃 내 독립 슬롯 렌더링 (병렬 라우트) |
|
||||
| **`folder`** | **Static Segment** | ⭕ **포함됨 (고정값)** | 일반적인 정적 URL 세그먼트 |
|
||||
|
||||
#### 5) 라우트 그룹 구성 시 주의점 (Gotchas)
|
||||
1. **경로 충돌(Collision)**:
|
||||
- `app/(auth)/about/page.tsx`와 `app/(main)/about/page.tsx`를 동시에 생성하면 두 파일 모두 `/about`이라는 동일한 URL로 해석되므로 Next.js 빌드 단계에서 `You cannot have two parallel pages that resolve to the same path` 에러가 발생합니다.
|
||||
2. **루트 레이아웃 간 이동 시 전체 리로드(Full Page Reload)**:
|
||||
- 최상위 `<html>`, `<body>`를 각각 소유하는 라우트 그룹 간(예: `(auth)/auth/login` ➔ `(main)/dashboard`) 이동 시에는 React 상태가 보존되는 클라이언트 사이드 전환(Soft Navigation)이 아니라 브라우저 전체가 새로고침되는 하드 네비게이션(Hard Navigation)이 일어납니다. (로그인 후 세션 초기화 측면에서는 오히려 권장되는 동작입니다.)
|
||||
|
||||
+7
-56
@@ -11,70 +11,21 @@ const common = {
|
||||
|
||||
env: {
|
||||
NODE_ENV: 'production',
|
||||
NODE_TLS_REJECT_UNAUTHORIZED: '0',
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
apps: [
|
||||
{
|
||||
...common,
|
||||
|
||||
name: 'cs-app',
|
||||
cwd: './apps/cs',
|
||||
|
||||
script: 'node_modules/next/dist/bin/next',
|
||||
args: 'start -p 3000',
|
||||
|
||||
error_file: './logs/cs-error.log',
|
||||
out_file: './logs/cs-out.log',
|
||||
},
|
||||
{
|
||||
...common,
|
||||
|
||||
name: 'st-app',
|
||||
cwd: './apps/st',
|
||||
|
||||
script: 'node_modules/next/dist/bin/next',
|
||||
args: 'start -p 3001',
|
||||
|
||||
error_file: './logs/st-error.log',
|
||||
out_file: './logs/st-out.log',
|
||||
},
|
||||
apps: [
|
||||
{
|
||||
...common,
|
||||
|
||||
name: 'cm-app',
|
||||
cwd: './apps/cm',
|
||||
|
||||
script: 'node_modules/next/dist/bin/next',
|
||||
args: 'start -p 3002',
|
||||
|
||||
error_file: './logs/cm-error.log',
|
||||
out_file: './logs/cm-out.log',
|
||||
},
|
||||
{
|
||||
...common,
|
||||
|
||||
name: 'as-app',
|
||||
name: 'as2-app',
|
||||
cwd: './apps/as',
|
||||
|
||||
script: 'node_modules/next/dist/bin/next',
|
||||
args: 'start -p 3003',
|
||||
|
||||
error_file: './logs/cm-error.log',
|
||||
out_file: './logs/cm-out.log',
|
||||
},
|
||||
{
|
||||
...common,
|
||||
|
||||
name: 'features-app',
|
||||
cwd: './apps/common/features',
|
||||
|
||||
script: 'node_modules/next/dist/bin/next',
|
||||
args: 'start -p 13000',
|
||||
|
||||
error_file: './logs/feature-error.log',
|
||||
out_file: './logs/feature-out.log',
|
||||
},
|
||||
args: 'start -p 3004',
|
||||
error_file: './logs/as2-error.log',
|
||||
out_file: './logs/as2-out.log',
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
const common = {
|
||||
exec_mode: 'cluster',
|
||||
instances: 2,
|
||||
|
||||
autorestart: true,
|
||||
max_memory_restart: '1G',
|
||||
watch: false,
|
||||
|
||||
merge_logs: true,
|
||||
log_date_format: 'YYYY-MM-DD HH:mm:ss Z',
|
||||
|
||||
env: {
|
||||
NODE_ENV: 'production',
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
apps: [
|
||||
{
|
||||
...common,
|
||||
|
||||
name: 'cs-app',
|
||||
cwd: './apps/cs',
|
||||
|
||||
script: 'node_modules/next/dist/bin/next',
|
||||
args: 'start -p 3000',
|
||||
|
||||
error_file: './logs/cs-error.log',
|
||||
out_file: './logs/cs-out.log',
|
||||
},
|
||||
{
|
||||
...common,
|
||||
|
||||
name: 'st-app',
|
||||
cwd: './apps/st',
|
||||
|
||||
script: 'node_modules/next/dist/bin/next',
|
||||
args: 'start -p 3001',
|
||||
|
||||
error_file: './logs/st-error.log',
|
||||
out_file: './logs/st-out.log',
|
||||
},
|
||||
{
|
||||
...common,
|
||||
|
||||
name: 'cm-app',
|
||||
cwd: './apps/cm',
|
||||
|
||||
script: 'node_modules/next/dist/bin/next',
|
||||
args: 'start -p 3002',
|
||||
|
||||
error_file: './logs/cm-error.log',
|
||||
out_file: './logs/cm-out.log',
|
||||
},
|
||||
{
|
||||
...common,
|
||||
|
||||
name: 'as-app',
|
||||
cwd: './apps/as',
|
||||
|
||||
script: 'node_modules/next/dist/bin/next',
|
||||
args: 'start -p 3004',
|
||||
|
||||
error_file: './logs/cm-error.log',
|
||||
out_file: './logs/cm-out.log',
|
||||
},
|
||||
{
|
||||
...common,
|
||||
|
||||
name: 'features-app',
|
||||
cwd: './apps/common/features',
|
||||
|
||||
script: 'node_modules/next/dist/bin/next',
|
||||
args: 'start -p 13000',
|
||||
|
||||
error_file: './logs/feature-error.log',
|
||||
out_file: './logs/feature-out.log',
|
||||
},
|
||||
],
|
||||
}
|
||||
@@ -22,6 +22,8 @@ class Client {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Site-Id": config.siteId,
|
||||
"Cache-Control": "no-cache",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user