[cs] WIP: 알림톡발송이력관리 페이지
This commit is contained in:
@@ -0,0 +1,164 @@
|
||||
# 화면설계서: 알림톡발송이력관리
|
||||
|
||||
## 1. 기본 정보
|
||||
|
||||
| 항목 | 내용 |
|
||||
| ---------- | -------------------------------------------- |
|
||||
| 버전 | 1.0 |
|
||||
| 프로세스명 | UI설계 |
|
||||
| 화면명 | 알림톡발송이력관리 |
|
||||
| 화면 유형 | [x] 조회 [ ] 입력 [ ] 삭제 [ ] 수정 [ ] 출력 |
|
||||
| 메뉴 경로 | home > 시스템관리 > 알림톡발송이력관리 |
|
||||
|
||||
---
|
||||
|
||||
## 2. 화면 목적
|
||||
|
||||
알림톡 발송 이력을 **기간·내용·수신자·결과·시스템** 조건으로 검색하고, **발송 시스템·알림 내용·수신자·수신 시각·성공 여부**를 목록으로 확인한다.
|
||||
|
||||
---
|
||||
|
||||
## 3. 화면 구성
|
||||
|
||||
### 3-1. 전체 레이아웃
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────────┐
|
||||
│ 페이지 제목: 알림톡발송이력관리 브레드크럼 (우측 상단) │
|
||||
├────────────────────────────────────────────────────────────────────┤
|
||||
│ [영역 A] 검색 필터 │
|
||||
│ · 조회기간, 알림내용, 사용자, 결과, 시스템 │
|
||||
│ · [조회], [초기화] │
|
||||
├────────────────────────────────────────────────────────────────────┤
|
||||
│ [영역 B] 알림톡 발송 이력 그리드 │
|
||||
│ · 순번, 시스템, 알림내용, 수신자, 수신일, 결과 │
|
||||
│ · 페이지네이션 │
|
||||
└────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 영역 A: 검색 필터
|
||||
|
||||
### 4-1. 필드 정의
|
||||
|
||||
| 표시명 | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑 | 비고 |
|
||||
| -------- | -------------------- | ---- | ------------- | ----------------------------------- | ------------------------------------------- |
|
||||
| 조회기간 | InputDateRangePicker | N | 1개월 전~오늘 | `dateFrom`, `dateTo` (`yyyy-MM-dd`) | `src/shared/ui/input-date-range-picker.tsx` |
|
||||
| 알림내용 | 텍스트 | N | 공백 | `content` | |
|
||||
| 사용자 | 텍스트 | N | 공백 | `recipientNum` | |
|
||||
| 결과 | 드롭다운 | N | 전체 | `successYn` | `SUCCESS` \| `FAIL` \| `ALL` |
|
||||
| 시스템 | SiteSelect | N | 전체 | `system` | `src/entities/site/ui/site-select.tsx` |
|
||||
|
||||
### 4-2. 버튼
|
||||
|
||||
| 버튼명 | 동작 |
|
||||
| ------ | ---------------------------------------------------------------- |
|
||||
| 조회 | 현재 필터로 영역 B 목록을 재조회한다. 페이지는 1페이지로 초기화. |
|
||||
| 초기화 | 검색 필드를 기본값으로 되돌린다. |
|
||||
|
||||
---
|
||||
|
||||
## 5. 영역 B: 알림톡 발송 이력 그리드
|
||||
|
||||
### 5-1. 그리드 컬럼
|
||||
|
||||
| 표시명 | Field | 비고 |
|
||||
| -------- | -------------- | ------------------------------------------------------------------------- |
|
||||
| 순번 | — | 클라이언트 표시용 인덱스(서버 필드 없음). 페이지네이션 시 오프셋 반영 |
|
||||
| 시스템 | `siteSystem` | 응답 시 `templateCode` 앞 4자 기반 파생(행정지원·하수도통계·포털·기타) |
|
||||
| 알림내용 | `content` | 긴 텍스트 말줄임 처리. 툴팁 적용하여 전체 텍스트 확인 가능. |
|
||||
| 수신자 | `recipientNum` | 실데이터·마스킹 규칙 **TBD** |
|
||||
| 수신일 | `dateRslt` | `YYYY-MM-DD HH:mm:ss` 형식 표시. |
|
||||
| 결과 | `successYn` | UI 표시: `SUCCESS` → 성공, `FAIL` → 실패(백엔드는 `reportCode` 기반 파생) |
|
||||
|
||||
- 행 클릭 UX 없음.
|
||||
|
||||
---
|
||||
|
||||
## 6. API/DTO 명세
|
||||
|
||||
### 6-1. 공통
|
||||
|
||||
- 목록 응답: Spring `Page` 직렬화 형태 — 프론트 타입 `PageableList<NtftalkMmtLogHistory>` (`content`, `totalElements`, `totalPages`, `number`, `size` 등).
|
||||
- 목록 요청 쿼리: `Pageable` 표준 파라미터 `page`, `size`, `sort` (`PageableParams`).
|
||||
|
||||
### 6-2. 알림톡 발송 이력 API
|
||||
|
||||
Base: `/ntftalk-service/api/v1/ata/mmt-log-history`
|
||||
|
||||
| 기능 | Method | URL | Request DTO | Response DTO | API(클라이언트 함수명) |
|
||||
| ----------------- | ------ | ----------------------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ----------------------------- |
|
||||
| 목록 조회(페이징) | GET | `/ata/mmt-log-history` | Query: `AtaMmtLogHistorySearchDto` 필드 + `Pageable`(`page`,`size`,`sort`) | `Page<AtaMmtLogHistoryResponseDto>` → `NtftalkMmtLogHistoryPageList` | `getNtftalkMmtLogHistoryPage` |
|
||||
| 상세 조회 | GET | `/ata/mmt-log-history/{mtPr}` | Path: `mtPr` | `AtaMmtLogHistoryResponseDto` → `NtftalkMmtLogHistory` | `getNtftalkMmtLogHistory` |
|
||||
| 등록 | POST | `/ata/mmt-log-history` | Body: `AtaMmtLogHistorySaveRequestDto` → `NtftalkMmtLogHistorySavePayload` | `AtaMmtLogHistoryResponseDto` | `saveNtftalkMmtLogHistory` |
|
||||
| 수정 | PUT | `/ata/mmt-log-history/{mtPr}` | Path: `mtPr`, Body: `AtaMmtLogHistoryUpdateRequestDto` → `NtftalkMmtLogHistoryUpdatePayload` | `AtaMmtLogHistoryResponseDto` | `updateNtftalkMmtLogHistory` |
|
||||
| 삭제 | DELETE | `/ata/mmt-log-history/{mtPr}` | Path: `mtPr` | 없음(204) | `deleteNtftalkMmtLogHistory` |
|
||||
|
||||
#### 검색 Query ↔ TypeScript (`NtftalkMmtLogHistorySearchParams`)
|
||||
|
||||
| Query (Java 필드) | TS 필드 | 설명 |
|
||||
| ----------------- | --------------- | ------------------------------------ |
|
||||
| `subject` | `subject?` | 메시지 제목 |
|
||||
| `content` | `content?` | 전송 메시지 내용 |
|
||||
| `recipientNum` | `recipientNum?` | 수신자 전화번호 |
|
||||
| `msgStatus` | `msgStatus?` | `1` 전송대기, `2` 결과대기, `3` 완료 |
|
||||
| `reportCode` | `reportCode?` | 전송 결과 코드(`1000`: 성공) |
|
||||
| `dateFrom` | `dateFrom?` | `yyyy-MM-dd` |
|
||||
| `dateTo` | `dateTo?` | `yyyy-MM-dd` |
|
||||
| `system` | `system?` | `ADSS` \| `CWMS` \| `PORT` \| `ALL` |
|
||||
| `successYn` | `successYn?` | `SUCCESS` \| `FAIL` \| `ALL` |
|
||||
|
||||
#### 응답 행 ↔ TypeScript (`NtftalkMmtLogHistory`)
|
||||
|
||||
백엔드 `AtaMmtLogHistoryResponseDto`와 동일 필드명: `mtPr`, `mtRefkey`, `priority`, `dateClientReq`, `subject`, `content`, `callback`, `msgStatus`, `recipientNum`, `dateMtSent`, `dateRslt`, `dateMtReport`, `reportCode`, `countryCode`, `msgType`, `regDate`, `senderKey`, `templateCode`, `siteSystem`, `successYn`.
|
||||
|
||||
---
|
||||
|
||||
## 7. UI 구현 가이드
|
||||
|
||||
### 7-1. 기술 스택·원칙
|
||||
|
||||
- **UI**: `@common/components` 공통 컴포넌트
|
||||
- **테이블**: `@tanstack/react-table` + `useDataTable`(`src/shared/lib/use-data-table.tsx`)
|
||||
- **데이터**: `@tanstack/react-query` — 목록은 `getNtftalkMmtLogHistoryPage`, 무한 스크롤 vs 페이지 UI는 **TBD**
|
||||
- **레이아웃**: App Router `app/(with-base-layout)/ntftalk-history/page.tsx`에서 페이지 UI 마운트
|
||||
|
||||
### 7-2. 모듈·파일 배치
|
||||
|
||||
| 구분 | 경로 |
|
||||
| --------------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| 라우트 엔트리 | `apps/cs/app/(with-base-layout)/ntftalk-history/page.tsx` |
|
||||
| 페이지 셸 | `apps/cs/src/pages/ntftalk-history/ui/ntftalk-history-page.tsx` |
|
||||
| 컬럼 정의 | `apps/cs/src/pages/ntftalk-history/model/*-table-columns.tsx` |
|
||||
| API·타입 | `apps/cs/src/entities/ntftalk/model/ntftalk-mmt-log-history-interface.ts`, `api/ntftalk-mmt-log-history-service.ts` |
|
||||
| 엔드포인트 상수 | `apps/cs/src/shared/config/api.ts` — `ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY` |
|
||||
|
||||
### 7-3. 영역별 UI 매핑
|
||||
|
||||
| 영역 | 화면 요소 | 컴포넌트·훅 | 구현 비고 |
|
||||
| ---- | ------------ | ------------------------------------------------ | ---------------------------- |
|
||||
| A | 검색 폼 | `Input`, `Label`, `Select`, `Button` | |
|
||||
| B | 이력 그리드 | `useDataTable` + `ColumnDef`, `manualPagination` | |
|
||||
| 공통 | 로딩·빈 목록 | `LoadingWithAnimation`, 빈 데이터 안내 | 기타 목록 페이지와 동일 수준 |
|
||||
|
||||
### 7-4. 데이터 흐름
|
||||
|
||||
```
|
||||
BEGIN
|
||||
|
||||
// 최초 진입
|
||||
CALL 알림톡발송이력목록조회(기본 검색 조건, page=0, size=10)
|
||||
DISPLAY 알림톡 발송 이력 그리드 (영역 B)
|
||||
|
||||
ON [조회] 버튼 CLICK DO
|
||||
CALL 알림톡발송이력목록조회(조회기간→dateFrom/dateTo, content, recipientNum, successYn, system, page=0)
|
||||
DISPLAY 알림톡 발송 이력 그리드 (영역 B)
|
||||
END ON
|
||||
|
||||
ON [초기화] 버튼 CLICK DO
|
||||
RESET 검색 조건 → 기본값
|
||||
END ON
|
||||
|
||||
END
|
||||
```
|
||||
Reference in New Issue
Block a user