diff --git a/apps/as/app/(with-base-layout)/esntl-atch-file-mng/page.tsx b/apps/as/app/(with-base-layout)/esntl-atch-file-mng/page.tsx new file mode 100644 index 000000000..9516e46c5 --- /dev/null +++ b/apps/as/app/(with-base-layout)/esntl-atch-file-mng/page.tsx @@ -0,0 +1 @@ +export { EsntlAtchFileMngPage as default } from "@/pages/esntl-atch-file-mng"; diff --git a/apps/as/docs/attachment-management/SPEC.md b/apps/as/docs/attachment-management/SPEC.md deleted file mode 100644 index abc6416f4..000000000 --- a/apps/as/docs/attachment-management/SPEC.md +++ /dev/null @@ -1,311 +0,0 @@ -# 화면설계서: 필수첨부파일관리 - -## 1. 기본 정보 - -| 항목 | 내용 | -| ---------- | ---------------------------------------------- | -| 버전 | 0.1 | -| 프로세스명 | UI설계 | -| 화면명 | 필수첨부파일관리 | -| 화면 유형 | [v] 조회 [v] 입력 [v] 수정 [v] 삭제 [ ] 출력 | -| 메뉴 경로 | 디지털행정지원 > 사이트관리 > 필수첨부파일관리 | - ---- - -## 2. 화면 목적 - -문서(업무) 구분별로 **필수 첨부파일** 항목을 등록·조회·수정·삭제한다. 상단 검색 영역에서 **문서구분**으로 목록을 필터링하고, **등록** 또는 행별 **수정**·**삭제**로 마스터 데이터를 유지한다. 등록·수정 시 **필수첨부파일아이디**는 서버에서 자동 발급된다. - ---- - -## 3. 화면 구성 - -### 3-1. 전체 레이아웃 - -``` -┌───────────────────────────────────────────────────────────────────────────────────────────────┐ -│ 페이지 타이틀: 필수첨부파일관리 브레드크럼: 디지털행정지원 > … > │ -├───────────────────────────────────────────────────────────────────────────────────────────────┤ -│ [영역 A] 검색 / 액션 │ -│ ┌─────────────────────────────────────────────────────────────────────────────────────────┐ │ -│ │ 문서구분 [전체 ▼] [조회] [등록] │ │ -│ └─────────────────────────────────────────────────────────────────────────────────────────┘ │ -├───────────────────────────────────────────────────────────────────────────────────────────────┤ -│ [영역 B] 필수첨부파일 목록 │ -│ ┌─────────────────────────────────────────────────────────────────────────────────────────┐ │ -│ │ 필수첨부파일아이디 | 문서구분 | 필수첨부파일명 | 필수첨부여부 | 비고 | 등록일시 | 수정일시 | 관리 │ -│ ├─────────────────────────────────────────────────────────────────────────────────────────┤ │ -│ │ EAF-0001 | 설치인가 | 사업계획서 | 예 | 서명본 첨부 | 2026-04-22 10:10:00 | — | [수정][삭제] │ -│ │ EAF-0002 | 기본계획 | 변경사유서 | 예 | — | 2026-04-22 11:00:00 | — | [수정][삭제] │ -│ └─────────────────────────────────────────────────────────────────────────────────────────┘ │ -└───────────────────────────────────────────────────────────────────────────────────────────────┘ - - (모달) [다이얼로그 C] 필수첨부파일 등록 / 수정 - ┌──────────────────────────────────────────────────────────────┐ - │ 필수첨부파일 등록 [닫기] │ - ├──────────────────────────────────────────────────────────────┤ - │ 필수첨부파일아이디(자동발급) [EAF-0004] (읽기 전용) │ - │ 문서구분 [설치인가 ▼] │ - │ 필수첨부파일명 [예: 사업계획서] │ - │ 필수첨부여부 [예 ▼] │ - │ 비고 [비고를 입력하세요] │ - ├──────────────────────────────────────────────────────────────┤ - │ [취소] [저장] │ - └──────────────────────────────────────────────────────────────┘ -``` - -### 3-2. 화면 데이터 흐름 - -``` -BEGIN - - // 최초 진입 - CALL 필수첨부파일 목록 조회 (TBD) - DISPLAY 필수첨부파일 그리드 (영역 B) - - // 영역 A: 검색 - ON [조회] 버튼 CLICK DO - CALL 필수첨부파일 목록 조회 (문서구분 = 선택값, TBD) - DISPLAY 필수첨부파일 그리드 (영역 B) - END ON - - // 영역 A: 등록 - ON [등록] 버튼 CLICK DO - OPEN 필수첨부파일 등록 다이얼로그 (다이얼로그 C) - DISPLAY 필수첨부파일아이디 = 자동발급 미리보기 또는 "저장 시 발급" (TBD) - ON [저장] DO - VALIDATE 문서구분, 필수첨부파일명, 필수첨부여부 - CALL 필수첨부파일 등록 (TBD) - CALL 필수첨부파일 목록 조회 - CLOSE 다이얼로그 - TOAST "저장되었습니다." - END ON - ON [취소] / [닫기] DO - CLOSE 다이얼로그 - END ON - END ON - - // 영역 B: 수정 - ON 행 [수정] CLICK DO - OPEN 필수첨부파일 수정 다이얼로그 (기존 값 초기화) - ON [저장] DO - VALIDATE 문서구분, 필수첨부파일명, 필수첨부여부 - CALL 필수첨부파일 수정 (TBD) - CALL 필수첨부파일 목록 조회 - CLOSE 다이얼로그 - END ON - END ON - - // 영역 B: 삭제 - ON 행 [삭제] CLICK DO - CONFIRM "선택한 필수첨부파일을 삭제하시겠습니까?" - CALL 필수첨부파일 삭제 (TBD) - CALL 필수첨부파일 목록 조회 - END ON - -END -``` - ---- - -## 4. 영역 A: 검색 / 액션 - -문서구분 조건으로 목록을 조회하고, 신규 등록 다이얼로그를 연다. - -### 4-1. 검색 필드 - -| 표시명 | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑 | 비고 | -| -------- | ---------------- | ---- | ------ | ----------------- | ------------------------------------ | -| 문서구분 | Select(공통코드) | N | 전체 | `docSeComCd?` | "전체" 선택 시 파라미터 미전송 (TBD) | - -### 4-2. 버튼 - -| 버튼명 | 위치 | 동작 | -| ------ | -------------- | ----------------------------------------------- | -| 조회 | 검색 필드 우측 | 현재 검색 조건으로 영역 B 목록 갱신 | -| 등록 | 영역 우측 끝 | 필수첨부파일 등록 다이얼로그(다이얼로그 C) 오픈 | - ---- - -## 5. 영역 B: 필수첨부파일 목록 - -필수 첨부파일 마스터를 테이블로 표시한다. 페이지네이션 UI는 스크린샷에 없음 — **TBD**(백엔드 Pageable 정책 확인). - -### 5-1. 헤더 - -| 항목 | 내용 | -| ----------- | ----------------- | -| 섹션 타이틀 | 필수첨부파일 목록 | - -### 5-2. 그리드 컬럼 - -| 컬럼명 | Field (제안) | 타입 | 비고 | -| ------------------ | ----------------- | ------ | ------------------------------------- | -| 필수첨부파일아이디 | `esntlAtchFileId` | string | 예: `EAF-0001`, 서버 자동 발급 | -| 문서구분 | `docSeComCd` | string | 코드명 표시 — 공통코드 (TBD 상위코드) | -| 필수첨부파일명 | `esntlAtchFileNm` | string | | -| 필수첨부여부 | `esntlAtchYn` | string | `Y`→예, `N`→아니오 | -| 비고 | `rmk` | string | 없으면 `—` 표시 | -| 등록일시 | `regDt` | string | `yyyy-MM-dd HH:mm:ss` | -| 수정일시 | `mdfcnDt` | string | 미수정 시 빈 값 또는 `—` | -| 관리 | — | — | 행별 **[수정] · [삭제]** | - -- 행 클릭 시 별도 상세 화면 없음. 편집은 **[수정]** 버튼으로 다이얼로그 C를 연다. - -### 5-3. 버튼 - -| 버튼명 | 위치 | 동작 | -| ------ | ---- | -------------------------------------- | -| 수정 | 행별 | 필수첨부파일 수정 다이얼로그 (기존 값) | -| 삭제 | 행별 | 확인 후 삭제 API 호출 → 목록 갱신 | - ---- - -## 6. 다이얼로그 C: 필수첨부파일 등록 / 수정 - -등록·수정 공용 폼 다이얼로그. 등록 시 제목 **「필수첨부파일 등록」**, 수정 시 **「필수첨부파일 수정」**. - -### 6-1. 폼 필드 - -| 표시명 | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑 | 비고 | -| ---------------------------- | ---------------- | ---- | ------ | ----------------- | --------------------------------------------- | -| 필수첨부파일아이디(자동발급) | Text (읽기 전용) | — | — | — | 등록: 저장 전 미리보기 또는 placeholder (TBD) | -| 문서구분 | Select(공통코드) | Y | — | `docSeComCd` | 예: 설치인가, 기본계획 | -| 필수첨부파일명 | Text | Y | — | `esntlAtchFileNm` | placeholder: "예: 사업계획서" | -| 필수첨부여부 | Select | Y | Y | `esntlAtchYn` | Y/N, UI 표시: 예/아니오 | -| 비고 | Textarea | N | — | `rmk` | placeholder: "비고를 입력하세요" | - -> **TBD**: 등록 다이얼로그의 `EAF-0004` 표시가 저장 전 ID 미리보기인지, mock 데이터인지 백엔드 정책 확인. - -### 6-2. 버튼 - -| 버튼명 | 동작 | -| ------ | -------------------------------------- | -| 저장 | POST(등록) 또는 PUT(수정) 후 목록 갱신 | -| 취소 | 다이얼로그 닫기, 입력값 폐기 | -| 닫기 | 다이얼로그 닫기 (헤더 우측) | - ---- - -## 7. API/DTO 명세 - -> API 미확정. 백엔드 명세 확정 전까지 아래는 **TBD** placeholder이다. - -### 7-1. 공통 - -| 항목 | 내용 | -| ----------- | ------------------------------------- | -| 서비스 | TBD | -| Base prefix | TBD | -| 인증 | JWT (`Authorization`), `X-Site-Id` 등 | -| 페이징 | TBD — Spring `Pageable` 여부 확인 | -| 엔티티 | TBD — `@/entities/esntl-atch-file` 등 | - -### 7-2. 필수첨부파일 — TBD - -| 기능 | Method | URL | Request DTO | Response DTO | API (클라이언트 함수명) | -| --------- | ------ | --- | ----------- | ------------ | ----------------------- | -| 목록 조회 | GET | TBD | TBD | TBD | TBD | -| 단건 조회 | GET | TBD | TBD | TBD | TBD | -| 등록 | POST | TBD | TBD | TBD | TBD | -| 수정 | PUT | TBD | TBD | TBD | TBD | -| 삭제 | DELETE | TBD | TBD | TBD | TBD | - -**응답 DTO (제안 필드)** - -| Field | 타입 | 설명 | -| ----------------- | ------- | ------------------ | -| `esntlAtchFileId` | string | 필수첨부파일아이디 | -| `docSeComCd` | string | 문서구분공통코드 | -| `esntlAtchFileNm` | string | 필수첨부파일명 | -| `esntlAtchYn` | string? | 필수첨부여부 (Y/N) | -| `rmk` | string? | 비고 | -| `regDt` | string? | 등록일시 | -| `mdfcnDt` | string? | 수정일시 | - -**저장 Request (제안)** - -| Field | 필수 | 설명 | -| ----------------- | ---- | -------------- | -| `docSeComCd` | Y | 문서구분 | -| `esntlAtchFileNm` | Y | 필수첨부파일명 | -| `esntlAtchYn` | Y | 필수첨부여부 | -| `rmk` | N | 비고 | - -**검색 Query (제안)** - -| Field | 필수 | 설명 | -| ------------ | ---- | ------------------------- | -| `docSeComCd` | N | 문서구분 (전체 시 미전송) | -| `page` | N | TBD | -| `size` | N | TBD | -| `sort` | N | TBD — 예: `regDt,desc` | - -### 7-3. 공통코드 (보조) - -| UI 필드 | 코드 그룹 (TBD) | 예시 값 (스크린샷) | -| ------------ | --------------- | ------------------ | -| 문서구분 | TBD | 설치인가, 기본계획 | -| 필수첨부여부 | 고정 | Y(예), N(아니오) | - -공통코드 조회: `@/entities/code` — `codeService`, `CodeSelect` - ---- - -## 8. UI 구현 가이드 - -### 8-1. 기술 스택·원칙 - -- **공통 컴포넌트**: `@common/components` (`Dialog`, `Button`, `Input`, `Select`, `Textarea`, `Label` 등) -- **테이블**: `@tanstack/react-table` + `useDataTable` -- **폼**: `react-hook-form` -- **데이터**: React Query — TBD 엔티티 hooks -- **공통코드**: `@/entities/code` — `CodeSelect`, `findCodeLabel` -- **확인**: `@frontend-opensource/use-react-hooks` — `useConfirm` (삭제 확인) -- **모의 데이터**: API 연동 전 `@faker-js/faker` (ID 형식 `EAF-####`) - -### 8-2. 모듈·파일 배치(제안) - -| 구분 | 경로 | -| ------ | ------------------------------------------------------------------------------------------------------ | -| 라우트 | `apps/as/app/(with-base-layout)/attachment-management/page.tsx` | -| 페이지 | `apps/as/src/pages/attachment-management/` (Public API: page만 export) | -| UI | `.../ui/attachment-management-page.tsx`, `esntl-atch-file-list.tsx`, `esntl-atch-file-form-dialog.tsx` | -| model | `.../model/esntl-atch-file-columns.tsx`, `esntl-atch-file-search-params.ts` | -| 엔티티 | `apps/as/src/entities/esntl-atch-file/` (TBD — service·hooks) | -| 문서 | `apps/as/docs/attachment-management/SPEC.md` | - -### 8-3. 영역별 UI 매핑 - -| 영역 | 주요 UI | -| ---- | --------------------------------------------- | -| A | `CodeSelect`(문서구분) + [조회] + [등록] | -| B | `DataTable` + 행별 [수정][삭제] | -| C | `Dialog` + `react-hook-form` (등록/수정 공용) | - -### 8-4. 다이얼로그·라우팅 - -| 다이얼로그명 | 트리거 | API 연동 (TBD) | -| ----------------- | --------- | --------------- | -| 필수첨부파일 등록 | [등록] | create mutation | -| 필수첨부파일 수정 | 행 [수정] | update mutation | -| 삭제 확인 | 행 [삭제] | delete mutation | - -라우트: `/attachment-management` (메뉴 URL은 CMS 등록값과 일치시킴) - -### 8-5. 데이터 흐름(요약) - -- **진입**: 검색 params 기본값(`docSeComCd` = 전체) → 목록 query → 영역 B DataTable. -- **조회**: [조회] 클릭 시 search state 반영 → 목록 query refetch. -- **등록**: [등록] → Dialog `mode=create` → [저장] → POST → 목록 invalidate. -- **수정**: [수정] → Dialog `mode=edit` + row 초기값 → [저장] → PUT → 목록 invalidate. -- **삭제**: confirm → DELETE → 목록 invalidate. - -### 8-6. 미확정 / 검증 필요 - -- [ ] 백엔드 서비스명·Base URL·리소스 path -- [ ] `esntlAtchFileId` 자동발급 시점 (등록 API 응답 vs 저장 전 미리보기 API) -- [ ] 문서구분 공통코드 상위코드 ID -- [ ] 목록 페이지네이션·정렬 UI 노출 여부 -- [ ] 동일 문서구분 내 필수첨부파일명 중복 허용 여부 -- [ ] 권한(역할별 CRUD) diff --git a/apps/as/docs/essential-attachment-file-management/SPEC.md b/apps/as/docs/essential-attachment-file-management/SPEC.md new file mode 100644 index 000000000..72e7c06b7 --- /dev/null +++ b/apps/as/docs/essential-attachment-file-management/SPEC.md @@ -0,0 +1,284 @@ +# 화면설계서: 필수첨부파일관리 + +## 1. 기본 정보 + +| 항목 | 내용 | +| ---------- | ---------------------------------------------- | +| 버전 | 0.1 | +| 프로세스명 | UI설계 | +| 화면명 | 필수첨부파일관리 | +| 화면 유형 | [v] 조회 [v] 입력 [v] 수정 [v] 삭제 [ ] 출력 | +| 메뉴 경로 | 디지털행정지원 > 사이트관리 > 필수첨부파일관리 | + +--- + +## 2. 화면 목적 + +문서(업무) 구분별로 **필수 첨부파일** 항목을 등록·조회·수정·삭제한다. 상단 검색 영역에서 **문서구분**으로 목록을 필터링하고, **등록** 또는 행별 **수정**·**삭제**로 마스터 데이터를 유지한다. 등록·수정 시 **필수첨부파일아이디**는 클라이언트에서 입력(또는 생성)하여 요청 본문에 포함한다. + +--- + +## 3. 화면 구성 + +### 3-1. 전체 레이아웃 + +``` +┌──────────────────────────────────────────────────────────────────────────────────────────────────────┐ +│ 페이지 타이틀: 필수첨부파일관리 브레드크럼: 디지털행정지원 > … > │ +├──────────────────────────────────────────────────────────────────────────────────────────────────────┤ +│ [영역 A] 검색 / 액션 │ +│ ┌────────────────────────────────────────────────────────────────────────────────────────────────┐ │ +│ │ 문서구분 [전체 ▼] [조회] [등록] │ │ +│ └────────────────────────────────────────────────────────────────────────────────────────────────┘ │ +├──────────────────────────────────────────────────────────────────────────────────────────────────────┤ +│ [영역 B] 필수첨부파일 목록 │ +│ ┌────────────────────────────────────────────────────────────────────────────────────────────────┐ │ +│ │ 필수첨부파일아이디 | 문서구분 | 필수첨부파일명 | 필수첨부여부 | 비고 | 등록일시 | 수정일시 | 관리 │ +│ ├────────────────────────────────────────────────────────────────────────────────────────────────┤ │ +│ │ EAF-0001 | 설치인가 | 사업계획서 | 예 | 서명본 첨부 | 2026-04-22 10:10:00 | — | [수정][삭제] │ │ +│ │ EAF-0002 | 기본계획 | 변경사유서 | 예 | — | 2026-04-22 11:00:00 | — | [수정][삭제] │ │ +│ └────────────────────────────────────────────────────────────────────────────────────────────────┘ │ +└──────────────────────────────────────────────────────────────────────────────────────────────────────┘ + + (모달) [다이얼로그 C] 필수첨부파일 등록 / 수정 + ┌──────────────────────────────────────────────────────┐ + │ 필수첨부파일 등록 [닫기] │ + ├──────────────────────────────────────────────────────┤ + │ 필수첨부파일아이디(자동발급) [EAF-0004] │ + │ 문서구분 [설치인가 ▼] │ + │ 필수첨부파일명 [예: 사업계획서] │ + │ 필수첨부여부 [ ] 예 [ ] 아니오 │ + │ 비고 [비고를 입력하세요] │ + ├──────────────────────────────────────────────────────┤ + │ [취소] [저장] │ + └──────────────────────────────────────────────────────┘ +``` + +### 3-2. 화면 데이터 흐름 + +``` +BEGIN + + // 최초 진입 + CALL 필수첨부파일 목록 조회 (findPage) + DISPLAY 필수첨부파일 그리드 (영역 B) + + // 영역 A: 검색 + ON [조회] 버튼 CLICK DO + CALL 필수첨부파일 목록 조회 (문서구분 = 선택값, findPage) + DISPLAY 필수첨부파일 그리드 (영역 B) + END ON + + // 영역 A: 등록 + ON [등록] 버튼 CLICK DO + OPEN 필수첨부파일 등록 다이얼로그 (다이얼로그 C) + ON [저장] DO + CONFIRM "등록하시겠습니까?" + VALIDATE 문서구분, 필수첨부파일명, 필수첨부여부 + CALL 필수첨부파일 등록 (create) + CALL 필수첨부파일 목록 조회 + CLOSE 다이얼로그 + TOAST "저장되었습니다." + END ON + ON [취소] / [닫기] DO + CLOSE 다이얼로그 + END ON + END ON + + // 영역 B: 수정 + ON 행 [수정] CLICK DO + OPEN 필수첨부파일 수정 다이얼로그 (기존 값 초기화) + ON [저장] DO + VALIDATE 문서구분, 필수첨부파일명, 필수첨부여부 + CALL 필수첨부파일 수정 (update) + CALL 필수첨부파일 목록 조회 + CLOSE 다이얼로그 + END ON + END ON + + // 영역 B: 삭제 + ON 행 [삭제] CLICK DO + CONFIRM "삭제하시겠습니까?" + CALL 필수첨부파일 삭제 (remove) + CALL 필수첨부파일 목록 조회 + END ON + +END +``` + +--- + +## 4. 영역 A: 검색 / 액션 + +문서구분 조건으로 목록을 조회하고, 신규 등록 다이얼로그를 연다. + +### 4-1. 검색 필드 + +| 표시명 | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑 | 비고 | +| -------- | ---------- | ---- | ------ | ----------------- | ------------------------------ | +| 문서구분 | CodeSelect | N | 전체 | `docSeComCd?` | "전체" 선택 시 파라미터 미전송 | + +### 4-2. 버튼 + +| 버튼명 | 위치 | 동작 | +| ------ | -------------- | ----------------------------------------------- | +| 조회 | 검색 필드 우측 | 현재 검색 조건으로 영역 B 목록 갱신 | +| 등록 | 영역 우측 끝 | 필수첨부파일 등록 다이얼로그(다이얼로그 C) 오픈 | + +--- + +## 5. 영역 B: 필수첨부파일 목록 + +필수 첨부파일 마스터를 테이블로 표시한다. 페이지네이션 UI 적용. + +### 5-1. 헤더 + +| 항목 | 내용 | +| ----------- | ----------------- | +| 섹션 타이틀 | 필수첨부파일 목록 | + +### 5-2. 그리드 컬럼 + +| 컬럼명 | Field | 타입 | 비고 | +| ------------------ | ------------------- | ------ | ------------------------------------- | +| 필수첨부파일아이디 | `esntlAtchFileId` | string | 예: `EAF-0001`, 클라이언트 생성/입력 | +| 문서구분 | `docSeComCd` | string | 코드명 표시 — 공통코드 (TBD 상위코드) | +| 필수첨부파일명 | `esntlAtchFileNm` | string | | +| 필수첨부여부 | `esntlAtchYn` | string | `Y`→예, `N`→아니오 | +| 비고 | `esntlAtchFileRmrk` | string | 없으면 `—` 표시 | +| 등록일시 | `regDt` | string | `yyyy-MM-dd HH:mm:ss` | +| 수정일시 | `mdfcnDt` | string | 미수정 시 빈 값 또는 `—` | +| 관리 | — | — | 행별 **[수정] · [삭제]** | + +- 행 클릭 시 별도 상세 화면 없음. 편집은 **[수정]** 버튼으로 다이얼로그 C를 연다. + +### 5-3. 버튼 + +| 버튼명 | 위치 | 동작 | +| ------ | ---- | -------------------------------------- | +| 수정 | 행별 | 필수첨부파일 수정 다이얼로그 (기존 값) | +| 삭제 | 행별 | 확인 후 삭제 API 호출 → 목록 갱신 | + +--- + +## 6. 다이얼로그 C: 필수첨부파일 등록 / 수정 + +등록·수정 공용 폼 다이얼로그. 등록 시 제목 **「필수첨부파일 등록」**, 수정 시 **「필수첨부파일 수정」**. + +### 6-1. 폼 필드 + +| 표시명 | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑 | 비고 | +| ------------------ | ---------- | ---- | ------ | ------------------- | -------------------------------- | +| 필수첨부파일아이디 | (Readonly) | Y | — | `esntlAtchFileId` | 등록 시 미노출 | +| 문서구분 | CodeSelect | Y | — | `docSeComCd` | 예: 설치인가, 기본계획 | +| 필수첨부파일명 | Text | Y | — | `esntlAtchFileNm` | placeholder: "예: 사업계획서" | +| 필수첨부여부 | RadioGroup | Y | Y | `esntlAtchYn` | Y/N, UI 표시: 예/아니오 | +| 비고 | Textarea | N | — | `esntlAtchFileRmrk` | placeholder: "비고를 입력하세요" | + +### 6-2. 버튼 + +| 버튼명 | 동작 | +| ------ | -------------------------------------- | +| 저장 | POST(등록) 또는 PUT(수정) 후 목록 갱신 | +| 취소 | 다이얼로그 닫기, 입력값 폐기 | +| 닫기 | 다이얼로그 닫기 (헤더 우측) | + +--- + +## 7. API/DTO 명세 + +### 7-1. 공통 + +| 항목 | 내용 | +| ----------- | ----------------------------------------------------- | +| 서비스 | AS Common Service | +| Base prefix | `/as-service/api/v1/esntl-atch-file` | +| 인증 | JWT (`Authorization`), `X-Site-Id` 등 | +| 페이징 | Spring `Pageable` 사용 (`page`, `size`, `sort`) | +| 엔티티 | `@/entities/esntl` (`esntl-service.ts`, `queries.ts`) | + +### 7-2. 필수첨부파일 API + +| 기능 | Method | URL | Request DTO | Response DTO | API (클라이언트 함수명) | +| --------- | ------ | -------------------- | ----------------------------- | ----------------------------------- | ----------------------- | +| 트리 조회 | GET | `/list/tree` | Query: `docSeComCd`(필수) | `EsntlAtchFileMngTreeResponseDto[]` | `findTree` | +| 목록 조회 | GET | `/` | Query: Search + Pageable | `PageResponse` | `findPage` | +| 단건 조회 | GET | `/{esntlAtchFileId}` | Path: `esntlAtchFileId` | `EsntlAtchFileMng` | `findById` | +| 등록 | POST | `/` | `EsntlAtchFileMngSaveRequest` | `string` (생성된 ID) | `create` | +| 수정 | PUT | `/{esntlAtchFileId}` | `EsntlAtchFileMngSaveRequest` | `string` (수정된 ID) | `update` | +| 삭제 | DELETE | `/{esntlAtchFileId}` | Path: `esntlAtchFileId` | `string` (삭제된 ID) | `remove` | + +**응답 DTO** + +| Field | 타입 | 설명 | +| ------------------- | ------- | -------------------------------- | +| `esntlAtchFileId` | string | 필수첨부파일아이디 | +| `docSeComCd` | string | 문서구분공통코드 | +| `esntlAtchFileNm` | string | 필수첨부파일명 | +| `esntlAtchYn` | string | 필수첨부여부 (Y/N) | +| `esntlAtchFileRmrk` | string? | 필수첨부파일비고 | +| `rgtr` | string? | 등록자 UUID | +| `rgtrNm` | string? | 등록자명 | +| `mdfr` | string? | 수정자 UUID | +| `regDt` | string? | 등록일시 (`yyyy-MM-dd HH:mm:ss`) | +| `mdfcnDt` | string? | 수정일시 | + +**저장 Request** + +| Field | 필수 | 설명 | +| ------------------- | ---- | ------------------ | +| `esntlAtchFileId` | Y | 필수첨부파일아이디 | +| `docSeComCd` | N | 문서구분 | +| `esntlAtchFileNm` | N | 필수첨부파일명 | +| `esntlAtchYn` | N | 필수첨부여부 | +| `esntlAtchFileRmrk` | N | 비고 | + +**검색 Query** + +| Field | 필수 | 설명 | +| ----------------- | ---- | ----------------------------- | +| `docSeComCd` | N | 문서구분 (전체 시 미전송) | +| `esntlAtchFileNm` | N | 필수첨부파일명 부분/일치 검색 | +| `esntlAtchYn` | N | 필수첨부여부 (`Y`/`N`) | +| `page` | N | 페이지 번호 (0-base) | +| `size` | N | 페이지 크기 (기본값: 100) | +| `sort` | N | 정렬 조건 (예: `regDt,desc`) | + +### 7-3. 공통코드 + +| UI 필드 | 코드 그룹 | 예시 값 | +| ------------ | --------- | ------------------ | +| 문서구분 | ASDOCSECD | 설치인가, 기본계획 | +| 필수첨부여부 | 고정 | Y(예), N(아니오) | + +--- + +## 8. UI 구현 가이드 + +### 8-1. 기술 스택·원칙 + +- **공통 컴포넌트**: `@common/components` (`Dialog`, `Button`, `Input`, `Select`, `Textarea`, `Label` 등) +- **테이블**: `@tanstack/react-table` + `useDataTable` +- **폼**: `react-hook-form` +- **데이터**: React Query — `@/entities/esntl/api/queries.ts` 훅 사용 +- **공통코드**: `@/entities/code` — `CodeSelect`, `findCodeLabel` +- **확인**: `@frontend-opensource/use-react-hooks` — `useConfirm` (등록·삭제 확인) + +### 8-2. 모듈·파일 배치 + +| 구분 | 경로 | +| ------ | ---------------------------------------------------------------------------------------------------- | +| 라우트 | `apps/as/app/(with-base-layout)/esntl-atch-file-mng/page.tsx` | +| 페이지 | `apps/as/src/pages/esntl-atch-file-mng/` (Public API: page만 export) | +| UI | `.../ui/esntl-atch-file-mng-page.tsx`, `esntl-atch-file-list.tsx`, `esntl-atch-file-form-dialog.tsx` | +| model | `.../model/esntl-atch-file-columns.tsx`, `esntl-atch-file-search-params.ts` | +| 엔티티 | `apps/as/src/entities/esntl/` (`esntl-service.ts`, `queries.ts`, `esntl-interface.ts`) | +| 문서 | `apps/as/docs/essential-attachment-file-management/SPEC.md` | + +### 8-3. 데이터 흐름(요약) + +- **진입**: 검색 params 기본값(`docSeComCd` = 전체) → 목록 query → 영역 B DataTable. +- **조회**: [조회] 클릭 시 search state 반영 → 목록 query refetch. +- **등록**: [등록] → Dialog `mode=create` → [저장] → POST → 목록 invalidate. +- **수정**: [수정] → Dialog `mode=edit` + row 초기값 → [저장] → PUT → 목록 invalidate. +- **삭제**: confirm → DELETE → 목록 invalidate. diff --git a/apps/as/src/entities/esntl/api/esntl-service.ts b/apps/as/src/entities/esntl/api/esntl-service.ts index a8e60bc57..458940399 100644 --- a/apps/as/src/entities/esntl/api/esntl-service.ts +++ b/apps/as/src/entities/esntl/api/esntl-service.ts @@ -1,14 +1,18 @@ import { client } from "@/shared/api"; import { ENDPOINT } from "@/shared/config"; +import type { PageResponse } from "@/shared/model"; import type { + EsntlAtchFileMng, + EsntlAtchFileMngSaveRequest, EsntlAtchFileMngSearchParams, EsntlAtchFileMngService, EsntlAtchFileMngTreeResponseDto, + EsntlAtchFileMngTreeSearchParams, } from "../model/esntl-interface"; async function findTree( - params: EsntlAtchFileMngSearchParams, + params: EsntlAtchFileMngTreeSearchParams, ): Promise { const response = await client.get( `${ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE}/list/tree`, @@ -17,6 +21,48 @@ async function findTree( return response.data; } +async function findPage( + params: EsntlAtchFileMngSearchParams, +): Promise> { + const response = await client.get>( + ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE, + { params }, + ); + return response.data; +} + +async function findById(esntlAtchFileId: string): Promise { + const response = await client.get( + `${ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE}/${esntlAtchFileId}`, + ); + return response.data; +} + +async function create(body: EsntlAtchFileMngSaveRequest): Promise { + const response = await client.post(ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE, body); + return response.data; +} + +async function update(esntlAtchFileId: string, body: EsntlAtchFileMngSaveRequest): Promise { + const response = await client.put( + `${ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE}/${esntlAtchFileId}`, + body, + ); + return response.data; +} + +async function remove(esntlAtchFileId: string): Promise { + const response = await client.delete( + `${ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE}/${esntlAtchFileId}`, + ); + return response.data; +} + export const esntlAtchFileMngService = { findTree, + findPage, + findById, + create, + update, + remove, } satisfies EsntlAtchFileMngService; diff --git a/apps/as/src/entities/esntl/api/queries.ts b/apps/as/src/entities/esntl/api/queries.ts new file mode 100644 index 000000000..48e30fc68 --- /dev/null +++ b/apps/as/src/entities/esntl/api/queries.ts @@ -0,0 +1,79 @@ +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; + +import { ENDPOINT } from "@/shared/config"; + +import type { + EsntlAtchFileMngSaveRequest, + EsntlAtchFileMngSearchParams, + EsntlAtchFileMngTreeSearchParams, +} from "../model/esntl-interface"; + +import { esntlAtchFileMngService } from "./esntl-service"; + +const esntlAtchFileMngBaseKey = [ENDPOINT.AS_COMMON_SERVICE.ESNTL_ATCH_FILE] as const; + +export function useEsntlAtchFileMngTree(params: EsntlAtchFileMngTreeSearchParams) { + return useQuery({ + queryKey: [...esntlAtchFileMngBaseKey, "tree", params], + queryFn: () => esntlAtchFileMngService.findTree(params), + enabled: Boolean(params.docSeComCd), + staleTime: Infinity, + }); +} + +export function useEsntlAtchFileMngPage(params: EsntlAtchFileMngSearchParams) { + return useQuery({ + queryKey: [...esntlAtchFileMngBaseKey, "page", params], + queryFn: () => esntlAtchFileMngService.findPage(params), + }); +} + +export function useEsntlAtchFileMng(esntlAtchFileId: string | null | undefined) { + return useQuery({ + queryKey: [...esntlAtchFileMngBaseKey, esntlAtchFileId], + queryFn: () => esntlAtchFileMngService.findById(esntlAtchFileId!), + enabled: Boolean(esntlAtchFileId), + }); +} + +export function useCreateEsntlAtchFileMng() { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: (body: EsntlAtchFileMngSaveRequest) => esntlAtchFileMngService.create(body), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: esntlAtchFileMngBaseKey }); + }, + }); +} + +export function useUpdateEsntlAtchFileMng() { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: ({ + esntlAtchFileId, + body, + }: { + esntlAtchFileId: string; + body: EsntlAtchFileMngSaveRequest; + }) => esntlAtchFileMngService.update(esntlAtchFileId, body), + onSuccess: (_data, { esntlAtchFileId }) => { + queryClient.invalidateQueries({ queryKey: esntlAtchFileMngBaseKey }); + queryClient.invalidateQueries({ + queryKey: [...esntlAtchFileMngBaseKey, esntlAtchFileId], + }); + }, + }); +} + +export function useDeleteEsntlAtchFileMng() { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: (esntlAtchFileId: string) => esntlAtchFileMngService.remove(esntlAtchFileId), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: esntlAtchFileMngBaseKey }); + }, + }); +} diff --git a/apps/as/src/entities/esntl/index.ts b/apps/as/src/entities/esntl/index.ts index dfe42c24b..f359e1b44 100644 --- a/apps/as/src/entities/esntl/index.ts +++ b/apps/as/src/entities/esntl/index.ts @@ -1,6 +1,17 @@ +export { esntlAtchFileMngService } from "./api/esntl-service"; +export { + useCreateEsntlAtchFileMng, + useDeleteEsntlAtchFileMng, + useEsntlAtchFileMng, + useEsntlAtchFileMngPage, + useEsntlAtchFileMngTree, + useUpdateEsntlAtchFileMng, +} from "./api/queries"; export type { + EsntlAtchFileMng, + EsntlAtchFileMngSaveRequest, EsntlAtchFileMngSearchParams, EsntlAtchFileMngService, EsntlAtchFileMngTreeResponseDto, + EsntlAtchFileMngTreeSearchParams, } from "./model/esntl-interface"; -export { esntlAtchFileMngService } from "./api/esntl-service"; diff --git a/apps/as/src/entities/esntl/model/esntl-interface.ts b/apps/as/src/entities/esntl/model/esntl-interface.ts index 74f77ba72..a36d1244a 100644 --- a/apps/as/src/entities/esntl/model/esntl-interface.ts +++ b/apps/as/src/entities/esntl/model/esntl-interface.ts @@ -1,3 +1,5 @@ +import type { PageableParams, PageResponse } from "@/shared/model"; + /** 필수첨부파일관리 트리 조회 응답 DTO */ export interface EsntlAtchFileMngTreeResponseDto { /** 필수첨부파일아이디 */ @@ -12,14 +14,72 @@ export interface EsntlAtchFileMngTreeResponseDto { esntlAtchFileRmrk: string; } -/** 필수첨부파일관리 조회 파라미터 */ -export interface EsntlAtchFileMngSearchParams { +/** 필수첨부파일관리 엔티티 (목록/상세 공용 응답 DTO) */ +export interface EsntlAtchFileMng { + /** 필수첨부파일아이디 */ + esntlAtchFileId: string; + /** 문서구분공통코드 */ + docSeComCd: string; + /** 필수첨부파일명 */ + esntlAtchFileNm: string; + /** 필수첨부여부 ("Y" | "N") */ + esntlAtchYn: "Y" | "N"; + /** 필수첨부파일비고 */ + esntlAtchFileRmrk?: string; + /** 등록자UUID */ + rgtr?: string; + /** 등록자명 */ + rgtrNm?: string; + /** 수정자UUID */ + mdfr?: string; + /** 등록일시 (yyyy-MM-dd HH:mm:ss) */ + regDt?: string; + /** 수정일시 */ + mdfcnDt?: string; +} + +/** 필수첨부파일관리 트리 조회 파라미터 */ +export interface EsntlAtchFileMngTreeSearchParams { /** 문서구분공통코드 (예: "INSTL") */ docSeComCd: string; } +/** 필수첨부파일관리 목록 조회 파라미터 (페이징 포함) */ +export interface EsntlAtchFileMngSearchParams extends PageableParams { + /** 문서구분공통코드 (예: "INSTL") */ + docSeComCd?: string; + /** 필수첨부파일명 */ + esntlAtchFileNm?: string; + /** 필수첨부여부 ("Y" | "N") */ + esntlAtchYn?: "Y" | "N"; +} + /** 필수첨부파일관리 서비스 인터페이스 */ export interface EsntlAtchFileMngService { /** 필수첨부파일 트리 조회 */ - findTree(params: EsntlAtchFileMngSearchParams): Promise; + findTree(params: EsntlAtchFileMngTreeSearchParams): Promise; + /** 필수첨부파일관리 목록 조회 (페이징) */ + findPage(params: EsntlAtchFileMngSearchParams): Promise>; + /** 필수첨부파일관리 상세 조회 */ + findById(esntlAtchFileId: string): Promise; + /** 필수첨부파일관리 등록 */ + create(body: EsntlAtchFileMngSaveRequest): Promise; + /** 필수첨부파일관리 수정 */ + update(esntlAtchFileId: string, body: EsntlAtchFileMngSaveRequest): Promise; + /** 필수첨부파일관리 삭제 */ + remove(esntlAtchFileId: string): Promise; +} + +/** 필수첨부파일관리 저장 요청 DTO */ +export interface EsntlAtchFileMngSaveRequest { + /** 필수첨부파일아이디 */ + esntlAtchFileId: string; + /** 문서구분공통코드 */ + docSeComCd?: string; + /** 필수첨부파일명 */ + esntlAtchFileNm?: string; + /** 필수첨부여부 ("Y" | "N") */ + esntlAtchYn?: "Y" | "N"; + /** 필수첨부파일비고 */ + esntlAtchFileRmrk?: string; } diff --git a/apps/as/src/pages/esntl-atch-file-mng/index.ts b/apps/as/src/pages/esntl-atch-file-mng/index.ts new file mode 100644 index 000000000..73333e63c --- /dev/null +++ b/apps/as/src/pages/esntl-atch-file-mng/index.ts @@ -0,0 +1 @@ +export { EsntlAtchFileMngPage } from "./ui/esntl-atch-file-mng-page"; diff --git a/apps/as/src/pages/esntl-atch-file-mng/model/esntl-atch-file-columns.tsx b/apps/as/src/pages/esntl-atch-file-mng/model/esntl-atch-file-columns.tsx new file mode 100644 index 000000000..ee3b04dda --- /dev/null +++ b/apps/as/src/pages/esntl-atch-file-mng/model/esntl-atch-file-columns.tsx @@ -0,0 +1,81 @@ +"use client"; + +import { createColumnHelper } from "@tanstack/react-table"; + +import type { Code } from "@/entities/code"; +import { findCodeLabel } from "@/entities/code"; +import type { EsntlAtchFileMng } from "@/entities/esntl"; +import { Button } from "@common/components"; + +const columnHelper = createColumnHelper(); + +interface CreateEsntlAtchFileColumnsOptions { + docSeCodes: Code[] | undefined; + onEdit: (row: EsntlAtchFileMng) => void; + onDelete: (row: EsntlAtchFileMng) => void; +} + +function formatYn(value: string | undefined) { + if (value === "Y") return "예"; + if (value === "N") return "아니오"; + return "—"; +} + +function formatOptional(value: string | undefined) { + return value?.trim() ? value : "—"; +} + +export function createEsntlAtchFileColumns({ + docSeCodes, + onEdit, + onDelete, +}: CreateEsntlAtchFileColumnsOptions) { + return [ + columnHelper.accessor("esntlAtchFileId", { + header: "필수첨부파일아이디", + meta: { align: "center" }, + }), + columnHelper.accessor("docSeComCd", { + header: "문서구분", + cell: ({ getValue }) => findCodeLabel(docSeCodes, getValue()) || getValue() || "—", + }), + columnHelper.accessor("esntlAtchFileNm", { + header: "필수첨부파일명", + meta: { align: "left" }, + }), + columnHelper.accessor("esntlAtchYn", { + header: "필수첨부여부", + meta: { align: "center" }, + cell: ({ getValue }) => formatYn(getValue()), + }), + columnHelper.accessor("esntlAtchFileRmrk", { + header: "비고", + meta: { align: "left" }, + cell: ({ getValue }) => formatOptional(getValue()), + }), + columnHelper.accessor("regDt", { + header: "등록일시", + meta: { align: "center" }, + cell: ({ getValue }) => formatOptional(getValue()), + }), + columnHelper.accessor("mdfcnDt", { + header: "수정일시", + meta: { align: "center" }, + cell: ({ getValue }) => formatOptional(getValue()), + }), + columnHelper.display({ + id: "actions", + header: "관리", + cell: ({ row }) => ( +
e.stopPropagation()}> + + +
+ ), + }), + ]; +} diff --git a/apps/as/src/pages/esntl-atch-file-mng/model/esntl-atch-file-search-params.ts b/apps/as/src/pages/esntl-atch-file-mng/model/esntl-atch-file-search-params.ts new file mode 100644 index 000000000..817ce97b4 --- /dev/null +++ b/apps/as/src/pages/esntl-atch-file-mng/model/esntl-atch-file-search-params.ts @@ -0,0 +1,30 @@ +import type { EsntlAtchFileMngSearchParams } from "@/entities/esntl"; + +export const ESNTL_ATCH_FILE_ALL_DOC_SE = ""; + +export const DEFAULT_ESNTL_ATCH_FILE_PAGE_SIZE = 100; + +export const DEFAULT_ESNTL_ATCH_FILE_SORT = "regDt,desc"; + +export function createDefaultEsntlAtchFileSearchParams(): EsntlAtchFileMngSearchParams { + return { + page: 0, + size: DEFAULT_ESNTL_ATCH_FILE_PAGE_SIZE, + sort: DEFAULT_ESNTL_ATCH_FILE_SORT, + }; +} + +export function toEsntlAtchFileQueryParams( + params: EsntlAtchFileMngSearchParams, +): EsntlAtchFileMngSearchParams { + const { docSeComCd, esntlAtchFileNm, esntlAtchYn, page, size, sort } = params; + + return { + ...(docSeComCd ? { docSeComCd } : {}), + ...(esntlAtchFileNm ? { esntlAtchFileNm } : {}), + ...(esntlAtchYn ? { esntlAtchYn } : {}), + page: page ?? 0, + size: size ?? DEFAULT_ESNTL_ATCH_FILE_PAGE_SIZE, + sort: sort ?? DEFAULT_ESNTL_ATCH_FILE_SORT, + }; +} diff --git a/apps/as/src/pages/esntl-atch-file-mng/model/generate-esntl-atch-file-id.ts b/apps/as/src/pages/esntl-atch-file-mng/model/generate-esntl-atch-file-id.ts new file mode 100644 index 000000000..b5240a67c --- /dev/null +++ b/apps/as/src/pages/esntl-atch-file-mng/model/generate-esntl-atch-file-id.ts @@ -0,0 +1,12 @@ +const EAF_ID_PREFIX = "EAF-"; +const EAF_ID_PATTERN = /^EAF-(\d+)$/; + +export function generateEsntlAtchFileId(existingIds: string[]): string { + const maxSeq = existingIds.reduce((max, id) => { + const match = id.match(EAF_ID_PATTERN); + if (!match) return max; + return Math.max(max, Number(match[1])); + }, 0); + + return `${EAF_ID_PREFIX}${String(maxSeq + 1).padStart(4, "0")}`; +} diff --git a/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-form-dialog.tsx b/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-form-dialog.tsx new file mode 100644 index 000000000..0ac2f8c4b --- /dev/null +++ b/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-form-dialog.tsx @@ -0,0 +1,161 @@ +"use client"; + +import { useEffect } from "react"; +import { useForm } from "react-hook-form"; + +import { CodeSelect } from "@/entities/code"; +import type { EsntlAtchFileMng } from "@/entities/esntl"; +import { + Button, + Dialog, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, + Input, + Label, + RadioGroup, + RadioGroupItem, + Textarea, +} from "@common/components"; + +export interface EsntlAtchFileFormValues { + esntlAtchFileId: string; + docSeComCd: string; + esntlAtchFileNm: string; + esntlAtchYn: "Y" | "N"; + esntlAtchFileRmrk: string; +} + +interface EsntlAtchFileFormDialogProps { + mode: "create" | "edit"; + open: boolean; + onOpenChange: (open: boolean) => void; + initial?: EsntlAtchFileMng | null; + generatedId?: string; + isSubmitting?: boolean; + onSubmit: (values: EsntlAtchFileFormValues) => void; +} + +function EsntlAtchFileFormDialog({ + mode, + open, + onOpenChange, + initial, + generatedId, + isSubmitting, + onSubmit, +}: EsntlAtchFileFormDialogProps) { + const { register, handleSubmit, reset, setValue, watch } = useForm({ + defaultValues: { + esntlAtchFileId: "", + docSeComCd: "", + esntlAtchFileNm: "", + esntlAtchYn: "Y", + esntlAtchFileRmrk: "", + }, + }); + + const docSeComCd = watch("docSeComCd"); + const esntlAtchYn = watch("esntlAtchYn"); + + useEffect(() => { + if (!open) return; + + if (mode === "edit" && initial) { + reset({ + esntlAtchFileId: initial.esntlAtchFileId, + docSeComCd: initial.docSeComCd ?? "", + esntlAtchFileNm: initial.esntlAtchFileNm ?? "", + esntlAtchYn: initial.esntlAtchYn ?? "Y", + esntlAtchFileRmrk: initial.esntlAtchFileRmrk ?? "", + }); + return; + } + + reset({ + esntlAtchFileId: generatedId ?? "", + docSeComCd: "", + esntlAtchFileNm: "", + esntlAtchYn: "Y", + esntlAtchFileRmrk: "", + }); + }, [open, mode, initial, generatedId, reset]); + + return ( + + + + {mode === "create" ? "필수첨부파일 등록" : "필수첨부파일 수정"} + +
+ {mode === "edit" ? ( +
+ +

{watch("esntlAtchFileId")}

+
+ ) : ( + + )} +
+ + setValue("docSeComCd", v, { shouldValidate: true })} + placeholder="문서구분 선택" + className="w-full" + /> +
+
+ + +
+
+ + + setValue("esntlAtchYn", v as "Y" | "N", { shouldValidate: true }) + } + className="flex gap-6" + > +
+ + +
+
+ + +
+ +
+
+ +