[cs] WIP: 알림톡템플릿관리
This commit is contained in:
@@ -46,14 +46,14 @@
|
||||
|
||||
### 4-1. 필드 정의
|
||||
|
||||
| 표시명 | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑 | 비고 |
|
||||
| ---------- | --------- | ---- | ------ | ------------------ | --------------------------------------------------------- |
|
||||
| 템플릿코드 | 텍스트 | N | 공백 | `templateCode` | 부분/완전일치 여부는 백엔드 정책 확인 필요 |
|
||||
| 템플릿명 | 텍스트 | N | 공백 | `templateName` | 부분/완전일치 여부는 백엔드 정책 확인 필요 |
|
||||
| 템플릿내용 | 텍스트 | N | 공백 | - | 현재 `NtftalkTempSearchParams`에 미정의(백엔드 확장 필요) |
|
||||
| 채널 | 드롭다운 | N | 전체 | `senderKey` | 화면명 `@채널`과 `senderKey` 매핑 |
|
||||
| 검수상태 | 드롭다운 | N | 전체 | `inspectionStatus` | 예: 승인/반려/요청 등 코드값 |
|
||||
| 메시지유형 | 드롭다운 | N | 전체 | - | 현재 `NtftalkTempSearchParams`에 미정의(백엔드 확장 필요) |
|
||||
| 표시명 | 입력 유형 | 필수 | 기본값 | API 파라미터 매핑 | 비고 |
|
||||
| ---------- | --------- | ---- | ------ | ------------------ | --------------------------------------- |
|
||||
| 템플릿코드 | 텍스트 | N | 공백 | `templateCode` | |
|
||||
| 템플릿명 | 텍스트 | N | 공백 | `templateName` | |
|
||||
| 템플릿내용 | 텍스트 | N | 공백 | - | 현재 `NtftalkTempSearchParams`에 미정의 |
|
||||
| 채널 | 드롭다운 | N | 전체 | `senderKey` | |
|
||||
| 검수상태 | 드롭다운 | N | 전체 | `inspectionStatus` | |
|
||||
| 메시지유형 | 드롭다운 | N | 전체 | - | 현재 `NtftalkTempSearchParams`에 미정의 |
|
||||
|
||||
### 4-2. 버튼
|
||||
|
||||
@@ -155,3 +155,108 @@ Base: `ENDPOINT.NTFTALK_SERVICE.NTFTALK_VAR`(`/ntftalk-service/api/v1/ntftalk-va
|
||||
| 변수 등록 | POST | `/ntftalk-var` | `NtftalkVarSavePayload` | `NtftalkVar` | `saveNtftalkVar` |
|
||||
| 변수 수정 | PUT | `/ntftalk-var/{varCd}` | Path: `varCd`, Body: `NtftalkVarUpdatePayload` | `NtftalkVar` | `updateNtftalkVar` |
|
||||
| 변수 삭제 | DELETE | `/ntftalk-var/{varCd}` | Path: `varCd` | 없음 | `deleteNtftalkVar` |
|
||||
|
||||
---
|
||||
|
||||
## 8. UI 구현 가이드
|
||||
|
||||
### 8-1. 기술 스택·원칙
|
||||
|
||||
- **UI**: `@common/components` 공통 컴포넌트 사용
|
||||
- **테이블**: `@tanstack/react-table` + `useDataTable`(`src/shared/lib/use-data-table.tsx`)
|
||||
- **데이터**: `@tanstack/react-query`(등록/수정 폼에 검증이 필요하면 `react-hook-form` + `zod` 사용)
|
||||
- **레이아웃**: App Router `app/(with-base-layout)/.../page.tsx`에서 페이지 UI 컴포넌트만 마운트
|
||||
|
||||
### 8-2. 모듈·파일 배치
|
||||
|
||||
| 구분 | 경로 |
|
||||
| ------------- | ----------------------------------------------------------------------- |
|
||||
| 라우트 엔트리 | `apps/cs/app/(with-base-layout)/ntftalk-temp/page.tsx` |
|
||||
| 페이지 셸 | `apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-page.tsx` |
|
||||
| 컬럼 정의 | `apps/cs/src/pages/ntftalk-temp/model/*-table-columns.tsx` |
|
||||
| API·타입 | `apps/cs/src/entities/ntftalk/model/*-interface.ts`, `api/*-service.ts` |
|
||||
| 다이얼로그 | `apps/cs/src/pages/ntftalk-temp/ui/*-dialog.tsx` |
|
||||
|
||||
### 8-3. 영역별 UI 매핑
|
||||
|
||||
| 영역 | 화면 요소 | 권장 컴포넌트·훅 | 구현 비고 |
|
||||
| ---- | ------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
|
||||
| A | 검색 폼 | `Input`, `Label`, `Select`, `Button` | |
|
||||
| B | 템플릿 그리드 | `useDataTable` + `ColumnDef`, `RowSelectionState`(컬럼 선택) | `manualPagination`, `onRowClick` → **8-4** 상세 다이얼로그 |
|
||||
| B | 툴바 | `Button` 그룹 | 검수요청·삭제 등 확인은 `useConfirm` + `src/shared/ui/confirm-dialog.tsx` 등 기존 패턴 재사용 |
|
||||
| C | 변수 그리드 | `useDataTable` + `ColumnDef`, `Input` + `zod` | **변수추가는 인라인**(6-1절). 선택 행 삭제·저장은 변수 API(7-3절)와 매핑. 검증은 `zod` 사용 |
|
||||
| 공통 | 로딩·빈 목록 | `LoadingWithAnimation`, 빈 데이터 안내 문구 | 기타 목록 페이지와 동일 수준 처리 |
|
||||
|
||||
### 8-4. 다이얼로그·라우팅
|
||||
|
||||
| UX | 구현 단위 | 컨테이너·비고 |
|
||||
| --------------------------------- | ------------------------- | ---------------------------------------------------------------------------- |
|
||||
| 템플릿등록 (5-1) | `NtftalkTempRegistDialog` | `Dialog` + 폼. `saveNtftalkTemp`(7-2) |
|
||||
| 행 클릭 상세 (5-3) | `NtftalkTempDetailDialog` | **별도 라우트가 아닌 다이얼로그**로 구현. `getNtftalkTemp`(7-2)로 상세 로드 |
|
||||
| 선택 검수요청·선택삭제·저장 (5-1) | mutation + confirm | 각각 대응 API(7-2) 및 백엔드 정책에 따름. 미확정 엔드포인트는 **TBD**로 표기 |
|
||||
|
||||
### 8-5. 데이터 흐름
|
||||
|
||||
```
|
||||
BEGIN
|
||||
|
||||
// 최초 진입
|
||||
CALL 템플릿목록조회(기본 검색 조건)
|
||||
DISPLAY 알림톡템플릿그리드 (영역 B)
|
||||
|
||||
CALL 변수목록조회(검색 조건)
|
||||
DISPLAY 변수그리드 (영역 C)
|
||||
|
||||
// 영역 A: 조회·초기화
|
||||
ON [조회] 버튼 CLICK DO
|
||||
CALL 템플릿목록조회(템플릿코드, 템플릿명, 템플릿내용, 채널, 검수상태, 메시지유형) // → 영역 B 갱신, 페이지 1로 초기화
|
||||
END ON
|
||||
|
||||
ON [초기화] 버튼 CLICK DO
|
||||
RESET 검색 조건 → 기본값(공백·전체)
|
||||
END ON
|
||||
|
||||
// 영역 B: 알림톡 템플릿 (7-2절 참고)
|
||||
ON [템플릿갱신] CLICK DO
|
||||
CALL 템플릿목록조회(현재 검색 조건) // → 영역 B 갱신
|
||||
END ON
|
||||
|
||||
ON [템플릿등록] CLICK DO
|
||||
OPEN 템플릿등록 다이얼로그
|
||||
END ON
|
||||
|
||||
ON 영역 B 행 CLICK DO
|
||||
CALL 템플릿상세조회(선택된 templateCode)
|
||||
DISPLAY 템플릿상세 다이얼로그
|
||||
END ON
|
||||
|
||||
ON [선택 검수요청] CLICK DO
|
||||
CONFIRM 사용자
|
||||
CALL 검수요청 API(체크된 행)
|
||||
END ON
|
||||
|
||||
ON [선택삭제] CLICK DO
|
||||
CONFIRM 사용자
|
||||
CALL 템플릿삭제 API(체크된 행)
|
||||
END ON
|
||||
|
||||
ON [저장] CLICK DO
|
||||
CALL 템플릿 일괄저장 API(그리드 변경분)
|
||||
END ON
|
||||
|
||||
// 영역 C: 변수 (7-3절 참고)
|
||||
ON [변수추가] CLICK DO
|
||||
ADD 변수 행 (인라인 편집)
|
||||
END ON
|
||||
|
||||
ON [선택삭제] CLICK DO (영역 C)
|
||||
CONFIRM 사용자
|
||||
CALL 변수삭제 API(선택 행)
|
||||
END ON
|
||||
|
||||
ON [저장] CLICK DO (영역 C)
|
||||
CALL 변수 등록·수정 API(변경분)
|
||||
END ON
|
||||
|
||||
END
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user