From c222e809b68e0eabc386ed573199ba5e4313c959 Mon Sep 17 00:00:00 2001 From: bicochan Date: Tue, 29 Jul 2025 15:44:47 +0900 Subject: [PATCH] =?UTF-8?q?[apps/cs]=20feat:=20=EC=A0=91=EC=86=8D=EC=9E=90?= =?UTF-8?q?=20=ED=86=B5=EA=B3=84=20>=20=EC=A0=91=EC=86=8D=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=83=81=EC=84=B8=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/connection-log-service.ts | 33 ++++++++++ .../api/user-statistics-service.ts | 21 ------ .../pages/user-statistics/model/chart-data.ts | 2 +- ...terface.ts => connection-log-interface.ts} | 34 +++++++++- .../user-statistics/model/table-columns.ts | 65 ++++++++++--------- .../ui/user-statistics-page.tsx | 63 ++++++++++-------- 6 files changed, 139 insertions(+), 79 deletions(-) create mode 100644 apps/cs/src/pages/user-statistics/api/connection-log-service.ts delete mode 100644 apps/cs/src/pages/user-statistics/api/user-statistics-service.ts rename apps/cs/src/pages/user-statistics/model/{user-statistics-interface.ts => connection-log-interface.ts} (50%) diff --git a/apps/cs/src/pages/user-statistics/api/connection-log-service.ts b/apps/cs/src/pages/user-statistics/api/connection-log-service.ts new file mode 100644 index 000000000..0e2daeb5b --- /dev/null +++ b/apps/cs/src/pages/user-statistics/api/connection-log-service.ts @@ -0,0 +1,33 @@ +import { client } from "@/shared/api"; +import { ENDPOINT } from "@/shared/config"; +import { + type ConnectionLogParams, + type ConnectionLogList, + type ConnectionStatisticsParams, + type ConnectionStatistics, + type ConnectionLogService, +} from "../model/connection-log-interface"; + +class ConnectionLogApiService implements ConnectionLogService { + async getConnectionLog( + params: ConnectionLogParams, + ): Promise { + const response = await client.get( + `${ENDPOINT.CMS_SERVICE.CONNECTION_LOG}`, + { params }, + ); + return response.data; + } + + async getConnectionStatistics( + params: ConnectionStatisticsParams, + ): Promise { + const response = await client.get( + `${ENDPOINT.CMS_SERVICE.CONNECTION_LOG}/stat`, + { params }, + ); + return response.data; + } +} + +export const ConnectionLogApi = new ConnectionLogApiService(); diff --git a/apps/cs/src/pages/user-statistics/api/user-statistics-service.ts b/apps/cs/src/pages/user-statistics/api/user-statistics-service.ts deleted file mode 100644 index d0522267b..000000000 --- a/apps/cs/src/pages/user-statistics/api/user-statistics-service.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { client } from "@/shared/api"; -import { - type UserStatisticsService, - type ConnectionStatisticsParams, - type ConnectionStatistics, -} from "../model/user-statistics-interface"; -import { ENDPOINT } from "@/shared/config"; - -class UserStatisticsApiService implements UserStatisticsService { - async getConnectionStatistics( - params: ConnectionStatisticsParams, - ): Promise { - const response = await client.get( - `${ENDPOINT.CMS_SERVICE.CONNECTION_LOG}/stat`, - { params }, - ); - return response.data; - } -} - -export const UserStatisticsApi = new UserStatisticsApiService(); diff --git a/apps/cs/src/pages/user-statistics/model/chart-data.ts b/apps/cs/src/pages/user-statistics/model/chart-data.ts index 8c4241cfd..455dcac56 100644 --- a/apps/cs/src/pages/user-statistics/model/chart-data.ts +++ b/apps/cs/src/pages/user-statistics/model/chart-data.ts @@ -1,6 +1,6 @@ import type { ChartData, ChartOptions } from "chart.js"; import { getCssVariableValue } from "@common/components"; -import type { ConnectionStatistics } from "./user-statistics-interface"; +import type { ConnectionStatistics } from "./connection-log-interface"; export const chartData = { day: ( diff --git a/apps/cs/src/pages/user-statistics/model/user-statistics-interface.ts b/apps/cs/src/pages/user-statistics/model/connection-log-interface.ts similarity index 50% rename from apps/cs/src/pages/user-statistics/model/user-statistics-interface.ts rename to apps/cs/src/pages/user-statistics/model/connection-log-interface.ts index 42d247185..6fbf4dc15 100644 --- a/apps/cs/src/pages/user-statistics/model/user-statistics-interface.ts +++ b/apps/cs/src/pages/user-statistics/model/connection-log-interface.ts @@ -1,3 +1,32 @@ +import type { PageableList, PageableParams } from "@/shared/model"; + +export interface ConnectionLogParams extends PageableParams { + keywordType?: string; + keyword?: string; + siteId?: string; + cntnIp?: string; + cntnRgn?: string; + wbsrKnd?: string; + urlPath?: string; + cntnDtStart?: string; + cntnDtEnd?: string; +} + +export interface ConnectionLog { + cntnSn: number; + cntnDt: string; + cntnId: string; + cntnIp: string; + cntnRgn: string; + wbsrKnd: string; + menuCd: number; + siteId: string; + urlPath: string; + siteNm: string; + menuNm: string; + wbsrKndNm: string; +} + export interface ConnectionStatisticsParams { keywordType?: string; keyword?: string; @@ -33,7 +62,10 @@ export interface ConnectionStatistics { browserList: BrowserConnectionStatistics[]; } -export interface UserStatisticsService { +export type ConnectionLogList = PageableList; + +export interface ConnectionLogService { + getConnectionLog(params: ConnectionLogParams): Promise; getConnectionStatistics( params: ConnectionStatisticsParams, ): Promise; diff --git a/apps/cs/src/pages/user-statistics/model/table-columns.ts b/apps/cs/src/pages/user-statistics/model/table-columns.ts index c0d53380e..09fe58adf 100644 --- a/apps/cs/src/pages/user-statistics/model/table-columns.ts +++ b/apps/cs/src/pages/user-statistics/model/table-columns.ts @@ -1,39 +1,46 @@ -import { createColumnHelper } from "@tanstack/react-table"; -import { type AccessLog } from "./user-statistics-interface"; +import type { ColumnDef } from "@tanstack/react-table"; +import type { ConnectionLog } from "./connection-log-interface"; +import dayjs from "dayjs"; -const columnHelper = createColumnHelper(); - -export const columns = [ - columnHelper.accessor("no", { +export const columns: ColumnDef[] = [ + { header: "No", - cell: (info) => info.getValue(), - }), - columnHelper.accessor("accessTime", { + cell: ({ row, table }) => { + const totalRows = table.getRowCount(); + const currentPage = table.getState().pagination.pageIndex; + const pageSize = table.getState().pagination.pageSize; + return totalRows - (currentPage * pageSize + row.index); + }, + }, + { + accessorKey: "cntnDt", header: "접속일시", - cell: (info) => info.getValue(), - }), - columnHelper.accessor("accessIp", { + cell: ({ row }) => { + return dayjs(row.original.cntnDt).format("YYYY-MM-DD HH:mm:ss"); + }, + }, + { + accessorKey: "cntnIp", header: "접속IP", - cell: (info) => info.getValue(), - }), - columnHelper.accessor("accessRegion", { + }, + { + accessorKey: "cntnRgn", header: "접속지역", - cell: (info) => info.getValue(), - }), - columnHelper.accessor("urlPath", { + }, + { + accessorKey: "urlPath", header: "URL경로", - cell: (info) => info.getValue(), - }), - columnHelper.accessor("browser", { + }, + { + accessorKey: "wbsrKndNm", header: "브라우저", - cell: (info) => info.getValue(), - }), - columnHelper.accessor("site", { + }, + { + accessorKey: "siteNm", header: "사이트", - cell: (info) => info.getValue(), - }), - columnHelper.accessor("accessType", { + }, + { + accessorKey: "menuNm", header: "메뉴명", - cell: (info) => info.getValue(), - }), + }, ]; diff --git a/apps/cs/src/pages/user-statistics/ui/user-statistics-page.tsx b/apps/cs/src/pages/user-statistics/ui/user-statistics-page.tsx index 4fe1d3fc0..801ca5eb0 100644 --- a/apps/cs/src/pages/user-statistics/ui/user-statistics-page.tsx +++ b/apps/cs/src/pages/user-statistics/ui/user-statistics-page.tsx @@ -32,10 +32,10 @@ import { useDataTable } from "@/shared/lib"; import { ENDPOINT } from "@/shared/config"; import { NoData } from "@/shared/ui/no-data"; import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker"; -import { UserStatisticsApi } from "../api/user-statistics-service"; +import { ConnectionLogApi } from "../api/connection-log-service"; import { chartData } from "../model/chart-data"; import { columns } from "../model/table-columns"; -import { type ConnectionStatisticsParams } from "../model/user-statistics-interface"; +import type { ConnectionStatisticsParams } from "../model/connection-log-interface"; ChartJS.register( CategoryScale, @@ -80,27 +80,36 @@ function UserStatisticsPage() { const query = useQuery({ queryKey: [ENDPOINT.CMS_SERVICE.CONNECTION_LOG, searchParams], queryFn: () => - UserStatisticsApi.getConnectionStatistics({ + ConnectionLogApi.getConnectionLog({ ...searchParams, }), placeholderData: keepPreviousData, }); - // const { tableComponent, tableInstance: table } = useDataTable({ - // query, - // tableOptions: { - // columns, - // state: { - // pagination, - // }, - // manualPagination: true, - // getCoreRowModel: getCoreRowModel(), - // onPaginationChange: setPagination, - // }, - // dataTableOptions: { - // viewPagination: true, - // }, - // }); + const { data: connectionStatisticsData } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.CONNECTION_LOG, searchParams], + queryFn: () => + ConnectionLogApi.getConnectionStatistics({ + ...searchParams, + }), + placeholderData: keepPreviousData, + }); + + const { tableComponent, tableInstance: table } = useDataTable({ + query, + tableOptions: { + columns, + state: { + pagination, + }, + manualPagination: true, + getCoreRowModel: getCoreRowModel(), + onPaginationChange: setPagination, + }, + dataTableOptions: { + viewPagination: true, + }, + }); const handlePresetDateRange = (value: string) => { let presetDateRange: DateRange; @@ -229,8 +238,8 @@ function UserStatisticsPage() {

일별 접속 현황

- {query.data?.dayList.length ? ( - + {connectionStatisticsData?.dayList?.length ? ( + ) : ( )} @@ -243,8 +252,8 @@ function UserStatisticsPage() {

사이트별 접속자

- {query.data?.siteList.length ? ( - + {connectionStatisticsData?.siteList?.length ? ( + ) : ( )} @@ -256,8 +265,8 @@ function UserStatisticsPage() {

브라우저별 접속자

- {query.data?.browserList.length ? ( - + {connectionStatisticsData?.browserList?.length ? ( + ) : ( )} @@ -272,7 +281,7 @@ function UserStatisticsPage() {

접속 로그 상세

- {/* */} +
- {/*
{tableComponent}
*/} +
{tableComponent}
);