summaryrefslogtreecommitdiff
path: root/components/common/ship-type
diff options
context:
space:
mode:
Diffstat (limited to 'components/common/ship-type')
-rw-r--r--components/common/ship-type/index.ts2
-rw-r--r--components/common/ship-type/ship-type-selector.tsx308
-rw-r--r--components/common/ship-type/ship-type-service.ts120
3 files changed, 430 insertions, 0 deletions
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<T extends (...args: unknown[]) => void>(func: T, delay: number): T {
+ let timeoutId: NodeJS.Timeout
+ return ((...args: Parameters<T>) => {
+ 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<ShipTypeItem[]>([])
+ const [sorting, setSorting] = useState<SortingState>([])
+ const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+ const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+ const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+ 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<ShipTypeItem>[] = useMemo(() => [
+ {
+ accessorKey: 'CD',
+ header: '선종코드',
+ cell: ({ row }) => (
+ <div className="font-mono text-sm">{row.getValue('CD')}</div>
+ ),
+ },
+ {
+ accessorKey: 'CDNM',
+ header: '선종명',
+ cell: ({ row }) => (
+ <div className="max-w-[200px] truncate">{row.getValue('CDNM')}</div>
+ ),
+ },
+ {
+ id: 'actions',
+ header: '선택',
+ cell: ({ row }) => (
+ <Button
+ variant="ghost"
+ size="sm"
+ onClick={(e) => {
+ e.stopPropagation()
+ handleShipTypeSelect(row.original)
+ }}
+ >
+ <Check className="h-4 w-4" />
+ </Button>
+ ),
+ },
+ ], [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 (
+ <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+ <DialogTrigger asChild>
+ <Button
+ variant="outline"
+ disabled={disabled}
+ className={`w-full justify-start ${className || ''}`}
+ >
+ {selectedShipType ? (
+ <div className="flex items-center gap-2 w-full">
+ <span className="font-mono text-sm">[{selectedShipType.CD}]</span>
+ <span className="truncate flex-1 text-left">{selectedShipType.CDNM}</span>
+ </div>
+ ) : (
+ <span className="text-muted-foreground">{placeholder}</span>
+ )}
+ </Button>
+ </DialogTrigger>
+ <DialogContent className="max-w-4xl max-h-[80vh]">
+ <DialogHeader>
+ <DialogTitle>선종 선택</DialogTitle>
+ <div className="text-sm text-muted-foreground">
+ 선종코드(CD_CLF=PSA330) 조회
+ </div>
+ </DialogHeader>
+
+ <div className="space-y-4">
+ <div className="flex items-center space-x-2">
+ <Search className="h-4 w-4" />
+ <Input
+ placeholder="선종코드, 선종명으로 검색..."
+ value={globalFilter}
+ onChange={(e) => handleSearchChange(e.target.value)}
+ className="flex-1"
+ />
+ </div>
+
+ {isPending ? (
+ <div className="flex justify-center py-8">
+ <div className="text-sm text-muted-foreground">선종을 불러오는 중...</div>
+ </div>
+ ) : (
+ <div className="border rounded-md">
+ <Table>
+ <TableHeader>
+ {table.getHeaderGroups().map((headerGroup) => (
+ <TableRow key={headerGroup.id}>
+ {headerGroup.headers.map((header) => (
+ <TableHead key={header.id}>
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ </TableHead>
+ ))}
+ </TableRow>
+ ))}
+ </TableHeader>
+ <TableBody>
+ {table.getRowModel().rows?.length ? (
+ table.getRowModel().rows.map((row) => (
+ <TableRow
+ key={row.id}
+ data-state={row.getIsSelected() && "selected"}
+ className="cursor-pointer hover:bg-muted/50"
+ onClick={() => handleShipTypeSelect(row.original)}
+ >
+ {row.getVisibleCells().map((cell) => (
+ <TableCell key={cell.id}>
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+ </TableCell>
+ ))}
+ </TableRow>
+ ))
+ ) : (
+ <TableRow>
+ <TableCell
+ colSpan={columns.length}
+ className="h-24 text-center"
+ >
+ 검색 결과가 없습니다.
+ </TableCell>
+ </TableRow>
+ )}
+ </TableBody>
+ </Table>
+ </div>
+ )}
+
+ <div className="flex items-center justify-between">
+ <div className="text-sm text-muted-foreground">
+ 총 {table.getFilteredRowModel().rows.length}개 선종
+ </div>
+ <div className="flex items-center space-x-2">
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() => table.previousPage()}
+ disabled={!table.getCanPreviousPage()}
+ >
+ 이전
+ </Button>
+ <div className="text-sm">
+ {table.getState().pagination.pageIndex + 1} / {table.getPageCount()}
+ </div>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() => table.nextPage()}
+ disabled={!table.getCanNextPage()}
+ >
+ 다음
+ </Button>
+ </div>
+ </div>
+ </div>
+ </DialogContent>
+ </Dialog>
+ )
+}
+
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<ShipTypeItem | null> {
+ 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
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 15:57:39 +0000