summaryrefslogtreecommitdiff
path: root/lib/page-visits/table
diff options
context:
space:
mode:
Diffstat (limited to 'lib/page-visits/table')
-rw-r--r--lib/page-visits/table/page-visits-table-columns.tsx309
-rw-r--r--lib/page-visits/table/page-visits-table-toolbar-actions.tsx112
-rw-r--r--lib/page-visits/table/page-visits-table.tsx146
3 files changed, 567 insertions, 0 deletions
diff --git a/lib/page-visits/table/page-visits-table-columns.tsx b/lib/page-visits/table/page-visits-table-columns.tsx
new file mode 100644
index 00000000..e1d2fed4
--- /dev/null
+++ b/lib/page-visits/table/page-visits-table-columns.tsx
@@ -0,0 +1,309 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+
+import { formatDate } from "@/lib/utils"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { ExtendedPageVisit } from "../validation"
+import { Eye, ExternalLink, Clock, User, Ellipsis } from "lucide-react"
+
+interface GetColumnsProps {
+ setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ExtendedPageVisit> | null>>
+}
+
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ExtendedPageVisit>[] {
+ return [
+ {
+ id: "select",
+ header: ({ table }) => (
+ <Checkbox
+ checked={
+ table.getIsAllPageRowsSelected() ||
+ (table.getIsSomePageRowsSelected() && "indeterminate")
+ }
+ onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+ aria-label="Select all"
+ className="translate-y-0.5"
+ />
+ ),
+ cell: ({ row }) => (
+ <Checkbox
+ checked={row.getIsSelected()}
+ onCheckedChange={(value) => row.toggleSelected(!!value)}
+ aria-label="Select row"
+ className="translate-y-0.5"
+ />
+ ),
+ enableSorting: false,
+ enableHiding: false,
+ },
+ {
+ id: "사용자",
+ header: "사용자",
+ columns: [
+ {
+ accessorKey: "userEmail",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="사용자" />
+ ),
+ cell: ({ row }) => {
+ const userEmail = row.getValue("userEmail") as string | null
+ const userName = row.original.userName
+
+ if (!userEmail) {
+ return (
+ <div className="flex items-center gap-2">
+ <User className="size-3 text-muted-foreground" />
+ <span className="text-muted-foreground text-xs">익명</span>
+ </div>
+ )
+ }
+
+ return (
+ <div className="flex flex-col">
+ <span className="font-medium text-sm">{userEmail}</span>
+ {userName && (
+ <span className="text-xs text-muted-foreground">{userName}</span>
+ )}
+ </div>
+ )
+ },
+ },
+ ],
+ },
+ {
+ id: "페이지 정보",
+ header: "페이지 정보",
+ columns: [
+ {
+ accessorKey: "route",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="경로" />
+ ),
+ cell: ({ row }) => {
+ const route = row.getValue("route") as string
+ const pageTitle = row.original.pageTitle
+
+ return (
+ <div className="flex flex-col max-w-[200px]">
+ <code className="text-xs bg-muted px-1 py-0.5 rounded font-mono">
+ {route}
+ </code>
+ {pageTitle && (
+ <span className="text-xs text-muted-foreground mt-1 truncate">
+ {pageTitle}
+ </span>
+ )}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "visitedAt",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="방문 시간" />
+ ),
+ cell: ({ row }) => {
+ const date = row.getValue("visitedAt") as Date
+ return (
+ <Tooltip>
+ <TooltipTrigger>
+ <div className="text-sm">
+ {formatDate(date, 'KR')}
+ </div>
+ </TooltipTrigger>
+ <TooltipContent>
+ {formatDate(date)}
+ </TooltipContent>
+ </Tooltip>
+ )
+ },
+ },
+ {
+ accessorKey: "duration",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="체류 시간" />
+ ),
+ cell: ({ row }) => {
+ const duration = row.getValue("duration") as number | null
+ const isLongVisit = row.original.isLongVisit
+
+ if (!duration) {
+ return <span className="text-muted-foreground">-</span>
+ }
+
+ const minutes = Math.floor(duration / 60)
+ const seconds = duration % 60
+
+ let displayText = ""
+ if (minutes > 0) {
+ displayText = `${minutes}분 ${seconds}초`
+ } else {
+ displayText = `${seconds}초`
+ }
+
+ return (
+ <div className="flex items-center gap-2">
+ {isLongVisit && <Clock className="size-3 text-orange-500" />}
+ <span className={isLongVisit ? "font-medium" : ""}>
+ {displayText}
+ </span>
+ </div>
+ )
+ },
+ },
+ ],
+ },
+ {
+ id: "환경 정보",
+ header: "환경 정보",
+ columns: [
+ {
+ accessorKey: "deviceType",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="디바이스" />
+ ),
+ cell: ({ row }) => {
+ const deviceType = row.getValue("deviceType") as string
+ const variants = {
+ desktop: "default",
+ mobile: "secondary",
+ tablet: "outline",
+ } as const
+
+ return (
+ <Badge variant={variants[deviceType as keyof typeof variants] || "default"} className="text-xs">
+ {deviceType}
+ </Badge>
+ )
+ },
+ },
+ {
+ accessorKey: "browserName",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="브라우저" />
+ ),
+ cell: ({ row }) => {
+ const browserName = row.getValue("browserName") as string | null
+ const osName = row.original.osName
+
+ return (
+ <div className="flex flex-col">
+ <span className="text-sm">{browserName || "Unknown"}</span>
+ {osName && (
+ <span className="text-xs text-muted-foreground">{osName}</span>
+ )}
+ </div>
+ )
+ },
+ },
+ {
+ accessorKey: "ipAddress",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="IP" />
+ ),
+ cell: ({ row }) => (
+ <code className="text-xs bg-muted px-2 py-1 rounded">
+ {row.getValue("ipAddress")}
+ </code>
+ ),
+ },
+ ],
+ },
+ {
+ id: "추가 정보",
+ header: "추가 정보",
+ columns: [
+ {
+ accessorKey: "referrer",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="리퍼러" />
+ ),
+ cell: ({ row }) => {
+ const referrer = row.getValue("referrer") as string | null
+
+ if (!referrer) {
+ return <span className="text-muted-foreground text-xs">직접 접근</span>
+ }
+
+ try {
+ const url = new URL(referrer)
+ return (
+ <div className="flex items-center gap-1">
+ <ExternalLink className="size-3" />
+ <span className="text-xs truncate max-w-[100px]">
+ {url.hostname}
+ </span>
+ </div>
+ )
+ } catch {
+ return (
+ <span className="text-xs truncate max-w-[100px]">
+ {referrer}
+ </span>
+ )
+ }
+ },
+ },
+ ],
+ },
+ // {
+ // id: "actions",
+ // cell: function Cell({ row }) {
+ // const visit = row.original
+
+ // return (
+ // <DropdownMenu>
+ // <DropdownMenuTrigger asChild>
+ // <Button
+ // aria-label="Open menu"
+ // variant="ghost"
+ // className="flex size-8 p-0 data-[state=open]:bg-muted"
+ // >
+ // <Ellipsis className="size-4" aria-hidden="true" />
+ // </Button>
+ // </DropdownMenuTrigger>
+ // <DropdownMenuContent align="end" className="w-40">
+ // <DropdownMenuItem
+ // onSelect={() => setRowAction({ type: "view", row })}
+ // >
+ // <Eye className="mr-2 size-4" aria-hidden="true" />
+ // 상세 보기
+ // </DropdownMenuItem>
+ // {visit.userEmail && (
+ // <DropdownMenuItem
+ // onSelect={() => setRowAction({ type: "viewUserActivity", row })}
+ // >
+ // <User className="mr-2 size-4" aria-hidden="true" />
+ // 사용자 활동
+ // </DropdownMenuItem>
+ // )}
+ // {visit.route && (
+ // <DropdownMenuItem
+ // onSelect={() => setRowAction({ type: "viewPageStats", row })}
+ // >
+ // <ExternalLink className="mr-2 size-4" aria-hidden="true" />
+ // 페이지 통계
+ // </DropdownMenuItem>
+ // )}
+ // </DropdownMenuContent>
+ // </DropdownMenu>
+ // )
+ // },
+ // enableSorting: false,
+ // enableHiding: false,
+ // },
+ ]
+} \ No newline at end of file
diff --git a/lib/page-visits/table/page-visits-table-toolbar-actions.tsx b/lib/page-visits/table/page-visits-table-toolbar-actions.tsx
new file mode 100644
index 00000000..5a74a765
--- /dev/null
+++ b/lib/page-visits/table/page-visits-table-toolbar-actions.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { type Table } from "@tanstack/react-table"
+import { Download, RotateCcw, BarChart3, Filter } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { useTransition } from "react"
+
+import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+
+import { ExtendedPageVisit } from "../validation"
+import { exportTableToExcel } from "@/lib/export_all"
+
+interface PageVisitsTableToolbarActionsProps {
+ table: Table<ExtendedPageVisit>
+}
+
+export function PageVisitsTableToolbarActions({
+ table,
+}: PageVisitsTableToolbarActionsProps) {
+ const router = useRouter()
+ const [isPending, startTransition] = useTransition()
+
+ const handleRefresh = () => {
+ startTransition(() => {
+ router.refresh() // ✅ 서버 컴포넌트만 새로고침 (더 빠르고 부드러움)
+ })
+ }
+
+ return (
+ <div className="flex items-center gap-2">
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() =>
+ exportTableToExcel(table, {
+ filename: "page-visits",
+ excludeColumns: ["select", "actions"],
+ })
+ }
+ >
+ <Download className="mr-2 size-4" aria-hidden="true" />
+ Export
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>
+ <p>페이지 방문 데이터를 엑셀로 내보내기</p>
+ </TooltipContent>
+ </Tooltip>
+
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={handleRefresh}
+ disabled={isPending} // 로딩 중 비활성화
+ >
+ <RotateCcw
+ className={`mr-2 size-4 ${isPending ? 'animate-spin' : ''}`}
+ aria-hidden="true"
+ />
+ {isPending ? '새로고침 중...' : '새로고침'}
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>
+ <p>데이터 새로고침</p>
+ </TooltipContent>
+ </Tooltip>
+
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() => {
+ // 페이지 통계 분석 기능
+ console.log("Generate page analytics")
+ }}
+ >
+ <BarChart3 className="mr-2 size-4" aria-hidden="true" />
+ 페이지 분석
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>
+ <p>페이지별 방문 통계 분석</p>
+ </TooltipContent>
+ </Tooltip>
+
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() => {
+ // 고급 필터링 옵션
+ console.log("Advanced filtering options")
+ }}
+ >
+ <Filter className="mr-2 size-4" aria-hidden="true" />
+ 고급 필터
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>
+ <p>고급 필터링 옵션</p>
+ </TooltipContent>
+ </Tooltip>
+ </div>
+ )
+}
diff --git a/lib/page-visits/table/page-visits-table.tsx b/lib/page-visits/table/page-visits-table.tsx
new file mode 100644
index 00000000..914b8180
--- /dev/null
+++ b/lib/page-visits/table/page-visits-table.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from "react"
+import type {
+ DataTableAdvancedFilterField,
+ DataTableFilterField,
+ DataTableRowAction,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+
+import { getPageVisits } from "../service"
+import { PageVisitsTableToolbarActions } from "./page-visits-table-toolbar-actions"
+import { getColumns } from "./page-visits-table-columns"
+import { ExtendedPageVisit } from "../validation"
+
+interface PageVisitsTableProps {
+ promises: Promise<
+ [
+ Awaited<ReturnType<typeof getPageVisits>>,
+ ]
+ >
+}
+
+export function PageVisitsTable({ promises }: PageVisitsTableProps) {
+
+ const [{ data, pageCount }] = React.use(promises)
+
+ const [rowAction, setRowAction] =
+ React.useState<DataTableRowAction<ExtendedPageVisit> | null>(null)
+
+ const columns = React.useMemo(
+ () => getColumns({ setRowAction }),
+ [setRowAction]
+ )
+
+ // 기본 필터 필드
+ const filterFields: DataTableFilterField<ExtendedPageVisit>[] = [
+ {
+ id: "deviceType",
+ label: "디바이스",
+ options: [
+ { label: "Desktop", value: "desktop" },
+ { label: "Mobile", value: "mobile" },
+ { label: "Tablet", value: "tablet" },
+ ],
+ },
+ {
+ id: "browserName",
+ label: "브라우저",
+ options: [
+ { label: "Chrome", value: "Chrome" },
+ { label: "Firefox", value: "Firefox" },
+ { label: "Safari", value: "Safari" },
+ { label: "Edge", value: "Edge" },
+ ],
+ },
+ ]
+
+ // 고급 필터 필드
+ const advancedFilterFields: DataTableAdvancedFilterField<ExtendedPageVisit>[] = [
+ {
+ id: "userEmail",
+ label: "사용자 이메일",
+ type: "text",
+ },
+ {
+ id: "route",
+ label: "페이지 경로",
+ type: "text",
+ },
+ {
+ id: "pageTitle",
+ label: "페이지 제목",
+ type: "text",
+ },
+ {
+ id: "deviceType",
+ label: "디바이스 타입",
+ type: "multi-select",
+ options: [
+ { label: "Desktop", value: "desktop" },
+ { label: "Mobile", value: "mobile" },
+ { label: "Tablet", value: "tablet" },
+ ],
+ },
+ {
+ id: "browserName",
+ label: "브라우저",
+ type: "multi-select",
+ options: [
+ { label: "Chrome", value: "Chrome" },
+ { label: "Firefox", value: "Firefox" },
+ { label: "Safari", value: "Safari" },
+ { label: "Edge", value: "Edge" },
+ ],
+ },
+ {
+ id: "duration",
+ label: "체류 시간 (초)",
+ type: "number",
+ },
+ {
+ id: "visitedAt",
+ label: "방문 시간",
+ type: "date",
+ },
+ {
+ id: "ipAddress",
+ label: "IP 주소",
+ type: "text",
+ },
+ ]
+
+ const { table } = useDataTable({
+ data,
+ columns,
+ pageCount,
+ filterFields,
+ enablePinning: true,
+ enableAdvancedFilter: true,
+ initialState: {
+ sorting: [{ id: "visitedAt", desc: true }],
+ columnPinning: { right: ["actions"] },
+ },
+ getRowId: (originalRow) => String(originalRow.id),
+ shallow: false,
+ clearOnDefault: true,
+ })
+
+ return (
+ <>
+ <DataTable table={table}>
+ <DataTableAdvancedToolbar
+ table={table}
+ filterFields={advancedFilterFields}
+ shallow={false}
+ >
+ <PageVisitsTableToolbarActions table={table} />
+ </DataTableAdvancedToolbar>
+ </DataTable>
+ </>
+ )
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 13:13:49 +0000