ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[cs] WIP: 알림톡발송이력관리 페이지

Browse Source
This commit is contained in:
chanii8
2026-04-13 15:27:31 +09:00
parent 9d18ef7527
commit 43fe3a1a99
16 changed files with 702 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cs/app/(with-base-layout)/ntftalk-history/page.tsx
+3
View File
@@ -0,0 +1,3 @@
import { NtftalkHistoryPage } from "@/pages/ntftalk-history";
export default NtftalkHistoryPage;
apps/cs/docs/spec/ntftalk/history/SPEC.md
+164
View File
@@ -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
```
apps/cs/docs/spec/ntftalk/SPEC.md → apps/cs/docs/spec/ntftalk/temp/SPEC.md
View File
apps/cs/eslint.config.mjs
+2
View File
@@ -1,6 +1,7 @@
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import baseEsLintConfig from "../../eslint.config.mjs";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
@@ -11,6 +12,7 @@ const compat = new FlatCompat({
const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript"),
...baseEsLintConfig,
{
rules: {
"react-hooks/exhaustive-deps": "off",
apps/cs/src/entities/ntftalk/api/ntftalk-mmt-log-history-service.ts
+58
View File
@@ -0,0 +1,58 @@
import { client } from "@/shared/api";
import { ENDPOINT } from "@/shared/config";
import {
type NtftalkMmtLogHistory,
type NtftalkMmtLogHistoryPageList,
type NtftalkMmtLogHistorySavePayload,
type NtftalkMmtLogHistorySearchParams,
type NtftalkMmtLogHistoryService,
type NtftalkMmtLogHistoryUpdatePayload,
} from "../model/ntftalk-mmt-log-history-interface";
class NtftalkMmtLogHistoryApiService implements NtftalkMmtLogHistoryService {
async getNtftalkMmtLogHistoryPage(
params: NtftalkMmtLogHistorySearchParams,
): Promise<NtftalkMmtLogHistoryPageList> {
const response = await client.get<NtftalkMmtLogHistoryPageList>(
`${ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY}`,
{ params },
);
return response.data;
}
async getNtftalkMmtLogHistory(mtPr: number): Promise<NtftalkMmtLogHistory> {
const response = await client.get<NtftalkMmtLogHistory>(
`${ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY}/${mtPr}`,
);
return response.data;
}
async saveNtftalkMmtLogHistory(
payload: NtftalkMmtLogHistorySavePayload,
): Promise<NtftalkMmtLogHistory> {
const response = await client.post<NtftalkMmtLogHistory>(
`${ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY}`,
payload,
);
return response.data;
}
async updateNtftalkMmtLogHistory(
mtPr: number,
payload: NtftalkMmtLogHistoryUpdatePayload,
): Promise<NtftalkMmtLogHistory> {
const response = await client.put<NtftalkMmtLogHistory>(
`${ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY}/${mtPr}`,
payload,
);
return response.data;
}
async deleteNtftalkMmtLogHistory(mtPr: number): Promise<void> {
await client.delete(
`${ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY}/${mtPr}`,
);
}
}
export const NtftalkMmtLogHistoryApi = new NtftalkMmtLogHistoryApiService();
apps/cs/src/entities/ntftalk/index.ts
+8
View File
@@ -1,6 +1,7 @@
export { NtftalkVarApi } from "./api/ntftalk-var-service";
export { NtftalkTempApi } from "./api/ntftalk-temp-service";
export { NtftalkBiztalkApi } from "./api/ntftalk-biztalk-service";
export { NtftalkMmtLogHistoryApi } from "./api/ntftalk-mmt-log-history-service";
export type {
NtftalkVar,
NtftalkVarPageList,
@@ -27,3 +28,10 @@ export type {
NtftalkTempSearchParams,
NtftalkTempUpdatePayload,
} from "./model/ntftalk-temp-interface";
export type {
NtftalkMmtLogHistory,
NtftalkMmtLogHistoryPageList,
NtftalkMmtLogHistorySavePayload,
NtftalkMmtLogHistorySearchParams,
NtftalkMmtLogHistoryUpdatePayload,
} from "./model/ntftalk-mmt-log-history-interface";
apps/cs/src/entities/ntftalk/model/ntftalk-mmt-log-history-interface.ts
+84
View File
@@ -0,0 +1,84 @@
import type { PageableList, PageableParams } from "@/shared/model";
export interface NtftalkMmtLogHistorySearchParams extends PageableParams {
subject?: string;
content?: string;
recipientNum?: string;
/** 1:전송대기, 2:결과대기, 3:완료 */
msgStatus?: string;
/** 1000:성공 */
reportCode?: string;
/** yyyy-MM-dd */
dateFrom?: string;
/** yyyy-MM-dd */
dateTo?: string;
/** ADSS | CWMS | PORT | ALL */
system?: string;
/** SUCCESS | FAIL | ALL */
successYn?: string;
}
export interface NtftalkMmtLogHistory {
mtPr: number;
mtRefkey?: string | null;
priority?: string | null;
dateClientReq?: string | null;
subject?: string | null;
content?: string | null;
callback?: string | null;
msgStatus?: string | null;
recipientNum?: string | null;
dateMtSent?: string | null;
dateRslt?: string | null;
dateMtReport?: string | null;
reportCode?: string | null;
countryCode?: string | null;
msgType?: number | null;
regDate?: string | null;
senderKey?: string | null;
templateCode?: string | null;
siteSystem?: string | null;
successYn?: string | null;
}
export interface NtftalkMmtLogHistorySavePayload {
mtPr: number;
mtRefkey?: string;
priority?: string;
dateClientReq?: string;
subject: string;
content: string;
callback: string;
msgStatus?: string;
recipientNum: string;
reportCode?: string;
countryCode?: string;
msgType?: number;
senderKey: string;
templateCode?: string;
responseMethod?: string;
}
export interface NtftalkMmtLogHistoryUpdatePayload {
content: string;
recipientNum: string;
msgStatus?: string;
reportCode?: string;
}
export type NtftalkMmtLogHistoryPageList = PageableList<NtftalkMmtLogHistory>;
export interface NtftalkMmtLogHistoryService {
getNtftalkMmtLogHistoryPage(
params: NtftalkMmtLogHistorySearchParams,
): Promise<NtftalkMmtLogHistoryPageList>;
getNtftalkMmtLogHistory(mtPr: number): Promise<NtftalkMmtLogHistory>;
saveNtftalkMmtLogHistory(
payload: NtftalkMmtLogHistorySavePayload,
): Promise<NtftalkMmtLogHistory>;
updateNtftalkMmtLogHistory(
mtPr: number,
payload: NtftalkMmtLogHistoryUpdatePayload,
): Promise<NtftalkMmtLogHistory>;
deleteNtftalkMmtLogHistory(mtPr: number): Promise<void>;
}
apps/cs/src/pages/ntftalk-history/index.ts
+1
View File
@@ -0,0 +1 @@
export { NtftalkHistoryPage } from "./ui/ntftalk-history-page";
apps/cs/src/pages/ntftalk-history/model/ntftalk-history-table-columns.tsx
+64
View File
@@ -0,0 +1,64 @@
import type { ColumnDef } from "@tanstack/react-table";
import type { NtftalkMmtLogHistory } from "@/entities/ntftalk";
function formatDateTime(value: string | null | undefined): string {
if (!value) return "—";
const normalized = value.includes("T")
? value.replace("T", " ").slice(0, 19)
: value.slice(0, 19);
return normalized;
}
function formatResult(successYn: string | null | undefined): string {
if (!successYn) return "—";
if (successYn === "SUCCESS") return "성공";
if (successYn === "FAIL") return "실패";
return successYn;
}
export function createNtftalkHistoryColumns(): ColumnDef<NtftalkMmtLogHistory>[] {
return [
{
id: "rowNo",
header: "순번",
enableSorting: false,
cell: ({ row, table }) => {
const { pageIndex, pageSize } = table.getState().pagination;
return pageIndex * pageSize + row.index + 1;
},
},
{
accessorKey: "siteSystem",
header: "시스템",
cell: ({ getValue }) => (getValue() as string) || "—",
},
{
accessorKey: "content",
header: "알림내용",
cell: ({ getValue }) => {
const v = getValue() as string;
if (!v) return "—";
return (
<span className="line-clamp-2 max-w-[28rem] text-left" title={v}>
{v}
</span>
);
},
},
{
accessorKey: "recipientNum",
header: "수신자",
cell: ({ getValue }) => (getValue() as string) || "—",
},
{
accessorKey: "dateRslt",
header: "수신일",
cell: ({ getValue }) => formatDateTime(getValue() as string | null),
},
{
accessorKey: "successYn",
header: "결과",
cell: ({ getValue }) => formatResult(getValue() as string | null),
},
];
}
apps/cs/src/pages/ntftalk-history/ui/ntftalk-history-page.tsx
+247
View File
@@ -0,0 +1,247 @@
"use client";
import { useMemo, useState } from "react";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
import dayjs from "dayjs";
import { ENDPOINT } from "@/shared/config";
import { useDataTable } from "@/shared/lib";
import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
import {
NtftalkMmtLogHistoryApi,
type NtftalkMmtLogHistorySearchParams,
} from "@/entities/ntftalk";
import { SiteSelect } from "@/entities/site";
import {
Button,
Input,
Label,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@common/components";
import { createNtftalkHistoryColumns } from "../model/ntftalk-history-table-columns";
type DateRange = {
from?: Date | null;
to?: Date | null;
};
type PresetPeriod = "" | "3M" | "6M" | "1Y" | "CUSTOM";
function computeDateRangeFromPreset(
preset: Extract<PresetPeriod, "3M" | "6M" | "1Y">,
): DateRange {
const to = dayjs().endOf("day").toDate();
const base = dayjs();
let fromDay: dayjs.Dayjs;
switch (preset) {
case "3M":
fromDay = base.subtract(3, "month");
break;
case "6M":
fromDay = base.subtract(6, "month");
break;
case "1Y":
fromDay = base.subtract(1, "year");
break;
}
return { from: fromDay.startOf("day").toDate(), to };
}
function NtftalkHistoryPage() {
const [contentInput, setContentInput] = useState("");
const [recipientInput, setRecipientInput] = useState("");
const [presetPeriod, setPresetPeriod] = useState<PresetPeriod>("");
const [dateRange, setDateRange] = useState<DateRange>({
from: null,
to: null,
});
const [resultFilter, setResultFilter] = useState("ALL");
const [systemFilter, setSystemFilter] = useState("ALL");
const [searchParams, setSearchParams] =
useState<NtftalkMmtLogHistorySearchParams>({ sort: "dateMtReport,desc" });
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const listQuery = useQuery({
queryKey: [
ENDPOINT.NTFTALK_SERVICE.MMT_LOG_HISTORY,
searchParams,
pagination,
],
queryFn: () =>
NtftalkMmtLogHistoryApi.getNtftalkMmtLogHistoryPage({
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
placeholderData: keepPreviousData,
});
const columns = useMemo(() => createNtftalkHistoryColumns(), []);
const { tableComponent } = useDataTable({
query: listQuery,
tableOptions: {
columns,
state: { pagination },
manualPagination: true,
getCoreRowModel: getCoreRowModel(),
onPaginationChange: setPagination,
},
dataTableOptions: {
viewPagination: true,
},
});
const buildSearchParamsFromInputs = (): NtftalkMmtLogHistorySearchParams => ({
sort: searchParams.sort ?? "dateMtReport,desc",
content: contentInput.trim() || undefined,
recipientNum: recipientInput.trim() || undefined,
successYn: resultFilter,
system: systemFilter,
dateFrom: dateRange.from
? dayjs(dateRange.from).format("YYYY-MM-DD")
: undefined,
dateTo: dateRange.to ? dayjs(dateRange.to).format("YYYY-MM-DD") : undefined,
});
const handleSearch = (e: React.FormEvent) => {
e.preventDefault();
setPagination((p) => ({ ...p, pageIndex: 0 }));
setSearchParams(buildSearchParamsFromInputs());
};
const handlePresetPeriodChange = (value: PresetPeriod) => {
setPresetPeriod(value);
if (value === "3M" || value === "6M" || value === "1Y") {
setDateRange(computeDateRangeFromPreset(value));
}
};
const handleDateRangeChange = (next: DateRange) => {
setDateRange(next);
setPresetPeriod("CUSTOM");
};
const handleReset = () => {
setContentInput("");
setRecipientInput("");
setPresetPeriod("");
setDateRange({ from: null, to: null });
setResultFilter("ALL");
setSystemFilter("ALL");
setPagination((p) => ({ ...p, pageIndex: 0 }));
setSearchParams({ sort: "dateMtReport,desc" });
};
return (
<div className="card card-border !mt-6 flex flex-col gap-4">
<div className="card card-border">
<form
onSubmit={handleSearch}
className="flex flex-col gap-4 p-2 md:flex-row md:items-end md:justify-between"
>
<div className="flex flex-col gap-4">
<div className="flex flex-wrap items-end gap-4">
<div className="flex flex-wrap items-center gap-2">
<Label className="whitespace-nowrap text-label">조회기간</Label>
<Select
value={presetPeriod}
onValueChange={handlePresetPeriodChange}
>
<SelectTrigger className="w-[16rem]">
<SelectValue placeholder="기간 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="3M">3개월</SelectItem>
<SelectItem value="6M">6개월</SelectItem>
<SelectItem value="1Y">1년</SelectItem>
<SelectItem value="CUSTOM">직접입력</SelectItem>
</SelectContent>
</Select>
<InputDateRangePicker
dateRange={dateRange}
setDateRange={handleDateRangeChange}
disabled={presetPeriod !== "CUSTOM"}
/>
</div>
</div>
<div className="flex flex-wrap gap-6">
<div className="flex items-center gap-2">
<Label className="whitespace-nowrap text-label">알림내용</Label>
<Input
className="w-[16rem]"
value={contentInput}
onChange={(e) => setContentInput(e.target.value)}
/>
</div>
<div className="flex items-center gap-2">
<Label className="whitespace-nowrap text-label">사용자</Label>
<Input
className="w-[16rem]"
value={recipientInput}
onChange={(e) => setRecipientInput(e.target.value)}
placeholder="수신자 번호"
/>
</div>
<div className="flex items-center gap-2">
<Label className="whitespace-nowrap text-label">결과</Label>
<Select value={resultFilter} onValueChange={setResultFilter}>
<SelectTrigger className="w-[16rem]">
<SelectValue placeholder="전체" />
</SelectTrigger>
<SelectContent>
<SelectItem value="ALL">전체</SelectItem>
<SelectItem value="SUCCESS">성공</SelectItem>
<SelectItem value="FAIL">실패</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center gap-2">
<Label className="whitespace-nowrap text-label">시스템</Label>
<SiteSelect
className="w-[16rem]"
value={systemFilter}
onValueChange={(value) => setSystemFilter(value)}
enabledAllSite
/>
</div>
</div>
</div>
<div className="flex shrink-0 gap-2">
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</div>
</form>
</div>
<div className="card card-border">
<div className="card-header">
<h3 className="text-2xl font-medium text-label">알림톡 발송 이력</h3>
</div>
<div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
</div>
</div>
);
}
export { NtftalkHistoryPage };
apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-detail-dialog.tsx
+4 -3
View File
@@ -1,6 +1,10 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import { ENDPOINT } from "@/shared/config";
import { NoData } from "@/shared/ui/no-data";
import { NtftalkTempApi } from "@/entities/ntftalk";
import {
Dialog,
DialogContent,
@@ -13,9 +17,6 @@ import {
TableHead,
TableRow,
} from "@common/components";
import { NtftalkTempApi } from "@/entities/ntftalk";
import { ENDPOINT } from "@/shared/config";
import { NoData } from "@/shared/ui/no-data";
interface NtftalkTempDetailDialogProps {
templateCode: string | null;
apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-page.tsx
+29 -25
View File
@@ -2,12 +2,38 @@
import { useCallback, useMemo, useState } from "react";
import { useFieldArray, useForm, useWatch } from "react-hook-form";
import { useConfirm } from "@frontend-opensource/use-react-hooks";
import {
keepPreviousData,
useQuery,
useQueryClient,
} from "@tanstack/react-query";
import {
getCoreRowModel,
type PaginationState,
type RowSelectionState,
useReactTable,
} from "@tanstack/react-table";
import { z } from "zod";
import { AUTH_USER_ID, ENDPOINT } from "@/shared/config";
import {
getCookie,
useAlertStore,
useDataTable,
useMutationWrapper,
} from "@/shared/lib";
import { NoData } from "@/shared/ui/no-data";
import {
NtftalkBiztalkApi,
type NtftalkBiztalkInspectionRequestItem,
type NtftalkTemp,
NtftalkTempApi,
type NtftalkTempSearchParams,
NtftalkVarApi,
type NtftalkVarSearchParams,
} from "@/entities/ntftalk";
import {
Button,
DataTable,
@@ -20,36 +46,14 @@ import {
SelectTrigger,
SelectValue,
} from "@common/components";
import {
getCoreRowModel,
type PaginationState,
type RowSelectionState,
useReactTable,
} from "@tanstack/react-table";
import { z } from "zod";
import {
NtftalkBiztalkApi,
NtftalkTempApi,
NtftalkVarApi,
type NtftalkBiztalkInspectionRequestItem,
type NtftalkTemp,
type NtftalkTempSearchParams,
type NtftalkVarSearchParams,
} from "@/entities/ntftalk";
import { AUTH_USER_ID, ENDPOINT } from "@/shared/config";
import {
getCookie,
useAlertStore,
useDataTable,
useMutationWrapper,
} from "@/shared/lib";
import { NoData } from "@/shared/ui/no-data";
import { createTemplateColumns } from "../model/template-table-columns";
import {
createEmptyVarDraft,
type NtftalkVarGridRow,
} from "../model/ntftalk-var-grid";
import { createTemplateColumns } from "../model/template-table-columns";
import { createVarColumns } from "../model/var-table-columns";
import { NtftalkTempDetailDialog } from "./ntftalk-temp-detail-dialog";
import { NtftalkTempRegistDialog } from "./ntftalk-temp-regist-dialog";
apps/cs/src/pages/ntftalk-temp/ui/ntftalk-temp-regist-dialog.tsx
+24 -21
View File
@@ -1,8 +1,9 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { useEffect, useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
keepPreviousData,
useQuery,
@@ -13,10 +14,28 @@ import {
type PaginationState,
type RowSelectionState,
} from "@tanstack/react-table";
import { ENDPOINT } from "@/shared/config";
import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from "@/shared/ui/form";
import { NoData } from "@/shared/ui/no-data";
import {
NtftalkBiztalkApi,
NtftalkTempApi,
NtftalkVarApi,
type NtftalkVarSearchParams,
} from "@/entities/ntftalk";
import {
Button,
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
Input,
@@ -33,29 +52,13 @@ import {
TableBody,
TableCell,
TableHead,
Textarea,
TableRow,
DialogFooter,
Textarea,
} from "@common/components";
import {
NtftalkBiztalkApi,
NtftalkTempApi,
NtftalkVarApi,
type NtftalkVarSearchParams,
} from "@/entities/ntftalk";
import { ENDPOINT } from "@/shared/config";
import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
import { NoData } from "@/shared/ui/no-data";
import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from "@/shared/ui/form";
import {
ntftalkTempSaveFormSchema,
type NtftalkTempSaveFormData,
ntftalkTempSaveFormSchema,
} from "../model/ntftalk-temp-save-schema";
import { createVarColumns } from "../model/var-table-columns";
apps/cs/src/shared/config/api.ts
+1
View File
@@ -70,6 +70,7 @@ export const ENDPOINT = {
NTFTALK_VAR: "/ntftalk-service/api/v1/ntftalk-var",
NTFTALK_TEMP: "/ntftalk-service/api/v1/ntftalk-temp",
NTFTALK_BIZTALK: "/ntftalk-service/api/v1/ntftalk-biztalk",
MMT_LOG_HISTORY: "/ntftalk-service/api/v1/ata/mmt-log-history",
},
};
apps/cs/src/shared/ui/input-date-range-picker.tsx
+9 -3
View File
@@ -1,20 +1,24 @@
import { InputDatePicker } from "@common/components";
import { useEffect } from "react";
import { InputDatePicker } from "@common/components";
import { useAlertStore } from "../lib";
type DateRange = {
from?: Date;
to?: Date;
from?: Date | null;
to?: Date | null;
};
type InputDateRangePickerProps = {
dateRange: DateRange;
setDateRange: (dateRange: DateRange) => void;
disabled?: boolean;
};
function InputDateRangePicker({
dateRange,
setDateRange,
disabled,
}: InputDateRangePickerProps) {
const alert = useAlertStore((state) => state.setMessage);
@@ -32,6 +36,7 @@ function InputDateRangePicker({
onChange={(date) => {
setDateRange({ ...dateRange, from: date });
}}
disabled={disabled}
/>
~
<InputDatePicker
@@ -39,6 +44,7 @@ function InputDateRangePicker({
onChange={(date) => {
setDateRange({ ...dateRange, to: date });
}}
disabled={disabled}
/>
</>
);
packages/common/components/src/ui/input-date-picker/index.tsx
+4 -4
View File
@@ -12,7 +12,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "../popover";
import "./input-date-picker.css";
export interface InputDatePickerProps {
value?: Date;
value?: Date | null;
defaultValue?: Date;
onChange?: (date: Date | undefined) => void;
placeholder?: string;
@@ -34,7 +34,7 @@ export function InputDatePicker({
const [internalDate, setInternalDate] = useState<Date | undefined>(
defaultValue,
);
const [month, setMonth] = useState<Date | undefined>(
const [month, setMonth] = useState<Date | null | undefined>(
isControlled ? controlledValue : defaultValue,
);
@@ -112,9 +112,9 @@ export function InputDatePicker({
>
<Calendar
mode="single"
selected={date}
selected={date ?? undefined}
captionLayout="dropdown"
month={month}
month={month ?? undefined}
onMonthChange={setMonth}
onSelect={(newDate) => {
handleDateChange(newDate);