diff options
Diffstat (limited to 'components/common/selectors/cost-center')
| -rw-r--r-- | components/common/selectors/cost-center/cost-center-selector.tsx | 30 | ||||
| -rw-r--r-- | components/common/selectors/cost-center/cost-center-single-selector.tsx | 785 |
2 files changed, 436 insertions, 379 deletions
diff --git a/components/common/selectors/cost-center/cost-center-selector.tsx b/components/common/selectors/cost-center/cost-center-selector.tsx index 32c37973..3aad5787 100644 --- a/components/common/selectors/cost-center/cost-center-selector.tsx +++ b/components/common/selectors/cost-center/cost-center-selector.tsx @@ -16,7 +16,7 @@ import { useState, useCallback, useMemo, useTransition } from 'react' import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
-import { Search, Check } from 'lucide-react'
+import { Search, Check, X } from 'lucide-react'
import {
ColumnDef,
flexRender,
@@ -85,8 +85,20 @@ export function CostCenterSelector({ // Cost Center 선택 핸들러
const handleCodeSelect = useCallback(async (code: CostCenter) => {
+ // 이미 선택된 코드를 다시 선택하면 선택 해제
+ if (selectedCode && selectedCode.KOSTL === code.KOSTL) {
+ onCodeSelect(undefined as any) // 선택 해제를 위해 undefined 전달
+ setOpen(false)
+ return
+ }
+
onCodeSelect(code)
setOpen(false)
+ }, [onCodeSelect, selectedCode])
+
+ // 선택 해제 핸들러
+ const handleClearSelection = useCallback(() => {
+ onCodeSelect(undefined as any) // 선택 해제를 위해 undefined 전달
}, [onCodeSelect])
// 테이블 컬럼 정의
@@ -219,6 +231,17 @@ export function CostCenterSelector({ <div className="flex items-center gap-2 w-full">
<span className="font-mono text-sm">[{selectedCode.KOSTL}]</span>
<span className="truncate flex-1 text-left">{selectedCode.KTEXT}</span>
+ <Button
+ variant="ghost"
+ size="sm"
+ className="h-4 w-4 p-0 hover:bg-destructive hover:text-destructive-foreground ml-1"
+ onClick={(e) => {
+ e.stopPropagation()
+ handleClearSelection()
+ }}
+ >
+ <X className="h-3 w-3" />
+ </Button>
</div>
) : (
<span className="text-muted-foreground">{placeholder}</span>
@@ -284,6 +307,11 @@ export function CostCenterSelector({ )}
</TableCell>
))}
+ {selectedCode && selectedCode.KOSTL === row.original.KOSTL && (
+ <TableCell className="text-right">
+ <span className="text-xs text-muted-foreground">(선택됨)</span>
+ </TableCell>
+ )}
</TableRow>
))
) : (
diff --git a/components/common/selectors/cost-center/cost-center-single-selector.tsx b/components/common/selectors/cost-center/cost-center-single-selector.tsx index 94d9a730..e09f782b 100644 --- a/components/common/selectors/cost-center/cost-center-single-selector.tsx +++ b/components/common/selectors/cost-center/cost-center-single-selector.tsx @@ -1,378 +1,407 @@ -'use client'
-
-/**
- * Cost Center 단일 선택 다이얼로그
- *
- * @description
- * - Cost Center를 하나만 선택할 수 있는 다이얼로그
- * - 트리거 버튼과 다이얼로그가 분리된 구조
- * - 외부에서 open 상태를 제어 가능
- */
-
-import { useState, useCallback, useMemo, useTransition, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Search, Check, X } from 'lucide-react'
-import {
- ColumnDef,
- flexRender,
- getCoreRowModel,
- getFilteredRowModel,
- getPaginationRowModel,
- getSortedRowModel,
- useReactTable,
- SortingState,
- ColumnFiltersState,
- VisibilityState,
- RowSelectionState,
-} from '@tanstack/react-table'
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from '@/components/ui/table'
-import {
- getCostCenters,
- CostCenter
-} from './cost-center-service'
-import { toast } from 'sonner'
-
-export interface CostCenterSingleSelectorProps {
- open: boolean
- onOpenChange: (open: boolean) => void
- selectedCode?: CostCenter
- onCodeSelect: (code: CostCenter) => void
- onConfirm?: (code: CostCenter | undefined) => void
- onCancel?: () => void
- title?: string
- description?: string
- showConfirmButtons?: boolean
-}
-
-export function CostCenterSingleSelector({
- open,
- onOpenChange,
- selectedCode,
- onCodeSelect,
- onConfirm,
- onCancel,
- title = "코스트센터 선택",
- description = "코스트센터를 선택하세요",
- showConfirmButtons = false
-}: CostCenterSingleSelectorProps) {
- const [codes, setCodes] = useState<CostCenter[]>([])
- const [sorting, setSorting] = useState<SortingState>([])
- const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
- const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
- const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
- const [globalFilter, setGlobalFilter] = useState('')
- const [isPending, startTransition] = useTransition()
- const [tempSelectedCode, setTempSelectedCode] = useState<CostCenter | undefined>(selectedCode)
-
- // 날짜 포맷 함수 (YYYYMMDD -> YYYY-MM-DD)
- const formatDate = (dateStr: string) => {
- if (!dateStr || dateStr.length !== 8) return dateStr
- return `${dateStr.substring(0, 4)}-${dateStr.substring(4, 6)}-${dateStr.substring(6, 8)}`
- }
-
- // Cost Center 선택 핸들러
- const handleCodeSelect = useCallback((code: CostCenter) => {
- if (showConfirmButtons) {
- setTempSelectedCode(code)
- } else {
- onCodeSelect(code)
- onOpenChange(false)
- }
- }, [onCodeSelect, onOpenChange, showConfirmButtons])
-
- // 확인 버튼 핸들러
- const handleConfirm = useCallback(() => {
- if (tempSelectedCode) {
- onCodeSelect(tempSelectedCode)
- }
- onConfirm?.(tempSelectedCode)
- onOpenChange(false)
- }, [tempSelectedCode, onCodeSelect, onConfirm, onOpenChange])
-
- // 취소 버튼 핸들러
- const handleCancel = useCallback(() => {
- setTempSelectedCode(selectedCode)
- onCancel?.()
- onOpenChange(false)
- }, [selectedCode, onCancel, onOpenChange])
-
- // 테이블 컬럼 정의
- const columns: ColumnDef<CostCenter>[] = useMemo(() => [
- {
- accessorKey: 'KOSTL',
- header: '코스트센터',
- cell: ({ row }) => (
- <div className="font-mono text-sm">{row.getValue('KOSTL')}</div>
- ),
- },
- {
- accessorKey: 'KTEXT',
- header: '단축명',
- cell: ({ row }) => (
- <div>{row.getValue('KTEXT')}</div>
- ),
- },
- {
- accessorKey: 'LTEXT',
- header: '설명',
- cell: ({ row }) => (
- <div>{row.getValue('LTEXT')}</div>
- ),
- },
- {
- accessorKey: 'DATAB',
- header: '시작일',
- cell: ({ row }) => (
- <div className="text-sm">{formatDate(row.getValue('DATAB'))}</div>
- ),
- },
- {
- accessorKey: 'DATBI',
- header: '종료일',
- cell: ({ row }) => (
- <div className="text-sm">{formatDate(row.getValue('DATBI'))}</div>
- ),
- },
- {
- id: 'actions',
- header: '선택',
- cell: ({ row }) => {
- const isSelected = showConfirmButtons
- ? tempSelectedCode?.KOSTL === row.original.KOSTL
- : selectedCode?.KOSTL === row.original.KOSTL
-
- return (
- <Button
- variant={isSelected ? "default" : "ghost"}
- size="sm"
- onClick={(e) => {
- e.stopPropagation()
- handleCodeSelect(row.original)
- }}
- >
- <Check className="h-4 w-4" />
- </Button>
- )
- },
- },
- ], [handleCodeSelect, selectedCode, tempSelectedCode, showConfirmButtons])
-
- // Cost Center 테이블 설정
- const table = useReactTable({
- data: codes,
- columns,
- onSortingChange: setSorting,
- onColumnFiltersChange: setColumnFilters,
- onColumnVisibilityChange: setColumnVisibility,
- onRowSelectionChange: setRowSelection,
- onGlobalFilterChange: setGlobalFilter,
- getCoreRowModel: getCoreRowModel(),
- getPaginationRowModel: getPaginationRowModel(),
- getSortedRowModel: getSortedRowModel(),
- getFilteredRowModel: getFilteredRowModel(),
- state: {
- sorting,
- columnFilters,
- columnVisibility,
- rowSelection,
- globalFilter,
- },
- })
-
- // 서버에서 Cost Center 전체 목록 로드 (한 번만)
- const loadCodes = useCallback(async () => {
- startTransition(async () => {
- try {
- const result = await getCostCenters()
-
- if (result.success) {
- setCodes(result.data)
-
- // 폴백 데이터를 사용하는 경우 알림
- if (result.isUsingFallback) {
- toast.info('Oracle 연결 실패', {
- description: '테스트 데이터를 사용합니다.',
- duration: 4000,
- })
- }
- } else {
- toast.error(result.error || '코스트센터를 불러오는데 실패했습니다.')
- setCodes([])
- }
- } catch (error) {
- console.error('코스트센터 목록 로드 실패:', error)
- toast.error('코스트센터를 불러오는 중 오류가 발생했습니다.')
- setCodes([])
- }
- })
- }, [])
-
- // 다이얼로그 열릴 때 코드 로드 (open prop 변화 감지)
- useEffect(() => {
- if (open) {
- setTempSelectedCode(selectedCode)
- if (codes.length === 0) {
- console.log('🚀 [CostCenterSingleSelector] 다이얼로그 열림 - loadCodes 호출')
- loadCodes()
- } else {
- console.log('📦 [CostCenterSingleSelector] 다이얼로그 열림 - 기존 데이터 사용 (' + codes.length + '건)')
- }
- }
- }, [open, selectedCode, loadCodes, codes.length])
-
- // 검색어 변경 핸들러 (클라이언트 사이드 필터링)
- const handleSearchChange = useCallback((value: string) => {
- setGlobalFilter(value)
- }, [])
-
- const currentSelectedCode = showConfirmButtons ? tempSelectedCode : selectedCode
-
- return (
- <Dialog open={open} onOpenChange={onOpenChange}>
- <DialogContent className="max-w-5xl max-h-[80vh]">
- <DialogHeader>
- <DialogTitle>{title}</DialogTitle>
- <div className="text-sm text-muted-foreground">
- {description}
- </div>
- </DialogHeader>
-
- <div className="space-y-4">
- {/* 현재 선택된 코스트센터 표시 */}
- {currentSelectedCode && (
- <div className="p-3 bg-muted rounded-md">
- <div className="text-sm font-medium">선택된 코스트센터:</div>
- <div className="flex items-center gap-2 mt-1">
- <span className="font-mono text-sm">[{currentSelectedCode.KOSTL}]</span>
- <span>{currentSelectedCode.KTEXT}</span>
- <span className="text-muted-foreground">- {currentSelectedCode.LTEXT}</span>
- </div>
- </div>
- )}
-
- <div className="flex items-center space-x-2">
- <Search className="h-4 w-4" />
- <Input
- placeholder="코스트센터 코드, 단축명, 설명으로 검색..."
- value={globalFilter}
- onChange={(e) => handleSearchChange(e.target.value)}
- className="flex-1"
- />
- </div>
-
- {isPending ? (
- <div className="flex justify-center py-8">
- <div className="text-sm text-muted-foreground">코스트센터를 불러오는 중...</div>
- </div>
- ) : (
- <div className="border rounded-md">
- <Table>
- <TableHeader>
- {table.getHeaderGroups().map((headerGroup) => (
- <TableRow key={headerGroup.id}>
- {headerGroup.headers.map((header) => (
- <TableHead key={header.id}>
- {header.isPlaceholder
- ? null
- : flexRender(
- header.column.columnDef.header,
- header.getContext()
- )}
- </TableHead>
- ))}
- </TableRow>
- ))}
- </TableHeader>
- <TableBody>
- {table.getRowModel().rows?.length ? (
- table.getRowModel().rows.map((row) => {
- const isRowSelected = currentSelectedCode?.KOSTL === row.original.KOSTL
- return (
- <TableRow
- key={row.id}
- data-state={isRowSelected && "selected"}
- className={`cursor-pointer hover:bg-muted/50 ${
- isRowSelected ? 'bg-muted' : ''
- }`}
- onClick={() => handleCodeSelect(row.original)}
- >
- {row.getVisibleCells().map((cell) => (
- <TableCell key={cell.id}>
- {flexRender(
- cell.column.columnDef.cell,
- cell.getContext()
- )}
- </TableCell>
- ))}
- </TableRow>
- )
- })
- ) : (
- <TableRow>
- <TableCell
- colSpan={columns.length}
- className="h-24 text-center"
- >
- 검색 결과가 없습니다.
- </TableCell>
- </TableRow>
- )}
- </TableBody>
- </Table>
- </div>
- )}
-
- <div className="flex items-center justify-between">
- <div className="text-sm text-muted-foreground">
- 총 {table.getFilteredRowModel().rows.length}개 코스트센터
- </div>
- <div className="flex items-center space-x-2">
- <Button
- variant="outline"
- size="sm"
- onClick={() => table.previousPage()}
- disabled={!table.getCanPreviousPage()}
- >
- 이전
- </Button>
- <div className="text-sm">
- {table.getState().pagination.pageIndex + 1} / {table.getPageCount()}
- </div>
- <Button
- variant="outline"
- size="sm"
- onClick={() => table.nextPage()}
- disabled={!table.getCanNextPage()}
- >
- 다음
- </Button>
- </div>
- </div>
- </div>
-
- {showConfirmButtons && (
- <DialogFooter>
- <Button variant="outline" onClick={handleCancel}>
- <X className="h-4 w-4 mr-2" />
- 취소
- </Button>
- <Button onClick={handleConfirm} disabled={!tempSelectedCode}>
- <Check className="h-4 w-4 mr-2" />
- 확인
- </Button>
- </DialogFooter>
- )}
- </DialogContent>
- </Dialog>
- )
-}
-
+'use client' + +/** + * Cost Center 단일 선택 다이얼로그 + * + * @description + * - Cost Center를 하나만 선택할 수 있는 다이얼로그 + * - 트리거 버튼과 다이얼로그가 분리된 구조 + * - 외부에서 open 상태를 제어 가능 + */ + +import { useState, useCallback, useMemo, useTransition, useEffect } from 'react' +import { Button } from '@/components/ui/button' +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog' +import { Input } from '@/components/ui/input' +import { Search, Check, X } from 'lucide-react' +import { + ColumnDef, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, + SortingState, + ColumnFiltersState, + VisibilityState, + RowSelectionState, +} from '@tanstack/react-table' +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table' +import { + getCostCenters, + CostCenter +} from './cost-center-service' +import { toast } from 'sonner' + +export interface CostCenterSingleSelectorProps { + open: boolean + onOpenChange: (open: boolean) => void + selectedCode?: CostCenter + onCodeSelect: (code: CostCenter) => void + onConfirm?: (code: CostCenter | undefined) => void + onCancel?: () => void + title?: string + description?: string + showConfirmButtons?: boolean +} + +export function CostCenterSingleSelector({ + open, + onOpenChange, + selectedCode, + onCodeSelect, + onConfirm, + onCancel, + title = "코스트센터 선택", + description = "코스트센터를 선택하세요", + showConfirmButtons = false +}: CostCenterSingleSelectorProps) { + const [codes, setCodes] = useState<CostCenter[]>([]) + const [sorting, setSorting] = useState<SortingState>([]) + const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]) + const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({}) + const [rowSelection, setRowSelection] = useState<RowSelectionState>({}) + const [globalFilter, setGlobalFilter] = useState('') + const [isPending, startTransition] = useTransition() + const [tempSelectedCode, setTempSelectedCode] = useState<CostCenter | undefined>(selectedCode) + + // 날짜 포맷 함수 (YYYYMMDD -> YYYY-MM-DD) + const formatDate = (dateStr: string) => { + if (!dateStr || dateStr.length !== 8) return dateStr + return `${dateStr.substring(0, 4)}-${dateStr.substring(4, 6)}-${dateStr.substring(6, 8)}` + } + + // Cost Center 선택 핸들러 + const handleCodeSelect = useCallback((code: CostCenter) => { + // 이미 선택된 코드를 다시 선택하면 선택 해제 + const currentSelected = showConfirmButtons ? tempSelectedCode : selectedCode + if (currentSelected && currentSelected.KOSTL === code.KOSTL) { + if (showConfirmButtons) { + setTempSelectedCode(undefined) + } else { + onCodeSelect(undefined as any) + onOpenChange(false) + } + return + } + + if (showConfirmButtons) { + setTempSelectedCode(code) + } else { + onCodeSelect(code) + onOpenChange(false) + } + }, [onCodeSelect, onOpenChange, showConfirmButtons, selectedCode, tempSelectedCode]) + + // 확인 버튼 핸들러 + const handleConfirm = useCallback(() => { + if (tempSelectedCode) { + onCodeSelect(tempSelectedCode) + } + onConfirm?.(tempSelectedCode) + onOpenChange(false) + }, [tempSelectedCode, onCodeSelect, onConfirm, onOpenChange]) + + // 취소 버튼 핸들러 + const handleCancel = useCallback(() => { + setTempSelectedCode(selectedCode) + onCancel?.() + onOpenChange(false) + }, [selectedCode, onCancel, onOpenChange]) + + // 테이블 컬럼 정의 + const columns: ColumnDef<CostCenter>[] = useMemo(() => [ + { + accessorKey: 'KOSTL', + header: '코스트센터', + cell: ({ row }) => ( + <div className="font-mono text-sm">{row.getValue('KOSTL')}</div> + ), + }, + { + accessorKey: 'KTEXT', + header: '단축명', + cell: ({ row }) => ( + <div>{row.getValue('KTEXT')}</div> + ), + }, + { + accessorKey: 'LTEXT', + header: '설명', + cell: ({ row }) => ( + <div>{row.getValue('LTEXT')}</div> + ), + }, + { + accessorKey: 'DATAB', + header: '시작일', + cell: ({ row }) => ( + <div className="text-sm">{formatDate(row.getValue('DATAB'))}</div> + ), + }, + { + accessorKey: 'DATBI', + header: '종료일', + cell: ({ row }) => ( + <div className="text-sm">{formatDate(row.getValue('DATBI'))}</div> + ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => { + const isSelected = showConfirmButtons + ? tempSelectedCode?.KOSTL === row.original.KOSTL + : selectedCode?.KOSTL === row.original.KOSTL + + return ( + <Button + variant={isSelected ? "default" : "ghost"} + size="sm" + onClick={(e) => { + e.stopPropagation() + handleCodeSelect(row.original) + }} + > + <Check className="h-4 w-4" /> + </Button> + ) + }, + }, + ], [handleCodeSelect, selectedCode, tempSelectedCode, showConfirmButtons]) + + // Cost Center 테이블 설정 + const table = useReactTable({ + data: codes, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onGlobalFilterChange: setGlobalFilter, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + globalFilter, + }, + }) + + // 서버에서 Cost Center 전체 목록 로드 (한 번만) + const loadCodes = useCallback(async () => { + startTransition(async () => { + try { + const result = await getCostCenters() + + if (result.success) { + setCodes(result.data) + + // 폴백 데이터를 사용하는 경우 알림 + if (result.isUsingFallback) { + toast.info('Oracle 연결 실패', { + description: '테스트 데이터를 사용합니다.', + duration: 4000, + }) + } + } else { + toast.error(result.error || '코스트센터를 불러오는데 실패했습니다.') + setCodes([]) + } + } catch (error) { + console.error('코스트센터 목록 로드 실패:', error) + toast.error('코스트센터를 불러오는 중 오류가 발생했습니다.') + setCodes([]) + } + }) + }, []) + + // 다이얼로그 열릴 때 코드 로드 (open prop 변화 감지) + useEffect(() => { + if (open) { + setTempSelectedCode(selectedCode) + if (codes.length === 0) { + console.log('🚀 [CostCenterSingleSelector] 다이얼로그 열림 - loadCodes 호출') + loadCodes() + } else { + console.log('📦 [CostCenterSingleSelector] 다이얼로그 열림 - 기존 데이터 사용 (' + codes.length + '건)') + } + } + }, [open, selectedCode, loadCodes, codes.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + const currentSelectedCode = showConfirmButtons ? tempSelectedCode : selectedCode + + return ( + <Dialog open={open} onOpenChange={onOpenChange}> + <DialogContent className="max-w-5xl max-h-[80vh]"> + <DialogHeader> + <DialogTitle>{title}</DialogTitle> + <div className="text-sm text-muted-foreground"> + {description} + </div> + </DialogHeader> + + <div className="space-y-4"> + {/* 현재 선택된 코스트센터 표시 */} + {currentSelectedCode && ( + <div className="p-3 bg-muted rounded-md"> + <div className="text-sm font-medium flex items-center justify-between"> + <span>선택된 코스트센터:</span> + <Button + variant="ghost" + size="sm" + className="h-6 w-6 p-0 hover:bg-destructive hover:text-destructive-foreground" + onClick={() => { + if (showConfirmButtons) { + setTempSelectedCode(undefined) + } else { + onCodeSelect(undefined as any) + onOpenChange(false) + } + }} + > + <X className="h-4 w-4" /> + </Button> + </div> + <div className="flex items-center gap-2 mt-1"> + <span className="font-mono text-sm">[{currentSelectedCode.KOSTL}]</span> + <span>{currentSelectedCode.KTEXT}</span> + <span className="text-muted-foreground">- {currentSelectedCode.LTEXT}</span> + </div> + </div> + )} + + <div className="flex items-center space-x-2"> + <Search className="h-4 w-4" /> + <Input + placeholder="코스트센터 코드, 단축명, 설명으로 검색..." + value={globalFilter} + onChange={(e) => handleSearchChange(e.target.value)} + className="flex-1" + /> + </div> + + {isPending ? ( + <div className="flex justify-center py-8"> + <div className="text-sm text-muted-foreground">코스트센터를 불러오는 중...</div> + </div> + ) : ( + <div className="border rounded-md"> + <Table> + <TableHeader> + {table.getHeaderGroups().map((headerGroup) => ( + <TableRow key={headerGroup.id}> + {headerGroup.headers.map((header) => ( + <TableHead key={header.id}> + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + </TableHead> + ))} + </TableRow> + ))} + </TableHeader> + <TableBody> + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => { + const isRowSelected = currentSelectedCode?.KOSTL === row.original.KOSTL + return ( + <TableRow + key={row.id} + data-state={isRowSelected && "selected"} + className={`cursor-pointer hover:bg-muted/50 ${ + isRowSelected ? 'bg-muted' : '' + }`} + onClick={() => handleCodeSelect(row.original)} + > + {row.getVisibleCells().map((cell) => ( + <TableCell key={cell.id}> + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + </TableCell> + ))} + </TableRow> + ) + }) + ) : ( + <TableRow> + <TableCell + colSpan={columns.length} + className="h-24 text-center" + > + 검색 결과가 없습니다. + </TableCell> + </TableRow> + )} + </TableBody> + </Table> + </div> + )} + + <div className="flex items-center justify-between"> + <div className="text-sm text-muted-foreground"> + 총 {table.getFilteredRowModel().rows.length}개 코스트센터 + </div> + <div className="flex items-center space-x-2"> + <Button + variant="outline" + size="sm" + onClick={() => table.previousPage()} + disabled={!table.getCanPreviousPage()} + > + 이전 + </Button> + <div className="text-sm"> + {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} + </div> + <Button + variant="outline" + size="sm" + onClick={() => table.nextPage()} + disabled={!table.getCanNextPage()} + > + 다음 + </Button> + </div> + </div> + </div> + + {showConfirmButtons && ( + <DialogFooter> + <Button variant="outline" onClick={handleCancel}> + <X className="h-4 w-4 mr-2" /> + 취소 + </Button> + <Button onClick={handleConfirm} disabled={!tempSelectedCode}> + <Check className="h-4 w-4 mr-2" /> + 확인 + </Button> + </DialogFooter> + )} + </DialogContent> + </Dialog> + ) +} + |