f0e8e51d06
- 생산관리: 대시보드, 작업지시, 작업실적, 작업자화면 - 품질관리: 검사관리 (리스트/등록/상세) - 자재관리: 입고관리, 재고현황 - 출고관리: 출하관리 (리스트/등록/상세/수정) - 주문관리: 수주관리, 생산의뢰 - 기존 컴포넌트 개선: CardTransactionInquiry, VendorDetail, QuoteRegistration - IntegratedListTemplateV2 개선 - 공통 컴포넌트 분석 문서 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
470 lines
16 KiB
TypeScript
470 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo, useCallback } from 'react';
|
|
import { format, subDays, subMonths, startOfMonth, endOfMonth } from 'date-fns';
|
|
import {
|
|
CreditCard,
|
|
RefreshCw,
|
|
Save,
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { TableRow, TableCell } from '@/components/ui/table';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import {
|
|
IntegratedListTemplateV2,
|
|
type TableColumn,
|
|
type StatCard,
|
|
} from '@/components/templates/IntegratedListTemplateV2';
|
|
import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
|
|
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
|
import type {
|
|
CardTransaction,
|
|
SortOption,
|
|
} from './types';
|
|
import {
|
|
SORT_OPTIONS,
|
|
ACCOUNT_SUBJECT_OPTIONS,
|
|
} from './types';
|
|
|
|
// ===== Mock 데이터 생성 (결정론적: seed 기반으로 일관된 값 생성) =====
|
|
const generateMockData = (): CardTransaction[] => {
|
|
const cards = ['신한 1234', '국민 5678', '우리 9012', '하나 3456'];
|
|
const cardNames = ['법인카드1', '법인카드2', '대표이사카드', '영업팀카드'];
|
|
const users = ['홍길동', '김철수', '이영희', '박민수', '최지영'];
|
|
const merchants = ['GS25 강남점', '스타벅스 역삼', '교보문고', '쿠팡', '네이버페이'];
|
|
|
|
// 고정된 금액 배열 (Math.random() 대신 결정론적 값 사용)
|
|
const amounts = [150000, 230000, 45000, 320000, 78000, 190000, 420000, 55000, 280000, 125000,
|
|
340000, 67000, 215000, 89000, 175000, 395000, 52000, 268000, 112000, 445000,
|
|
73000, 198000, 310000, 48000, 256000, 135000, 380000, 62000, 225000, 95000];
|
|
|
|
// 고정된 날짜들 (new Date() 대신 고정 기준일 사용)
|
|
const baseDate = new Date('2025-12-01');
|
|
|
|
return Array.from({ length: 30 }, (_, i) => {
|
|
return {
|
|
id: `card-txn-${i + 1}`,
|
|
card: cards[i % cards.length],
|
|
cardName: cardNames[i % cardNames.length],
|
|
user: users[i % users.length],
|
|
usedAt: format(subDays(baseDate, i % 30), 'yyyy-MM-dd HH:mm'),
|
|
merchantName: merchants[i % merchants.length],
|
|
amount: amounts[i],
|
|
createdAt: baseDate.toISOString(),
|
|
updatedAt: baseDate.toISOString(),
|
|
};
|
|
});
|
|
};
|
|
|
|
export function CardTransactionInquiry() {
|
|
// ===== 상태 관리 =====
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [sortOption, setSortOption] = useState<SortOption>('latest');
|
|
const [cardFilter, setCardFilter] = useState<string>('all'); // 카드명 필터
|
|
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const itemsPerPage = 20;
|
|
|
|
// 상단 계정과목명 선택 (저장용)
|
|
const [selectedAccountSubject, setSelectedAccountSubject] = useState<string>('unset');
|
|
|
|
// 계정과목명 저장 다이얼로그
|
|
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
|
|
|
// 선택 필요 알림 다이얼로그
|
|
const [showSelectWarningDialog, setShowSelectWarningDialog] = useState(false);
|
|
|
|
// 날짜 범위 상태
|
|
const [startDate, setStartDate] = useState('2025-09-01');
|
|
const [endDate, setEndDate] = useState('2025-09-03');
|
|
|
|
// Mock 데이터 (SSR-safe: 결정론적 데이터)
|
|
const [data] = useState<CardTransaction[]>(() => generateMockData());
|
|
|
|
// ===== 체크박스 핸들러 =====
|
|
const toggleSelection = useCallback((id: string) => {
|
|
setSelectedItems(prev => {
|
|
const newSet = new Set(prev);
|
|
if (newSet.has(id)) newSet.delete(id);
|
|
else newSet.add(id);
|
|
return newSet;
|
|
});
|
|
}, []);
|
|
|
|
// ===== 카드명 옵션 =====
|
|
const cardOptions = useMemo(() => {
|
|
const uniqueCards = [...new Set(data.map(d => d.cardName))];
|
|
return [
|
|
{ value: 'all', label: '전체' },
|
|
...uniqueCards.map(card => ({ value: card, label: card }))
|
|
];
|
|
}, [data]);
|
|
|
|
// ===== 필터링된 데이터 =====
|
|
const filteredData = useMemo(() => {
|
|
let result = data.filter(item =>
|
|
item.card.includes(searchQuery) ||
|
|
item.cardName.includes(searchQuery) ||
|
|
item.user.includes(searchQuery) ||
|
|
item.merchantName.includes(searchQuery)
|
|
);
|
|
|
|
// 카드명 필터
|
|
if (cardFilter !== 'all') {
|
|
result = result.filter(item => item.cardName === cardFilter);
|
|
}
|
|
|
|
// 정렬
|
|
switch (sortOption) {
|
|
case 'latest':
|
|
result.sort((a, b) => new Date(b.usedAt).getTime() - new Date(a.usedAt).getTime());
|
|
break;
|
|
case 'oldest':
|
|
result.sort((a, b) => new Date(a.usedAt).getTime() - new Date(b.usedAt).getTime());
|
|
break;
|
|
case 'amountHigh':
|
|
result.sort((a, b) => b.amount - a.amount);
|
|
break;
|
|
case 'amountLow':
|
|
result.sort((a, b) => a.amount - b.amount);
|
|
break;
|
|
}
|
|
|
|
return result;
|
|
}, [data, searchQuery, cardFilter, sortOption]);
|
|
|
|
const paginatedData = useMemo(() => {
|
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
return filteredData.slice(startIndex, startIndex + itemsPerPage);
|
|
}, [filteredData, currentPage, itemsPerPage]);
|
|
|
|
const totalPages = Math.ceil(filteredData.length / itemsPerPage);
|
|
|
|
// 새로고침 핸들러
|
|
const handleRefresh = useCallback(() => {
|
|
console.log('새로고침: 카드 사용 내역 최신 데이터 조회');
|
|
// TODO: API 호출로 최신 데이터 조회
|
|
}, []);
|
|
|
|
// ===== 전체 선택 핸들러 =====
|
|
const toggleSelectAll = useCallback(() => {
|
|
if (selectedItems.size === filteredData.length && filteredData.length > 0) {
|
|
setSelectedItems(new Set());
|
|
} else {
|
|
setSelectedItems(new Set(filteredData.map(item => item.id)));
|
|
}
|
|
}, [selectedItems.size, filteredData]);
|
|
|
|
// ===== 계정과목명 저장 핸들러 =====
|
|
const handleSaveAccountSubject = useCallback(() => {
|
|
if (selectedItems.size === 0) {
|
|
setShowSelectWarningDialog(true);
|
|
return;
|
|
}
|
|
setShowSaveDialog(true);
|
|
}, [selectedItems.size]);
|
|
|
|
// 계정과목명 저장 확정
|
|
const handleConfirmSaveAccountSubject = useCallback(() => {
|
|
console.log('계정과목명 저장:', selectedAccountSubject, '선택된 항목:', Array.from(selectedItems));
|
|
// TODO: API 호출로 저장
|
|
setShowSaveDialog(false);
|
|
setSelectedItems(new Set());
|
|
}, [selectedAccountSubject, selectedItems]);
|
|
|
|
// ===== 통계 카드 (전월/당월 사용액) =====
|
|
// Mock 데이터 기준일(2025-12-01)에 맞춰 고정된 날짜 사용 (Hydration 오류 방지)
|
|
const statCards: StatCard[] = useMemo(() => {
|
|
// Mock 데이터가 2025-12-01 기준이므로, 해당 월 기준으로 계산
|
|
const referenceDate = new Date('2025-12-01');
|
|
const currentMonthStart = startOfMonth(referenceDate);
|
|
const currentMonthEnd = endOfMonth(referenceDate);
|
|
const lastMonthStart = startOfMonth(subMonths(referenceDate, 1));
|
|
const lastMonthEnd = endOfMonth(subMonths(referenceDate, 1));
|
|
|
|
// 전월 사용액 계산
|
|
const lastMonthTotal = data
|
|
.filter(d => {
|
|
const date = new Date(d.usedAt);
|
|
return date >= lastMonthStart && date <= lastMonthEnd;
|
|
})
|
|
.reduce((sum, d) => sum + d.amount, 0);
|
|
|
|
// 당월 사용액 계산
|
|
const currentMonthTotal = data
|
|
.filter(d => {
|
|
const date = new Date(d.usedAt);
|
|
return date >= currentMonthStart && date <= currentMonthEnd;
|
|
})
|
|
.reduce((sum, d) => sum + d.amount, 0);
|
|
|
|
return [
|
|
{ label: '전월 사용액', value: `${lastMonthTotal.toLocaleString()}원`, icon: CreditCard, iconColor: 'text-gray-500' },
|
|
{ label: '당월 사용액', value: `${currentMonthTotal.toLocaleString()}원`, icon: CreditCard, iconColor: 'text-blue-500' },
|
|
];
|
|
}, [data]);
|
|
|
|
// ===== 테이블 컬럼 (체크박스/번호 없음) =====
|
|
const tableColumns: TableColumn[] = useMemo(() => [
|
|
{ key: 'card', label: '카드' },
|
|
{ key: 'cardName', label: '카드명' },
|
|
{ key: 'user', label: '사용자' },
|
|
{ key: 'usedAt', label: '사용일시' },
|
|
{ key: 'merchantName', label: '가맹점명' },
|
|
{ key: 'amount', label: '사용금액', className: 'text-right' },
|
|
], []);
|
|
|
|
// ===== 테이블 행 렌더링 =====
|
|
const renderTableRow = useCallback((item: CardTransaction) => {
|
|
const isSelected = selectedItems.has(item.id);
|
|
|
|
return (
|
|
<TableRow
|
|
key={item.id}
|
|
className="hover:bg-muted/50"
|
|
>
|
|
{/* 체크박스 */}
|
|
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
|
<Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(item.id)} />
|
|
</TableCell>
|
|
{/* 카드 */}
|
|
<TableCell>{item.card}</TableCell>
|
|
{/* 카드명 */}
|
|
<TableCell>{item.cardName}</TableCell>
|
|
{/* 사용자 */}
|
|
<TableCell>{item.user}</TableCell>
|
|
{/* 사용일시 */}
|
|
<TableCell>{item.usedAt}</TableCell>
|
|
{/* 가맹점명 */}
|
|
<TableCell>{item.merchantName}</TableCell>
|
|
{/* 사용금액 */}
|
|
<TableCell className="text-right font-medium">
|
|
{item.amount.toLocaleString()}
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
}, [selectedItems, toggleSelection]);
|
|
|
|
// ===== 모바일 카드 렌더링 =====
|
|
const renderMobileCard = useCallback((
|
|
item: CardTransaction,
|
|
index: number,
|
|
globalIndex: number,
|
|
isSelected: boolean,
|
|
onToggle: () => void
|
|
) => {
|
|
return (
|
|
<ListMobileCard
|
|
id={item.id}
|
|
title={`${item.card} - ${item.cardName}`}
|
|
isSelected={isSelected}
|
|
onToggleSelection={onToggle}
|
|
showCheckbox={true}
|
|
infoGrid={
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<InfoField label="사용자" value={item.user} />
|
|
<InfoField label="사용일시" value={item.usedAt} />
|
|
<InfoField label="가맹점명" value={item.merchantName} />
|
|
<InfoField label="사용금액" value={`${item.amount.toLocaleString()}원`} />
|
|
</div>
|
|
}
|
|
/>
|
|
);
|
|
}, []);
|
|
|
|
// ===== 헤더 액션 (날짜 선택만) =====
|
|
const headerActions = (
|
|
<DateRangeSelector
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
onStartDateChange={setStartDate}
|
|
onEndDateChange={setEndDate}
|
|
/>
|
|
);
|
|
|
|
// ===== 상단 계정과목명 + 저장 버튼 + 새로고침 =====
|
|
const beforeTableContent = (
|
|
<div className="flex items-center justify-between w-full">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium text-gray-700">계정과목명</span>
|
|
<Select value={selectedAccountSubject} onValueChange={setSelectedAccountSubject}>
|
|
<SelectTrigger className="w-[150px]">
|
|
<SelectValue placeholder="계정과목명 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{ACCOUNT_SUBJECT_OPTIONS.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Button onClick={handleSaveAccountSubject} className="bg-orange-500 hover:bg-orange-600">
|
|
<Save className="h-4 w-4 mr-2" />
|
|
저장
|
|
</Button>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleRefresh}
|
|
>
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
|
새로고침
|
|
</Button>
|
|
</div>
|
|
);
|
|
|
|
// ===== 테이블 헤더 액션 (2개 필터) =====
|
|
const tableHeaderActions = (
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{/* 카드명 필터 */}
|
|
<Select value={cardFilter} onValueChange={setCardFilter}>
|
|
<SelectTrigger className="w-[150px]">
|
|
<SelectValue placeholder="카드" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{cardOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{/* 정렬 */}
|
|
<Select value={sortOption} onValueChange={(value) => setSortOption(value as SortOption)}>
|
|
<SelectTrigger className="w-[120px]">
|
|
<SelectValue placeholder="정렬" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{SORT_OPTIONS.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
|
|
// ===== 테이블 합계 계산 =====
|
|
const totalAmount = useMemo(() => {
|
|
return filteredData.reduce((sum, item) => sum + item.amount, 0);
|
|
}, [filteredData]);
|
|
|
|
// ===== 테이블 하단 합계 행 =====
|
|
const tableFooter = (
|
|
<TableRow className="bg-muted/50 font-medium">
|
|
<TableCell className="text-center"></TableCell>
|
|
<TableCell colSpan={5} className="text-right font-bold">합계</TableCell>
|
|
<TableCell className="text-right font-bold">
|
|
{totalAmount.toLocaleString()}
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<IntegratedListTemplateV2
|
|
title="카드 내역 조회"
|
|
description="법인카드 사용 내역을 조회합니다"
|
|
icon={CreditCard}
|
|
headerActions={headerActions}
|
|
stats={statCards}
|
|
searchValue={searchQuery}
|
|
onSearchChange={setSearchQuery}
|
|
searchPlaceholder="카드, 카드명, 사용자, 가맹점명 검색..."
|
|
beforeTableContent={beforeTableContent}
|
|
tableHeaderActions={tableHeaderActions}
|
|
tableColumns={tableColumns}
|
|
tableFooter={tableFooter}
|
|
data={paginatedData}
|
|
totalCount={filteredData.length}
|
|
allData={filteredData}
|
|
selectedItems={selectedItems}
|
|
onToggleSelection={toggleSelection}
|
|
onToggleSelectAll={toggleSelectAll}
|
|
getItemId={(item: CardTransaction) => item.id}
|
|
renderTableRow={renderTableRow}
|
|
renderMobileCard={renderMobileCard}
|
|
showCheckbox={true}
|
|
showRowNumber={false}
|
|
pagination={{
|
|
currentPage,
|
|
totalPages,
|
|
totalItems: filteredData.length,
|
|
itemsPerPage,
|
|
onPageChange: setCurrentPage,
|
|
}}
|
|
/>
|
|
|
|
{/* 계정과목명 저장 확인 다이얼로그 */}
|
|
<Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>계정과목명 변경</DialogTitle>
|
|
<DialogDescription>
|
|
{selectedItems.size}개의 카드 사용 내역을{' '}
|
|
<span className="font-semibold text-orange-500">
|
|
{ACCOUNT_SUBJECT_OPTIONS.find(o => o.value === selectedAccountSubject)?.label}
|
|
</span>
|
|
(으)로 모두 변경하시겠습니까?
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
|
<Button variant="outline" onClick={() => setShowSaveDialog(false)}>
|
|
취소
|
|
</Button>
|
|
<Button
|
|
onClick={handleConfirmSaveAccountSubject}
|
|
className="bg-orange-500 hover:bg-orange-600"
|
|
>
|
|
확인
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 선택 필요 알림 다이얼로그 */}
|
|
<AlertDialog open={showSelectWarningDialog} onOpenChange={setShowSelectWarningDialog}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>항목 선택 필요</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
변경할 카드 사용 내역을 먼저 선택해주세요.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogAction onClick={() => setShowSelectWarningDialog(false)}>
|
|
확인
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</>
|
|
);
|
|
} |