From 146dd77da407438023d6fe6f18c0ebb8b6915765 Mon Sep 17 00:00:00 2001 From: joonhoekim <26rote@gmail.com> Date: Wed, 24 Sep 2025 19:07:45 +0900 Subject: (김준회) nonsap 기준정보 기반 국가 선택기 컴포넌트 구현 및 AVL, Vendor-Pool 적용 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/selectors/nation/index.ts | 20 + .../selectors/nation/nation-multi-selector.tsx | 458 +++++++++++++++++++++ .../common/selectors/nation/nation-selector.tsx | 339 +++++++++++++++ .../common/selectors/nation/nation-service.ts | 193 +++++++++ .../selectors/nation/nation-single-selector.tsx | 389 +++++++++++++++++ lib/avl/table/avl-vendor-add-and-modify-dialog.tsx | 36 +- .../table/vendor-pool-table-columns.tsx | 29 +- 7 files changed, 1449 insertions(+), 15 deletions(-) create mode 100644 components/common/selectors/nation/index.ts create mode 100644 components/common/selectors/nation/nation-multi-selector.tsx create mode 100644 components/common/selectors/nation/nation-selector.tsx create mode 100644 components/common/selectors/nation/nation-service.ts create mode 100644 components/common/selectors/nation/nation-single-selector.tsx 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 void>(func: T, delay: number): T { + let timeoutId: NodeJS.Timeout + return ((...args: Parameters) => { + 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 + title?: string + description?: string + maxSelection?: number +} + +export function NationMultiSelector({ + open, + onOpenChange, + selectedNations = [], + onNationsSelect, + onConfirm, + onCancel, + searchOptions = {}, + title = "국가 다중 선택", + description = "여러 국가를 선택하세요", + maxSelection +}: NationMultiSelectorProps) { + const [nations, setNations] = 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 [tempSelectedNations, setTempSelectedNations] = useState(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[] = useMemo(() => [ + { + id: 'select', + header: ({ table }) => ( + { + 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 ( + handleNationToggle(row.original, !!value)} + aria-label="행 선택" + /> + ) + }, + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: 'CD', + header: '2글자코드', + cell: ({ row }) => ( +
{row.getValue('CD')}
+ ), + }, + { + accessorKey: 'CD2', + header: '3글자코드', + cell: ({ row }) => ( +
{row.getValue('CD2')}
+ ), + }, + { + accessorKey: 'CD3', + header: '숫자코드', + cell: ({ row }) => ( +
{row.getValue('CD3')}
+ ), + }, + { + accessorKey: 'CDNM', + header: '한국어명', + cell: ({ row }) => ( +
{row.getValue('CDNM')}
+ ), + }, + { + accessorKey: 'GRP_DSC', + header: '영문명', + cell: ({ row }) => ( +
{row.getValue('GRP_DSC')}
+ ), + }, + ], [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 ( + + + + {title} +
+ {description} + {maxSelection && ` (최대 ${maxSelection}개)`} +
+ + +
+ {/* 선택된 국가들 표시 */} + {tempSelectedNations.length > 0 && ( +
+
+
+ 선택된 국가 ({tempSelectedNations.length}개) + {maxSelection && ` / ${maxSelection}`} +
+ +
+
+ {tempSelectedNations.map((nation) => ( + + [{nation.CD}] {nation.CDNM} + + + ))} +
+
+ )} + +
+ + 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) => { + const isSelected = tempSelectedNations.some(n => n.CD === row.original.CD) + return ( + { + const isCurrentlySelected = tempSelectedNations.some(n => n.CD === row.original.CD) + handleNationToggle(row.original, !isCurrentlySelected) + }} + > + {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/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 void>(func: T, delay: number): T { + let timeoutId: NodeJS.Timeout + return ((...args: Parameters) => { + clearTimeout(timeoutId) + timeoutId = setTimeout(() => func(...args), delay) + }) as T +} + +export interface NationSelectorProps { + selectedNation?: NationCode + onNationSelect: (nation: NationCode) => void + disabled?: boolean + searchOptions?: Partial + placeholder?: string + className?: string +} + +export function NationSelector({ + selectedNation, + onNationSelect, + disabled, + searchOptions = {}, + placeholder = "국가를 선택하세요", + className +}: NationSelectorProps) { + const [open, setOpen] = useState(false) + const [nations, setNations] = 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 handleNationSelect = useCallback((nation: NationCode) => { + onNationSelect(nation) + setOpen(false) + }, [onNationSelect]) + + // 테이블 컬럼 정의 + const columns: ColumnDef[] = useMemo(() => [ + { + accessorKey: 'CD', + header: '2글자코드', + cell: ({ row }) => ( +
{row.getValue('CD')}
+ ), + }, + { + accessorKey: 'CD2', + header: '3글자코드', + cell: ({ row }) => ( +
{row.getValue('CD2')}
+ ), + }, + { + accessorKey: 'CD3', + header: '숫자코드', + cell: ({ row }) => ( +
{row.getValue('CD3')}
+ ), + }, + { + accessorKey: 'CDNM', + header: '한국어명', + cell: ({ row }) => ( +
{row.getValue('CDNM')}
+ ), + }, + { + accessorKey: 'GRP_DSC', + header: '영문명', + cell: ({ row }) => ( +
{row.getValue('GRP_DSC')}
+ ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => ( + + ), + }, + ], [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 ( + + + + + + + 국가 선택 +
+ 국가코드(CD_CLF=LE0010) 조회 +
+ + +
+
+ + 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) => ( + handleNationSelect(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/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 { + 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 { + 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 void>(func: T, delay: number): T { + let timeoutId: NodeJS.Timeout + return ((...args: Parameters) => { + 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 + 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([]) + 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 [tempSelectedNation, setTempSelectedNation] = useState(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[] = useMemo(() => [ + { + accessorKey: 'CD', + header: '2글자코드', + cell: ({ row }) => ( +
{row.getValue('CD')}
+ ), + }, + { + accessorKey: 'CD2', + header: '3글자코드', + cell: ({ row }) => ( +
{row.getValue('CD2')}
+ ), + }, + { + accessorKey: 'CD3', + header: '숫자코드', + cell: ({ row }) => ( +
{row.getValue('CD3')}
+ ), + }, + { + accessorKey: 'CDNM', + header: '한국어명', + cell: ({ row }) => ( +
{row.getValue('CDNM')}
+ ), + }, + { + accessorKey: 'GRP_DSC', + header: '영문명', + cell: ({ row }) => ( +
{row.getValue('GRP_DSC')}
+ ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => { + const isSelected = showConfirmButtons + ? tempSelectedNation?.CD === row.original.CD + : selectedNation?.CD === row.original.CD + + return ( + + ) + }, + }, + ], [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 ( + + + + {title} +
+ {description} +
+ + +
+ {/* 현재 선택된 국가 표시 */} + {currentSelectedNation && ( +
+
선택된 국가:
+
+ [{currentSelectedNation.CD}] + {currentSelectedNation.CDNM} + ({currentSelectedNation.GRP_DSC}) +
+
+ )} + +
+ + 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) => { + const isRowSelected = currentSelectedNation?.CD === row.original.CD + return ( + handleNationSelect(row.original)} + > + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + ) + }) + ) : ( + + + 검색 결과가 없습니다. + + + )} + +
+
+ )} + +
+
+ 총 {table.getFilteredRowModel().rows.length}개 국가 +
+
+ +
+ {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} +
+ +
+
+
+ + {showConfirmButtons && ( + + + + + )} + + + ) +} diff --git a/lib/avl/table/avl-vendor-add-and-modify-dialog.tsx b/lib/avl/table/avl-vendor-add-and-modify-dialog.tsx index 4f0eb404..8fb910da 100644 --- a/lib/avl/table/avl-vendor-add-and-modify-dialog.tsx +++ b/lib/avl/table/avl-vendor-add-and-modify-dialog.tsx @@ -31,6 +31,7 @@ import type { VendorSearchItem } from "@/components/common/vendor" import { PlaceOfShippingSelector } from "@/components/common/selectors/place-of-shipping" import { VendorTierSelector } from "@/components/common/selectors/vendor-tier" import { DatePicker } from "@/components/ui/date-picker" +import { NationSelector, type NationCode } from "@/components/common/selectors/nation" interface AvlVendorAddAndModifyDialogProps { open: boolean @@ -71,6 +72,8 @@ export function AvlVendorAddAndModifyDialog({ const [selectedMaterialGroup, setSelectedMaterialGroup] = React.useState(null) // 벤더 선택 상태 const [selectedVendor, setSelectedVendor] = React.useState(null) + // 본사 위치 국가 선택 상태 + const [selectedHeadquarterNation, setSelectedHeadquarterNation] = React.useState(undefined) // 날짜 상태 (Date 객체로 관리) const [quoteReceivedDate, setQuoteReceivedDate] = React.useState(undefined) const [recentQuoteDate, setRecentQuoteDate] = React.useState(undefined) @@ -193,6 +196,10 @@ export function AvlVendorAddAndModifyDialog({ setSelectedVendor(null) } + // 본사 위치 국가 선택 상태 초기화 (현재는 국가명만 저장되어 있으므로 undefined로 설정) + // 실제로는 저장된 국가명으로부터 국가코드를 찾아서 설정해야 하지만, 단순화를 위해 undefined로 설정 + setSelectedHeadquarterNation(undefined) + // 날짜 상태 초기화 setQuoteReceivedDate(editingItem.quoteReceivedDate ? new Date(editingItem.quoteReceivedDate) : undefined) setRecentQuoteDate(editingItem.recentQuoteDate ? new Date(editingItem.recentQuoteDate) : undefined) @@ -288,6 +295,8 @@ export function AvlVendorAddAndModifyDialog({ setSelectedMaterialGroup(null) // 벤더 선택 상태 초기화 setSelectedVendor(null) + // 본사 위치 국가 선택 상태 초기화 + setSelectedHeadquarterNation(undefined) // 날짜 상태 초기화 setQuoteReceivedDate(undefined) setRecentQuoteDate(undefined) @@ -339,6 +348,15 @@ export function AvlVendorAddAndModifyDialog({ } }, []) + // 본사 위치 국가 선택 핸들러 + const handleHeadquarterNationSelect = React.useCallback((nation: NationCode) => { + setSelectedHeadquarterNation(nation) + setFormData(prev => ({ + ...prev, + headquarterLocation: nation.CDNM // 한국어 국가명 저장 + })) + }, []) + const handleSubmit = async () => { // 공통 필수 필드 검증 if (!formData.disciplineName || !formData.materialNameCustomerSide) { @@ -387,6 +405,7 @@ export function AvlVendorAddAndModifyDialog({ setSelectedDiscipline(undefined) setSelectedMaterialGroup(null) setSelectedVendor(null) + setSelectedHeadquarterNation(undefined) setQuoteReceivedDate(undefined) setRecentQuoteDate(undefined) setRecentOrderDate(undefined) @@ -444,6 +463,7 @@ export function AvlVendorAddAndModifyDialog({ setSelectedDiscipline(undefined) setSelectedMaterialGroup(null) setSelectedVendor(null) + setSelectedHeadquarterNation(undefined) setQuoteReceivedDate(undefined) setRecentQuoteDate(undefined) setRecentOrderDate(undefined) @@ -767,12 +787,18 @@ export function AvlVendorAddAndModifyDialog({
- setFormData(prev => ({ ...prev, headquarterLocation: e.target.value }))} - placeholder="본사 위치를 입력하세요" + +
+ {selectedHeadquarterNation && ( + 선택됨: [{selectedHeadquarterNation.CD}] {selectedHeadquarterNation.CDNM} + )} +
diff --git a/lib/vendor-pool/table/vendor-pool-table-columns.tsx b/lib/vendor-pool/table/vendor-pool-table-columns.tsx index 1f0c455e..52a0ad28 100644 --- a/lib/vendor-pool/table/vendor-pool-table-columns.tsx +++ b/lib/vendor-pool/table/vendor-pool-table-columns.tsx @@ -31,6 +31,7 @@ import { VendorTierSelector } from "@/components/common/selectors/vendor-tier/ve import { VendorSelectorDialogSingle } from "@/components/common/vendor/vendor-selector-dialog-single" import type { VendorSearchItem } from "@/components/common/vendor/vendor-service" import { PlaceOfShippingSelectorDialogSingle } from "@/components/common/selectors/place-of-shipping/place-of-shipping-selector" +import { NationSelector, NationCode } from "@/components/common/selectors/nation" export type VendorPoolItem = Omit & { id: string | number // temp-로 시작하는 경우 string, 실제 데이터는 number @@ -800,24 +801,32 @@ export const columns: ColumnDef[] = [ 본사 위치 *} /> ), cell: ({ row, table }) => { - const value = row.getValue("headquarterLocation") - const onSave = async (newValue: any) => { + const headquarterLocation = row.original.headquarterLocation as string + + // 현재 선택된 국가명으로부터 국가 코드를 찾기 위해 임시로 null 설정 + // 실제로는 국가명에서 국가코드를 역추적해야 하지만, 여기서는 단순화 + const selectedNation: NationCode | undefined = undefined + + const onNationSelect = async (nation: NationCode) => { + console.log('선택된 국가:', nation) + if (table.options.meta?.onCellUpdate) { - await table.options.meta.onCellUpdate(row.original.id, "headquarterLocation", newValue) + // CDNM 값(한국어 국가명)을 저장 + await table.options.meta.onCellUpdate(row.original.id, "headquarterLocation", nation.CDNM) } } return ( - ) }, - size: 100, + size: 180, }, { accessorKey: "manufacturingLocation", -- cgit v1.2.3