summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/client-data-table/data-table.tsx43
-rw-r--r--components/data-table/data-table-pagination.tsx4
-rw-r--r--components/ship-vendor-document/new-revision-dialog.tsx64
3 files changed, 45 insertions, 66 deletions
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<TData, TValue> {
children?: React.ReactNode
/** 선택 상태 초기화 트리거 */
clearSelection?: boolean
+ initialColumnPinning?: ColumnPinningState // 추가
+
}
export function ClientDataTable<TData, TValue>({
@@ -58,7 +60,8 @@ export function ClientDataTable<TData, TValue>({
children,
maxHeight,
onSelectedRowsChange,
- clearSelection
+ clearSelection,
+ initialColumnPinning
}: DataTableProps<TData, TValue>) {
// (1) React Table 상태
@@ -68,11 +71,12 @@ export function ClientDataTable<TData, TValue>({
const [sorting, setSorting] = React.useState<SortingState>([])
const [grouping, setGrouping] = React.useState<string[]>([])
const [columnSizing, setColumnSizing] = React.useState<ColumnSizingState>({})
- const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
- left: ["select","TAG_NO", "TAG_DESC", "status"],
- right: ["update", 'actions'],
- })
-
+ const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>(
+ initialColumnPinning || {
+ left: ["select","TAG_NO", "TAG_DESC", "status"],
+ right: ["update", 'actions'],
+ }
+ )
// 🎯 스크롤 상태 감지 추가
const [isScrolled, setIsScrolled] = React.useState(false)
@@ -145,16 +149,18 @@ export function ClientDataTable<TData, TValue>({
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<TData, TValue>({
// (2) 렌더
return (
- <div className="space-y-4">
+ <div className="w-full space-y-2.5 overflow-auto">
{/* 툴바에 children을 넘기기 */}
<ClientDataTableAdvancedToolbar
table={table}
@@ -190,19 +196,14 @@ export function ClientDataTable<TData, TValue>({
{children}
</ClientDataTableAdvancedToolbar>
- <div className="rounded-md border">
+
<div
- className="overflow-auto"
+ className="max-w-[100vw] overflow-auto"
style={{ maxHeight: maxHeight || '34rem' }}
onScroll={handleScroll} // 🎯 스크롤 이벤트 핸들러 추가
>
<UiTable
- className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10"
- style={{
- width: getTableWidth(), // 🎯 동적 너비 계산
- minWidth: '100%'
- }}
- >
+ className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className={compactStyles.headerRow}>
@@ -355,7 +356,7 @@ export function ClientDataTable<TData, TValue>({
</TableBody>
</UiTable>
</div>
- </div>
+
<ClientDataTablePagination table={table} />
</div>
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<TData>({
// "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<TData>({
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" && (
<FormField
control={form.control}
name="usageType"
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 06:06:45 +0000