From b75b1cd920efd61923f7b2dbc4c49987b7b0c4e1 Mon Sep 17 00:00:00 2001 From: dujinkim Date: Thu, 20 Nov 2025 10:25:41 +0000 Subject: (최겸) 구매 입찰 수정 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../selectors/cost-center/cost-center-selector.tsx | 30 +- .../cost-center/cost-center-single-selector.tsx | 785 +++++++++++---------- .../selectors/gl-account/gl-account-selector.tsx | 30 +- .../gl-account/gl-account-single-selector.tsx | 745 +++++++++---------- .../selectors/wbs-code/wbs-code-selector.tsx | 30 +- .../wbs-code/wbs-code-single-selector.tsx | 33 +- 6 files changed, 912 insertions(+), 741 deletions(-) (limited to 'components/common/selectors') 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({
[{selectedCode.KOSTL}] {selectedCode.KTEXT} +
) : ( {placeholder} @@ -284,6 +307,11 @@ export function CostCenterSelector({ )} ))} + {selectedCode && selectedCode.KOSTL === row.original.KOSTL && ( + + (선택됨) + + )} )) ) : ( 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([]) - const [sorting, setSorting] = useState([]) - const [columnFilters, setColumnFilters] = useState([]) - const [columnVisibility, setColumnVisibility] = useState({}) - const [rowSelection, setRowSelection] = useState({}) - const [globalFilter, setGlobalFilter] = useState('') - const [isPending, startTransition] = useTransition() - const [tempSelectedCode, setTempSelectedCode] = useState(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[] = useMemo(() => [ - { - accessorKey: 'KOSTL', - header: '코스트센터', - cell: ({ row }) => ( -
{row.getValue('KOSTL')}
- ), - }, - { - accessorKey: 'KTEXT', - header: '단축명', - cell: ({ row }) => ( -
{row.getValue('KTEXT')}
- ), - }, - { - accessorKey: 'LTEXT', - header: '설명', - cell: ({ row }) => ( -
{row.getValue('LTEXT')}
- ), - }, - { - accessorKey: 'DATAB', - header: '시작일', - cell: ({ row }) => ( -
{formatDate(row.getValue('DATAB'))}
- ), - }, - { - accessorKey: 'DATBI', - header: '종료일', - cell: ({ row }) => ( -
{formatDate(row.getValue('DATBI'))}
- ), - }, - { - id: 'actions', - header: '선택', - cell: ({ row }) => { - const isSelected = showConfirmButtons - ? tempSelectedCode?.KOSTL === row.original.KOSTL - : selectedCode?.KOSTL === row.original.KOSTL - - return ( - - ) - }, - }, - ], [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 ( - - - - {title} -
- {description} -
- - -
- {/* 현재 선택된 코스트센터 표시 */} - {currentSelectedCode && ( -
-
선택된 코스트센터:
-
- [{currentSelectedCode.KOSTL}] - {currentSelectedCode.KTEXT} - - {currentSelectedCode.LTEXT} -
-
- )} - -
- - handleSearchChange(e.target.value)} - className="flex-1" - /> -
- - {isPending ? ( -
-
코스트센터를 불러오는 중...
-
- ) : ( -
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ))} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => { - const isRowSelected = currentSelectedCode?.KOSTL === row.original.KOSTL - return ( - handleCodeSelect(row.original)} - > - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} - - ))} - - ) - }) - ) : ( - - - 검색 결과가 없습니다. - - - )} - -
-
- )} - -
-
- 총 {table.getFilteredRowModel().rows.length}개 코스트센터 -
-
- -
- {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} -
- -
-
-
- - {showConfirmButtons && ( - - - - - )} - - - ) -} - +'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([]) + const [sorting, setSorting] = useState([]) + const [columnFilters, setColumnFilters] = useState([]) + const [columnVisibility, setColumnVisibility] = useState({}) + const [rowSelection, setRowSelection] = useState({}) + const [globalFilter, setGlobalFilter] = useState('') + const [isPending, startTransition] = useTransition() + const [tempSelectedCode, setTempSelectedCode] = useState(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[] = useMemo(() => [ + { + accessorKey: 'KOSTL', + header: '코스트센터', + cell: ({ row }) => ( +
{row.getValue('KOSTL')}
+ ), + }, + { + accessorKey: 'KTEXT', + header: '단축명', + cell: ({ row }) => ( +
{row.getValue('KTEXT')}
+ ), + }, + { + accessorKey: 'LTEXT', + header: '설명', + cell: ({ row }) => ( +
{row.getValue('LTEXT')}
+ ), + }, + { + accessorKey: 'DATAB', + header: '시작일', + cell: ({ row }) => ( +
{formatDate(row.getValue('DATAB'))}
+ ), + }, + { + accessorKey: 'DATBI', + header: '종료일', + cell: ({ row }) => ( +
{formatDate(row.getValue('DATBI'))}
+ ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => { + const isSelected = showConfirmButtons + ? tempSelectedCode?.KOSTL === row.original.KOSTL + : selectedCode?.KOSTL === row.original.KOSTL + + return ( + + ) + }, + }, + ], [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 ( + + + + {title} +
+ {description} +
+ + +
+ {/* 현재 선택된 코스트센터 표시 */} + {currentSelectedCode && ( +
+
+ 선택된 코스트센터: + +
+
+ [{currentSelectedCode.KOSTL}] + {currentSelectedCode.KTEXT} + - {currentSelectedCode.LTEXT} +
+
+ )} + +
+ + handleSearchChange(e.target.value)} + className="flex-1" + /> +
+ + {isPending ? ( +
+
코스트센터를 불러오는 중...
+
+ ) : ( +
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => { + const isRowSelected = currentSelectedCode?.KOSTL === row.original.KOSTL + return ( + handleCodeSelect(row.original)} + > + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + ) + }) + ) : ( + + + 검색 결과가 없습니다. + + + )} + +
+
+ )} + +
+
+ 총 {table.getFilteredRowModel().rows.length}개 코스트센터 +
+
+ +
+ {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} +
+ +
+
+
+ + {showConfirmButtons && ( + + + + + )} + + + ) +} + diff --git a/components/common/selectors/gl-account/gl-account-selector.tsx b/components/common/selectors/gl-account/gl-account-selector.tsx index 81a33944..7e47a072 100644 --- a/components/common/selectors/gl-account/gl-account-selector.tsx +++ b/components/common/selectors/gl-account/gl-account-selector.tsx @@ -14,7 +14,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, @@ -75,8 +75,20 @@ export function GlAccountSelector({ // GL 계정 선택 핸들러 const handleCodeSelect = useCallback(async (code: GlAccount) => { + // 이미 선택된 계정을 다시 선택하면 선택 해제 + if (selectedCode && selectedCode.SAKNR === code.SAKNR && selectedCode.FIPEX === code.FIPEX) { + onCodeSelect(undefined as any) // 선택 해제를 위해 undefined 전달 + setOpen(false) + return + } + onCodeSelect(code) setOpen(false) + }, [onCodeSelect, selectedCode]) + + // 선택 해제 핸들러 + const handleClearSelection = useCallback(() => { + onCodeSelect(undefined as any) // 선택 해제를 위해 undefined 전달 }, [onCodeSelect]) // 테이블 컬럼 정의 @@ -196,6 +208,17 @@ export function GlAccountSelector({ [{selectedCode.SAKNR}] {selectedCode.FIPEX} {selectedCode.TEXT1} + ) : ( {placeholder} @@ -261,6 +284,11 @@ export function GlAccountSelector({ )} ))} + {selectedCode && selectedCode.SAKNR === row.original.SAKNR && selectedCode.FIPEX === row.original.FIPEX && ( + + (선택됨) + + )} )) ) : ( diff --git a/components/common/selectors/gl-account/gl-account-single-selector.tsx b/components/common/selectors/gl-account/gl-account-single-selector.tsx index 2a6a7915..55a58a1f 100644 --- a/components/common/selectors/gl-account/gl-account-single-selector.tsx +++ b/components/common/selectors/gl-account/gl-account-single-selector.tsx @@ -1,358 +1,387 @@ -'use client' - -/** - * GL 계정 단일 선택 다이얼로그 - * - * @description - * - GL 계정을 하나만 선택할 수 있는 다이얼로그 - * - 트리거 버튼과 다이얼로그가 분리된 구조 - * - 외부에서 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 { - getGlAccounts, - GlAccount -} from './gl-account-service' -import { toast } from 'sonner' - -export interface GlAccountSingleSelectorProps { - open: boolean - onOpenChange: (open: boolean) => void - selectedCode?: GlAccount - onCodeSelect: (code: GlAccount) => void - onConfirm?: (code: GlAccount | undefined) => void - onCancel?: () => void - title?: string - description?: string - showConfirmButtons?: boolean -} - -export function GlAccountSingleSelector({ - open, - onOpenChange, - selectedCode, - onCodeSelect, - onConfirm, - onCancel, - title = "GL 계정 선택", - description = "GL 계정을 선택하세요", - showConfirmButtons = false -}: GlAccountSingleSelectorProps) { - const [codes, setCodes] = useState([]) - const [sorting, setSorting] = useState([]) - const [columnFilters, setColumnFilters] = useState([]) - const [columnVisibility, setColumnVisibility] = useState({}) - const [rowSelection, setRowSelection] = useState({}) - const [globalFilter, setGlobalFilter] = useState('') - const [isPending, startTransition] = useTransition() - const [tempSelectedCode, setTempSelectedCode] = useState(selectedCode) - - // GL 계정 선택 핸들러 - const handleCodeSelect = useCallback((code: GlAccount) => { - 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[] = useMemo(() => [ - { - accessorKey: 'SAKNR', - header: '계정(G/L)', - cell: ({ row }) => ( -
{row.getValue('SAKNR')}
- ), - }, - { - accessorKey: 'FIPEX', - header: '세부계정', - cell: ({ row }) => ( -
{row.getValue('FIPEX')}
- ), - }, - { - accessorKey: 'TEXT1', - header: '계정명', - cell: ({ row }) => ( -
{row.getValue('TEXT1')}
- ), - }, - { - id: 'actions', - header: '선택', - cell: ({ row }) => { - const isSelected = showConfirmButtons - ? tempSelectedCode?.SAKNR === row.original.SAKNR - : selectedCode?.SAKNR === row.original.SAKNR - - return ( - - ) - }, - }, - ], [handleCodeSelect, selectedCode, tempSelectedCode, showConfirmButtons]) - - // GL 계정 테이블 설정 - 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, - }, - }) - - // 서버에서 GL 계정 전체 목록 로드 (한 번만) - const loadCodes = useCallback(async () => { - startTransition(async () => { - try { - const result = await getGlAccounts() - - if (result.success) { - setCodes(result.data) - - // 폴백 데이터를 사용하는 경우 알림 - if (result.isUsingFallback) { - toast.info('Oracle 연결 실패', { - description: '테스트 데이터를 사용합니다.', - duration: 4000, - }) - } - } else { - toast.error(result.error || 'GL 계정을 불러오는데 실패했습니다.') - setCodes([]) - } - } catch (error) { - console.error('GL 계정 목록 로드 실패:', error) - toast.error('GL 계정을 불러오는 중 오류가 발생했습니다.') - setCodes([]) - } - }) - }, []) - - // 다이얼로그 열릴 때 코드 로드 (open prop 변화 감지) - useEffect(() => { - if (open) { - setTempSelectedCode(selectedCode) - if (codes.length === 0) { - console.log('🚀 [GlAccountSingleSelector] 다이얼로그 열림 - loadCodes 호출') - loadCodes() - } else { - console.log('📦 [GlAccountSingleSelector] 다이얼로그 열림 - 기존 데이터 사용 (' + codes.length + '건)') - } - } - }, [open, selectedCode, loadCodes, codes.length]) - - // 검색어 변경 핸들러 (클라이언트 사이드 필터링) - const handleSearchChange = useCallback((value: string) => { - setGlobalFilter(value) - }, []) - - const currentSelectedCode = showConfirmButtons ? tempSelectedCode : selectedCode - - return ( - - - - {title} -
- {description} -
- - -
- {/* 현재 선택된 GL 계정 표시 */} - {currentSelectedCode && ( -
-
선택된 GL 계정:
-
- [{currentSelectedCode.SAKNR}] - {currentSelectedCode.FIPEX} - - {currentSelectedCode.TEXT1} -
-
- )} - -
- - handleSearchChange(e.target.value)} - className="flex-1" - /> -
- - {isPending ? ( -
-
GL 계정을 불러오는 중...
-
- ) : ( -
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ))} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => { - const isRowSelected = currentSelectedCode?.SAKNR === row.original.SAKNR - return ( - handleCodeSelect(row.original)} - > - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} - - ))} - - ) - }) - ) : ( - - - 검색 결과가 없습니다. - - - )} - -
-
- )} - -
-
- 총 {table.getFilteredRowModel().rows.length}개 GL 계정 -
-
- -
- {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} -
- -
-
-
- - {showConfirmButtons && ( - - - - - )} - - - ) -} - +'use client' + +/** + * GL 계정 단일 선택 다이얼로그 + * + * @description + * - GL 계정을 하나만 선택할 수 있는 다이얼로그 + * - 트리거 버튼과 다이얼로그가 분리된 구조 + * - 외부에서 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 { + getGlAccounts, + GlAccount +} from './gl-account-service' +import { toast } from 'sonner' + +export interface GlAccountSingleSelectorProps { + open: boolean + onOpenChange: (open: boolean) => void + selectedCode?: GlAccount + onCodeSelect: (code: GlAccount) => void + onConfirm?: (code: GlAccount | undefined) => void + onCancel?: () => void + title?: string + description?: string + showConfirmButtons?: boolean +} + +export function GlAccountSingleSelector({ + open, + onOpenChange, + selectedCode, + onCodeSelect, + onConfirm, + onCancel, + title = "GL 계정 선택", + description = "GL 계정을 선택하세요", + showConfirmButtons = false +}: GlAccountSingleSelectorProps) { + const [codes, setCodes] = useState([]) + const [sorting, setSorting] = useState([]) + const [columnFilters, setColumnFilters] = useState([]) + const [columnVisibility, setColumnVisibility] = useState({}) + const [rowSelection, setRowSelection] = useState({}) + const [globalFilter, setGlobalFilter] = useState('') + const [isPending, startTransition] = useTransition() + const [tempSelectedCode, setTempSelectedCode] = useState(selectedCode) + + // GL 계정 선택 핸들러 + const handleCodeSelect = useCallback((code: GlAccount) => { + // 이미 선택된 계정을 다시 선택하면 선택 해제 + const currentSelected = showConfirmButtons ? tempSelectedCode : selectedCode + if (currentSelected && currentSelected.SAKNR === code.SAKNR && currentSelected.FIPEX === code.FIPEX) { + 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[] = useMemo(() => [ + { + accessorKey: 'SAKNR', + header: '계정(G/L)', + cell: ({ row }) => ( +
{row.getValue('SAKNR')}
+ ), + }, + { + accessorKey: 'FIPEX', + header: '세부계정', + cell: ({ row }) => ( +
{row.getValue('FIPEX')}
+ ), + }, + { + accessorKey: 'TEXT1', + header: '계정명', + cell: ({ row }) => ( +
{row.getValue('TEXT1')}
+ ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => { + const isSelected = showConfirmButtons + ? tempSelectedCode?.SAKNR === row.original.SAKNR + : selectedCode?.SAKNR === row.original.SAKNR + + return ( + + ) + }, + }, + ], [handleCodeSelect, selectedCode, tempSelectedCode, showConfirmButtons]) + + // GL 계정 테이블 설정 + 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, + }, + }) + + // 서버에서 GL 계정 전체 목록 로드 (한 번만) + const loadCodes = useCallback(async () => { + startTransition(async () => { + try { + const result = await getGlAccounts() + + if (result.success) { + setCodes(result.data) + + // 폴백 데이터를 사용하는 경우 알림 + if (result.isUsingFallback) { + toast.info('Oracle 연결 실패', { + description: '테스트 데이터를 사용합니다.', + duration: 4000, + }) + } + } else { + toast.error(result.error || 'GL 계정을 불러오는데 실패했습니다.') + setCodes([]) + } + } catch (error) { + console.error('GL 계정 목록 로드 실패:', error) + toast.error('GL 계정을 불러오는 중 오류가 발생했습니다.') + setCodes([]) + } + }) + }, []) + + // 다이얼로그 열릴 때 코드 로드 (open prop 변화 감지) + useEffect(() => { + if (open) { + setTempSelectedCode(selectedCode) + if (codes.length === 0) { + console.log('🚀 [GlAccountSingleSelector] 다이얼로그 열림 - loadCodes 호출') + loadCodes() + } else { + console.log('📦 [GlAccountSingleSelector] 다이얼로그 열림 - 기존 데이터 사용 (' + codes.length + '건)') + } + } + }, [open, selectedCode, loadCodes, codes.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + const currentSelectedCode = showConfirmButtons ? tempSelectedCode : selectedCode + + return ( + + + + {title} +
+ {description} +
+ + +
+ {/* 현재 선택된 GL 계정 표시 */} + {currentSelectedCode && ( +
+
+ 선택된 GL 계정: + +
+
+ [{currentSelectedCode.SAKNR}] + {currentSelectedCode.FIPEX} + - {currentSelectedCode.TEXT1} +
+
+ )} + +
+ + handleSearchChange(e.target.value)} + className="flex-1" + /> +
+ + {isPending ? ( +
+
GL 계정을 불러오는 중...
+
+ ) : ( +
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => { + const isRowSelected = currentSelectedCode?.SAKNR === row.original.SAKNR + return ( + handleCodeSelect(row.original)} + > + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + ) + }) + ) : ( + + + 검색 결과가 없습니다. + + + )} + +
+
+ )} + +
+
+ 총 {table.getFilteredRowModel().rows.length}개 GL 계정 +
+
+ +
+ {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} +
+ +
+
+
+ + {showConfirmButtons && ( + + + + + )} + + + ) +} + diff --git a/components/common/selectors/wbs-code/wbs-code-selector.tsx b/components/common/selectors/wbs-code/wbs-code-selector.tsx index b701d090..aa5a6a64 100644 --- a/components/common/selectors/wbs-code/wbs-code-selector.tsx +++ b/components/common/selectors/wbs-code/wbs-code-selector.tsx @@ -15,7 +15,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, @@ -80,8 +80,20 @@ export function WbsCodeSelector({ // WBS 코드 선택 핸들러 const handleCodeSelect = useCallback(async (code: WbsCode) => { + // 이미 선택된 코드를 다시 선택하면 선택 해제 + if (selectedCode && selectedCode.PROJ_NO === code.PROJ_NO && selectedCode.WBS_ELMT === code.WBS_ELMT) { + onCodeSelect(undefined as any) // 선택 해제를 위해 undefined 전달 + setOpen(false) + return + } + onCodeSelect(code) setOpen(false) + }, [onCodeSelect, selectedCode]) + + // 선택 해제 핸들러 + const handleClearSelection = useCallback(() => { + onCodeSelect(undefined as any) // 선택 해제를 위해 undefined 전달 }, [onCodeSelect]) // 테이블 컬럼 정의 @@ -208,6 +220,17 @@ export function WbsCodeSelector({ [{selectedCode.PROJ_NO}] {selectedCode.WBS_ELMT} {selectedCode.WBS_ELMT_NM} + ) : ( {placeholder} @@ -273,6 +296,11 @@ export function WbsCodeSelector({ )} ))} + {selectedCode && selectedCode.PROJ_NO === row.original.PROJ_NO && selectedCode.WBS_ELMT === row.original.WBS_ELMT && ( + + (선택됨) + + )} )) ) : ( diff --git a/components/common/selectors/wbs-code/wbs-code-single-selector.tsx b/components/common/selectors/wbs-code/wbs-code-single-selector.tsx index 34cbc975..77a32afe 100644 --- a/components/common/selectors/wbs-code/wbs-code-single-selector.tsx +++ b/components/common/selectors/wbs-code/wbs-code-single-selector.tsx @@ -75,13 +75,25 @@ export function WbsCodeSingleSelector({ // WBS 코드 선택 핸들러 const handleCodeSelect = useCallback((code: WbsCode) => { + // 이미 선택된 코드를 다시 선택하면 선택 해제 + const currentSelected = showConfirmButtons ? tempSelectedCode : selectedCode + if (currentSelected && currentSelected.WBS_ELMT === code.WBS_ELMT && currentSelected.PROJ_NO === code.PROJ_NO) { + if (showConfirmButtons) { + setTempSelectedCode(undefined) + } else { + onCodeSelect(undefined as any) + onOpenChange(false) + } + return + } + if (showConfirmButtons) { setTempSelectedCode(code) } else { onCodeSelect(code) onOpenChange(false) } - }, [onCodeSelect, onOpenChange, showConfirmButtons]) + }, [onCodeSelect, onOpenChange, showConfirmButtons, selectedCode, tempSelectedCode]) // 확인 버튼 핸들러 const handleConfirm = useCallback(() => { @@ -237,7 +249,24 @@ export function WbsCodeSingleSelector({ {/* 현재 선택된 WBS 코드 표시 */} {currentSelectedCode && (
-
선택된 WBS 코드:
+
+ 선택된 WBS 코드: + +
[{currentSelectedCode.PROJ_NO}] {currentSelectedCode.WBS_ELMT} -- cgit v1.2.3