From ba35e67845f935c8ce0151c9ef1fefa0b0510faf Mon Sep 17 00:00:00 2001 From: joonhoekim <26rote@gmail.com> Date: Mon, 22 Sep 2025 18:59:13 +0900 Subject: (김준회) AVL 피드백 반영 (이진용 프로 건) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/discipline/discipline-service.ts | 123 ++++++++ .../discipline/engineering-discipline-selector.tsx | 315 +++++++++++++++++++++ components/common/discipline/index.ts | 9 + 3 files changed, 447 insertions(+) create mode 100644 components/common/discipline/discipline-service.ts create mode 100644 components/common/discipline/engineering-discipline-selector.tsx create mode 100644 components/common/discipline/index.ts (limited to 'components/common/discipline') diff --git a/components/common/discipline/discipline-service.ts b/components/common/discipline/discipline-service.ts new file mode 100644 index 00000000..cb6edb0e --- /dev/null +++ b/components/common/discipline/discipline-service.ts @@ -0,0 +1,123 @@ +"use server" + +import db from '@/db/db' +import { cmctbCd } from '@/db/schema/NONSAP/nonsap' +import { eq, or, ilike, and } from 'drizzle-orm' + +// 설계공종코드 타입 정의 +export interface DisciplineCode { + CD: string // 설계공종코드 + USR_DF_CHAR_18: string // 설계공종명 +} + +// 설계공종코드 검색 옵션 +export interface DisciplineSearchOptions { + searchTerm?: string + limit?: number +} + +/** + * 설계공종코드 목록 조회 + * 내부 PostgreSQL DB의 cmctbCd 테이블에서 CD_CLF = 'PLJP43' 조건으로 조회 + */ +export async function getDisciplineCodes(options: DisciplineSearchOptions = {}): Promise<{ + success: boolean + data: DisciplineCode[] + error?: string +}> { + try { + const { searchTerm, limit = 100 } = options + + // 검색어가 있는 경우와 없는 경우를 분리해서 처리 + let result; + + if (searchTerm && searchTerm.trim()) { + const term = `%${searchTerm.trim().toUpperCase()}%` + result = await db + .select({ + CD: cmctbCd.CD, + USR_DF_CHAR_18: cmctbCd.USR_DF_CHAR_18 + }) + .from(cmctbCd) + .where( + and( + eq(cmctbCd.CD_CLF, 'PLJP43'), + or( + ilike(cmctbCd.CD, term), + ilike(cmctbCd.USR_DF_CHAR_18, term) + ) + ) + ) + .orderBy(cmctbCd.CD) + .limit(limit > 0 ? limit : 100) + } else { + result = await db + .select({ + CD: cmctbCd.CD, + USR_DF_CHAR_18: cmctbCd.USR_DF_CHAR_18 + }) + .from(cmctbCd) + .where(eq(cmctbCd.CD_CLF, 'PLJP43')) + .orderBy(cmctbCd.CD) + .limit(limit > 0 ? limit : 100) + } + + // null 값 처리 + const cleanedResult = result + .filter(item => item.CD && item.USR_DF_CHAR_18) + .map(item => ({ + CD: item.CD!, + USR_DF_CHAR_18: item.USR_DF_CHAR_18! + })) + + return { + success: true, + data: cleanedResult + } + } catch (error) { + console.error('Error fetching discipline codes:', error) + return { + success: false, + data: [], + error: '설계공종코드를 조회하는 중 오류가 발생했습니다.' + } + } +} + +/** + * 특정 설계공종코드 조회 + * 내부 PostgreSQL DB의 cmctbCd 테이블에서 조회 + */ +export async function getDisciplineCodeByCode(code: string): Promise { + if (!code.trim()) { + return null + } + + try { + const result = await db + .select({ + CD: cmctbCd.CD, + USR_DF_CHAR_18: cmctbCd.USR_DF_CHAR_18 + }) + .from(cmctbCd) + .where( + and( + eq(cmctbCd.CD_CLF, 'PLJP43'), + eq(cmctbCd.CD, code.trim().toUpperCase()) + ) + ) + .limit(1) + + if (result.length > 0 && result[0].CD && result[0].USR_DF_CHAR_18) { + return { + CD: result[0].CD, + USR_DF_CHAR_18: result[0].USR_DF_CHAR_18 + } + } + + return null + } catch (error) { + console.error('Error fetching discipline code by code:', error) + return null + } +} diff --git a/components/common/discipline/engineering-discipline-selector.tsx b/components/common/discipline/engineering-discipline-selector.tsx new file mode 100644 index 00000000..8bf0cbb9 --- /dev/null +++ b/components/common/discipline/engineering-discipline-selector.tsx @@ -0,0 +1,315 @@ +'use client' + +/** + * 설계공종코드 선택기 + * + * @description + * - 오라클에서 CMCTB_CD 테이블에 대해, CD_CLF = 'PLJP43' 인 건들을 조회 + * - 조회 결과 중 CD 가 설계공종코드 + * - USR_DF_CHAR_18 이 설계공종명 + */ + +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 { getDisciplineCodes, DisciplineCode, DisciplineSearchOptions } from './discipline-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 EngineeringDisciplineSelectorProps { + selectedDiscipline?: DisciplineCode + onDisciplineSelect: (discipline: DisciplineCode) => void + disabled?: boolean + searchOptions?: Partial + placeholder?: string + className?: string +} + +export function EngineeringDisciplineSelector({ + selectedDiscipline, + onDisciplineSelect, + disabled, + searchOptions = {}, + placeholder = "설계공종을 선택하세요", + className +}: EngineeringDisciplineSelectorProps) { + const [open, setOpen] = useState(false) + const [disciplines, setDisciplines] = 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() + + // searchOptions 안정화 + const stableSearchOptions = useMemo(() => ({ + limit: 100, + ...searchOptions + }), [searchOptions]) + + // 설계공종 선택 핸들러 + const handleDisciplineSelect = useCallback((discipline: DisciplineCode) => { + onDisciplineSelect(discipline) + setOpen(false) + }, [onDisciplineSelect]) + + // 테이블 컬럼 정의 + const columns: ColumnDef[] = useMemo(() => [ + { + accessorKey: 'CD', + header: '설계공종코드', + cell: ({ row }) => ( +
{row.getValue('CD')}
+ ), + }, + { + accessorKey: 'USR_DF_CHAR_18', + header: '설계공종명', + cell: ({ row }) => ( +
{row.getValue('USR_DF_CHAR_18')}
+ ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => ( + + ), + }, + ], [handleDisciplineSelect]) + + // 설계공종 테이블 설정 + const table = useReactTable({ + data: disciplines, + 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 loadDisciplines = useCallback(async (searchTerm?: string) => { + startTransition(async () => { + try { + const result = await getDisciplineCodes({ + ...stableSearchOptions, + searchTerm: searchTerm + }) + + if (result.success) { + setDisciplines(result.data) + } else { + toast.error(result.error || '설계공종코드를 불러오는데 실패했습니다.') + setDisciplines([]) + } + } catch (error) { + console.error('설계공종코드 목록 로드 실패:', error) + toast.error('설계공종코드를 불러오는 중 오류가 발생했습니다.') + setDisciplines([]) + } + }) + }, [stableSearchOptions]) + + // 디바운스된 검색 (클라이언트 로직만) + const debouncedSearch = useMemo( + () => debounce((searchTerm: string) => { + loadDisciplines(searchTerm) + }, 300), + [loadDisciplines] + ) + + // 다이얼로그 열기 핸들러 + const handleDialogOpenChange = useCallback((newOpen: boolean) => { + setOpen(newOpen) + if (newOpen && disciplines.length === 0) { + loadDisciplines() + } + }, [loadDisciplines, disciplines.length]) + + // 검색어 변경 핸들러 + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + if (open) { + debouncedSearch(value) + } + }, [open, debouncedSearch]) + + return ( + + + + + + + 설계공종 선택 +
+ 설계공종코드(CD_CLF=PLJP43) 조회 +
+ + +
+
+ + 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) => ( + handleDisciplineSelect(row.original)} + > + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + 검색 결과가 없습니다. + + + )} + +
+
+ )} + +
+
+ 총 {table.getFilteredRowModel().rows.length}개 설계공종 +
+
+ +
+ {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} +
+ +
+
+
+ + + ) +} \ No newline at end of file diff --git a/components/common/discipline/index.ts b/components/common/discipline/index.ts new file mode 100644 index 00000000..67f499bf --- /dev/null +++ b/components/common/discipline/index.ts @@ -0,0 +1,9 @@ +// 공용 설계공종 관련 컴포넌트 및 서비스 +export { EngineeringDisciplineSelector } from './engineering-discipline-selector' +export type { EngineeringDisciplineSelectorProps } from './engineering-discipline-selector' +export { + getDisciplineCodes, + getDisciplineCodeByCode, + type DisciplineCode, + type DisciplineSearchOptions +} from './discipline-service' -- cgit v1.2.3