feat(WEB): 발주처 검색 모달 추가 및 견적 할인 기능 개선
- SupplierSearchModal: 매입 가능 거래처 검색 모달 신규 생성 - QuoteRegistrationV2: 할인율/할인금액을 formData로 통합하여 저장/로드 연동 - QuoteFooterBar: view 모드에서 할인 버튼 비활성화 - types.ts: discountRate/discountAmount 필드 추가, 할인 반영 총액 계산 수정 - quote-management page: 저장 실패 시 에러 메시지 정확히 표시하도록 throw 방식 변경
This commit is contained in:
@@ -0,0 +1,268 @@
|
||||
/**
|
||||
* 발주처(매입 거래처) 검색 모달
|
||||
*
|
||||
* - 거래처명으로 검색
|
||||
* - 매입 가능 거래처만 표시 (client_type: PURCHASE, BOTH)
|
||||
* - ItemSearchModal과 동일한 Dialog + 클라이언트 프록시 패턴
|
||||
* - 최소 입력 조건: 한글 완성형 1자 또는 영문 2자 이상
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Search, X, Loader2 } from 'lucide-react';
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
|
||||
// =============================================================================
|
||||
// 타입
|
||||
// =============================================================================
|
||||
|
||||
interface SupplierItem {
|
||||
id: number | string;
|
||||
name: string;
|
||||
clientCode?: string;
|
||||
clientType?: string;
|
||||
contactPerson?: string;
|
||||
phone?: string;
|
||||
}
|
||||
|
||||
interface SupplierSearchModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSelectSupplier: (supplier: { name: string; code?: string }) => void;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// API 응답 변환
|
||||
// =============================================================================
|
||||
|
||||
interface ApiClientResponse {
|
||||
id?: number | string;
|
||||
name?: string;
|
||||
client_code?: string;
|
||||
client_type?: string;
|
||||
contact_person?: string;
|
||||
phone?: string;
|
||||
}
|
||||
|
||||
function transformClientFromApi(apiClient: ApiClientResponse): SupplierItem {
|
||||
return {
|
||||
id: String(apiClient.id || ''),
|
||||
name: apiClient.name || '',
|
||||
clientCode: apiClient.client_code || '',
|
||||
clientType: apiClient.client_type || '',
|
||||
contactPerson: apiClient.contact_person || '',
|
||||
phone: apiClient.phone || '',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 매입 가능 거래처 조회 (클라이언트 프록시 경유)
|
||||
* client_type: PURCHASE 또는 BOTH
|
||||
*/
|
||||
async function fetchPurchaseClients(search?: string): Promise<SupplierItem[]> {
|
||||
const params = new URLSearchParams();
|
||||
if (search) params.set('q', search);
|
||||
params.set('size', '50');
|
||||
// 매입 가능 거래처만 (PURCHASE, BOTH)
|
||||
params.set('client_type', 'PURCHASE,BOTH');
|
||||
|
||||
const url = `/api/proxy/clients?${params.toString()}`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`거래처 조회 실패: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
let rawItems: ApiClientResponse[] = [];
|
||||
|
||||
if (result.success && result.data) {
|
||||
if (result.data.data && Array.isArray(result.data.data)) {
|
||||
rawItems = result.data.data;
|
||||
} else if (Array.isArray(result.data)) {
|
||||
rawItems = result.data;
|
||||
}
|
||||
} else if (Array.isArray(result)) {
|
||||
rawItems = result;
|
||||
}
|
||||
|
||||
return rawItems.map(transformClientFromApi);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 유효성 검사
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* 검색어 유효성: 한글 완성형 1자 이상 또는 영문 2자 이상
|
||||
*/
|
||||
function isValidSearchQuery(query: string): boolean {
|
||||
if (!query || !query.trim()) return false;
|
||||
const trimmed = query.trim();
|
||||
if (/[가-힣]/.test(trimmed)) return true;
|
||||
const englishChars = trimmed.replace(/[^a-zA-Z]/g, '');
|
||||
if (englishChars.length >= 2) return true;
|
||||
const alphanumeric = trimmed.replace(/[^a-zA-Z0-9]/g, '');
|
||||
if (alphanumeric.length >= 2) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 컴포넌트
|
||||
// =============================================================================
|
||||
|
||||
export function SupplierSearchModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
onSelectSupplier,
|
||||
}: SupplierSearchModalProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [suppliers, setSuppliers] = useState<SupplierItem[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// 거래처 목록 조회
|
||||
const loadSuppliers = useCallback(async (search?: string) => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await fetchPurchaseClients(search);
|
||||
setSuppliers(data);
|
||||
} catch (err) {
|
||||
console.error('[SupplierSearchModal] 거래처 조회 오류:', err);
|
||||
setError('거래처 목록을 불러오는데 실패했습니다.');
|
||||
setSuppliers([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 모달 열릴 때 초기화
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setSuppliers([]);
|
||||
setError(null);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
// 검색어 변경 시 디바운스 검색
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
|
||||
if (!isValidSearchQuery(searchQuery)) {
|
||||
setSuppliers([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
loadSuppliers(searchQuery);
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery, open, loadSuppliers]);
|
||||
|
||||
const handleSelect = (supplier: SupplierItem) => {
|
||||
onSelectSupplier({ name: supplier.name, code: supplier.clientCode });
|
||||
onOpenChange(false);
|
||||
setSearchQuery('');
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
onOpenChange(false);
|
||||
setSearchQuery('');
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>발주처 검색</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 검색 입력 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="거래처명 검색..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10 pr-10"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2"
|
||||
>
|
||||
<X className="h-4 w-4 text-gray-400 hover:text-gray-600" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 거래처 목록 */}
|
||||
<div className="max-h-[400px] overflow-y-auto border rounded-lg">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center p-8 text-gray-500">
|
||||
<Loader2 className="h-5 w-5 animate-spin mr-2" />
|
||||
<span>거래처 검색 중...</span>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="p-4 text-center text-red-500 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
) : suppliers.length === 0 ? (
|
||||
<div className="p-4 text-center text-gray-500 text-sm">
|
||||
{!searchQuery
|
||||
? '한글 1자(완성형) 또는 영문 2자 이상 입력하세요'
|
||||
: !isValidSearchQuery(searchQuery)
|
||||
? '한글 1자(완성형) 또는 영문 2자 이상 입력하세요'
|
||||
: '검색 결과가 없습니다'}
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{suppliers.map((supplier, index) => (
|
||||
<div
|
||||
key={`${supplier.id}-${index}`}
|
||||
onClick={() => handleSelect(supplier)}
|
||||
className="p-3 hover:bg-blue-50 cursor-pointer transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium text-gray-900">{supplier.name}</span>
|
||||
{supplier.clientCode && (
|
||||
<span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
|
||||
{supplier.clientCode}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{supplier.contactPerson && (
|
||||
<p className="text-xs text-gray-400 mt-1">담당: {supplier.contactPerson}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 거래처 개수 표시 */}
|
||||
{!isLoading && !error && (
|
||||
<div className="text-xs text-gray-400 text-right">
|
||||
총 {suppliers.length}개 거래처
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user