diff options
Diffstat (limited to 'components/common/selectors/nation/nation-single-selector.tsx')
| -rw-r--r-- | components/common/selectors/nation/nation-single-selector.tsx | 389 |
1 files changed, 389 insertions, 0 deletions
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> + ) +} |