화면설계서: 알림톡발송이력관리
1. 기본 정보
| 항목 |
내용 |
| 버전 |
1.0 |
| 프로세스명 |
UI설계 |
| 화면명 |
알림톡발송이력관리 |
| 화면 유형 |
[x] 조회 [ ] 입력 [ ] 삭제 [ ] 수정 [ ] 출력 |
| 메뉴 경로 |
home > 시스템관리 > 알림톡발송이력관리 |
2. 화면 목적
알림톡 발송 이력을 기간·내용·수신자·결과·시스템 조건으로 검색하고, 발송 시스템·알림 내용·수신자·수신 시각·성공 여부를 목록으로 확인한다.
3. 화면 구성
3-1. 전체 레이아웃
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 기반 파생) |
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. 데이터 흐름
