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/ship-type/index.ts | 2 + components/common/ship-type/ship-type-selector.tsx | 308 +++++++++++++++++++++ components/common/ship-type/ship-type-service.ts | 120 ++++++++ 3 files changed, 430 insertions(+) create mode 100644 components/common/ship-type/index.ts create mode 100644 components/common/ship-type/ship-type-selector.tsx create mode 100644 components/common/ship-type/ship-type-service.ts (limited to 'components/common/ship-type') diff --git a/components/common/ship-type/index.ts b/components/common/ship-type/index.ts new file mode 100644 index 00000000..fe202d76 --- /dev/null +++ b/components/common/ship-type/index.ts @@ -0,0 +1,2 @@ +export * from './ship-type-service' +export * from './ship-type-selector' diff --git a/components/common/ship-type/ship-type-selector.tsx b/components/common/ship-type/ship-type-selector.tsx new file mode 100644 index 00000000..7837f0ac --- /dev/null +++ b/components/common/ship-type/ship-type-selector.tsx @@ -0,0 +1,308 @@ +"use client" + +import React, { 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 { getShipTypes, ShipTypeItem } from './ship-type-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 ShipTypeSelectorProps { + selectedShipType?: ShipTypeItem + onShipTypeSelect: (shipType: ShipTypeItem) => void + disabled?: boolean + placeholder?: string + className?: string +} + +/** + * 선종 선택기 + * + * @description + * - CMCTB_CDNM 테이블에서 CD_CLF = 'PSA330' AND DEL_YN = 'N' 조건으로 선종 조회 + * - 조회 결과 중 CD가 선종코드, CDNM이 선종명 + * - 검색과 동시에 선택 (선종코드와 선종명으로 검색) + * - 건수가 대략 50개 정도이므로, 페이지네이션 없이 한번에 데이터 페칭 + */ +export function ShipTypeSelector({ + selectedShipType, + onShipTypeSelect, + disabled, + placeholder = "선종을 선택하세요", + className +}: ShipTypeSelectorProps) { + const [open, setOpen] = useState(false) + const [shipTypes, setShipTypes] = 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 loadShipTypes = useCallback(async (searchTerm?: string) => { + startTransition(async () => { + try { + const result = await getShipTypes({ + searchTerm: searchTerm, + limit: 100 + }) + + if (result.success) { + setShipTypes(result.data) + } else { + toast.error(result.error || '선종을 불러오는데 실패했습니다.') + setShipTypes([]) + } + } catch (error) { + console.error('선종 목록 로드 실패:', error) + toast.error('선종을 불러오는 중 오류가 발생했습니다.') + setShipTypes([]) + } + }) + }, []) + + // 디바운스된 검색 (클라이언트 로직만) + const debouncedSearch = useMemo( + () => debounce((searchTerm: string) => { + loadShipTypes(searchTerm) + }, 300), + [loadShipTypes] + ) + + // 다이얼로그 열기 핸들러 + const handleDialogOpenChange = useCallback((newOpen: boolean) => { + setOpen(newOpen) + if (newOpen && shipTypes.length === 0) { + loadShipTypes() + } + }, [loadShipTypes, shipTypes.length]) + + // 검색어 변경 핸들러 + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + if (open) { + debouncedSearch(value) + } + }, [open, debouncedSearch]) + + // 선종 선택 핸들러 + const handleShipTypeSelect = useCallback((shipType: ShipTypeItem) => { + onShipTypeSelect(shipType) + setOpen(false) + }, [onShipTypeSelect]) + + // 테이블 컬럼 정의 + const columns: ColumnDef[] = useMemo(() => [ + { + accessorKey: 'CD', + header: '선종코드', + cell: ({ row }) => ( +
{row.getValue('CD')}
+ ), + }, + { + accessorKey: 'CDNM', + header: '선종명', + cell: ({ row }) => ( +
{row.getValue('CDNM')}
+ ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => ( + + ), + }, + ], [handleShipTypeSelect]) + + // 선종 테이블 설정 + const table = useReactTable({ + data: shipTypes, + 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, + }, + }) + + return ( + + + + + + + 선종 선택 +
+ 선종코드(CD_CLF=PSA330) 조회 +
+ + +
+
+ + 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) => ( + handleShipTypeSelect(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/ship-type/ship-type-service.ts b/components/common/ship-type/ship-type-service.ts new file mode 100644 index 00000000..9a952478 --- /dev/null +++ b/components/common/ship-type/ship-type-service.ts @@ -0,0 +1,120 @@ +"use server" + +import db from '@/db/db' +import { cmctbCdnm } from '@/db/schema/NONSAP/nonsap' +import { eq, or, ilike, and, asc } from 'drizzle-orm' + +// 선종 타입 정의 +export interface ShipTypeItem { + CD: string // 선종코드 + CDNM: string // 선종명 + displayText: string // 표시용 텍스트 (CD + " - " + CDNM) +} + +// 선종 검색 옵션 +export interface ShipTypeSearchOptions { + searchTerm?: string + limit?: number +} + +/** + * 선종 목록 조회 + * cmctbCdnm 테이블에서 CD_CLF = 'PSA330' AND DEL_YN = 'N' 조건으로 조회 + */ +export async function getShipTypes(options: ShipTypeSearchOptions = {}): Promise<{ + success: boolean + data: ShipTypeItem[] + error?: string +}> { + try { + const { searchTerm, limit = 100 } = options + + // WHERE 조건 구성 + let whereClause = and( + eq(cmctbCdnm.CD_CLF, 'PSA330'), + eq(cmctbCdnm.DEL_YN, 'N') + ) + + // 검색어가 있는 경우 추가 조건 + if (searchTerm && searchTerm.trim()) { + const term = `%${searchTerm.trim().toUpperCase()}%` + whereClause = and( + whereClause, + or( + ilike(cmctbCdnm.CD, term), + ilike(cmctbCdnm.CDNM, term) + ) + ) + } + + const result = await db + .select({ + CD: cmctbCdnm.CD, + CDNM: cmctbCdnm.CDNM + }) + .from(cmctbCdnm) + .where(whereClause) + .orderBy(asc(cmctbCdnm.CD)) + .limit(limit > 0 ? limit : 100) + + // null 값 처리 및 displayText 추가 + const cleanedResult = result + .filter(item => item.CD && item.CDNM) + .map(item => ({ + CD: item.CD!, + CDNM: item.CDNM!, + displayText: `${item.CD} - ${item.CDNM}` + })) + + return { + success: true, + data: cleanedResult + } + } catch (error) { + console.error('Error fetching ship types:', error) + return { + success: false, + data: [], + error: '선종을 조회하는 중 오류가 발생했습니다.' + } + } +} + +/** + * 특정 선종 조회 (코드로) + */ +export async function getShipTypeByCode(code: string): Promise { + if (!code.trim()) { + return null + } + + try { + const result = await db + .select({ + CD: cmctbCdnm.CD, + CDNM: cmctbCdnm.CDNM + }) + .from(cmctbCdnm) + .where( + and( + eq(cmctbCdnm.CD_CLF, 'PSA330'), + eq(cmctbCdnm.DEL_YN, 'N'), + eq(cmctbCdnm.CD, code.trim().toUpperCase()) + ) + ) + .limit(1) + + if (result.length > 0 && result[0].CD && result[0].CDNM) { + return { + CD: result[0].CD, + CDNM: result[0].CDNM, + displayText: `${result[0].CD} - ${result[0].CDNM}` + } + } + + return null + } catch (error) { + console.error('Error fetching ship type by code:', error) + return null + } +} -- cgit v1.2.3