# 화면설계서: 알림톡발송이력관리 ## 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` (`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` → `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 ```