From 7a1524ba54f43d0f2a19e4bca2c6a2e0b01c5ef1 Mon Sep 17 00:00:00 2001 From: dujinkim Date: Tue, 17 Jun 2025 09:02:32 +0000 Subject: (대표님) 20250617 18시 작업사항 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/client-data-table/data-table.tsx | 43 ++++++++------- components/data-table/data-table-pagination.tsx | 4 +- .../ship-vendor-document/new-revision-dialog.tsx | 64 +++++++--------------- 3 files changed, 45 insertions(+), 66 deletions(-) (limited to 'components') diff --git a/components/client-data-table/data-table.tsx b/components/client-data-table/data-table.tsx index 675fe192..9ea44775 100644 --- a/components/client-data-table/data-table.tsx +++ b/components/client-data-table/data-table.tsx @@ -47,6 +47,8 @@ interface DataTableProps { children?: React.ReactNode /** 선택 상태 초기화 트리거 */ clearSelection?: boolean + initialColumnPinning?: ColumnPinningState // 추가 + } export function ClientDataTable({ @@ -58,7 +60,8 @@ export function ClientDataTable({ children, maxHeight, onSelectedRowsChange, - clearSelection + clearSelection, + initialColumnPinning }: DataTableProps) { // (1) React Table 상태 @@ -68,11 +71,12 @@ export function ClientDataTable({ const [sorting, setSorting] = React.useState([]) const [grouping, setGrouping] = React.useState([]) const [columnSizing, setColumnSizing] = React.useState({}) - const [columnPinning, setColumnPinning] = React.useState({ - left: ["select","TAG_NO", "TAG_DESC", "status"], - right: ["update", 'actions'], - }) - + const [columnPinning, setColumnPinning] = React.useState( + initialColumnPinning || { + left: ["select","TAG_NO", "TAG_DESC", "status"], + right: ["update", 'actions'], + } + ) // 🎯 스크롤 상태 감지 추가 const [isScrolled, setIsScrolled] = React.useState(false) @@ -145,16 +149,18 @@ export function ClientDataTable({ background: "hsl(var(--background))", transition: "none", }), - // 바디 셀은 핀된 경우에만 스크롤 상태에 따라 동적 변경 + // 바디 셀 처리: 왼쪽과 오른쪽을 구분 ...(!isHeader && pinnedSide && { - background: isScrolled - ? "hsl(var(--background))" - : "transparent", + background: + pinnedSide === "right" + ? "hsl(var(--background))" // 오른쪽 고정은 항상 불투명 + : isScrolled + ? "hsl(var(--background))" // 왼쪽 고정은 스크롤 시에만 불투명 + : "transparent", transition: "background-color 0.15s ease-out", }), } } - // 🎯 테이블 총 너비 계산 const getTableWidth = React.useCallback(() => { const totalSize = table.getCenterTotalSize() + table.getLeftTotalSize() + table.getRightTotalSize() @@ -180,7 +186,7 @@ export function ClientDataTable({ // (2) 렌더 return ( -
+
{/* 툴바에 children을 넘기기 */} ({ {children} -
+
+ className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed"> {table.getHeaderGroups().map((headerGroup) => ( @@ -355,7 +356,7 @@ export function ClientDataTable({
-
+
diff --git a/components/data-table/data-table-pagination.tsx b/components/data-table/data-table-pagination.tsx index 4ed63a1b..db62f6e8 100644 --- a/components/data-table/data-table-pagination.tsx +++ b/components/data-table/data-table-pagination.tsx @@ -33,7 +33,7 @@ export function DataTablePagination({ // "All"을 1,000,000으로 처리할 것이므로, // 만약 현재 pageSize가 1,000,000이면 화면상 "All"로 표시 const selectValue = - currentPageSize === 1_000_000 + currentPageSize === 1_000 ? "All" : String(currentPageSize) @@ -53,7 +53,7 @@ export function DataTablePagination({ onValueChange={(value) => { if (value === "All") { // "All"을 1,000,000으로 치환 - table.setPageSize(1_000_000) + table.setPageSize(1_000) } else { table.setPageSize(Number(value)) } diff --git a/components/ship-vendor-document/new-revision-dialog.tsx b/components/ship-vendor-document/new-revision-dialog.tsx index 092256c7..83c9c658 100644 --- a/components/ship-vendor-document/new-revision-dialog.tsx +++ b/components/ship-vendor-document/new-revision-dialog.tsx @@ -105,7 +105,7 @@ const getUsageOptions = (drawingKind: string) => { return [ { value: "Approval", label: "Approval" }, { value: "Working", label: "Working" }, - { value: "Reference", label: "Reference" }, + { value: "Comments", label: "Comments" }, ] case 'B4': return [ @@ -130,22 +130,19 @@ const getUsageTypeOptions = (usage: string) => { switch (usage) { case 'Approval': return [ - { value: "Approval Submission Full", label: "Approval Submission Full" }, - { value: "Approval Submission Partial", label: "Approval Submission Partial" }, - { value: "Approval Completion Full", label: "Approval Completion Full" }, - { value: "Approval Completion Partial", label: "Approval Completion Partial" }, + { value: "Full", label: "Full" }, + { value: "Partial", label: "Partial" }, + ] case 'Working': return [ - { value: "Working Full", label: "Working Full" }, - { value: "Working Partial", label: "Working Partial" }, + { value: "Full", label: "Full" }, + { value: "Partial", label: "Partial" }, ] - case 'Reference': + case 'Comments': return [ - { value: "Reference Full", label: "Reference Full" }, - { value: "Reference Partial", label: "Reference Partial" }, - { value: "Reference Series Full", label: "Reference Series Full" }, - { value: "Reference Series Partial", label: "Reference Series Partial" }, + { value: "Comments", label: "Comments" }, + ] default: return [] @@ -153,31 +150,8 @@ const getUsageTypeOptions = (usage: string) => { } // 리비전 형식 가이드 생성 -const getRevisionGuide = (drawingKind: string, usage: string, usageType: string) => { - if (drawingKind === 'B4') { - return "R00, R01, R02... 형식으로 입력하세요" - } - - if (drawingKind === 'B5') { - return "A, B, C... 형식으로 입력하세요" - } - - if (drawingKind === 'B3') { - if (usage === 'Reference') { - return "00, 01, 02... 형식으로 입력하세요" - } - if (usageType === 'Working Partial') { - return "00, 01, 02... 형식으로 입력하세요" - } - if (usageType?.includes('Full') && (usageType.includes('Working') || usageType.includes('Approval'))) { - return "A, B, C... 형식으로 입력하세요" - } - if (usageType?.includes('Partial') && usageType.includes('Approval')) { - return "리비전 형식은 추후 정의 예정입니다" - } - } - - return "리비전을 입력하세요" +const getRevisionGuide = () => { + return "R01, R02, R03... 형식으로 입력하세요" } interface NewRevisionDialogProps { @@ -344,17 +318,21 @@ export function NewRevisionDialog({ return [] }, [drawingKind, watchedUsage]) - // 용도 변경 시 용도 타입 초기화 + // 용도 변경 시 용도 타입 초기화 또는 자동 설정 React.useEffect(() => { if (showUsageType && watchedUsage) { - form.setValue("usageType", "") + if (watchedUsage === "Comments") { + form.setValue("usageType", "Comments") + } else { + form.setValue("usageType", "") + } } }, [watchedUsage, showUsageType, form]) // 리비전 가이드 텍스트 const revisionGuide = React.useMemo(() => { - return getRevisionGuide(drawingKind, watchedUsage, watchedUsageType || "") - }, [drawingKind, watchedUsage, watchedUsageType]) + return getRevisionGuide() + }, []) const handleDialogClose = () => { if (!isUploading) { @@ -481,8 +459,8 @@ export function NewRevisionDialog({ )} /> - {/* 용도 타입 선택 (B3만) */} - {showUsageType && watchedUsage && ( + {/* 용도 타입 선택 (B3만, Comments가 아닐 때만) */} + {showUsageType && watchedUsage && watchedUsage !== "Comments" && (