summaryrefslogtreecommitdiff
path: root/components/common
diff options
context:
space:
mode:
Diffstat (limited to 'components/common')
-rw-r--r--components/common/selectors/nation/index.ts20
-rw-r--r--components/common/selectors/nation/nation-multi-selector.tsx458
-rw-r--r--components/common/selectors/nation/nation-selector.tsx339
-rw-r--r--components/common/selectors/nation/nation-service.ts193
-rw-r--r--components/common/selectors/nation/nation-single-selector.tsx389
5 files changed, 1399 insertions, 0 deletions
diff --git a/components/common/selectors/nation/index.ts b/components/common/selectors/nation/index.ts
new file mode 100644
index 00000000..f3b257c4
--- /dev/null
+++ b/components/common/selectors/nation/index.ts
@@ -0,0 +1,20 @@
+// 국가 선택기 관련 컴포넌트와 타입 내보내기
+
+export { NationSelector } from './nation-selector'
+export type { NationSelectorProps } from './nation-selector'
+
+export { NationSingleSelector } from './nation-single-selector'
+export type { NationSingleSelectorProps } from './nation-single-selector'
+
+export { NationMultiSelector } from './nation-multi-selector'
+export type { NationMultiSelectorProps } from './nation-multi-selector'
+
+export {
+ getNationCodes,
+ getNationCodeByCode,
+ getNationCodesByCodes
+} from './nation-service'
+export type {
+ NationCode,
+ NationSearchOptions
+} from './nation-service'
diff --git a/components/common/selectors/nation/nation-multi-selector.tsx b/components/common/selectors/nation/nation-multi-selector.tsx
new file mode 100644
index 00000000..b3b4a6e0
--- /dev/null
+++ b/components/common/selectors/nation/nation-multi-selector.tsx
@@ -0,0 +1,458 @@
+'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 { getNationCodes, NationCode, NationSearchOptions } from './nation-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 NationMultiSelectorProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ selectedNations?: NationCode[]
+ onNationsSelect: (nations: NationCode[]) => void
+ onConfirm?: (nations: NationCode[]) => void
+ onCancel?: () => void
+ searchOptions?: Partial<NationSearchOptions>
+ title?: string
+ description?: string
+ maxSelection?: number
+}
+
+export function NationMultiSelector({
+ open,
+ onOpenChange,
+ selectedNations = [],
+ onNationsSelect,
+ onConfirm,
+ onCancel,
+ searchOptions = {},
+ title = "국가 다중 선택",
+ description = "여러 국가를 선택하세요",
+ maxSelection
+}: NationMultiSelectorProps) {
+ const [nations, setNations] = useState<NationCode[]>([])
+ 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 [tempSelectedNations, setTempSelectedNations] = useState<NationCode[]>(selectedNations)
+
+ // searchOptions 안정화
+ const stableSearchOptions = useMemo(() => ({
+ limit: 100,
+ ...searchOptions
+ }), [searchOptions])
+
+ // 국가 선택/해제 핸들러
+ const handleNationToggle = useCallback((nation: NationCode, checked: boolean) => {
+ setTempSelectedNations(prev => {
+ if (checked) {
+ // 최대 선택 수 제한 확인
+ if (maxSelection && prev.length >= maxSelection) {
+ toast.warning(`최대 ${maxSelection}개까지 선택할 수 있습니다.`)
+ return prev
+ }
+ // 이미 선택된 국가인지 확인
+ if (prev.some(n => n.CD === nation.CD)) {
+ return prev
+ }
+ return [...prev, nation]
+ } else {
+ return prev.filter(n => n.CD !== nation.CD)
+ }
+ })
+ }, [maxSelection])
+
+ // 개별 국가 제거 핸들러
+ const handleRemoveNation = useCallback((nationCode: string) => {
+ setTempSelectedNations(prev => prev.filter(n => n.CD !== nationCode))
+ }, [])
+
+ // 모든 선택 해제 핸들러
+ const handleClearAll = useCallback(() => {
+ setTempSelectedNations([])
+ }, [])
+
+ // 확인 버튼 핸들러
+ const handleConfirm = useCallback(() => {
+ onNationsSelect(tempSelectedNations)
+ onConfirm?.(tempSelectedNations)
+ onOpenChange(false)
+ }, [tempSelectedNations, onNationsSelect, onConfirm, onOpenChange])
+
+ // 취소 버튼 핸들러
+ const handleCancel = useCallback(() => {
+ setTempSelectedNations(selectedNations)
+ onCancel?.()
+ onOpenChange(false)
+ }, [selectedNations, onCancel, onOpenChange])
+
+ // 테이블 컬럼 정의
+ const columns: ColumnDef<NationCode>[] = useMemo(() => [
+ {
+ id: 'select',
+ header: ({ table }) => (
+ <Checkbox
+ checked={table.getIsAllPageRowsSelected()}
+ onCheckedChange={(value) => {
+ if (value) {
+ // 페이지의 모든 행을 선택하되, 최대 선택 수 제한 확인
+ const currentPageRows = table.getRowModel().rows
+ const newSelections = currentPageRows
+ .map(row => row.original)
+ .filter(nation => !tempSelectedNations.some(n => n.CD === nation.CD))
+
+ if (maxSelection) {
+ const remainingSlots = maxSelection - tempSelectedNations.length
+ if (newSelections.length > remainingSlots) {
+ toast.warning(`최대 ${maxSelection}개까지 선택할 수 있습니다.`)
+ return
+ }
+ }
+
+ setTempSelectedNations(prev => [...prev, ...newSelections])
+ } else {
+ // 페이지의 모든 행 선택 해제
+ const currentPageNationCodes = table.getRowModel().rows.map(row => row.original.CD)
+ setTempSelectedNations(prev => prev.filter(n => !currentPageNationCodes.includes(n.CD)))
+ }
+ }}
+ aria-label="모든 행 선택"
+ />
+ ),
+ cell: ({ row }) => {
+ const isSelected = tempSelectedNations.some(n => n.CD === row.original.CD)
+ return (
+ <Checkbox
+ checked={isSelected}
+ onCheckedChange={(value) => handleNationToggle(row.original, !!value)}
+ aria-label="행 선택"
+ />
+ )
+ },
+ enableSorting: false,
+ enableHiding: false,
+ },
+ {
+ accessorKey: 'CD',
+ header: '2글자코드',
+ cell: ({ row }) => (
+ <div className="font-mono text-sm">{row.getValue('CD')}</div>
+ ),
+ },
+ {
+ accessorKey: 'CD2',
+ header: '3글자코드',
+ cell: ({ row }) => (
+ <div className="font-mono text-sm">{row.getValue('CD2')}</div>
+ ),
+ },
+ {
+ accessorKey: 'CD3',
+ header: '숫자코드',
+ cell: ({ row }) => (
+ <div className="font-mono text-sm">{row.getValue('CD3')}</div>
+ ),
+ },
+ {
+ accessorKey: 'CDNM',
+ header: '한국어명',
+ cell: ({ row }) => (
+ <div className="max-w-[120px] truncate">{row.getValue('CDNM')}</div>
+ ),
+ },
+ {
+ accessorKey: 'GRP_DSC',
+ header: '영문명',
+ cell: ({ row }) => (
+ <div className="max-w-[150px] truncate">{row.getValue('GRP_DSC')}</div>
+ ),
+ },
+ ], [handleNationToggle, tempSelectedNations, maxSelection])
+
+ // 국가 테이블 설정
+ const table = useReactTable({
+ data: nations,
+ 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 loadNations = useCallback(async (searchTerm?: string) => {
+ startTransition(async () => {
+ try {
+ const result = await getNationCodes({
+ ...stableSearchOptions,
+ searchTerm: searchTerm
+ })
+
+ if (result.success) {
+ setNations(result.data)
+ } else {
+ toast.error(result.error || '국가코드를 불러오는데 실패했습니다.')
+ setNations([])
+ }
+ } catch (error) {
+ console.error('국가코드 목록 로드 실패:', error)
+ toast.error('국가코드를 불러오는 중 오류가 발생했습니다.')
+ setNations([])
+ }
+ })
+ }, [stableSearchOptions])
+
+ // 디바운스된 검색
+ const debouncedSearch = useMemo(
+ () => debounce((searchTerm: string) => {
+ loadNations(searchTerm)
+ }, 300),
+ [loadNations]
+ )
+
+ // 다이얼로그 열기/닫기 핸들러
+ const handleDialogOpenChange = useCallback((newOpen: boolean) => {
+ onOpenChange(newOpen)
+ if (newOpen) {
+ setTempSelectedNations(selectedNations)
+ if (nations.length === 0) {
+ loadNations()
+ }
+ }
+ }, [onOpenChange, selectedNations, loadNations, nations.length])
+
+ // 검색어 변경 핸들러
+ const handleSearchChange = useCallback((value: string) => {
+ setGlobalFilter(value)
+ if (open) {
+ debouncedSearch(value)
+ }
+ }, [open, debouncedSearch])
+
+ return (
+ <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+ <DialogContent className="max-w-6xl max-h-[85vh]">
+ <DialogHeader>
+ <DialogTitle>{title}</DialogTitle>
+ <div className="text-sm text-muted-foreground">
+ {description}
+ {maxSelection && ` (최대 ${maxSelection}개)`}
+ </div>
+ </DialogHeader>
+
+ <div className="space-y-4">
+ {/* 선택된 국가들 표시 */}
+ {tempSelectedNations.length > 0 && (
+ <div className="space-y-2">
+ <div className="flex items-center justify-between">
+ <div className="text-sm font-medium">
+ 선택된 국가 ({tempSelectedNations.length}개)
+ {maxSelection && ` / ${maxSelection}`}
+ </div>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={handleClearAll}
+ disabled={tempSelectedNations.length === 0}
+ >
+ <Trash2 className="h-4 w-4 mr-2" />
+ 모두 제거
+ </Button>
+ </div>
+ <div className="flex flex-wrap gap-2 max-h-24 overflow-y-auto p-2 border rounded-md bg-muted/30">
+ {tempSelectedNations.map((nation) => (
+ <Badge
+ key={nation.CD}
+ variant="secondary"
+ className="text-xs"
+ >
+ [{nation.CD}] {nation.CDNM}
+ <button
+ onClick={() => handleRemoveNation(nation.CD)}
+ className="ml-1 hover:text-destructive"
+ >
+ <X className="h-3 w-3" />
+ </button>
+ </Badge>
+ ))}
+ </div>
+ </div>
+ )}
+
+ <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) => {
+ const isSelected = tempSelectedNations.some(n => n.CD === row.original.CD)
+ return (
+ <TableRow
+ key={row.id}
+ data-state={isSelected && "selected"}
+ className={`cursor-pointer hover:bg-muted/50 ${
+ isSelected ? 'bg-muted/30' : ''
+ }`}
+ onClick={() => {
+ const isCurrentlySelected = tempSelectedNations.some(n => n.CD === row.original.CD)
+ handleNationToggle(row.original, !isCurrentlySelected)
+ }}
+ >
+ {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>
+
+ <DialogFooter>
+ <Button variant="outline" onClick={handleCancel}>
+ <X className="h-4 w-4 mr-2" />
+ 취소
+ </Button>
+ <Button onClick={handleConfirm}>
+ <Check className="h-4 w-4 mr-2" />
+ 확인 ({tempSelectedNations.length}개 선택)
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
+}
diff --git a/components/common/selectors/nation/nation-selector.tsx b/components/common/selectors/nation/nation-selector.tsx
new file mode 100644
index 00000000..336e044a
--- /dev/null
+++ b/components/common/selectors/nation/nation-selector.tsx
@@ -0,0 +1,339 @@
+'use client'
+
+/**
+ * 국가 선택기
+ *
+ * @description
+ * - 오라클에서 CMCTB_CD 테이블에 대해, CD_CLF = 'LE0010' 인 건들을 조회
+ * - CD 컬럼이 대문자 알파벳 2글자 국가코드
+ * - CD2 컬럼이 대문자 알파벳 3글자 국가코드
+ * - CD3 컬럼이 3글자 숫자로 표현되는 국가코드 (0으로 시작할 수 있음)
+ * - CDNM 컬럼이 한국어 국가명
+ * - GRP_DSC 컬럼이 영문 국가명
+ */
+
+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 { getNationCodes, NationCode, NationSearchOptions } from './nation-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 NationSelectorProps {
+ selectedNation?: NationCode
+ onNationSelect: (nation: NationCode) => void
+ disabled?: boolean
+ searchOptions?: Partial<NationSearchOptions>
+ placeholder?: string
+ className?: string
+}
+
+export function NationSelector({
+ selectedNation,
+ onNationSelect,
+ disabled,
+ searchOptions = {},
+ placeholder = "국가를 선택하세요",
+ className
+}: NationSelectorProps) {
+ const [open, setOpen] = useState(false)
+ const [nations, setNations] = useState<NationCode[]>([])
+ 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()
+
+ // searchOptions 안정화
+ const stableSearchOptions = useMemo(() => ({
+ limit: 100,
+ ...searchOptions
+ }), [searchOptions])
+
+ // 국가 선택 핸들러
+ const handleNationSelect = useCallback((nation: NationCode) => {
+ onNationSelect(nation)
+ setOpen(false)
+ }, [onNationSelect])
+
+ // 테이블 컬럼 정의
+ const columns: ColumnDef<NationCode>[] = useMemo(() => [
+ {
+ accessorKey: 'CD',
+ header: '2글자코드',
+ cell: ({ row }) => (
+ <div className="font-mono text-sm">{row.getValue('CD')}</div>
+ ),
+ },
+ {
+ accessorKey: 'CD2',
+ header: '3글자코드',
+ cell: ({ row }) => (
+ <div className="font-mono text-sm">{row.getValue('CD2')}</div>
+ ),
+ },
+ {
+ accessorKey: 'CD3',
+ header: '숫자코드',
+ cell: ({ row }) => (
+ <div className="font-mono text-sm">{row.getValue('CD3')}</div>
+ ),
+ },
+ {
+ accessorKey: 'CDNM',
+ header: '한국어명',
+ cell: ({ row }) => (
+ <div className="max-w-[120px] truncate">{row.getValue('CDNM')}</div>
+ ),
+ },
+ {
+ accessorKey: 'GRP_DSC',
+ header: '영문명',
+ cell: ({ row }) => (
+ <div className="max-w-[150px] truncate">{row.getValue('GRP_DSC')}</div>
+ ),
+ },
+ {
+ id: 'actions',
+ header: '선택',
+ cell: ({ row }) => (
+ <Button
+ variant="ghost"
+ size="sm"
+ onClick={(e) => {
+ e.stopPropagation()
+ handleNationSelect(row.original)
+ }}
+ >
+ <Check className="h-4 w-4" />
+ </Button>
+ ),
+ },
+ ], [handleNationSelect])
+
+ // 국가 테이블 설정
+ const table = useReactTable({
+ data: nations,
+ 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 loadNations = useCallback(async (searchTerm?: string) => {
+ startTransition(async () => {
+ try {
+ const result = await getNationCodes({
+ ...stableSearchOptions,
+ searchTerm: searchTerm
+ })
+
+ if (result.success) {
+ setNations(result.data)
+ } else {
+ toast.error(result.error || '국가코드를 불러오는데 실패했습니다.')
+ setNations([])
+ }
+ } catch (error) {
+ console.error('국가코드 목록 로드 실패:', error)
+ toast.error('국가코드를 불러오는 중 오류가 발생했습니다.')
+ setNations([])
+ }
+ })
+ }, [stableSearchOptions])
+
+ // 디바운스된 검색 (클라이언트 로직만)
+ const debouncedSearch = useMemo(
+ () => debounce((searchTerm: string) => {
+ loadNations(searchTerm)
+ }, 300),
+ [loadNations]
+ )
+
+ // 다이얼로그 열기 핸들러
+ const handleDialogOpenChange = useCallback((newOpen: boolean) => {
+ setOpen(newOpen)
+ if (newOpen && nations.length === 0) {
+ loadNations()
+ }
+ }, [loadNations, nations.length])
+
+ // 검색어 변경 핸들러
+ const handleSearchChange = useCallback((value: string) => {
+ setGlobalFilter(value)
+ if (open) {
+ debouncedSearch(value)
+ }
+ }, [open, debouncedSearch])
+
+ return (
+ <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+ <DialogTrigger asChild>
+ <Button
+ variant="outline"
+ disabled={disabled}
+ className={`w-full justify-start ${className || ''}`}
+ >
+ {selectedNation ? (
+ <div className="flex items-center gap-2 w-full">
+ <span className="font-mono text-sm">[{selectedNation.CD}]</span>
+ <span className="truncate flex-1 text-left">{selectedNation.CDNM}</span>
+ </div>
+ ) : (
+ <span className="text-muted-foreground">{placeholder}</span>
+ )}
+ </Button>
+ </DialogTrigger>
+ <DialogContent className="max-w-5xl max-h-[80vh]">
+ <DialogHeader>
+ <DialogTitle>국가 선택</DialogTitle>
+ <div className="text-sm text-muted-foreground">
+ 국가코드(CD_CLF=LE0010) 조회
+ </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={() => handleNationSelect(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/selectors/nation/nation-service.ts b/components/common/selectors/nation/nation-service.ts
new file mode 100644
index 00000000..091131fe
--- /dev/null
+++ b/components/common/selectors/nation/nation-service.ts
@@ -0,0 +1,193 @@
+"use server"
+
+import db from '@/db/db'
+import { cmctbCdnm } from '@/db/schema/NONSAP/nonsap'
+import { eq, or, ilike, and } from 'drizzle-orm'
+
+// 국가코드 타입 정의
+export interface NationCode {
+ CD: string // 2글자 국가코드
+ CD2: string // 3글자 국가코드
+ CD3: string // 3글자 숫자 국가코드
+ CDNM: string // 한국어 국가명
+ GRP_DSC: string // 영문 국가명
+}
+
+// 국가코드 검색 옵션
+export interface NationSearchOptions {
+ searchTerm?: string
+ limit?: number
+}
+
+/**
+ * 국가코드 목록 조회
+ * 내부 PostgreSQL DB의 cmctbCdnm 테이블에서 CD_CLF = 'LE0010' 조건으로 조회
+ */
+export async function getNationCodes(options: NationSearchOptions = {}): Promise<{
+ success: boolean
+ data: NationCode[]
+ error?: string
+}> {
+ try {
+ const { searchTerm, limit = 100 } = options
+
+ // 검색어가 있는 경우와 없는 경우를 분리해서 처리
+ let result;
+
+ if (searchTerm && searchTerm.trim()) {
+ const term = `%${searchTerm.trim().toUpperCase()}%`
+ result = await db
+ .select({
+ CD: cmctbCdnm.CD,
+ CD2: cmctbCdnm.CD2,
+ CD3: cmctbCdnm.CD3,
+ CDNM: cmctbCdnm.CDNM,
+ GRP_DSC: cmctbCdnm.GRP_DSC
+ })
+ .from(cmctbCdnm)
+ .where(
+ and(
+ eq(cmctbCdnm.CD_CLF, 'LE0010'),
+ or(
+ ilike(cmctbCdnm.CD, term),
+ ilike(cmctbCdnm.CD2, term),
+ ilike(cmctbCdnm.CD3, term),
+ ilike(cmctbCdnm.CDNM, `%${searchTerm.trim()}%`),
+ ilike(cmctbCdnm.GRP_DSC, term)
+ )
+ )
+ )
+ .orderBy(cmctbCdnm.CD)
+ .limit(limit > 0 ? limit : 100)
+ } else {
+ result = await db
+ .select({
+ CD: cmctbCdnm.CD,
+ CD2: cmctbCdnm.CD2,
+ CD3: cmctbCdnm.CD3,
+ CDNM: cmctbCdnm.CDNM,
+ GRP_DSC: cmctbCdnm.GRP_DSC
+ })
+ .from(cmctbCdnm)
+ .where(eq(cmctbCdnm.CD_CLF, 'LE0010'))
+ .orderBy(cmctbCdnm.CD)
+ .limit(limit > 0 ? limit : 100)
+ }
+
+ // null 값 처리
+ const cleanedResult = result
+ .filter(item => item.CD && item.CD2 && item.CD3 && item.CDNM && item.GRP_DSC)
+ .map(item => ({
+ CD: item.CD!,
+ CD2: item.CD2!,
+ CD3: item.CD3!,
+ CDNM: item.CDNM!,
+ GRP_DSC: item.GRP_DSC!
+ }))
+
+ return {
+ success: true,
+ data: cleanedResult
+ }
+ } catch (error) {
+ console.error('Error fetching nation codes:', error)
+ return {
+ success: false,
+ data: [],
+ error: '국가코드를 조회하는 중 오류가 발생했습니다.'
+ }
+ }
+}
+
+/**
+ * 특정 국가코드 조회 (2글자 코드 기준)
+ * 내부 PostgreSQL DB의 cmctbCdnm 테이블에서 조회
+ */
+export async function getNationCodeByCode(code: string): Promise<NationCode | null> {
+ if (!code.trim()) {
+ return null
+ }
+
+ try {
+ const result = await db
+ .select({
+ CD: cmctbCdnm.CD,
+ CD2: cmctbCdnm.CD2,
+ CD3: cmctbCdnm.CD3,
+ CDNM: cmctbCdnm.CDNM,
+ GRP_DSC: cmctbCdnm.GRP_DSC
+ })
+ .from(cmctbCdnm)
+ .where(
+ and(
+ eq(cmctbCdnm.CD_CLF, 'LE0010'),
+ eq(cmctbCdnm.CD, code.trim().toUpperCase())
+ )
+ )
+ .limit(1)
+
+ if (result.length > 0 && result[0].CD && result[0].CD2 && result[0].CD3 && result[0].CDNM && result[0].GRP_DSC) {
+ return {
+ CD: result[0].CD,
+ CD2: result[0].CD2,
+ CD3: result[0].CD3,
+ CDNM: result[0].CDNM,
+ GRP_DSC: result[0].GRP_DSC
+ }
+ }
+
+ return null
+ } catch (error) {
+ console.error('Error fetching nation code by code:', error)
+ return null
+ }
+}
+
+/**
+ * 여러 국가코드 조회 (2글자 코드 기준)
+ */
+export async function getNationCodesByCodes(codes: string[]): Promise<NationCode[]> {
+ if (!codes || codes.length === 0) {
+ return []
+ }
+
+ try {
+ const cleanedCodes = codes
+ .map(code => code.trim().toUpperCase())
+ .filter(code => code.length > 0)
+
+ if (cleanedCodes.length === 0) {
+ return []
+ }
+
+ const result = await db
+ .select({
+ CD: cmctbCdnm.CD,
+ CD2: cmctbCdnm.CD2,
+ CD3: cmctbCdnm.CD3,
+ CDNM: cmctbCdnm.CDNM,
+ GRP_DSC: cmctbCdnm.GRP_DSC
+ })
+ .from(cmctbCdnm)
+ .where(
+ and(
+ eq(cmctbCdnm.CD_CLF, 'LE0010'),
+ or(...cleanedCodes.map(code => eq(cmctbCdnm.CD, code)))
+ )
+ )
+ .orderBy(cmctbCdnm.CD)
+
+ return result
+ .filter(item => item.CD && item.CD2 && item.CD3 && item.CDNM && item.GRP_DSC)
+ .map(item => ({
+ CD: item.CD!,
+ CD2: item.CD2!,
+ CD3: item.CD3!,
+ CDNM: item.CDNM!,
+ GRP_DSC: item.GRP_DSC!
+ }))
+ } catch (error) {
+ console.error('Error fetching nation codes by codes:', error)
+ return []
+ }
+}
diff --git a/components/common/selectors/nation/nation-single-selector.tsx b/components/common/selectors/nation/nation-single-selector.tsx
new file mode 100644
index 00000000..b60cafb6
--- /dev/null
+++ b/components/common/selectors/nation/nation-single-selector.tsx
@@ -0,0 +1,389 @@
+'use client'
+
+/**
+ * 국가 단일 선택 다이얼로그
+ *
+ * @description
+ * - 국가를 하나만 선택할 수 있는 다이얼로그
+ * - 트리거 버튼과 다이얼로그가 분리된 구조
+ * - 외부에서 open 상태를 제어 가능
+ */
+
+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 { 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 { getNationCodes, NationCode, NationSearchOptions } from './nation-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 NationSingleSelectorProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ selectedNation?: NationCode
+ onNationSelect: (nation: NationCode) => void
+ onConfirm?: (nation: NationCode | undefined) => void
+ onCancel?: () => void
+ searchOptions?: Partial<NationSearchOptions>
+ title?: string
+ description?: string
+ showConfirmButtons?: boolean
+}
+
+export function NationSingleSelector({
+ open,
+ onOpenChange,
+ selectedNation,
+ onNationSelect,
+ onConfirm,
+ onCancel,
+ searchOptions = {},
+ title = "국가 선택",
+ description = "국가를 선택하세요",
+ showConfirmButtons = false
+}: NationSingleSelectorProps) {
+ const [nations, setNations] = useState<NationCode[]>([])
+ 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 [tempSelectedNation, setTempSelectedNation] = useState<NationCode | undefined>(selectedNation)
+
+ // searchOptions 안정화
+ const stableSearchOptions = useMemo(() => ({
+ limit: 100,
+ ...searchOptions
+ }), [searchOptions])
+
+ // 국가 선택 핸들러
+ const handleNationSelect = useCallback((nation: NationCode) => {
+ if (showConfirmButtons) {
+ setTempSelectedNation(nation)
+ } else {
+ onNationSelect(nation)
+ onOpenChange(false)
+ }
+ }, [onNationSelect, onOpenChange, showConfirmButtons])
+
+ // 확인 버튼 핸들러
+ const handleConfirm = useCallback(() => {
+ if (tempSelectedNation) {
+ onNationSelect(tempSelectedNation)
+ }
+ onConfirm?.(tempSelectedNation)
+ onOpenChange(false)
+ }, [tempSelectedNation, onNationSelect, onConfirm, onOpenChange])
+
+ // 취소 버튼 핸들러
+ const handleCancel = useCallback(() => {
+ setTempSelectedNation(selectedNation)
+ onCancel?.()
+ onOpenChange(false)
+ }, [selectedNation, onCancel, onOpenChange])
+
+ // 테이블 컬럼 정의
+ const columns: ColumnDef<NationCode>[] = useMemo(() => [
+ {
+ accessorKey: 'CD',
+ header: '2글자코드',
+ cell: ({ row }) => (
+ <div className="font-mono text-sm">{row.getValue('CD')}</div>
+ ),
+ },
+ {
+ accessorKey: 'CD2',
+ header: '3글자코드',
+ cell: ({ row }) => (
+ <div className="font-mono text-sm">{row.getValue('CD2')}</div>
+ ),
+ },
+ {
+ accessorKey: 'CD3',
+ header: '숫자코드',
+ cell: ({ row }) => (
+ <div className="font-mono text-sm">{row.getValue('CD3')}</div>
+ ),
+ },
+ {
+ accessorKey: 'CDNM',
+ header: '한국어명',
+ cell: ({ row }) => (
+ <div className="max-w-[120px] truncate">{row.getValue('CDNM')}</div>
+ ),
+ },
+ {
+ accessorKey: 'GRP_DSC',
+ header: '영문명',
+ cell: ({ row }) => (
+ <div className="max-w-[150px] truncate">{row.getValue('GRP_DSC')}</div>
+ ),
+ },
+ {
+ id: 'actions',
+ header: '선택',
+ cell: ({ row }) => {
+ const isSelected = showConfirmButtons
+ ? tempSelectedNation?.CD === row.original.CD
+ : selectedNation?.CD === row.original.CD
+
+ return (
+ <Button
+ variant={isSelected ? "default" : "ghost"}
+ size="sm"
+ onClick={(e) => {
+ e.stopPropagation()
+ handleNationSelect(row.original)
+ }}
+ >
+ <Check className="h-4 w-4" />
+ </Button>
+ )
+ },
+ },
+ ], [handleNationSelect, selectedNation, tempSelectedNation, showConfirmButtons])
+
+ // 국가 테이블 설정
+ const table = useReactTable({
+ data: nations,
+ 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 loadNations = useCallback(async (searchTerm?: string) => {
+ startTransition(async () => {
+ try {
+ const result = await getNationCodes({
+ ...stableSearchOptions,
+ searchTerm: searchTerm
+ })
+
+ if (result.success) {
+ setNations(result.data)
+ } else {
+ toast.error(result.error || '국가코드를 불러오는데 실패했습니다.')
+ setNations([])
+ }
+ } catch (error) {
+ console.error('국가코드 목록 로드 실패:', error)
+ toast.error('국가코드를 불러오는 중 오류가 발생했습니다.')
+ setNations([])
+ }
+ })
+ }, [stableSearchOptions])
+
+ // 디바운스된 검색
+ const debouncedSearch = useMemo(
+ () => debounce((searchTerm: string) => {
+ loadNations(searchTerm)
+ }, 300),
+ [loadNations]
+ )
+
+ // 다이얼로그 열기/닫기 핸들러
+ const handleDialogOpenChange = useCallback((newOpen: boolean) => {
+ onOpenChange(newOpen)
+ if (newOpen) {
+ setTempSelectedNation(selectedNation)
+ if (nations.length === 0) {
+ loadNations()
+ }
+ }
+ }, [onOpenChange, selectedNation, loadNations, nations.length])
+
+ // 검색어 변경 핸들러
+ const handleSearchChange = useCallback((value: string) => {
+ setGlobalFilter(value)
+ if (open) {
+ debouncedSearch(value)
+ }
+ }, [open, debouncedSearch])
+
+ const currentSelectedNation = showConfirmButtons ? tempSelectedNation : selectedNation
+
+ return (
+ <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+ <DialogContent className="max-w-5xl max-h-[80vh]">
+ <DialogHeader>
+ <DialogTitle>{title}</DialogTitle>
+ <div className="text-sm text-muted-foreground">
+ {description}
+ </div>
+ </DialogHeader>
+
+ <div className="space-y-4">
+ {/* 현재 선택된 국가 표시 */}
+ {currentSelectedNation && (
+ <div className="p-3 bg-muted rounded-md">
+ <div className="text-sm font-medium">선택된 국가:</div>
+ <div className="flex items-center gap-2 mt-1">
+ <span className="font-mono text-sm">[{currentSelectedNation.CD}]</span>
+ <span>{currentSelectedNation.CDNM}</span>
+ <span className="text-muted-foreground">({currentSelectedNation.GRP_DSC})</span>
+ </div>
+ </div>
+ )}
+
+ <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) => {
+ const isRowSelected = currentSelectedNation?.CD === row.original.CD
+ return (
+ <TableRow
+ key={row.id}
+ data-state={isRowSelected && "selected"}
+ className={`cursor-pointer hover:bg-muted/50 ${
+ isRowSelected ? 'bg-muted' : ''
+ }`}
+ onClick={() => handleNationSelect(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>
+
+ {showConfirmButtons && (
+ <DialogFooter>
+ <Button variant="outline" onClick={handleCancel}>
+ <X className="h-4 w-4 mr-2" />
+ 취소
+ </Button>
+ <Button onClick={handleConfirm} disabled={!tempSelectedNation}>
+ <Check className="h-4 w-4 mr-2" />
+ 확인
+ </Button>
+ </DialogFooter>
+ )}
+ </DialogContent>
+ </Dialog>
+ )
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 07:00:13 +0000