(대표님) 변경사항 20250707 12시 30분

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