- 품목 정보를 입력하세요 -
+ 품목 정보를 입력하세요 +
- 등록된 품목 정보를 확인합니다 -
+ 등록된 품목 정보를 확인합니다 +
+ {location.manufactureWidth || location.openWidth + 280}X{location.manufactureHeight || location.openHeight + 280} +
kg
m²
- {location.manufactureWidth || location.openWidth + 280} × {location.manufactureHeight || location.openHeight + 280} -
{location.weight?.toFixed(1) || "-"} kg
{location.area?.toFixed(1) || "-"} m²
(null); @@ -156,35 +172,6 @@ export function QuoteManagementClient({ return getQuoteStatusBadge(legacyQuote as any); }, []); - // ===== 탭 옵션 ===== - const tabs: TabOption[] = useMemo(() => [ - { value: 'all', label: '전체', count: allQuotes.length, color: 'blue' }, - { - value: 'initial', - label: '최초작성', - count: allQuotes.filter((q) => q.currentRevision === 0 && !q.isFinal && q.status !== 'converted').length, - color: 'gray', - }, - { - value: 'revising', - label: '수정중', - count: allQuotes.filter((q) => q.currentRevision > 0 && !q.isFinal && q.status !== 'converted').length, - color: 'orange', - }, - { - value: 'final', - label: '최종확정', - count: allQuotes.filter((q) => q.isFinal && q.status !== 'converted').length, - color: 'green', - }, - { - value: 'converted', - label: '수주전환', - count: allQuotes.filter((q) => q.status === 'converted').length, - color: 'purple', - }, - ], [allQuotes]); - // ===== 통계 카드 계산 ===== const computeStats = useCallback((data: Quote[]): StatCard[] => { const now = new Date(); @@ -307,22 +294,41 @@ export function QuoteManagementClient({ clientSideFiltering: true, itemsPerPage: 20, - // 탭 필터 함수 - tabFilter: (item: Quote, activeTab: string) => { - if (activeTab === 'all') return true; - if (activeTab === 'initial') { - return item.currentRevision === 0 && !item.isFinal && item.status !== 'converted'; - } - if (activeTab === 'revising') { - return item.currentRevision > 0 && !item.isFinal && item.status !== 'converted'; - } - if (activeTab === 'final') { - return item.isFinal && item.status !== 'converted'; - } - if (activeTab === 'converted') { - return item.status === 'converted'; - } - return true; + // 필터링 함수 (날짜 + 제품분류 + 상태) + customFilterFn: (items: Quote[]) => { + return items.filter((item) => { + // 날짜 필터 + const itemDate = item.registrationDate; + if (itemDate) { + if (startDate && itemDate < startDate) return false; + if (endDate && itemDate > endDate) return false; + } + + // 제품분류 필터 + if (productCategoryFilter !== 'all') { + if (productCategoryFilter === 'STEEL' && item.productCategory !== 'STEEL') return false; + if (productCategoryFilter === 'SCREEN' && item.productCategory !== 'SCREEN') return false; + if (productCategoryFilter === 'MIXED' && item.productCategory !== 'MIXED') return false; + } + + // 상태 필터 + if (statusFilter !== 'all') { + if (statusFilter === 'initial') { + // 최초작성: currentRevision === 0 && !isFinal + if (!(item.currentRevision === 0 && !item.isFinal)) return false; + } + if (statusFilter === 'revising') { + // N차수정: currentRevision > 0 && !isFinal + if (!(item.currentRevision > 0 && !item.isFinal)) return false; + } + if (statusFilter === 'final') { + // 최종확정: isFinal === true + if (!item.isFinal) return false; + } + } + + return true; + }); }, // 검색 필터 함수 @@ -344,13 +350,53 @@ export function QuoteManagementClient({ ); }, - // 탭 설정 - tabs, - defaultTab: 'all', + // 탭 비활성화 (필터로 대체) + tabs: [], // 통계 카드 computeStats, + // 테이블 우측 필터 (탭 영역에 표시) + tableHeaderActions: ( + + {/* 제품분류 필터 */} + + + + + + 전체 + 철재 + 스크린 + 혼합 + + + + {/* 상태 필터 */} + + + + + + 전체 + 최초작성 + N차수정 + 최종확정 + + + + ), + + // 날짜 필터 + dateRangeSelector: { + enabled: true, + showPresets: true, + startDate, + endDate, + onStartDateChange: setStartDate, + onEndDateChange: setEndDate, + }, + // 검색 searchPlaceholder: '견적번호, 발주처, 담당자, 현장코드, 현장명 검색...', @@ -553,7 +599,7 @@ export function QuoteManagementClient({ ); }, }), - [tabs, computeStats, router, handleView, handleEdit, handleDeleteClick, handleViewHistory, handleBulkDelete, getRevisionBadge, isPending] + [computeStats, router, handleView, handleEdit, handleDeleteClick, handleViewHistory, handleBulkDelete, getRevisionBadge, isPending, startDate, endDate, productCategoryFilter, statusFilter] ); return ( diff --git a/src/components/quotes/QuotePreviewContent.tsx b/src/components/quotes/QuotePreviewContent.tsx index dee9f720..63e062ee 100644 --- a/src/components/quotes/QuotePreviewContent.tsx +++ b/src/components/quotes/QuotePreviewContent.tsx @@ -3,215 +3,368 @@ /** * 견적서 문서 콘텐츠 * - * 공통 컴포넌트 사용: - * - DocumentHeader: simple 레이아웃 (결재란 없음) - * - SectionHeader: 섹션 제목 + * 양식 타입: + * - vendor: 업체발송용 (부가세 별도/포함) + * - calculation: 산출내역서 */ import type { QuoteFormDataV2 } from './QuoteRegistrationV2'; -import { DocumentHeader, SectionHeader } from '@/components/document-system'; + +// 양식 타입 +type TemplateType = 'vendor' | 'calculation'; interface QuotePreviewContentProps { data: QuoteFormDataV2; + /** 양식 타입 (기본: vendor) */ + templateType?: TemplateType; + /** 부가세 포함 여부 (업체발송용에서만 사용) */ + vatIncluded?: boolean; + /** 할인율 (%) */ + discountRate?: number; + /** 할인금액 (원) */ + discountAmount?: number; } -export function QuotePreviewContent({ data: quoteData }: QuotePreviewContentProps) { - // 총 금액 계산 - const totalAmount = quoteData.locations.reduce( +export function QuotePreviewContent({ + data: quoteData, + templateType = 'vendor', + vatIncluded = false, + discountRate = 0, + discountAmount = 0, +}: QuotePreviewContentProps) { + // 소계 (할인 전 금액) + const subtotal = quoteData.locations.reduce( (sum, loc) => sum + (loc.totalPrice || 0), 0 ); + // 할인 적용 후 금액 + const afterDiscount = subtotal - discountAmount; + // 부가세 - const vat = Math.round(totalAmount * 0.1); - const grandTotal = totalAmount + vat; + const vat = Math.round(afterDiscount * 0.1); + + // 총 견적금액 (부가세 포함 여부에 따라) + const grandTotal = vatIncluded ? afterDiscount + vat : afterDiscount; + + // 할인 적용 여부 + const hasDiscount = discountAmount > 0; + + // 산출내역서 여부 + const isCalculation = templateType === 'calculation'; return ( - - {/* 제목 (공통 컴포넌트) */} - - - {/* 수요자 정보 */} - - - 수 요 자 + + {/* 헤더: 제목 + 결재란 */} + + {/* 왼쪽: 제목 */} + + + 견 적 서 + + + 문서번호: {quoteData.id || 'ABC123'} | 작성일자: {quoteData.registrationDate || '-'} + - - - 업체명 - {quoteData.clientName || "-"} - - - 담당자 - {quoteData.manager || "-"} - - - 프로젝트명 - {quoteData.siteName || "-"} - - - 연락처 - {quoteData.contact || "-"} - - - 견적일자 - {quoteData.registrationDate || "-"} - - - 유효기간 - {quoteData.dueDate || "-"} - + + {/* 오른쪽: 결재란 */} + + + + + 작성 + 승인 + 승인 + 승인 + + + + + 홍길동 + 이름 + 이름 + 이름 + + + 부서명 + 부서명 + 부서명 + 부서명 + + + - {/* 공급자 정보 */} - - - 공 급 자 + {/* 수요자 / 공급자 정보 (좌우 배치) */} + + {/* 수요자 */} + + + 수 요 자 + + + + + 업체명 + {quoteData.clientName || '-'} + + + 제품명 + {quoteData.locations[0]?.productCode || '-'} + + + 현장명 + {quoteData.siteName || '-'} + + + 담당자 + {quoteData.manager || '-'} + + + 연락처 + {quoteData.contact || '-'} + + + - - - 상호 - 프론트_테스트회사 - - - 사업자등록번호 - 123-45-67890 - - - 대표자 - 프론트 - - - 업태 - 업태명 - - - 종목 - 김종명 - - - 사업장주소 - 07547 서울 강서구 양천로 583 B-1602 - - - 전화 - 01048209104 - - - 이메일 - codebridgex@codebridge-x.com + + {/* 공급자 */} + + + 공 급 자 + + + + 상호 + 회사명 + + + 등록번호 + 123-12-12345 + + + 사업장주소 + 주소명 + + + 업태 + 제조업 + + + TEL + 031-123-1234 + + + - {/* 총 견적금액 */} - - 총 견적금액 - - ₩ {grandTotal.toLocaleString()} - - ※ 부가가치세 포함 - - - {/* 제품 구성정보 */} - - 제 품 구 성 정 보 - - - 모델 - - {quoteData.locations[0]?.productCode || "-"} - - - - 총 수량 - {quoteData.locations.length}개소 - - - 오픈사이즈 - - {quoteData.locations[0]?.openWidth || "-"} × {quoteData.locations[0]?.openHeight || "-"} - - - - 설치유형 - - - + {/* 내역 테이블 */} + + + 내 역 - - - {/* 품목 내역 */} - - 품 목 내 역 - + - - No. - 품목명 - 규격 - 수량 - 단위 - 단가 - 금액 + + No. + 품종 + 부호 + 제품명 + 오픈사이즈 + 수량 + 단위 + 단가 + 합계금액 + + + + + + + 가로 + 세로 + + + + {quoteData.locations.map((loc, index) => ( - - {index + 1} - {loc.productCode} - - {loc.openWidth}×{loc.openHeight} - - {loc.quantity} - EA - + + {index + 1} + {loc.floor || '-'} + {loc.symbol || '-'} + {loc.productCode} + {loc.openWidth} + {loc.openHeight} + {loc.quantity} + SET + {(loc.unitPrice || 0).toLocaleString()} - + {(loc.totalPrice || 0).toLocaleString()} ))} - - - 공급가액 합계 - - {totalAmount.toLocaleString()} + {/* 소계 */} + + + + {vatIncluded ? '공급가액 합계' : '소계'} + + {subtotal.toLocaleString()} + + + {/* 할인율 */} + + + + 할인율 + + + {hasDiscount ? `${discountRate.toFixed(1)}%` : '0.0%'} - - - 부가가치세 (10%) - - {vat.toLocaleString()} - - - - - 총 견적금액 - - {grandTotal.toLocaleString()} + + {/* 할인금액 */} + + + + 할인금액 + + + {hasDiscount ? `-${discountAmount.toLocaleString()}` : '0'} + + {/* 부가세 포함일 때 추가 행들 */} + {vatIncluded && ( + <> + + + + 할인 후 공급가액 + + {afterDiscount.toLocaleString()} + + + + + 부가가치세 합계 + + {vat.toLocaleString()} + + + + + 총 견적금액 + + {grandTotal.toLocaleString()} + + + )} - {/* 비고사항 */} - - 비 고 사 항 - - {quoteData.remarks || "비고 테스트"} + {/* 합계금액 박스 */} + + + 합계금액 ({vatIncluded ? '부가세 포함' : '부가세 별도'}) + + + ₩ {grandTotal.toLocaleString()} + + + + {/* 산출내역서일 경우 세부 산출내역서 테이블 추가 */} + {isCalculation && ( + + + 세 부 산 출 내 역 서 + + + + + 부호 + 항목 + 규격 + 수량 + 단위 + 단가 + 금액 + + + + {quoteData.locations.map((loc) => ( + <> + {/* 각 개소별 품목 상세 */} + + {loc.symbol || '-'} + 항목명 + 규격명 + {loc.quantity} + SET + + {(loc.unitPrice || 0).toLocaleString()} + + + {(loc.totalPrice || 0).toLocaleString()} + + + + ))} + {/* 소계 */} + + + + 소계 + + {subtotal.toLocaleString()} + + + + )} + + {/* 비고 */} + + + + 비고 + + + ※ 해당 견적서의 유효기간은 발행일 기준 1개월 입니다. + ※ 견적금액의 50%를 입금하시면 생산가 진행합니다. + + + + + {/* 결제방법 / 담당자 */} + + + + + 결제방법 + 계좌이체 + 계좌정보 + 국민은행 12312132132 + + + 담당자 + 홍길동 과장 + 연락처 + 010-1234-1234 + + + ); diff --git a/src/components/quotes/QuotePreviewModal.tsx b/src/components/quotes/QuotePreviewModal.tsx index 8ac015c9..2549ae51 100644 --- a/src/components/quotes/QuotePreviewModal.tsx +++ b/src/components/quotes/QuotePreviewModal.tsx @@ -3,68 +3,131 @@ /** * 견적서 미리보기 모달 * - * document-system 통합 버전 (2026-01-22) + * 양식 선택: + * - 업체발송용 (부가세 포함/별도는 기본정보에서 선택한 값 사용) + * - 산출내역서 */ -import { Download, Mail } from 'lucide-react'; +import { useState } from 'react'; +import { Copy, Pencil, FileText } from 'lucide-react'; import { Button } from '@/components/ui/button'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; import { DocumentViewer } from '@/components/document-system'; import type { QuoteFormDataV2 } from './QuoteRegistrationV2'; import { QuotePreviewContent } from './QuotePreviewContent'; +// 양식 타입: 업체발송용 / 산출내역서 +type TemplateType = 'vendor' | 'calculation'; + interface QuotePreviewModalProps { open: boolean; onOpenChange: (open: boolean) => void; quoteData: QuoteFormDataV2 | null; + /** 할인율 (%) */ + discountRate?: number; + /** 할인금액 (원) */ + discountAmount?: number; + /** 복제 핸들러 */ + onDuplicate?: () => void; + /** 수정 핸들러 */ + onEdit?: () => void; } export function QuotePreviewModal({ open, onOpenChange, quoteData, + discountRate = 0, + discountAmount = 0, + onDuplicate, + onEdit, }: QuotePreviewModalProps) { + // 양식 타입 상태 (기본: 업체발송용) + const [templateType, setTemplateType] = useState('vendor'); + if (!quoteData) return null; - const handlePdfDownload = () => { - console.log('[테스트] PDF 다운로드'); + // 부가세 포함 여부는 기본정보에서 선택한 값 사용 + const vatIncluded = quoteData.vatType === 'included'; + + const handleDuplicate = () => { + console.log('[테스트] 복제'); + onDuplicate?.(); }; - const handleEmailSend = () => { - console.log('[테스트] 이메일 전송'); + const handleEdit = () => { + console.log('[테스트] 수정'); + onEdit?.(); }; const toolbarExtra = ( <> + {/* 복제 버튼 */} - - PDF + + 복제 + + {/* 수정 버튼 */} - - 이메일 + + 수정 + + {/* 양식 선택 드롭다운 */} + + + + + 양식 + + + + setTemplateType('vendor')} + className={templateType === 'vendor' ? 'bg-blue-50' : ''} + > + 업체발송용 + + setTemplateType('calculation')} + className={templateType === 'calculation' ? 'bg-blue-50' : ''} + > + 산출내역서 + + + ); return ( - + ); } diff --git a/src/components/quotes/QuoteRegistrationV2.tsx b/src/components/quotes/QuoteRegistrationV2.tsx index ddfb51cf..a67a85fb 100644 --- a/src/components/quotes/QuoteRegistrationV2.tsx +++ b/src/components/quotes/QuoteRegistrationV2.tsx @@ -33,6 +33,8 @@ import { LocationDetailPanel } from "./LocationDetailPanel"; import { QuoteSummaryPanel } from "./QuoteSummaryPanel"; import { QuoteFooterBar } from "./QuoteFooterBar"; import { QuotePreviewModal } from "./QuotePreviewModal"; +import { QuoteTransactionModal } from "./QuoteTransactionModal"; +import { DiscountModal } from "./DiscountModal"; import { getFinishedGoods, @@ -82,15 +84,16 @@ export interface LocationItem { // 견적 폼 데이터 V2 export interface QuoteFormDataV2 { id?: string; - registrationDate: string; - writer: string; - clientId: string; - clientName: string; - siteName: string; - manager: string; - contact: string; - dueDate: string; - remarks: string; + quoteNumber: string; // 견적번호 + registrationDate: string; // 접수일 + writer: string; // 작성자 + clientId: string; // 수주처 ID + clientName: string; // 수주처명 + siteName: string; // 현장명 + manager: string; // 담당자 + contact: string; // 연락처 + vatType: "included" | "excluded"; // 부가세 (포함/별도) + remarks: string; // 비고 status: "draft" | "temporary" | "final"; // 작성중, 임시저장, 최종저장 locations: LocationItem[]; } @@ -118,6 +121,7 @@ const createNewLocation = (): LocationItem => ({ // 초기 폼 데이터 const INITIAL_FORM_DATA: QuoteFormDataV2 = { + quoteNumber: "", // 자동생성 또는 서버에서 부여 registrationDate: getLocalDateString(new Date()), writer: "", // useAuth()에서 currentUser.name으로 설정됨 clientId: "", @@ -125,7 +129,7 @@ const INITIAL_FORM_DATA: QuoteFormDataV2 = { siteName: "", manager: "", contact: "", - dueDate: "", + vatType: "included", // 기본값: 부가세 포함 remarks: "", status: "draft", locations: [], @@ -172,7 +176,11 @@ export function QuoteRegistrationV2({ const [selectedLocationId, setSelectedLocationId] = useState(null); const [isSaving, setIsSaving] = useState(false); const [isCalculating, setIsCalculating] = useState(false); - const [previewModalOpen, setPreviewModalOpen] = useState(false); + const [quotePreviewOpen, setQuotePreviewOpen] = useState(false); + const [transactionPreviewOpen, setTransactionPreviewOpen] = useState(false); + const [discountModalOpen, setDiscountModalOpen] = useState(false); + const [discountRate, setDiscountRate] = useState(0); + const [discountAmount, setDiscountAmount] = useState(0); const pendingAutoCalculateRef = useRef(false); // API 데이터 @@ -286,11 +294,23 @@ export function QuoteRegistrationV2({ return formData.locations.find((loc) => loc.id === selectedLocationId) || null; }, [formData.locations, selectedLocationId]); - // 총 금액 + // 총 금액 (할인 전) const totalAmount = useMemo(() => { return formData.locations.reduce((sum, loc) => sum + (loc.totalPrice || 0), 0); }, [formData.locations]); + // 할인 적용 후 총 금액 + const discountedTotalAmount = useMemo(() => { + return totalAmount - discountAmount; + }, [totalAmount, discountAmount]); + + // 할인 적용 핸들러 + const handleApplyDiscount = useCallback((rate: number, amount: number) => { + setDiscountRate(rate); + setDiscountAmount(amount); + toast.success(`할인이 적용되었습니다. (${rate.toFixed(1)}%, ${amount.toLocaleString()}원)`); + }, []); + // 개소별 합계 const locationTotals = useMemo(() => { return formData.locations.map((loc) => ({ @@ -661,33 +681,34 @@ export function QuoteRegistrationV2({ - + {/* 1행: 견적번호 | 접수일 | 수주처 | 현장명 */} + - 등록일 + 견적번호 + + + + 접수일 handleFieldChange("registrationDate", e.target.value)} + disabled={isViewMode} /> - 작성자 - - - - 발주처 선택 * + 수주처 * - + {clients.map((client) => ( @@ -698,9 +719,6 @@ export function QuoteRegistrationV2({ - - - 현장명 + + + {/* 2행: 담당자 | 연락처 | 작성자 | 부가세 */} + - 발주 담당자 + 담당자 - - - - 납기일 + 작성자 handleFieldChange("dueDate", e.target.value)} - disabled={isViewMode} + value={formData.writer} + disabled + className="bg-gray-50" /> - + + 부가세 + handleFieldChange("vatType", value)} + disabled={isViewMode} + > + + + + + 부가세 포함 + 부가세 별도 + + + + + + {/* 3행: 상태 | 비고 */} + + + 상태 + + + 비고 - handleFieldChange("remarks", e.target.value)} disabled={isViewMode} - rows={2} /> </div> </div> @@ -788,8 +833,56 @@ export function QuoteRegistrationV2({ <LocationDetailPanel location={selectedLocation} onUpdateLocation={handleUpdateLocation} + onDeleteLocation={handleDeleteLocation} + onCalculateLocation={async (locationId) => { + // 단일 개소 산출 + const location = formData.locations.find((loc) => loc.id === locationId); + if (!location) return; + + setIsCalculating(true); + try { + const bomItem = { + finished_goods_code: location.productCode, + openWidth: location.openWidth, + openHeight: location.openHeight, + quantity: location.quantity, + guideRailType: location.guideRailType, + motorPower: location.motorPower, + controller: location.controller, + wingSize: location.wingSize, + inspectionFee: location.inspectionFee, + }; + + const result = await calculateBomBulk([bomItem]); + + if (result.success && result.data) { + const apiData = result.data as BomBulkResponse; + const bomResult = apiData.items?.[0]?.result; + + if (bomResult) { + handleUpdateLocation(locationId, { + unitPrice: bomResult.grand_total, + totalPrice: bomResult.grand_total * location.quantity, + bomResult: bomResult, + }); + toast.success("견적이 산출되었습니다."); + } + } else { + toast.error(result.error || "산출 실패"); + } + } catch (error) { + console.error("산출 오류:", error); + toast.error("산출 중 오류가 발생했습니다."); + } finally { + setIsCalculating(false); + } + }} + onSaveItems={() => { + toast.success("품목이 저장되었습니다."); + }} finishedGoods={finishedGoods} disabled={isViewMode} + isCalculating={isCalculating} /> </div> </CardContent> @@ -806,25 +899,46 @@ export function QuoteRegistrationV2({ {/* 푸터 바 (고정) */} <QuoteFooterBar totalLocations={formData.locations.length} - totalAmount={totalAmount} + totalAmount={discountedTotalAmount} status={formData.status} - onCalculate={handleCalculate} - onPreview={() => setPreviewModalOpen(true)} - onSaveTemporary={() => handleSave("temporary")} - onSaveFinal={() => handleSave("final")} + onQuoteView={() => setQuotePreviewOpen(true)} + onTransactionView={() => setTransactionPreviewOpen(true)} + onSave={() => handleSave("temporary")} + onFinalize={() => handleSave("final")} onBack={onBack} onEdit={onEdit} onOrderRegister={onOrderRegister} - isCalculating={isCalculating} + onDiscount={() => setDiscountModalOpen(true)} isSaving={isSaving} isViewMode={isViewMode} /> - {/* 견적서 미리보기 모달 */} + {/* 견적서 보기 모달 */} <QuotePreviewModal - open={previewModalOpen} - onOpenChange={setPreviewModalOpen} + open={quotePreviewOpen} + onOpenChange={setQuotePreviewOpen} quoteData={formData} + discountRate={discountRate} + discountAmount={discountAmount} + /> + + {/* 거래명세서 보기 모달 */} + <QuoteTransactionModal + open={transactionPreviewOpen} + onOpenChange={setTransactionPreviewOpen} + quoteData={formData} + discountRate={discountRate} + discountAmount={discountAmount} + /> + + {/* 할인하기 모달 */} + <DiscountModal + open={discountModalOpen} + onOpenChange={setDiscountModalOpen} + supplyAmount={totalAmount} + initialDiscountRate={discountRate} + initialDiscountAmount={discountAmount} + onApply={handleApplyDiscount} /> </div> ); diff --git a/src/components/quotes/QuoteTransactionModal.tsx b/src/components/quotes/QuoteTransactionModal.tsx new file mode 100644 index 00000000..523e3afd --- /dev/null +++ b/src/components/quotes/QuoteTransactionModal.tsx @@ -0,0 +1,221 @@ +'use client'; + +/** + * 거래명세서 보기 모달 + * + * 견적 데이터를 거래명세서 양식으로 표시 + * - 공급자/공급받는자 정보 + * - 품목내역 + * - 금액 계산 (공급가액, 할인, 부가세, 합계) + * - 증명 문구 + 인감 + */ + +import { DocumentViewer } from '@/components/document-system'; +import type { QuoteFormDataV2 } from './QuoteRegistrationV2'; + +interface QuoteTransactionModalProps { + open: boolean; + onOpenChange: (open: boolean) => void; + quoteData: QuoteFormDataV2 | null; + /** 할인율 (%) */ + discountRate?: number; + /** 할인금액 (원) */ + discountAmount?: number; +} + +export function QuoteTransactionModal({ + open, + onOpenChange, + quoteData, + discountRate = 0, + discountAmount = 0, +}: QuoteTransactionModalProps) { + if (!quoteData) return null; + + // locations 배열 (undefined 방어) + const locations = quoteData.locations || []; + + // 금액 계산 + const subtotal = locations.reduce((sum, loc) => { + const locationTotal = (loc.items || []).reduce((itemSum, item) => itemSum + (item.amount || 0), 0); + return sum + locationTotal * (loc.quantity || 1); + }, 0); + const afterDiscount = subtotal - discountAmount; + const vat = Math.round(afterDiscount * 0.1); + const finalTotal = afterDiscount + vat; + + // 부가세 포함 여부 + const vatIncluded = quoteData.vatType === 'included'; + + // 오늘 날짜 + const today = new Date().toISOString().split('T')[0]; + + return ( + <DocumentViewer + title="거래명세서" + preset="inspection" + open={open} + onOpenChange={onOpenChange} + > + <div className="bg-white p-8 min-h-full"> + {/* 문서 헤더 */} + <div className="text-center mb-6"> + <h1 className="text-2xl font-bold tracking-widest mb-2">거 래 명 세 서</h1> + <p className="text-sm text-gray-600"> + 견적번호: {quoteData.quoteNumber || '-'} | 발행일: {quoteData.receiptDate || today} + </p> + </div> + + {/* 공급자/공급받는자 정보 */} + <div className="grid grid-cols-2 gap-4 mb-4"> + {/* 공급자 */} + <div className="border border-gray-300"> + <div className="bg-gray-800 text-white p-2 text-sm font-medium text-center"> + 공급자 + </div> + <div className="p-3 space-y-1 text-sm"> + <div className="flex"> + <span className="w-20 text-gray-600">상호</span> + <span>회사명</span> + </div> + <div className="flex"> + <span className="w-20 text-gray-600">대표자</span> + <span>홍길동</span> + </div> + <div className="flex"> + <span className="w-20 text-gray-600">사업자번호</span> + <span>123-12-12345</span> + </div> + <div className="flex"> + <span className="w-20 text-gray-600">주소</span> + <span>주소명</span> + </div> + </div> + </div> + + {/* 공급받는자 */} + <div className="border border-gray-300"> + <div className="bg-gray-800 text-white p-2 text-sm font-medium text-center"> + 공급받는자 + </div> + <div className="p-3 space-y-1 text-sm"> + <div className="flex"> + <span className="w-20 text-gray-600">상호</span> + <span>{quoteData.clientName || '-'}</span> + </div> + <div className="flex"> + <span className="w-20 text-gray-600">담당자</span> + <span>{quoteData.managerName || '-'}</span> + </div> + <div className="flex"> + <span className="w-20 text-gray-600">연락처</span> + <span>{quoteData.contact || '-'}</span> + </div> + <div className="flex"> + <span className="w-20 text-gray-600">현장명</span> + <span>{quoteData.siteName || '-'}</span> + </div> + </div> + </div> + </div> + + {/* 품목내역 */} + <div className="border border-gray-300 mb-4"> + <div className="bg-gray-800 text-white p-2 text-sm font-medium text-center"> + 품목내역 + </div> + <table className="w-full text-sm"> + <thead> + <tr className="bg-gray-100 border-b border-gray-300"> + <th className="p-2 text-center font-medium border-r border-gray-300 w-12">순번</th> + <th className="p-2 text-center font-medium border-r border-gray-300 w-28">품목코드</th> + <th className="p-2 text-left font-medium border-r border-gray-300">품명</th> + <th className="p-2 text-center font-medium border-r border-gray-300 w-24">규격</th> + <th className="p-2 text-center font-medium border-r border-gray-300 w-12">수량</th> + <th className="p-2 text-center font-medium border-r border-gray-300 w-12">단위</th> + <th className="p-2 text-right font-medium border-r border-gray-300 w-24">단가</th> + <th className="p-2 text-right font-medium w-24">공급가액</th> + </tr> + </thead> + <tbody> + {locations.length > 0 ? ( + locations.map((location, index) => ( + <tr key={location.id} className="border-b border-gray-300"> + <td className="p-2 text-center border-r border-gray-300">{index + 1}</td> + <td className="p-2 text-center border-r border-gray-300">{location.productCode || '-'}</td> + <td className="p-2 border-r border-gray-300">{location.floor} / {location.symbol}</td> + <td className="p-2 text-center border-r border-gray-300">{location.width}x{location.height}</td> + <td className="p-2 text-center border-r border-gray-300">{location.quantity || 1}</td> + <td className="p-2 text-center border-r border-gray-300">SET</td> + <td className="p-2 text-right border-r border-gray-300"> + {(location.items || []).reduce((sum, item) => sum + (item.amount || 0), 0).toLocaleString()} + </td> + <td className="p-2 text-right"> + {((location.items || []).reduce((sum, item) => sum + (item.amount || 0), 0) * (location.quantity || 1)).toLocaleString()} + </td> + </tr> + )) + ) : ( + <tr className="border-b border-gray-300"> + <td colSpan={8} className="p-4 text-center text-gray-400"> + 등록된 품목이 없습니다 + </td> + </tr> + )} + </tbody> + </table> + </div> + + {/* 금액 계산 */} + <div className="border border-gray-300 mb-6"> + <table className="w-full text-sm"> + <tbody> + <tr className="border-b border-gray-300"> + <td className="p-2 bg-gray-100 border-r border-gray-300 w-32">공급가액</td> + <td className="p-2 text-right">{subtotal.toLocaleString()}원</td> + </tr> + {/* 할인 적용 시에만 표시 */} + {(discountRate > 0 || discountAmount > 0) && ( + <> + <tr className="border-b border-gray-300"> + <td className="p-2 bg-gray-100 border-r border-gray-300">할인율</td> + <td className="p-2 text-right">{discountRate.toFixed(2)}%</td> + </tr> + <tr className="border-b border-gray-300"> + <td className="p-2 bg-gray-100 border-r border-gray-300">할인액</td> + <td className="p-2 text-right text-red-600"> + -{discountAmount.toLocaleString()}원 + </td> + </tr> + <tr className="border-b border-gray-300"> + <td className="p-2 bg-gray-100 border-r border-gray-300">할인 후 공급가액</td> + <td className="p-2 text-right">{afterDiscount.toLocaleString()}원</td> + </tr> + </> + )} + <tr className="border-b border-gray-300"> + <td className="p-2 bg-gray-100 border-r border-gray-300">부가세 (10%)</td> + <td className="p-2 text-right">{vat.toLocaleString()}원</td> + </tr> + <tr> + <td className="p-2 bg-gray-100 border-r border-gray-300 font-medium">합계 금액</td> + <td className="p-2 text-right font-bold text-lg">₩ {finalTotal.toLocaleString()}</td> + </tr> + </tbody> + </table> + </div> + + {/* 증명 문구 */} + <div className="text-center py-6 border-t border-gray-300"> + <p className="text-sm mb-4">위 금액을 거래하였음을 증명합니다.</p> + <p className="text-sm text-gray-600 mb-4">{quoteData.receiptDate || today}</p> + <div className="flex justify-center"> + <div className="w-12 h-12 border-2 border-red-400 rounded-full flex items-center justify-center text-red-400 text-xs"> + 印 + </div> + </div> + </div> + </div> + </DocumentViewer> + ); +} diff --git a/src/components/templates/UniversalListPage/index.tsx b/src/components/templates/UniversalListPage/index.tsx index b33b1c2d..ce652d80 100644 --- a/src/components/templates/UniversalListPage/index.tsx +++ b/src/components/templates/UniversalListPage/index.tsx @@ -14,11 +14,14 @@ import { useState, useEffect, useCallback, useMemo } from 'react'; import { useRouter, useParams } from 'next/navigation'; import { toast } from 'sonner'; +import { Download, Loader2 } from 'lucide-react'; +import { Button } from '@/components/ui/button'; import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog'; import { IntegratedListTemplateV2, type PaginationConfig, } from '@/components/templates/IntegratedListTemplateV2'; +import { downloadExcel, downloadSelectedExcel } from '@/lib/utils/excel-download'; import type { UniversalListPageProps, TabOption, @@ -71,6 +74,9 @@ export function UniversalListPage<T>({ const [itemToDelete, setItemToDelete] = useState<T | null>(null); const [isBulkDelete, setIsBulkDelete] = useState(false); + // 엑셀 다운로드 상태 + const [isExcelDownloading, setIsExcelDownloading] = useState(false); + const itemsPerPage = config.itemsPerPage || 20; // 모바일 인피니티 스크롤 로딩 상태 (서버 사이드 페이지네이션 시) @@ -460,6 +466,154 @@ export function UniversalListPage<T>({ setSelectedItems(new Set()); }, [config.initialFilters]); + // ===== 엑셀 다운로드 핸들러 ===== + const handleExcelDownload = useCallback(async () => { + if (!config.excelDownload) return; + + const { columns, filename = 'export', sheetName = 'Sheet1', fetchAllUrl, fetchAllParams, mapResponse } = config.excelDownload; + + setIsExcelDownloading(true); + try { + let dataToDownload: T[]; + + // 디버깅: 데이터 개수 확인 + console.log('[Excel] clientSideFiltering:', config.clientSideFiltering); + console.log('[Excel] rawData.length:', rawData.length); + console.log('[Excel] filteredData.length:', filteredData.length); + console.log('[Excel] fetchAllUrl:', fetchAllUrl); + + // 클라이언트 사이드 필터링: 현재 필터링된 전체 데이터 사용 + if (config.clientSideFiltering) { + dataToDownload = filteredData; + } + // 서버 사이드: fetchAllUrl로 전체 데이터 조회 + else if (fetchAllUrl) { + const params = new URLSearchParams(); + // 전체 데이터 조회 - API마다 다른 파라미터명 사용 가능하므로 둘 다 설정 + params.append('size', '10000'); + params.append('per_page', '10000'); + + // 동적 파라미터 추가 + if (fetchAllParams) { + const additionalParams = fetchAllParams({ + activeTab, + filters, + searchValue, + }); + Object.entries(additionalParams).forEach(([key, value]) => { + if (value) params.append(key, value); + }); + } + + const response = await fetch(`${fetchAllUrl}?${params.toString()}`); + const result = await response.json(); + + if (!result.success) { + throw new Error(result.message || '데이터 조회에 실패했습니다.'); + } + + // 응답 매핑 + const rawData = mapResponse + ? mapResponse(result) + : (result.data?.data ?? result.data ?? []); + + dataToDownload = rawData as T[]; + } + // fetchAllUrl 없으면 현재 로드된 데이터 사용 + else { + dataToDownload = rawData; + } + + if (dataToDownload.length === 0) { + toast.warning('다운로드할 데이터가 없습니다.'); + return; + } + + downloadExcel({ + data: dataToDownload as Record<string, unknown>[], + columns, + filename, + sheetName, + }); + + toast.success(`${dataToDownload.length}건 다운로드 완료`); + } catch (error) { + console.error('[Excel] 다운로드 실패:', error); + toast.error(error instanceof Error ? error.message : '엑셀 다운로드에 실패했습니다.'); + } finally { + setIsExcelDownloading(false); + } + }, [config.excelDownload, config.clientSideFiltering, filteredData, rawData, activeTab, filters, searchValue]); + + // 선택 항목 엑셀 다운로드 + const handleSelectedExcelDownload = useCallback(() => { + if (!config.excelDownload) return; + + const { columns, filename = 'export', sheetName = 'Sheet1' } = config.excelDownload; + const selectedIds = Array.from(effectiveSelectedItems); + + if (selectedIds.length === 0) { + toast.warning('선택된 항목이 없습니다.'); + return; + } + + // 현재 데이터에서 선택된 항목 필터링 + const selectedData = rawData.filter((item) => selectedIds.includes(getItemId(item))); + + downloadSelectedExcel({ + data: selectedData as Record<string, unknown>[], + columns, + selectedIds, + idField: 'id', + filename: `${filename}_선택`, + sheetName, + }); + + toast.success(`${selectedData.length}건 다운로드 완료`); + }, [config.excelDownload, effectiveSelectedItems, rawData, getItemId]); + + // 엑셀 다운로드 버튼 렌더링 + const renderExcelDownloadButton = useMemo(() => { + if (!config.excelDownload || config.excelDownload.enabled === false) { + return null; + } + + const { enableSelectedDownload = true } = config.excelDownload; + + // 선택 항목이 있고 선택 다운로드가 활성화된 경우 + if (enableSelectedDownload && effectiveSelectedItems.size > 0) { + return ( + <Button + variant="outline" + size="sm" + onClick={handleSelectedExcelDownload} + className="gap-2" + > + <Download className="h-4 w-4" /> + 선택 다운로드 ({effectiveSelectedItems.size}) + </Button> + ); + } + + // 전체 다운로드 + return ( + <Button + variant="outline" + size="sm" + onClick={handleExcelDownload} + disabled={isExcelDownloading} + className="gap-2" + > + {isExcelDownloading ? ( + <Loader2 className="h-4 w-4 animate-spin" /> + ) : ( + <Download className="h-4 w-4" /> + )} + {isExcelDownloading ? '다운로드 중...' : '엑셀 다운로드'} + </Button> + ); + }, [config.excelDownload, effectiveSelectedItems.size, isExcelDownloading, handleExcelDownload, handleSelectedExcelDownload]); + // ===== 정렬 핸들러 ===== const handleSort = useCallback((key: string) => { if (sortBy === key) { @@ -590,12 +744,19 @@ export function UniversalListPage<T>({ title={config.title} description={config.description} icon={config.icon} - headerActions={config.headerActions?.({ - onCreate: handleCreate, - selectedItems: effectiveSelectedItems, - onClearSelection: () => setSelectedItems(new Set()), - onRefresh: fetchData, - })} + headerActions={ + <> + {/* 엑셀 다운로드 버튼 (config.excelDownload 설정 시 자동 추가) */} + {renderExcelDownloadButton} + {/* 커스텀 헤더 액션 */} + {config.headerActions?.({ + onCreate: handleCreate, + selectedItems: effectiveSelectedItems, + onClearSelection: () => setSelectedItems(new Set()), + onRefresh: fetchData, + })} + </> + } // 공통 헤더 옵션 (달력/등록버튼) dateRangeSelector={config.dateRangeSelector} createButton={config.createButton} diff --git a/src/components/templates/UniversalListPage/types.ts b/src/components/templates/UniversalListPage/types.ts index 6c5e5e54..3281b9e1 100644 --- a/src/components/templates/UniversalListPage/types.ts +++ b/src/components/templates/UniversalListPage/types.ts @@ -8,6 +8,7 @@ import { ReactNode, RefObject } from 'react'; import { LucideIcon } from 'lucide-react'; import type { FilterFieldConfig, FilterValues } from '@/components/molecules/MobileFilter'; +import type { ExcelColumn } from '@/lib/utils/excel-download'; // ===== 기본 타입 (IntegratedListTemplateV2에서 re-export) ===== export type { FilterFieldConfig, FilterValues }; @@ -127,6 +128,40 @@ export interface RowClickHandlers<T> { onDelete?: (item: T) => void; } +// ===== 엑셀 다운로드 설정 ===== +export interface ExcelDownloadConfig<T> { + /** 엑셀 다운로드 활성화 여부 (기본: true) */ + enabled?: boolean; + /** 엑셀 컬럼 정의 */ + columns: ExcelColumn<T>[]; + /** 파일명 (확장자 제외) */ + filename?: string; + /** 시트명 */ + sheetName?: string; + /** + * 전체 데이터 조회 URL (서버 사이드 페이지네이션 시 필수) + * - 예: '/api/proxy/items' + * - size=10000 파라미터가 자동 추가됨 + */ + fetchAllUrl?: string; + /** + * 전체 데이터 조회 시 추가 파라미터 (동적) + * - activeTab, filters 등 현재 상태 기반으로 파라미터 생성 + */ + fetchAllParams?: (params: { + activeTab: string; + filters: Record<string, string | string[]>; + searchValue: string; + }) => Record<string, string>; + /** + * API 응답을 데이터 배열로 변환 + * - 기본값: result.data?.data ?? result.data ?? [] + */ + mapResponse?: (response: unknown) => T[]; + /** 선택 항목 다운로드 활성화 (기본: true) */ + enableSelectedDownload?: boolean; +} + // ===== 메인 Config 타입 ===== export interface UniversalListConfig<T> { // ===== 페이지 기본 정보 ===== @@ -271,6 +306,15 @@ export interface UniversalListConfig<T> { /** 데이터 변경 콜백 (동적 컬럼 계산 등에 사용) */ onDataChange?: (data: T[]) => void; + // ===== 엑셀 다운로드 ===== + /** + * 엑셀 다운로드 설정 + * - 설정 시 헤더 액션에 자동으로 엑셀 다운로드 버튼 추가 + * - 클라이언트 사이드: 현재 데이터 기반 다운로드 + * - 서버 사이드: fetchAllUrl로 전체 데이터 조회 후 다운로드 + */ + excelDownload?: ExcelDownloadConfig<T>; + // ===== 추가 옵션 ===== /** 검색 플레이스홀더 */ searchPlaceholder?: string; diff --git a/src/components/ui/account-number-input.tsx b/src/components/ui/account-number-input.tsx index 5f531d23..f8ab003c 100644 --- a/src/components/ui/account-number-input.tsx +++ b/src/components/ui/account-number-input.tsx @@ -74,7 +74,7 @@ const AccountNumberInput = React.forwardRef<HTMLInputElement, AccountNumberInput ref={ref} data-slot="input" className={cn( - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "file:text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/20", className diff --git a/src/components/ui/business-number-input.tsx b/src/components/ui/business-number-input.tsx index 200c73e7..6e71b14b 100644 --- a/src/components/ui/business-number-input.tsx +++ b/src/components/ui/business-number-input.tsx @@ -83,7 +83,7 @@ const BusinessNumberInput = React.forwardRef<HTMLInputElement, BusinessNumberInp ref={ref} data-slot="input" className={cn( - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "file:text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/20", showValidation && "pr-10", diff --git a/src/components/ui/card-number-input.tsx b/src/components/ui/card-number-input.tsx index 30a3a96b..9a44120a 100644 --- a/src/components/ui/card-number-input.tsx +++ b/src/components/ui/card-number-input.tsx @@ -74,7 +74,7 @@ const CardNumberInput = React.forwardRef<HTMLInputElement, CardNumberInputProps> ref={ref} data-slot="input" className={cn( - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "file:text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/20", className diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx index 19ecaf89..01f5f901 100644 --- a/src/components/ui/command.tsx +++ b/src/components/ui/command.tsx @@ -66,7 +66,7 @@ function CommandInput({ <CommandPrimitive.Input data-slot="command-input" className={cn( - "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", + "placeholder:text-muted-foreground/50 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className, )} {...props} diff --git a/src/components/ui/currency-input.tsx b/src/components/ui/currency-input.tsx index 3bce8fb2..28f6a802 100644 --- a/src/components/ui/currency-input.tsx +++ b/src/components/ui/currency-input.tsx @@ -196,7 +196,7 @@ const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>( ref={ref} data-slot="input" className={cn( - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "file:text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/20", showCurrency && "pl-8", diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index a03f531c..b78b4680 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) { type={type} data-slot="input" className={cn( - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "file:text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className, diff --git a/src/components/ui/number-input.tsx b/src/components/ui/number-input.tsx index 5725d2c2..81db645e 100644 --- a/src/components/ui/number-input.tsx +++ b/src/components/ui/number-input.tsx @@ -252,7 +252,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>( ref={ref} data-slot="input" className={cn( - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "file:text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/20", suffix && "pr-10", diff --git a/src/components/ui/personal-number-input.tsx b/src/components/ui/personal-number-input.tsx index 8d26c5d1..f0f4e113 100644 --- a/src/components/ui/personal-number-input.tsx +++ b/src/components/ui/personal-number-input.tsx @@ -80,7 +80,7 @@ const PersonalNumberInput = React.forwardRef<HTMLInputElement, PersonalNumberInp ref={ref} data-slot="input" className={cn( - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "file:text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/20", className diff --git a/src/components/ui/phone-input.tsx b/src/components/ui/phone-input.tsx index cc504814..bc0197c4 100644 --- a/src/components/ui/phone-input.tsx +++ b/src/components/ui/phone-input.tsx @@ -75,7 +75,7 @@ const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>( ref={ref} data-slot="input" className={cn( - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "file:text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/20", className diff --git a/src/components/ui/quantity-input.tsx b/src/components/ui/quantity-input.tsx index f1039613..70d7c321 100644 --- a/src/components/ui/quantity-input.tsx +++ b/src/components/ui/quantity-input.tsx @@ -222,7 +222,7 @@ const QuantityInput = React.forwardRef<HTMLInputElement, QuantityInputProps>( data-slot="input" disabled={disabled} className={cn( - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "file:text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/20", showButtons && "text-center", diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx index 32443d23..c348cc43 100644 --- a/src/components/ui/textarea.tsx +++ b/src/components/ui/textarea.tsx @@ -10,7 +10,7 @@ const Textarea = React.forwardRef< <textarea data-slot="textarea" className={cn( - "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-h-[80px] w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-h-[80px] w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className
+ 문서번호: {quoteData.id || 'ABC123'} | 작성일자: {quoteData.registrationDate || '-'} +
총 견적금액
- ₩ {grandTotal.toLocaleString()} -
※ 부가가치세 포함
※ 해당 견적서의 유효기간은 발행일 기준 1개월 입니다.
※ 견적금액의 50%를 입금하시면 생산가 진행합니다.