From dec7dedd9409f1ee1afa2ac1ca7c17ff611c3df8 Mon Sep 17 00:00:00 2001
From: joonhoekim <26rote@gmail.com>
Date: Tue, 2 Sep 2025 08:50:02 +0000
Subject: (김준회) MDG 프로젝트 마스터 수신시 전체 데이터 projects 비지니스
테이블에 매핑처리 - 테이블 컬럼 확장 - projects 페이지 프론트엔드 처리 - mdg
수신 route에서 mapper 확장
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
lib/projects/dialog/project-detail-dialog.tsx | 431 ++++++++++++++++++++++++++
lib/projects/table/projects-table-columns.tsx | 29 +-
lib/projects/table/projects-table.tsx | 25 +-
3 files changed, 481 insertions(+), 4 deletions(-)
create mode 100644 lib/projects/dialog/project-detail-dialog.tsx
(limited to 'lib/projects')
diff --git a/lib/projects/dialog/project-detail-dialog.tsx b/lib/projects/dialog/project-detail-dialog.tsx
new file mode 100644
index 00000000..2ecb37a5
--- /dev/null
+++ b/lib/projects/dialog/project-detail-dialog.tsx
@@ -0,0 +1,431 @@
+"use client"
+
+import * as React from "react"
+import { type Project } from "@/db/schema/projects"
+
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableRow,
+} from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { formatDate } from "@/lib/utils"
+
+interface ProjectDetailDialogProps {
+ project: Project
+ open: boolean
+ onOpenChange: (open: boolean) => void
+}
+
+export function ProjectDetailDialog({
+ project,
+ open,
+ onOpenChange,
+}: ProjectDetailDialogProps) {
+ const formatValue = (value: string | null | undefined) => {
+ return value || "-"
+ }
+
+ return (
+
+ )
+}
diff --git a/lib/projects/table/projects-table-columns.tsx b/lib/projects/table/projects-table-columns.tsx
index 6926429a..95eeae85 100644
--- a/lib/projects/table/projects-table-columns.tsx
+++ b/lib/projects/table/projects-table-columns.tsx
@@ -3,8 +3,10 @@
import * as React from "react"
import { type DataTableRowAction } from "@/types/table"
import { type ColumnDef } from "@tanstack/react-table"
+import { Eye } from "lucide-react"
import { formatDate } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { Project } from "@/db/schema"
@@ -12,13 +14,35 @@ import { projectsColumnsConfig } from "@/config/projectsColumnsConfig"
interface GetColumnsProps {
setRowAction: React.Dispatch | null>>
+ onDetailClick: (project: Project) => void
}
/**
* tanstack table 컬럼 정의 (중첩 헤더 버전)
*/
-export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef[] {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function getColumns({ setRowAction, onDetailClick }: GetColumnsProps): ColumnDef[] {
+ // 상세보기 버튼 컬럼
+ const detailColumn: ColumnDef = {
+ id: "action",
+ header: "상세보기",
+ size: 100,
+ cell: ({ row }) => {
+ const project = row.original
+ return (
+
+ )
+ },
+ }
// ----------------------------------------------------------------
// 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
@@ -82,9 +106,10 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef | null>(null)
+ // 상세보기 다이얼로그 상태 관리
+ const [selectedProject, setSelectedProject] = React.useState(null)
+ const [dialogOpen, setDialogOpen] = React.useState(false)
+
+ const handleDetailClick = React.useCallback((project: Project) => {
+ setSelectedProject(project)
+ setDialogOpen(true)
+ }, [])
+
const columns = React.useMemo(
- () => getColumns({ setRowAction }),
- [setRowAction]
+ () => getColumns({ setRowAction, onDetailClick: handleDetailClick }),
+ [setRowAction, handleDetailClick]
)
/**
@@ -123,6 +135,15 @@ export function ProjectsTable({ promises }: ItemsTableProps) {
+
+ {/* 프로젝트 상세보기 다이얼로그 */}
+ {selectedProject && (
+
+ )}
)
}
--
cgit v1.2.3