+
품목 정보
-
+ 품목 추가
+
+
-
- {formData.items.map((item, index) => (
-
-
-
-
-
-
-
-
- handleItemChange(index, 'vatType', e.target.value)}>
- 과세
- 영세
- 면세
-
-
-
- {formData.items.length > 1 && (
-
setFormData({ ...formData, items: formData.items.filter((_, i) => i !== index) })} className="w-full p-2 bg-red-50 hover:bg-red-100 text-red-600 rounded-lg border border-red-200">
-
- )}
-
-
- ))}
+
+
+
+
+ 품목명
+ 수량
+ 단가
+ 공급가액
+ 세액
+ 금액
+ 과세
+
+
+
+ {formData.items.map((item, index) => {
+ const supplyAmt = item.qty * item.unitPrice;
+ const vat = item.vatType === 'vat' ? Math.floor(supplyAmt * 0.1) : 0;
+ const total = supplyAmt + vat;
+
+ // 콤마 형식으로 숫자 표시
+ const formatWithComma = (num) => num ? num.toLocaleString() : '';
+ // 콤마 제거하고 숫자로 변환
+ const parseNumber = (str) => parseFloat(str.replace(/,/g, '')) || 0;
+
+ return (
+
+
+
+
+
+
+
+
+ {supplyAmt.toLocaleString()}
+
+
+ {vat.toLocaleString()}
+
+
+ {total.toLocaleString()}
+
+
+ handleItemChange(index, 'vatType', e.target.value)}>
+ 과세
+ 영세
+ 면세
+
+
+
+ {formData.items.length > 1 && (
+ setFormData({ ...formData, items: formData.items.filter((_, i) => i !== index) })} className="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-50 rounded transition-colors" title="삭제">
+
+ )}
+
+
+ );
+ })}
+
+
+
+ 합계
+
+ {formData.items.reduce((sum, item) => sum + (item.qty * item.unitPrice), 0).toLocaleString()}
+
+
+ {formData.items.reduce((sum, item) => {
+ const supplyAmt = item.qty * item.unitPrice;
+ return sum + (item.vatType === 'vat' ? Math.floor(supplyAmt * 0.1) : 0);
+ }, 0).toLocaleString()}
+
+
+ {formData.items.reduce((sum, item) => {
+ const supplyAmt = item.qty * item.unitPrice;
+ const vat = item.vatType === 'vat' ? Math.floor(supplyAmt * 0.1) : 0;
+ return sum + supplyAmt + vat;
+ }, 0).toLocaleString()}
+
+
+
+
@@ -297,7 +373,7 @@
};
// InvoiceList Component
- const InvoiceList = ({ invoices, onViewDetail, onCheckStatus, onDelete, dateFrom, dateTo, onDateFromChange, onDateToChange, onThisMonth, onLastMonth, totalCount }) => {
+ const InvoiceList = ({ invoices, onViewDetail, onCheckStatus, onDelete, dateFrom, dateTo, onDateFromChange, onDateToChange, onThisMonth, onLastMonth, totalCount, sortColumn, sortDirection, onSort }) => {
const formatCurrency = (val) => new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW' }).format(val);
const formatDate = (date) => new Date(date).toLocaleDateString('ko-KR');
@@ -312,6 +388,39 @@
return
{config.label} ;
};
+ // 정렬 아이콘
+ const SortIcon = ({ column }) => {
+ if (sortColumn !== column) {
+ return (
+
+
+ );
+ }
+ return sortDirection === 'asc' ? (
+
+
+ ) : (
+
+
+ );
+ };
+
+ // 정렬 가능한 헤더 컴포넌트
+ const SortableHeader = ({ column, children, className = '' }) => (
+
onSort(column)}
+ >
+
+ {children}
+
+
+ );
+
return (
@@ -363,8 +472,9 @@ className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-s
발행번호
- 공급받는자
- 공급일자
+ 공급받는자
+ 작성일자
+ 전송일자
공급가액
부가세
합계
@@ -374,13 +484,14 @@ className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-s
{invoices.length === 0 ? (
- 해당 기간에 발행된 세금계산서가 없습니다. 해당 기간에 발행된 세금계산서가 없습니다. onViewDetail(invoice)}>
{invoice.issueKey || invoice.id}
{invoice.recipientName}
{formatDate(invoice.supplyDate)}
+ {invoice.sentAt ? formatDate(invoice.sentAt) : - }
{formatCurrency(invoice.totalSupplyAmt)}
{formatCurrency(invoice.totalVat)}
{formatCurrency(invoice.total)}
@@ -436,9 +547,15 @@ className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-s
{invoice.recipientBizno}
-
-
공급일자
-
{formatDate(invoice.supplyDate)}
+
+
+
작성일자
+
{formatDate(invoice.supplyDate)}
+
+
+
전송일자
+
{invoice.sentAt ? formatDate(invoice.sentAt) : 미전송 }
+
품목 내역
@@ -555,6 +672,10 @@ className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-s
const [dateFrom, setDateFrom] = useState(currentMonth.from);
const [dateTo, setDateTo] = useState(currentMonth.to);
+ // 정렬 상태 (기본: 작성일자 내림차순)
+ const [sortColumn, setSortColumn] = useState('supplyDate');
+ const [sortDirection, setSortDirection] = useState('desc');
+
useEffect(() => {
loadInvoices();
}, []);
@@ -648,6 +769,18 @@ className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-s
);
}
+ // 정렬 핸들러
+ const handleSort = (column) => {
+ if (sortColumn === column) {
+ // 같은 컬럼 클릭 시 정렬 방향 토글
+ setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+ } else {
+ // 다른 컬럼 클릭 시 해당 컬럼으로 변경, 내림차순 기본
+ setSortColumn(column);
+ setSortDirection('desc');
+ }
+ };
+
// 날짜 필터 적용된 송장 목록
const filteredInvoices = invoices.filter(invoice => {
const supplyDate = invoice.supplyDate;
@@ -655,6 +788,27 @@ className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-s
return supplyDate >= dateFrom && supplyDate <= dateTo;
});
+ // 정렬 적용
+ const sortedInvoices = [...filteredInvoices].sort((a, b) => {
+ let aVal = a[sortColumn];
+ let bVal = b[sortColumn];
+
+ // null/undefined 처리
+ if (aVal == null) aVal = '';
+ if (bVal == null) bVal = '';
+
+ // 문자열 비교
+ if (typeof aVal === 'string' && typeof bVal === 'string') {
+ const comparison = aVal.localeCompare(bVal, 'ko-KR');
+ return sortDirection === 'asc' ? comparison : -comparison;
+ }
+
+ // 숫자 비교
+ if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
+ if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
+ return 0;
+ });
+
// 이번 달 버튼
const handleThisMonth = () => {
const dates = getMonthDates(0);
@@ -723,7 +877,7 @@ className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-s
{/* Invoice List */}