From ba8cd44a0ed2c613a5f2cee06bfc9bd0f61f21c7 Mon Sep 17 00:00:00 2001 From: dujinkim Date: Fri, 7 Nov 2025 08:39:04 +0000 Subject: (최겸) 입찰/견적 수정사항 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../selectors/cost-center/cost-center-selector.tsx | 335 ++++++++++++++++++ .../selectors/cost-center/cost-center-service.ts | 89 +++++ .../cost-center/cost-center-single-selector.tsx | 378 +++++++++++++++++++++ components/common/selectors/cost-center/index.ts | 12 + .../selectors/gl-account/gl-account-selector.tsx | 311 +++++++++++++++++ .../selectors/gl-account/gl-account-service.ts | 79 +++++ .../gl-account/gl-account-single-selector.tsx | 358 +++++++++++++++++++ components/common/selectors/gl-account/index.ts | 12 + components/common/selectors/wbs-code/index.ts | 12 + .../selectors/wbs-code/wbs-code-selector.tsx | 323 ++++++++++++++++++ .../common/selectors/wbs-code/wbs-code-service.ts | 92 +++++ .../wbs-code/wbs-code-single-selector.tsx | 365 ++++++++++++++++++++ 12 files changed, 2366 insertions(+) create mode 100644 components/common/selectors/cost-center/cost-center-selector.tsx create mode 100644 components/common/selectors/cost-center/cost-center-service.ts create mode 100644 components/common/selectors/cost-center/cost-center-single-selector.tsx create mode 100644 components/common/selectors/cost-center/index.ts create mode 100644 components/common/selectors/gl-account/gl-account-selector.tsx create mode 100644 components/common/selectors/gl-account/gl-account-service.ts create mode 100644 components/common/selectors/gl-account/gl-account-single-selector.tsx create mode 100644 components/common/selectors/gl-account/index.ts create mode 100644 components/common/selectors/wbs-code/index.ts create mode 100644 components/common/selectors/wbs-code/wbs-code-selector.tsx create mode 100644 components/common/selectors/wbs-code/wbs-code-service.ts create mode 100644 components/common/selectors/wbs-code/wbs-code-single-selector.tsx (limited to 'components/common') diff --git a/components/common/selectors/cost-center/cost-center-selector.tsx b/components/common/selectors/cost-center/cost-center-selector.tsx new file mode 100644 index 00000000..32c37973 --- /dev/null +++ b/components/common/selectors/cost-center/cost-center-selector.tsx @@ -0,0 +1,335 @@ +'use client' + +/** + * Cost Center 선택기 + * + * @description + * - 오라클에서 Cost Center들을 조회 + * - KOSTL: Cost Center 코드 + * - KTEXT: 단축명 + * - LTEXT: 설명 + * - DATAB: 시작일 + * - DATBI: 종료일 + */ + +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 { + getCostCenters, + CostCenter +} from './cost-center-service' +import { toast } from 'sonner' + +export interface CostCenterSelectorProps { + selectedCode?: CostCenter + onCodeSelect: (code: CostCenter) => void + disabled?: boolean + placeholder?: string + className?: string +} + +export interface CostCenterItem { + kostl: string // Cost Center + ktext: string // 단축명 + ltext: string // 설명 + datab: string // 시작일 + datbi: string // 종료일 + displayText: string // 표시용 텍스트 +} + +export function CostCenterSelector({ + selectedCode, + onCodeSelect, + disabled, + placeholder = "코스트센터를 선택하세요", + className +}: CostCenterSelectorProps) { + const [open, setOpen] = useState(false) + 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() + + // 날짜 포맷 함수 (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(async (code: CostCenter) => { + onCodeSelect(code) + setOpen(false) + }, [onCodeSelect]) + + // 테이블 컬럼 정의 + 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 }) => ( + + ), + }, + ], [handleCodeSelect]) + + // 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([]) + } + }) + }, []) + + // 다이얼로그 열기 핸들러 + const handleDialogOpenChange = useCallback((newOpen: boolean) => { + setOpen(newOpen) + if (newOpen && codes.length === 0) { + loadCodes() + } + }, [loadCodes, codes.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + return ( + + + + + + + 코스트센터 선택 +
+ 코스트센터 조회 +
+ + +
+
+ + 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) => ( + 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()} +
+ +
+
+
+ + + ) +} + diff --git a/components/common/selectors/cost-center/cost-center-service.ts b/components/common/selectors/cost-center/cost-center-service.ts new file mode 100644 index 00000000..844215f0 --- /dev/null +++ b/components/common/selectors/cost-center/cost-center-service.ts @@ -0,0 +1,89 @@ +"use server" + +import { oracleKnex } from '@/lib/oracle-db/db' + +// Cost Center 타입 정의 +export interface CostCenter { + KOSTL: string // Cost Center 코드 + DATAB: string // 시작일 + DATBI: string // 종료일 + KTEXT: string // 단축 텍스트 + LTEXT: string // 긴 텍스트 +} + +// 테스트 환경용 폴백 데이터 +const FALLBACK_TEST_DATA: CostCenter[] = [ + { KOSTL: 'D6023930', DATAB: '20230101', DATBI: '99991231', KTEXT: '구매팀', LTEXT: '구매팀 Cost Center(테스트데이터 - 오라클 페칭 실패시)' }, + { KOSTL: 'D6023931', DATAB: '20230101', DATBI: '99991231', KTEXT: '자재팀', LTEXT: '자재팀 Cost Center(테스트데이터 - 오라클 페칭 실패시)' }, + { KOSTL: 'D6023932', DATAB: '20230101', DATBI: '99991231', KTEXT: '조달팀', LTEXT: '조달팀 Cost Center(테스트데이터 - 오라클 페칭 실패시)' }, + { KOSTL: 'D6023933', DATAB: '20230101', DATBI: '99991231', KTEXT: '구매1팀', LTEXT: '구매1팀 Cost Center(테스트데이터 - 오라클 페칭 실패시)' }, + { KOSTL: 'D6023934', DATAB: '20230101', DATBI: '99991231', KTEXT: '구매2팀', LTEXT: '구매2팀 Cost Center(테스트데이터 - 오라클 페칭 실패시)' }, +] + +/** + * Cost Center 목록 조회 (Oracle에서 전체 조회, 실패 시 폴백 데이터 사용) + * CMCTB_COSTCENTER 테이블에서 조회 + * 현재 유효한(SYSDATE BETWEEN DATAB AND DATBI) Cost Center만 조회 + */ +export async function getCostCenters(): Promise<{ + success: boolean + data: CostCenter[] + error?: string + isUsingFallback?: boolean +}> { + try { + console.log('📋 [getCostCenters] Oracle 쿼리 시작...') + + const result = await oracleKnex.raw(` + SELECT + KOSTL, + DATAB, + DATBI, + KTEXT, + LTEXT + FROM CMCTB_COSTCENTER + WHERE ROWNUM < 100 + AND NVL(BKZKP,' ') = ' ' + AND TO_CHAR(SYSDATE,'YYYYMMDD') BETWEEN DATAB AND DATBI + AND KOKRS = 'H100' + ORDER BY KOSTL + `) + + // Oracle raw query의 결과는 rows 배열에 들어있음 + const rows = (result.rows || result) as Array> + + console.log(`✅ [getCostCenters] Oracle 쿼리 성공 - ${rows.length}건 조회`) + + // null 값 필터링 + const cleanedResult = rows + .filter((item) => + item.KOSTL && + item.DATAB && + item.DATBI + ) + .map((item) => ({ + KOSTL: String(item.KOSTL), + DATAB: String(item.DATAB), + DATBI: String(item.DATBI), + KTEXT: String(item.KTEXT || ''), + LTEXT: String(item.LTEXT || '') + })) + + console.log(`✅ [getCostCenters] 필터링 후 ${cleanedResult.length}건`) + + return { + success: true, + data: cleanedResult, + isUsingFallback: false + } + } catch (error) { + console.error('❌ [getCostCenters] Oracle 오류:', error) + console.log('🔄 [getCostCenters] 폴백 테스트 데이터 사용 (' + FALLBACK_TEST_DATA.length + '건)') + return { + success: true, + data: FALLBACK_TEST_DATA, + isUsingFallback: true + } + } +} + diff --git a/components/common/selectors/cost-center/cost-center-single-selector.tsx b/components/common/selectors/cost-center/cost-center-single-selector.tsx new file mode 100644 index 00000000..94d9a730 --- /dev/null +++ b/components/common/selectors/cost-center/cost-center-single-selector.tsx @@ -0,0 +1,378 @@ +'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 && ( + + + + + )} + + + ) +} + diff --git a/components/common/selectors/cost-center/index.ts b/components/common/selectors/cost-center/index.ts new file mode 100644 index 00000000..891e2e6c --- /dev/null +++ b/components/common/selectors/cost-center/index.ts @@ -0,0 +1,12 @@ +// Cost Center 선택기 관련 컴포넌트와 타입 내보내기 + +export { CostCenterSelector, CostCenterSingleSelector } from './cost-center-selector' +export type { CostCenterSelectorProps, CostCenterSingleSelectorProps, CostCenterItem } from './cost-center-selector' + +export { + getCostCenters +} from './cost-center-service' +export type { + CostCenter +} from './cost-center-service' + diff --git a/components/common/selectors/gl-account/gl-account-selector.tsx b/components/common/selectors/gl-account/gl-account-selector.tsx new file mode 100644 index 00000000..81a33944 --- /dev/null +++ b/components/common/selectors/gl-account/gl-account-selector.tsx @@ -0,0 +1,311 @@ +'use client' + +/** + * GL 계정 선택기 + * + * @description + * - 오라클에서 GL 계정들을 조회 + * - SAKNR: 계정(G/L) + * - FIPEX: 세부계정 + * - TEXT1: 계정명 + */ + +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 { + getGlAccounts, + GlAccount +} from './gl-account-service' +import { toast } from 'sonner' + +export interface GlAccountSelectorProps { + selectedCode?: GlAccount + onCodeSelect: (code: GlAccount) => void + disabled?: boolean + placeholder?: string + className?: string +} + +export interface GlAccountItem { + saknr: string // 계정(G/L) + fipex: string // 세부계정 + text1: string // 계정명 + displayText: string // 표시용 텍스트 +} + +export function GlAccountSelector({ + selectedCode, + onCodeSelect, + disabled, + placeholder = "GL 계정을 선택하세요", + className +}: GlAccountSelectorProps) { + const [open, setOpen] = useState(false) + 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() + + // GL 계정 선택 핸들러 + const handleCodeSelect = useCallback(async (code: GlAccount) => { + onCodeSelect(code) + setOpen(false) + }, [onCodeSelect]) + + // 테이블 컬럼 정의 + 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 }) => ( + + ), + }, + ], [handleCodeSelect]) + + // 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([]) + } + }) + }, []) + + // 다이얼로그 열기 핸들러 + const handleDialogOpenChange = useCallback((newOpen: boolean) => { + setOpen(newOpen) + if (newOpen && codes.length === 0) { + loadCodes() + } + }, [loadCodes, codes.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + return ( + + + + + + + GL 계정 선택 +
+ GL 계정 조회 +
+ + +
+
+ + 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) => ( + 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()} +
+ +
+
+
+ + + ) +} diff --git a/components/common/selectors/gl-account/gl-account-service.ts b/components/common/selectors/gl-account/gl-account-service.ts new file mode 100644 index 00000000..75c82c95 --- /dev/null +++ b/components/common/selectors/gl-account/gl-account-service.ts @@ -0,0 +1,79 @@ +"use server" + +import { oracleKnex } from '@/lib/oracle-db/db' + +// GL 계정 타입 정의 +export interface GlAccount { + SAKNR: string // 계정 (G/L) + FIPEX: string // 세부계정 + TEXT1: string // 계정명 +} + +// 테스트 환경용 폴백 데이터 +const FALLBACK_TEST_DATA: GlAccount[] = [ + { SAKNR: '53351977', FIPEX: 'FIP001', TEXT1: '원재료 구매(테스트데이터 - 오라클 페칭 실패시)' }, + { SAKNR: '53351978', FIPEX: 'FIP002', TEXT1: '소모품 구매(테스트데이터 - 오라클 페칭 실패시)' }, + { SAKNR: '53351979', FIPEX: 'FIP003', TEXT1: '부품 구매(테스트데이터 - 오라클 페칭 실패시)' }, + { SAKNR: '53351980', FIPEX: 'FIP004', TEXT1: '자재 구매(테스트데이터 - 오라클 페칭 실패시)' }, + { SAKNR: '53351981', FIPEX: 'FIP005', TEXT1: '외주 가공비(테스트데이터 - 오라클 페칭 실패시)' }, +] + +/** + * GL 계정 목록 조회 (Oracle에서 전체 조회, 실패 시 폴백 데이터 사용) + * CMCTB_BGT_MNG_ITM 테이블에서 조회 + */ +export async function getGlAccounts(): Promise<{ + success: boolean + data: GlAccount[] + error?: string + isUsingFallback?: boolean +}> { + try { + console.log('📋 [getGlAccounts] Oracle 쿼리 시작...') + + const result = await oracleKnex.raw(` + SELECT + SAKNR, + FIPEX, + TEXT1" + FROM CMCTB_BGT_MNG_ITM + WHERE ROWNUM < 100 + AND BUKRS = 'H100' + ORDER BY SAKNR + `) + + // Oracle raw query의 결과는 rows 배열에 들어있음 + const rows = (result.rows || result) as Array> + + console.log(`✅ [getGlAccounts] Oracle 쿼리 성공 - ${rows.length}건 조회`) + + // null 값 필터링 + const cleanedResult = rows + .filter((item) => + item['계정(G/L)'] && + item['세부계정'] + ) + .map((item) => ({ + SAKNR: String(item['계정(G/L)']), + FIPEX: String(item['세부계정']), + TEXT1: String(item['계정명'] || '') + })) + + console.log(`✅ [getGlAccounts] 필터링 후 ${cleanedResult.length}건`) + + return { + success: true, + data: cleanedResult, + isUsingFallback: false + } + } catch (error) { + console.error('❌ [getGlAccounts] Oracle 오류:', error) + console.log('🔄 [getGlAccounts] 폴백 테스트 데이터 사용 (' + FALLBACK_TEST_DATA.length + '건)') + return { + success: true, + data: FALLBACK_TEST_DATA, + isUsingFallback: true + } + } +} + diff --git a/components/common/selectors/gl-account/gl-account-single-selector.tsx b/components/common/selectors/gl-account/gl-account-single-selector.tsx new file mode 100644 index 00000000..2a6a7915 --- /dev/null +++ b/components/common/selectors/gl-account/gl-account-single-selector.tsx @@ -0,0 +1,358 @@ +'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 && ( + + + + + )} + + + ) +} + diff --git a/components/common/selectors/gl-account/index.ts b/components/common/selectors/gl-account/index.ts new file mode 100644 index 00000000..f718f13f --- /dev/null +++ b/components/common/selectors/gl-account/index.ts @@ -0,0 +1,12 @@ +// GL 계정 선택기 관련 컴포넌트와 타입 내보내기 + +export { GlAccountSelector, GlAccountSingleSelector } from './gl-account-selector' +export type { GlAccountSelectorProps, GlAccountSingleSelectorProps, GlAccountItem } from './gl-account-selector' + +export { + getGlAccounts +} from './gl-account-service' +export type { + GlAccount +} from './gl-account-service' + diff --git a/components/common/selectors/wbs-code/index.ts b/components/common/selectors/wbs-code/index.ts new file mode 100644 index 00000000..1a4653d2 --- /dev/null +++ b/components/common/selectors/wbs-code/index.ts @@ -0,0 +1,12 @@ +// WBS 코드 선택기 관련 컴포넌트와 타입 내보내기 + +export { WbsCodeSelector, WbsCodeSingleSelector } from './wbs-code-single-selector' +export type { WbsCodeSelectorProps, WbsCodeSingleSelectorProps } from './wbs-code-single-selector' + +export { + getWbsCodes +} from './wbs-code-service' +export type { + WbsCode +} from './wbs-code-service' + diff --git a/components/common/selectors/wbs-code/wbs-code-selector.tsx b/components/common/selectors/wbs-code/wbs-code-selector.tsx new file mode 100644 index 00000000..b701d090 --- /dev/null +++ b/components/common/selectors/wbs-code/wbs-code-selector.tsx @@ -0,0 +1,323 @@ +'use client' + +/** + * WBS 코드 선택기 + * + * @description + * - 오라클에서 WBS 코드들을 조회 + * - PROJ_NO: 프로젝트 번호 + * - WBS_ELMT: WBS 요소 + * - WBS_ELMT_NM: WBS 요소명 + * - WBS_LVL: WBS 레벨 + */ + +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 { + getWbsCodes, + WbsCode +} from './wbs-code-service' +import { toast } from 'sonner' + +export interface WbsCodeSelectorProps { + selectedCode?: WbsCode + onCodeSelect: (code: WbsCode) => void + disabled?: boolean + placeholder?: string + className?: string + projNo?: string // 프로젝트 번호 필터 +} + +export interface WbsCodeItem { + code: string // WBS 코드 (PROJ_NO + WBS_ELMT 조합) + projNo: string // 프로젝트 번호 + wbsElmt: string // WBS 요소 + wbsElmtNm: string // WBS 요소명 + wbsLvl: string // WBS 레벨 + displayText: string // 표시용 텍스트 +} + +export function WbsCodeSelector({ + selectedCode, + onCodeSelect, + disabled, + placeholder = "WBS 코드를 선택하세요", + className, + projNo +}: WbsCodeSelectorProps) { + const [open, setOpen] = useState(false) + 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() + + // WBS 코드 선택 핸들러 + const handleCodeSelect = useCallback(async (code: WbsCode) => { + onCodeSelect(code) + setOpen(false) + }, [onCodeSelect]) + + // 테이블 컬럼 정의 + const columns: ColumnDef[] = useMemo(() => [ + { + accessorKey: 'PROJ_NO', + header: '프로젝트 번호', + cell: ({ row }) => ( +
{row.getValue('PROJ_NO')}
+ ), + }, + { + accessorKey: 'WBS_ELMT', + header: 'WBS 요소', + cell: ({ row }) => ( +
{row.getValue('WBS_ELMT')}
+ ), + }, + { + accessorKey: 'WBS_ELMT_NM', + header: 'WBS 요소명', + cell: ({ row }) => ( +
{row.getValue('WBS_ELMT_NM')}
+ ), + }, + { + accessorKey: 'WBS_LVL', + header: '레벨', + cell: ({ row }) => ( +
{row.getValue('WBS_LVL')}
+ ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => ( + + ), + }, + ], [handleCodeSelect]) + + // WBS 코드 테이블 설정 + 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, + }, + }) + + // 서버에서 WBS 코드 전체 목록 로드 (한 번만) + const loadCodes = useCallback(async () => { + startTransition(async () => { + try { + const result = await getWbsCodes(projNo) + + if (result.success) { + setCodes(result.data) + + // 폴백 데이터를 사용하는 경우 알림 + if (result.isUsingFallback) { + toast.info('Oracle 연결 실패', { + description: '테스트 데이터를 사용합니다.', + duration: 4000, + }) + } + } else { + toast.error(result.error || 'WBS 코드를 불러오는데 실패했습니다.') + setCodes([]) + } + } catch (error) { + console.error('WBS 코드 목록 로드 실패:', error) + toast.error('WBS 코드를 불러오는 중 오류가 발생했습니다.') + setCodes([]) + } + }) + }, [projNo]) + + // 다이얼로그 열기 핸들러 + const handleDialogOpenChange = useCallback((newOpen: boolean) => { + setOpen(newOpen) + if (newOpen && codes.length === 0) { + loadCodes() + } + }, [loadCodes, codes.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + return ( + + + + + + + WBS 코드 선택 +
+ WBS 코드 조회 +
+ + +
+
+ + handleSearchChange(e.target.value)} + className="flex-1" + /> +
+ + {isPending ? ( +
+
WBS 코드를 불러오는 중...
+
+ ) : ( +
+ + + {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) => ( + handleCodeSelect(row.original)} + > + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + 검색 결과가 없습니다. + + + )} + +
+
+ )} + +
+
+ 총 {table.getFilteredRowModel().rows.length}개 WBS 코드 +
+
+ +
+ {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} +
+ +
+
+
+ + + ) +} diff --git a/components/common/selectors/wbs-code/wbs-code-service.ts b/components/common/selectors/wbs-code/wbs-code-service.ts new file mode 100644 index 00000000..7d9c17b1 --- /dev/null +++ b/components/common/selectors/wbs-code/wbs-code-service.ts @@ -0,0 +1,92 @@ +"use server" + +import { oracleKnex } from '@/lib/oracle-db/db' + +// WBS 코드 타입 정의 +export interface WbsCode { + PROJ_NO: string // 프로젝트 번호 + WBS_ELMT: string // WBS 요소 + WBS_ELMT_NM: string // WBS 요소명 + WBS_LVL: string // WBS 레벨 +} + +// 테스트 환경용 폴백 데이터 +const FALLBACK_TEST_DATA: WbsCode[] = [ + { PROJ_NO: 'SN2661', WBS_ELMT: 'WBS001', WBS_ELMT_NM: 'WBS 항목 1(테스트데이터 - 오라클 페칭 실패시)', WBS_LVL: '1' }, + { PROJ_NO: 'SN2661', WBS_ELMT: 'WBS002', WBS_ELMT_NM: 'WBS 항목 2(테스트데이터 - 오라클 페칭 실패시)', WBS_LVL: '2' }, + { PROJ_NO: 'SN2661', WBS_ELMT: 'WBS003', WBS_ELMT_NM: 'WBS 항목 3(테스트데이터 - 오라클 페칭 실패시)', WBS_LVL: '1' }, + { PROJ_NO: 'SN2661', WBS_ELMT: 'WBS004', WBS_ELMT_NM: 'WBS 항목 4(테스트데이터 - 오라클 페칭 실패시)', WBS_LVL: '2' }, + { PROJ_NO: 'SN2661', WBS_ELMT: 'WBS005', WBS_ELMT_NM: 'WBS 항목 5(테스트데이터 - 오라클 페칭 실패시)', WBS_LVL: '3' }, +] + +/** + * WBS 코드 목록 조회 (Oracle에서 전체 조회, 실패 시 폴백 데이터 사용) + * CMCTB_PROJ_WBS 테이블에서 조회 + * @param projNo - 프로젝트 번호 (선택적, 없으면 전체 조회) + */ +export async function getWbsCodes(projNo?: string): Promise<{ + success: boolean + data: WbsCode[] + error?: string + isUsingFallback?: boolean +}> { + try { + console.log('📋 [getWbsCodes] Oracle 쿼리 시작...', projNo ? `프로젝트: ${projNo}` : '전체') + + let query = ` + SELECT + PROJ_NO, + WBS_ELMT, + WBS_ELMT_NM, + WBS_LVL + FROM CMCTB_PROJ_WBS + WHERE ROWNUM < 100 + ` + + if (projNo) { + query += ` AND PROJ_NO = :projNo` + } + + query += ` ORDER BY PROJ_NO, WBS_ELMT` + + const result = projNo + ? await oracleKnex.raw(query, { projNo }) + : await oracleKnex.raw(query) + + // Oracle raw query의 결과는 rows 배열에 들어있음 + const rows = (result.rows || result) as Array> + + console.log(`✅ [getWbsCodes] Oracle 쿼리 성공 - ${rows.length}건 조회`) + + // null 값 필터링 + const cleanedResult = rows + .filter((item) => + item.PROJ_NO && + item.WBS_ELMT && + item.WBS_ELMT_NM + ) + .map((item) => ({ + PROJ_NO: String(item.PROJ_NO), + WBS_ELMT: String(item.WBS_ELMT), + WBS_ELMT_NM: String(item.WBS_ELMT_NM), + WBS_LVL: String(item.WBS_LVL || '') + })) + + console.log(`✅ [getWbsCodes] 필터링 후 ${cleanedResult.length}건`) + + return { + success: true, + data: cleanedResult, + isUsingFallback: false + } + } catch (error) { + console.error('❌ [getWbsCodes] Oracle 오류:', error) + console.log('🔄 [getWbsCodes] 폴백 테스트 데이터 사용 (' + FALLBACK_TEST_DATA.length + '건)') + return { + success: true, + data: FALLBACK_TEST_DATA, + isUsingFallback: true + } + } +} + diff --git a/components/common/selectors/wbs-code/wbs-code-single-selector.tsx b/components/common/selectors/wbs-code/wbs-code-single-selector.tsx new file mode 100644 index 00000000..34cbc975 --- /dev/null +++ b/components/common/selectors/wbs-code/wbs-code-single-selector.tsx @@ -0,0 +1,365 @@ +/** + * WBS 코드 단일 선택 다이얼로그 + * + * @description + * - WBS 코드를 하나만 선택할 수 있는 다이얼로그 + * - 트리거 버튼과 다이얼로그가 분리된 구조 + * - 외부에서 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 { + getWbsCodes, + WbsCode +} from './wbs-code-service' +import { toast } from 'sonner' + +export interface WbsCodeSingleSelectorProps { + open: boolean + onOpenChange: (open: boolean) => void + selectedCode?: WbsCode + onCodeSelect: (code: WbsCode) => void + onConfirm?: (code: WbsCode | undefined) => void + onCancel?: () => void + title?: string + description?: string + showConfirmButtons?: boolean + projNo?: string // 프로젝트 번호 필터 +} + +export function WbsCodeSingleSelector({ + open, + onOpenChange, + selectedCode, + onCodeSelect, + onConfirm, + onCancel, + title = "WBS 코드 선택", + description = "WBS 코드를 선택하세요", + showConfirmButtons = false, + projNo +}: WbsCodeSingleSelectorProps) { + 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) + + // WBS 코드 선택 핸들러 + const handleCodeSelect = useCallback((code: WbsCode) => { + 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: 'PROJ_NO', + header: '프로젝트 번호', + cell: ({ row }) => ( +
{row.getValue('PROJ_NO')}
+ ), + }, + { + accessorKey: 'WBS_ELMT', + header: 'WBS 요소', + cell: ({ row }) => ( +
{row.getValue('WBS_ELMT')}
+ ), + }, + { + accessorKey: 'WBS_ELMT_NM', + header: 'WBS 요소명', + cell: ({ row }) => ( +
{row.getValue('WBS_ELMT_NM')}
+ ), + }, + { + accessorKey: 'WBS_LVL', + header: '레벨', + cell: ({ row }) => ( +
{row.getValue('WBS_LVL')}
+ ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => { + const isSelected = showConfirmButtons + ? tempSelectedCode?.WBS_ELMT === row.original.WBS_ELMT && tempSelectedCode?.PROJ_NO === row.original.PROJ_NO + : selectedCode?.WBS_ELMT === row.original.WBS_ELMT && selectedCode?.PROJ_NO === row.original.PROJ_NO + + return ( + + ) + }, + }, + ], [handleCodeSelect, selectedCode, tempSelectedCode, showConfirmButtons]) + + // WBS 코드 테이블 설정 + 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, + }, + }) + + // 서버에서 WBS 코드 전체 목록 로드 (한 번만) + const loadCodes = useCallback(async () => { + startTransition(async () => { + try { + const result = await getWbsCodes(projNo) + + if (result.success) { + setCodes(result.data) + + // 폴백 데이터를 사용하는 경우 알림 + if (result.isUsingFallback) { + toast.info('Oracle 연결 실패', { + description: '테스트 데이터를 사용합니다.', + duration: 4000, + }) + } + } else { + toast.error(result.error || 'WBS 코드를 불러오는데 실패했습니다.') + setCodes([]) + } + } catch (error) { + console.error('WBS 코드 목록 로드 실패:', error) + toast.error('WBS 코드를 불러오는 중 오류가 발생했습니다.') + setCodes([]) + } + }) + }, [projNo]) + + // 다이얼로그 열릴 때 코드 로드 (open prop 변화 감지) + useEffect(() => { + if (open) { + setTempSelectedCode(selectedCode) + if (codes.length === 0) { + console.log('🚀 [WbsCodeSingleSelector] 다이얼로그 열림 - loadCodes 호출') + loadCodes() + } else { + console.log('📦 [WbsCodeSingleSelector] 다이얼로그 열림 - 기존 데이터 사용 (' + codes.length + '건)') + } + } + }, [open, selectedCode, loadCodes, codes.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + const currentSelectedCode = showConfirmButtons ? tempSelectedCode : selectedCode + + return ( + + + + {title} +
+ {description} +
+ + +
+ {/* 현재 선택된 WBS 코드 표시 */} + {currentSelectedCode && ( +
+
선택된 WBS 코드:
+
+ [{currentSelectedCode.PROJ_NO}] + {currentSelectedCode.WBS_ELMT} + {currentSelectedCode.WBS_ELMT_NM} +
+
+ )} + +
+ + handleSearchChange(e.target.value)} + className="flex-1" + /> +
+ + {isPending ? ( +
+
WBS 코드를 불러오는 중...
+
+ ) : ( +
+ + + {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?.WBS_ELMT === row.original.WBS_ELMT && + currentSelectedCode?.PROJ_NO === row.original.PROJ_NO + return ( + handleCodeSelect(row.original)} + > + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + ) + }) + ) : ( + + + 검색 결과가 없습니다. + + + )} + +
+
+ )} + +
+
+ 총 {table.getFilteredRowModel().rows.length}개 WBS 코드 +
+
+ +
+ {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} +
+ +
+
+
+ + {showConfirmButtons && ( + + + + + )} + + + ) +} -- cgit v1.2.3