From 8a0096dff6f16015ee12c8b25a6b8471733b6529 Mon Sep 17 00:00:00 2001 From: dujinkim Date: Fri, 17 Oct 2025 07:16:43 +0000 Subject: (김준회) 조달담당자 선택기 구현 및 users 테이블에 조달담당자 컬럼 추가 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/selectors/procurement-manager/index.ts | 21 + .../procurement-manager-multi-selector.tsx | 466 +++++++++++++++++++++ .../procurement-manager-selector.tsx | 310 ++++++++++++++ .../procurement-manager-service.ts | 199 +++++++++ .../procurement-manager-single-selector.tsx | 374 +++++++++++++++++ 5 files changed, 1370 insertions(+) create mode 100644 components/common/selectors/procurement-manager/index.ts create mode 100644 components/common/selectors/procurement-manager/procurement-manager-multi-selector.tsx create mode 100644 components/common/selectors/procurement-manager/procurement-manager-selector.tsx create mode 100644 components/common/selectors/procurement-manager/procurement-manager-service.ts create mode 100644 components/common/selectors/procurement-manager/procurement-manager-single-selector.tsx (limited to 'components/common/selectors') diff --git a/components/common/selectors/procurement-manager/index.ts b/components/common/selectors/procurement-manager/index.ts new file mode 100644 index 00000000..8b53adfa --- /dev/null +++ b/components/common/selectors/procurement-manager/index.ts @@ -0,0 +1,21 @@ +// 조달담당자 선택기 관련 컴포넌트와 타입 내보내기 + +export { ProcurementManagerSelector } from './procurement-manager-selector' +export type { ProcurementManagerSelectorProps } from './procurement-manager-selector' + +export { ProcurementManagerSingleSelector } from './procurement-manager-single-selector' +export type { ProcurementManagerSingleSelectorProps } from './procurement-manager-single-selector' + +export { ProcurementManagerMultiSelector } from './procurement-manager-multi-selector' +export type { ProcurementManagerMultiSelectorProps } from './procurement-manager-multi-selector' + +export { + getProcurementManagers, + addUsersToManagersAsync +} from './procurement-manager-service' +export type { + ProcurementManager, + ProcurementManagerWithUser +} from './procurement-manager-service' + + diff --git a/components/common/selectors/procurement-manager/procurement-manager-multi-selector.tsx b/components/common/selectors/procurement-manager/procurement-manager-multi-selector.tsx new file mode 100644 index 00000000..8d2f2afa --- /dev/null +++ b/components/common/selectors/procurement-manager/procurement-manager-multi-selector.tsx @@ -0,0 +1,466 @@ +'use client' + +/** + * 조달담당자 다중 선택 다이얼로그 + * + * @description + * - 여러 조달담당자를 선택할 수 있는 다이얼로그 + * - 체크박스를 통한 다중 선택 + * - 선택된 조달담당자들을 상단에 표시 + * - 확인/취소 버튼으로 선택 확정 + * - 선택 시 각 담당자에 대한 사용자 정보도 함께 반환 + */ + +import { useState, useCallback, useMemo, useTransition } 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 { Checkbox } from '@/components/ui/checkbox' +import { Badge } from '@/components/ui/badge' +import { Search, Check, X, Trash2 } 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 { + getProcurementManagers, + addUsersToManagersAsync, + ProcurementManager, + ProcurementManagerWithUser +} from './procurement-manager-service' +import { toast } from 'sonner' + +// 간단한 디바운스 함수 +function debounce void>(func: T, delay: number): T { + let timeoutId: NodeJS.Timeout + return ((...args: Parameters) => { + clearTimeout(timeoutId) + timeoutId = setTimeout(() => func(...args), delay) + }) as T +} + +export interface ProcurementManagerMultiSelectorProps { + open: boolean + onOpenChange: (open: boolean) => void + selectedManagers?: ProcurementManagerWithUser[] + onManagersSelect: (managers: ProcurementManagerWithUser[]) => void + onConfirm?: (managers: ProcurementManagerWithUser[]) => void + onCancel?: () => void + title?: string + description?: string + maxSelection?: number +} + +export function ProcurementManagerMultiSelector({ + open, + onOpenChange, + selectedManagers = [], + onManagersSelect, + onConfirm, + onCancel, + title = "조달담당자 다중 선택", + description = "여러 조달담당자를 선택하세요", + maxSelection +}: ProcurementManagerMultiSelectorProps) { + const [managers, setManagers] = 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 [tempSelectedManagers, setTempSelectedManagers] = useState( + selectedManagers.map(m => ({ + PROCUREMENT_MANAGER_CODE: m.PROCUREMENT_MANAGER_CODE, + DISPLAY_NAME: m.DISPLAY_NAME, + DEPARTMENT_NAME: m.DEPARTMENT_NAME, + EMPLOYEE_NUMBER: m.EMPLOYEE_NUMBER, + DEPARTMENT_CODE: m.DEPARTMENT_CODE, + IS_ACTIVE: m.IS_ACTIVE + })) + ) + + // 조달담당자 선택/해제 핸들러 + const handleManagerToggle = useCallback((manager: ProcurementManager, checked: boolean) => { + setTempSelectedManagers(prev => { + if (checked) { + // 최대 선택 수 제한 확인 + if (maxSelection && prev.length >= maxSelection) { + toast.warning(`최대 ${maxSelection}개까지 선택할 수 있습니다.`) + return prev + } + // 이미 선택된 담당자인지 확인 + if (prev.some(m => m.PROCUREMENT_MANAGER_CODE === manager.PROCUREMENT_MANAGER_CODE)) { + return prev + } + return [...prev, manager] + } else { + return prev.filter(m => m.PROCUREMENT_MANAGER_CODE !== manager.PROCUREMENT_MANAGER_CODE) + } + }) + }, [maxSelection]) + + // 개별 담당자 제거 핸들러 + const handleRemoveManager = useCallback((procurementManagerCode: string) => { + setTempSelectedManagers(prev => prev.filter(m => m.PROCUREMENT_MANAGER_CODE !== procurementManagerCode)) + }, []) + + // 모든 선택 해제 핸들러 + const handleClearAll = useCallback(() => { + setTempSelectedManagers([]) + }, []) + + // 확인 버튼 핸들러 (사용자 정보 포함하여 반환) + const handleConfirm = useCallback(async () => { + try { + // 선택된 담당자들에 대해 사용자 정보 추가 + const managersWithUsers = await addUsersToManagersAsync(tempSelectedManagers) + + onManagersSelect(managersWithUsers) + onConfirm?.(managersWithUsers) + onOpenChange(false) + } catch (error) { + console.error('조달담당자 정보 조회 오류:', error) + toast.error('조달담당자 정보를 가져오는 중 오류가 발생했습니다.') + } + }, [tempSelectedManagers, onManagersSelect, onConfirm, onOpenChange]) + + // 취소 버튼 핸들러 + const handleCancel = useCallback(() => { + setTempSelectedManagers( + selectedManagers.map(m => ({ + PROCUREMENT_MANAGER_CODE: m.PROCUREMENT_MANAGER_CODE, + DISPLAY_NAME: m.DISPLAY_NAME, + DEPARTMENT_NAME: m.DEPARTMENT_NAME, + EMPLOYEE_NUMBER: m.EMPLOYEE_NUMBER, + DEPARTMENT_CODE: m.DEPARTMENT_CODE, + IS_ACTIVE: m.IS_ACTIVE + })) + ) + onCancel?.() + onOpenChange(false) + }, [selectedManagers, onCancel, onOpenChange]) + + // 테이블 컬럼 정의 + const columns: ColumnDef[] = useMemo(() => [ + { + id: 'select', + header: ({ table }) => ( + { + if (value) { + // 페이지의 모든 행을 선택하되, 최대 선택 수 제한 확인 + const currentPageRows = table.getRowModel().rows + const newSelections = currentPageRows + .map(row => row.original) + .filter(manager => !tempSelectedManagers.some(m => m.PROCUREMENT_MANAGER_CODE === manager.PROCUREMENT_MANAGER_CODE)) + + if (maxSelection) { + const remainingSlots = maxSelection - tempSelectedManagers.length + if (newSelections.length > remainingSlots) { + toast.warning(`최대 ${maxSelection}개까지 선택할 수 있습니다.`) + return + } + } + + setTempSelectedManagers(prev => [...prev, ...newSelections]) + } else { + // 페이지의 모든 행 선택 해제 + const currentPageCodes = table.getRowModel().rows.map(row => row.original.PROCUREMENT_MANAGER_CODE) + setTempSelectedManagers(prev => prev.filter(m => !currentPageCodes.includes(m.PROCUREMENT_MANAGER_CODE))) + } + }} + aria-label="모든 행 선택" + /> + ), + cell: ({ row }) => { + const isSelected = tempSelectedManagers.some(m => m.PROCUREMENT_MANAGER_CODE === row.original.PROCUREMENT_MANAGER_CODE) + return ( + handleManagerToggle(row.original, !!value)} + aria-label="행 선택" + /> + ) + }, + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: 'PROCUREMENT_MANAGER_CODE', + header: '조달담당자코드', + cell: ({ row }) => ( +
{row.getValue('PROCUREMENT_MANAGER_CODE')}
+ ), + }, + { + accessorKey: 'DISPLAY_NAME', + header: '담당자명', + cell: ({ row }) => ( +
{row.getValue('DISPLAY_NAME')}
+ ), + }, + { + accessorKey: 'DEPARTMENT_NAME', + header: '부서명', + cell: ({ row }) => ( +
{row.getValue('DEPARTMENT_NAME')}
+ ), + }, + ], [handleManagerToggle, tempSelectedManagers, maxSelection]) + + // 조달담당자 테이블 설정 + const table = useReactTable({ + data: managers, + 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, + }, + }) + + // 서버에서 조달담당자 전체 목록 로드 (한 번만) + const loadManagers = useCallback(async () => { + startTransition(async () => { + try { + const result = await getProcurementManagers() + + if (result.success) { + setManagers(result.data) + } else { + toast.error(result.error || '조달담당자를 불러오는데 실패했습니다.') + setManagers([]) + } + } catch (error) { + console.error('조달담당자 목록 로드 실패:', error) + toast.error('조달담당자를 불러오는 중 오류가 발생했습니다.') + setManagers([]) + } + }) + }, []) + + // 다이얼로그 열기/닫기 핸들러 + const handleDialogOpenChange = useCallback((newOpen: boolean) => { + onOpenChange(newOpen) + if (newOpen) { + setTempSelectedManagers( + selectedManagers.map(m => ({ + PROCUREMENT_MANAGER_CODE: m.PROCUREMENT_MANAGER_CODE, + DISPLAY_NAME: m.DISPLAY_NAME, + DEPARTMENT_NAME: m.DEPARTMENT_NAME, + EMPLOYEE_NUMBER: m.EMPLOYEE_NUMBER, + DEPARTMENT_CODE: m.DEPARTMENT_CODE, + IS_ACTIVE: m.IS_ACTIVE + })) + ) + if (managers.length === 0) { + loadManagers() + } + } + }, [onOpenChange, selectedManagers, loadManagers, managers.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + return ( + + + + {title} +
+ {description} + {maxSelection && ` (최대 ${maxSelection}개)`} +
+ + +
+ {/* 선택된 조달담당자들 표시 */} + {tempSelectedManagers.length > 0 && ( +
+
+
+ 선택된 조달담당자 ({tempSelectedManagers.length}개) + {maxSelection && ` / ${maxSelection}`} +
+ +
+
+ {tempSelectedManagers.map((manager) => ( + + [{manager.PROCUREMENT_MANAGER_CODE}] {manager.DISPLAY_NAME} + {manager.DEPARTMENT_NAME && ` - ${manager.DEPARTMENT_NAME}`} + + + ))} +
+
+ )} + +
+ + 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 isSelected = tempSelectedManagers.some(m => m.PROCUREMENT_MANAGER_CODE === row.original.PROCUREMENT_MANAGER_CODE) + return ( + { + const isCurrentlySelected = tempSelectedManagers.some(m => m.PROCUREMENT_MANAGER_CODE === row.original.PROCUREMENT_MANAGER_CODE) + handleManagerToggle(row.original, !isCurrentlySelected) + }} + > + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + ) + }) + ) : ( + + + 검색 결과가 없습니다. + + + )} + +
+
+ )} + +
+
+ 총 {table.getFilteredRowModel().rows.length}개 조달담당자 +
+
+ +
+ {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} +
+ +
+
+
+ + + + + + + + ) +} + + diff --git a/components/common/selectors/procurement-manager/procurement-manager-selector.tsx b/components/common/selectors/procurement-manager/procurement-manager-selector.tsx new file mode 100644 index 00000000..60a28515 --- /dev/null +++ b/components/common/selectors/procurement-manager/procurement-manager-selector.tsx @@ -0,0 +1,310 @@ +'use client' + +/** + * 조달담당자 선택기 + * + * @description + * - 오라클에서 CMCTB_CDNM, CMCTB_CD 테이블에서 CD_CLF = 'MMK010' 인 건들을 조회 + * - PROCUREMENT_MANAGER_CODE: 조달담당자 코드 + * - DISPLAY_NAME: 담당자명 + * - DEPARTMENT_NAME: 부서명 + * - EMPLOYEE_NUMBER: 사번 + * - 선택 시 사용자 정보도 함께 반환 + */ + +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 { + 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 { + getProcurementManagers, + addUsersToManagersAsync, + ProcurementManager, + ProcurementManagerWithUser +} from './procurement-manager-service' +import { toast } from 'sonner' + +export interface ProcurementManagerSelectorProps { + selectedManager?: ProcurementManagerWithUser + onManagerSelect: (manager: ProcurementManagerWithUser) => void + disabled?: boolean + placeholder?: string + className?: string +} + +export function ProcurementManagerSelector({ + selectedManager, + onManagerSelect, + disabled, + placeholder = "조달담당자를 선택하세요", + className +}: ProcurementManagerSelectorProps) { + const [open, setOpen] = useState(false) + const [managers, setManagers] = 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 handleManagerSelect = useCallback(async (manager: ProcurementManager) => { + try { + // 사용자 정보 추가 + const [managerWithUser] = await addUsersToManagersAsync(manager) + onManagerSelect(managerWithUser) + setOpen(false) + } catch (error) { + console.error('조달담당자 선택 오류:', error) + toast.error('조달담당자 선택 중 오류가 발생했습니다.') + } + }, [onManagerSelect]) + + // 테이블 컬럼 정의 + const columns: ColumnDef[] = useMemo(() => [ + { + accessorKey: 'PROCUREMENT_MANAGER_CODE', + header: '조달담당자코드', + cell: ({ row }) => ( +
{row.getValue('PROCUREMENT_MANAGER_CODE')}
+ ), + }, + { + accessorKey: 'DISPLAY_NAME', + header: '담당자명', + cell: ({ row }) => ( +
{row.getValue('DISPLAY_NAME')}
+ ), + }, + { + accessorKey: 'DEPARTMENT_NAME', + header: '부서명', + cell: ({ row }) => ( +
{row.getValue('DEPARTMENT_NAME')}
+ ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => ( + + ), + }, + ], [handleManagerSelect]) + + // 조달담당자 테이블 설정 + const table = useReactTable({ + data: managers, + 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, + }, + }) + + // 서버에서 조달담당자 전체 목록 로드 (한 번만) + const loadManagers = useCallback(async () => { + startTransition(async () => { + try { + const result = await getProcurementManagers() + + if (result.success) { + setManagers(result.data) + } else { + toast.error(result.error || '조달담당자를 불러오는데 실패했습니다.') + setManagers([]) + } + } catch (error) { + console.error('조달담당자 목록 로드 실패:', error) + toast.error('조달담당자를 불러오는 중 오류가 발생했습니다.') + setManagers([]) + } + }) + }, []) + + // 다이얼로그 열기 핸들러 + const handleDialogOpenChange = useCallback((newOpen: boolean) => { + setOpen(newOpen) + if (newOpen && managers.length === 0) { + loadManagers() + } + }, [loadManagers, managers.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + return ( + + + + + + + 조달담당자 선택 +
+ 조달담당자(CD_CLF=MMK010) 조회 +
+ + +
+
+ + 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) => ( + handleManagerSelect(row.original)} + > + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + 검색 결과가 없습니다. + + + )} + +
+
+ )} + +
+
+ 총 {table.getFilteredRowModel().rows.length}개 조달담당자 +
+
+ +
+ {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} +
+ +
+
+
+ + + ) +} + diff --git a/components/common/selectors/procurement-manager/procurement-manager-service.ts b/components/common/selectors/procurement-manager/procurement-manager-service.ts new file mode 100644 index 00000000..e10b58b3 --- /dev/null +++ b/components/common/selectors/procurement-manager/procurement-manager-service.ts @@ -0,0 +1,199 @@ +"use server" + +import { oracleKnex } from '@/lib/oracle-db/db' +import { getUserByEmployeeNumber } from '@/lib/users/service' +import { updateUser } from '@/lib/users/repository' + +// 조달담당자 타입 정의 +export interface ProcurementManager { + PROCUREMENT_MANAGER_CODE: string // 조달담당자 코드 + DISPLAY_NAME: string // 담당자명 + DEPARTMENT_NAME: string // 부서명 + EMPLOYEE_NUMBER: string // 사번 + DEPARTMENT_CODE: string // 부서코드 + IS_ACTIVE: string // 사용 여부 +} + +// 조달담당자 + 사용자 정보 타입 +export interface ProcurementManagerWithUser extends ProcurementManager { + user?: { + id: number + name: string + email: string + employeeNumber: string | null + // 필요한 다른 사용자 필드들... + } | null +} + +// 테스트 환경용 폴백 데이터 +const FALLBACK_TEST_DATA: ProcurementManager[] = [ + { + PROCUREMENT_MANAGER_CODE: 'PM001', + DISPLAY_NAME: '홍길동', + DEPARTMENT_NAME: '조달팀', + EMPLOYEE_NUMBER: '2001234', + DEPARTMENT_CODE: 'D001', + IS_ACTIVE: 'Y' + }, + { + PROCUREMENT_MANAGER_CODE: 'PM002', + DISPLAY_NAME: '김영수', + DEPARTMENT_NAME: '구매지원팀', + EMPLOYEE_NUMBER: '2002345', + DEPARTMENT_CODE: 'D002', + IS_ACTIVE: 'Y' + }, + { + PROCUREMENT_MANAGER_CODE: 'PM003', + DISPLAY_NAME: '이민지', + DEPARTMENT_NAME: '조달관리팀', + EMPLOYEE_NUMBER: '2003456', + DEPARTMENT_CODE: 'D003', + IS_ACTIVE: 'Y' + }, + { + PROCUREMENT_MANAGER_CODE: 'PM004', + DISPLAY_NAME: '박서준', + DEPARTMENT_NAME: '자재조달팀', + EMPLOYEE_NUMBER: '2004567', + DEPARTMENT_CODE: 'D004', + IS_ACTIVE: 'Y' + }, + { + PROCUREMENT_MANAGER_CODE: 'PM005', + DISPLAY_NAME: '최지우', + DEPARTMENT_NAME: '조달기획팀', + EMPLOYEE_NUMBER: '2005678', + DEPARTMENT_CODE: 'D005', + IS_ACTIVE: 'Y' + }, +] + +/** + * 모든 조달담당자 목록 조회 (Oracle에서 전체 조회, 실패 시 폴백 데이터 사용) + * CMCTB_CDNM, CMCTB_CD 테이블에서 CD_CLF = 'MMK010' 조건으로 조회 + * 클라이언트에서 검색/필터링 수행 + */ +export async function getProcurementManagers(): Promise<{ + success: boolean + data: ProcurementManager[] + error?: string + isUsingFallback?: boolean +}> { + try { + console.log('📋 [getProcurementManagers] Oracle 쿼리 시작...') + + const result = await oracleKnex.raw(` + SELECT + NM.CD AS PROCUREMENT_MANAGER_CODE, + NM.CDNM AS DISPLAY_NAME, + NM.GRP_DSC AS DEPARTMENT_NAME, + CD.USR_DF_CHAR_1 AS EMPLOYEE_NUMBER, + CD.USR_DF_CHAR_2 AS DEPARTMENT_CODE, + CD.USR_DF_CHK_1 AS IS_ACTIVE + FROM CMCTB_CD CD + JOIN CMCTB_CDNM NM + ON CD.CD_CLF = NM.CD_CLF + AND CD.CD = NM.CD + AND CD.CD2 = NM.CD2 + AND CD.CD3 = NM.CD3 + WHERE CD.CD_CLF = 'MMK010' + AND CD.DEL_YN != 'Y' + ORDER BY NM.CD + `) + + // Oracle raw query의 결과는 rows 배열에 들어있음 + const rows = (result.rows || result) as Array> + + console.log(`✅ [getProcurementManagers] Oracle 쿼리 성공 - ${rows.length}건 조회`) + + // null 값 필터링 + const cleanedResult = rows + .filter((item) => + item.PROCUREMENT_MANAGER_CODE && + item.DISPLAY_NAME && + item.EMPLOYEE_NUMBER + ) + .map((item) => ({ + PROCUREMENT_MANAGER_CODE: String(item.PROCUREMENT_MANAGER_CODE), + DISPLAY_NAME: String(item.DISPLAY_NAME), + DEPARTMENT_NAME: String(item.DEPARTMENT_NAME || ''), + EMPLOYEE_NUMBER: String(item.EMPLOYEE_NUMBER), + DEPARTMENT_CODE: String(item.DEPARTMENT_CODE || ''), + IS_ACTIVE: String(item.IS_ACTIVE || 'Y') + })) + + console.log(`✅ [getProcurementManagers] 필터링 후 ${cleanedResult.length}건`) + + return { + success: true, + data: cleanedResult, + isUsingFallback: false + } + } catch (error) { + console.error('❌ [getProcurementManagers] Oracle 오류:', error) + console.log('🔄 [getProcurementManagers] 폴백 테스트 데이터 사용 (' + FALLBACK_TEST_DATA.length + '건)') + return { + success: true, + data: FALLBACK_TEST_DATA, + isUsingFallback: true + } + } +} + +/** + * 조달담당자(들)에 사용자 정보 추가 및 procurementManagerCode 업데이트 (1개 또는 여러 개 처리) + * 선택 시 해당 사용자의 procurementManagerCode를 조달담당자 코드로 업데이트 + * @param managers - 단일 또는 배열 형태의 조달담당자 + * @returns 사용자 정보가 포함된 조달담당자 배열 + */ +export async function addUsersToManagersAsync( + managers: ProcurementManager | ProcurementManager[] +): Promise { + try { + // 배열로 정규화 + const managersArray = Array.isArray(managers) ? managers : [managers] + + console.log(`👤 [addUsersToManagersAsync] ${managersArray.length}개 조달담당자에 대한 사용자 정보 조회 및 procurementManagerCode 업데이트 시작`) + + // 각 조달담당자에 대해 사용자 정보 조회 및 procurementManagerCode 업데이트 + const withUsers = await Promise.all( + managersArray.map(async (manager) => { + console.log(` 🔍 [addUsersToManagersAsync] 사번 ${manager.EMPLOYEE_NUMBER} 조회 중...`) + const user = await getUserByEmployeeNumber(manager.EMPLOYEE_NUMBER) + + if (user) { + console.log(` ✅ [addUsersToManagersAsync] 사번 ${manager.EMPLOYEE_NUMBER} → 사용자 찾음: ${user.name}`) + + // 사용자의 procurementManagerCode를 조달담당자 코드로 업데이트 + try { + console.log(` 📝 [addUsersToManagersAsync] 사용자 ${user.id}의 procurementManagerCode를 ${manager.PROCUREMENT_MANAGER_CODE}로 업데이트 중...`) + await updateUser(user.id, { procurementManagerCode: manager.PROCUREMENT_MANAGER_CODE }) + console.log(` ✅ [addUsersToManagersAsync] 사용자 ${user.id}의 procurementManagerCode 업데이트 완료`) + } catch (updateError) { + console.error(` ❌ [addUsersToManagersAsync] 사용자 ${user.id}의 procurementManagerCode 업데이트 실패:`, updateError) + } + } else { + console.log(` ⚠️ [addUsersToManagersAsync] 사번 ${manager.EMPLOYEE_NUMBER} → 사용자 없음`) + } + + return { + ...manager, + user: user ? { + id: user.id, + name: user.name, + email: user.email, + employeeNumber: user.employeeNumber, + } : null + } + }) + ) + + return withUsers + } catch (error) { + console.error('❌ [addUsersToManagersAsync] 오류:', error) + const managersArray = Array.isArray(managers) ? managers : [managers] + return managersArray.map(manager => ({ ...manager, user: null })) + } +} + diff --git a/components/common/selectors/procurement-manager/procurement-manager-single-selector.tsx b/components/common/selectors/procurement-manager/procurement-manager-single-selector.tsx new file mode 100644 index 00000000..4667385a --- /dev/null +++ b/components/common/selectors/procurement-manager/procurement-manager-single-selector.tsx @@ -0,0 +1,374 @@ +'use client' + +/** + * 조달담당자 단일 선택 다이얼로그 + * + * @description + * - 조달담당자를 하나만 선택할 수 있는 다이얼로그 + * - 트리거 버튼과 다이얼로그가 분리된 구조 + * - 외부에서 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 { + getProcurementManagers, + addUsersToManagersAsync, + ProcurementManager, + ProcurementManagerWithUser +} from './procurement-manager-service' +import { toast } from 'sonner' + +export interface ProcurementManagerSingleSelectorProps { + open: boolean + onOpenChange: (open: boolean) => void + selectedManager?: ProcurementManagerWithUser + onManagerSelect: (manager: ProcurementManagerWithUser) => void + onConfirm?: (manager: ProcurementManagerWithUser | undefined) => void + onCancel?: () => void + title?: string + description?: string + showConfirmButtons?: boolean +} + +export function ProcurementManagerSingleSelector({ + open, + onOpenChange, + selectedManager, + onManagerSelect, + onConfirm, + onCancel, + title = "조달담당자 선택", + description = "조달담당자를 선택하세요", + showConfirmButtons = false +}: ProcurementManagerSingleSelectorProps) { + const [managers, setManagers] = 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 [tempSelectedManager, setTempSelectedManager] = useState(selectedManager) + + // 조달담당자 선택 핸들러 + const handleManagerSelect = useCallback(async (manager: ProcurementManager) => { + try { + // 사용자 정보 추가 + const [managerWithUser] = await addUsersToManagersAsync(manager) + if (showConfirmButtons) { + setTempSelectedManager(managerWithUser) + } else { + onManagerSelect(managerWithUser) + onOpenChange(false) + } + } catch (error) { + console.error('조달담당자 선택 오류:', error) + toast.error('조달담당자 선택 중 오류가 발생했습니다.') + } + }, [onManagerSelect, onOpenChange, showConfirmButtons]) + + // 확인 버튼 핸들러 + const handleConfirm = useCallback(() => { + if (tempSelectedManager) { + onManagerSelect(tempSelectedManager) + } + onConfirm?.(tempSelectedManager) + onOpenChange(false) + }, [tempSelectedManager, onManagerSelect, onConfirm, onOpenChange]) + + // 취소 버튼 핸들러 + const handleCancel = useCallback(() => { + setTempSelectedManager(selectedManager) + onCancel?.() + onOpenChange(false) + }, [selectedManager, onCancel, onOpenChange]) + + // 테이블 컬럼 정의 + const columns: ColumnDef[] = useMemo(() => [ + { + accessorKey: 'PROCUREMENT_MANAGER_CODE', + header: '조달담당자코드', + cell: ({ row }) => ( +
{row.getValue('PROCUREMENT_MANAGER_CODE')}
+ ), + }, + { + accessorKey: 'DISPLAY_NAME', + header: '담당자명', + cell: ({ row }) => ( +
{row.getValue('DISPLAY_NAME')}
+ ), + }, + { + accessorKey: 'DEPARTMENT_NAME', + header: '부서명', + cell: ({ row }) => ( +
{row.getValue('DEPARTMENT_NAME')}
+ ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => { + const isSelected = showConfirmButtons + ? tempSelectedManager?.PROCUREMENT_MANAGER_CODE === row.original.PROCUREMENT_MANAGER_CODE + : selectedManager?.PROCUREMENT_MANAGER_CODE === row.original.PROCUREMENT_MANAGER_CODE + + return ( + + ) + }, + }, + ], [handleManagerSelect, selectedManager, tempSelectedManager, showConfirmButtons]) + + // 조달담당자 테이블 설정 + const table = useReactTable({ + data: managers, + 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, + }, + }) + + // 서버에서 조달담당자 전체 목록 로드 (한 번만) + const loadManagers = useCallback(async () => { + startTransition(async () => { + try { + const result = await getProcurementManagers() + + if (result.success) { + setManagers(result.data) + + // 폴백 데이터를 사용하는 경우 알림 + if (result.isUsingFallback) { + toast.info('Oracle 연결 실패', { + description: '테스트 데이터를 사용합니다.', + duration: 4000, + }) + } + } else { + toast.error(result.error || '조달담당자를 불러오는데 실패했습니다.') + setManagers([]) + } + } catch (error) { + console.error('조달담당자 목록 로드 실패:', error) + toast.error('조달담당자를 불러오는 중 오류가 발생했습니다.') + setManagers([]) + } + }) + }, []) + + // 다이얼로그 열릴 때 코드 로드 (open prop 변화 감지) + useEffect(() => { + if (open) { + setTempSelectedManager(selectedManager) + if (managers.length === 0) { + console.log('🚀 [ProcurementManagerSingleSelector] 다이얼로그 열림 - loadManagers 호출') + loadManagers() + } else { + console.log('📦 [ProcurementManagerSingleSelector] 다이얼로그 열림 - 기존 데이터 사용 (' + managers.length + '건)') + } + } + }, [open, selectedManager, loadManagers, managers.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + const currentSelectedManager = showConfirmButtons ? tempSelectedManager : selectedManager + + return ( + + + + {title} +
+ {description} +
+ + +
+ {/* 현재 선택된 조달담당자 표시 */} + {currentSelectedManager && ( +
+
선택된 조달담당자:
+
+ [{currentSelectedManager.PROCUREMENT_MANAGER_CODE}] + {currentSelectedManager.DISPLAY_NAME} + {currentSelectedManager.DEPARTMENT_NAME && ( + ({currentSelectedManager.DEPARTMENT_NAME}) + )} + {currentSelectedManager.user && ( + - {currentSelectedManager.user.name} + )} +
+
+ )} + +
+ + 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 = currentSelectedManager?.PROCUREMENT_MANAGER_CODE === row.original.PROCUREMENT_MANAGER_CODE + return ( + handleManagerSelect(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 && ( + + + + + )} + + + ) +} + + -- cgit v1.2.3