feat: 신규 페이지 구현 및 HR/설정 기능 개선
신규 페이지: - 회계관리: 거래처, 예상비용, 청구서, 발주서 - 게시판: 공지사항, 자료실, 커뮤니티 - 고객센터: 문의/FAQ - 설정: 계정, 알림, 출퇴근, 팝업, 구독, 결제내역 - 리포트 (차트 시각화) - 개발자 테스트 URL 페이지 기능 개선: - HR 직원관리/휴가관리/카드관리 강화 - IntegratedListTemplateV2 확장 - AuthenticatedLayout 패딩 표준화 - 로그인 페이지 UI 개선 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
281
src/components/settings/PaymentHistoryManagement/index.tsx
Normal file
281
src/components/settings/PaymentHistoryManagement/index.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useCallback } from 'react';
|
||||
import { format, subMonths } from 'date-fns';
|
||||
import { Receipt, FileText } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { TableRow, TableCell } from '@/components/ui/table';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
IntegratedListTemplateV2,
|
||||
type TableColumn,
|
||||
} from '@/components/templates/IntegratedListTemplateV2';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
||||
import type { PaymentHistory, SortOption } from './types';
|
||||
import { SORT_OPTIONS } from './types';
|
||||
|
||||
// ===== Mock 데이터 생성 =====
|
||||
const generateMockData = (): PaymentHistory[] => {
|
||||
const baseDate = new Date('2025-12-01');
|
||||
|
||||
return Array.from({ length: 7 }, (_, i) => {
|
||||
const paymentDate = subMonths(baseDate, i);
|
||||
const periodStart = paymentDate;
|
||||
const periodEnd = subMonths(paymentDate, -1);
|
||||
// periodEnd에서 하루 전으로 설정 (예: 12-01 ~ 12-31)
|
||||
periodEnd.setDate(periodEnd.getDate() - 1);
|
||||
|
||||
return {
|
||||
id: `payment-${i + 1}`,
|
||||
paymentDate: format(paymentDate, 'yyyy-MM-dd'),
|
||||
subscriptionName: '프리미엄',
|
||||
paymentMethod: '국민은행 1234',
|
||||
subscriptionPeriod: {
|
||||
start: format(periodStart, 'yyyy-MM-dd'),
|
||||
end: format(periodEnd, 'yyyy-MM-dd'),
|
||||
},
|
||||
amount: 500000,
|
||||
canViewInvoice: true,
|
||||
createdAt: baseDate.toISOString(),
|
||||
updatedAt: baseDate.toISOString(),
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export function PaymentHistoryManagement() {
|
||||
// ===== 상태 관리 =====
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [sortOption, setSortOption] = useState<SortOption>('latest');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 20;
|
||||
|
||||
// Mock 데이터
|
||||
const [data] = useState<PaymentHistory[]>(() => generateMockData());
|
||||
|
||||
// 거래명세서 팝업 상태
|
||||
const [showInvoiceDialog, setShowInvoiceDialog] = useState(false);
|
||||
|
||||
// ===== 필터링된 데이터 =====
|
||||
const filteredData = useMemo(() => {
|
||||
let result = data.filter(item =>
|
||||
item.subscriptionName.includes(searchQuery) ||
|
||||
item.paymentMethod.includes(searchQuery) ||
|
||||
item.paymentDate.includes(searchQuery)
|
||||
);
|
||||
|
||||
// 정렬
|
||||
switch (sortOption) {
|
||||
case 'latest':
|
||||
result.sort((a, b) => new Date(b.paymentDate).getTime() - new Date(a.paymentDate).getTime());
|
||||
break;
|
||||
case 'oldest':
|
||||
result.sort((a, b) => new Date(a.paymentDate).getTime() - new Date(b.paymentDate).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, 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 handleViewInvoice = useCallback(() => {
|
||||
setShowInvoiceDialog(true);
|
||||
}, []);
|
||||
|
||||
// ===== 테이블 컬럼 =====
|
||||
const tableColumns: TableColumn[] = useMemo(() => [
|
||||
{ key: 'paymentDate', label: '결제일' },
|
||||
{ key: 'subscriptionName', label: '구독명' },
|
||||
{ key: 'paymentMethod', label: '결제 수단' },
|
||||
{ key: 'subscriptionPeriod', label: '구독 기간' },
|
||||
{ key: 'amount', label: '금액', className: 'text-right' },
|
||||
{ key: 'invoice', label: '거래명세서', className: 'text-center' },
|
||||
], []);
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
const renderTableRow = useCallback((item: PaymentHistory, index: number) => {
|
||||
const isLatest = index === 0; // 최신 항목 (초록색 버튼)
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="hover:bg-muted/50"
|
||||
>
|
||||
{/* 결제일 */}
|
||||
<TableCell>{item.paymentDate}</TableCell>
|
||||
{/* 구독명 */}
|
||||
<TableCell>{item.subscriptionName}</TableCell>
|
||||
{/* 결제 수단 */}
|
||||
<TableCell>{item.paymentMethod}</TableCell>
|
||||
{/* 구독 기간 */}
|
||||
<TableCell>
|
||||
{item.subscriptionPeriod.start} ~ {item.subscriptionPeriod.end}
|
||||
</TableCell>
|
||||
{/* 금액 */}
|
||||
<TableCell className="text-right font-medium">
|
||||
{item.amount.toLocaleString()}
|
||||
</TableCell>
|
||||
{/* 거래명세서 */}
|
||||
<TableCell className="text-center">
|
||||
<Button
|
||||
size="sm"
|
||||
variant={isLatest ? 'default' : 'secondary'}
|
||||
className={isLatest ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
|
||||
onClick={handleViewInvoice}
|
||||
>
|
||||
<FileText className="h-4 w-4 mr-1" />
|
||||
거래명세서
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}, [handleViewInvoice]);
|
||||
|
||||
// ===== 모바일 카드 렌더링 =====
|
||||
const renderMobileCard = useCallback((
|
||||
item: PaymentHistory,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
isSelected: boolean,
|
||||
onToggle: () => void
|
||||
) => {
|
||||
const isLatest = globalIndex === 1;
|
||||
|
||||
return (
|
||||
<ListMobileCard
|
||||
id={item.id}
|
||||
title={`${item.subscriptionName} - ${item.paymentDate}`}
|
||||
isSelected={false}
|
||||
onToggleSelection={() => {}}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<InfoField label="결제일" value={item.paymentDate} />
|
||||
<InfoField label="구독명" value={item.subscriptionName} />
|
||||
<InfoField label="결제 수단" value={item.paymentMethod} />
|
||||
<InfoField label="금액" value={`${item.amount.toLocaleString()}원`} />
|
||||
<div className="col-span-2">
|
||||
<InfoField
|
||||
label="구독 기간"
|
||||
value={`${item.subscriptionPeriod.start} ~ ${item.subscriptionPeriod.end}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
<Button
|
||||
size="sm"
|
||||
variant={isLatest ? 'default' : 'secondary'}
|
||||
className={isLatest ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
|
||||
onClick={handleViewInvoice}
|
||||
>
|
||||
<FileText className="h-4 w-4 mr-1" />
|
||||
거래명세서
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}, [handleViewInvoice]);
|
||||
|
||||
// ===== 테이블 헤더 액션 (주석처리: 필요시 활성화) =====
|
||||
// const tableHeaderActions = (
|
||||
// <div className="flex items-center gap-2 flex-wrap">
|
||||
// {/* 정렬 */}
|
||||
// <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>
|
||||
// );
|
||||
|
||||
return (
|
||||
<>
|
||||
<IntegratedListTemplateV2
|
||||
title="결제내역"
|
||||
description="결제 내역을 확인합니다"
|
||||
icon={Receipt}
|
||||
hideSearch={true}
|
||||
// ===== 검색/필터 (주석처리: 필요시 활성화) =====
|
||||
// searchValue={searchQuery}
|
||||
// onSearchChange={setSearchQuery}
|
||||
// searchPlaceholder="구독명, 결제 수단, 결제일 검색..."
|
||||
// tableHeaderActions={tableHeaderActions}
|
||||
tableColumns={tableColumns}
|
||||
data={paginatedData}
|
||||
totalCount={filteredData.length}
|
||||
allData={filteredData}
|
||||
selectedItems={new Set()}
|
||||
onToggleSelection={() => {}}
|
||||
onToggleSelectAll={() => {}}
|
||||
getItemId={(item: PaymentHistory) => item.id}
|
||||
renderTableRow={renderTableRow}
|
||||
renderMobileCard={renderMobileCard}
|
||||
showCheckbox={false}
|
||||
showRowNumber={false}
|
||||
pagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems: filteredData.length,
|
||||
itemsPerPage,
|
||||
onPageChange: setCurrentPage,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* ===== 거래명세서 안내 다이얼로그 ===== */}
|
||||
<Dialog open={showInvoiceDialog} onOpenChange={setShowInvoiceDialog}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<FileText className="h-5 w-5 text-blue-500" />
|
||||
거래명세서
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-left pt-2">
|
||||
MES 시스템의 문서 페이지에서 거래명세서를 확인할 수 있습니다.
|
||||
<br />
|
||||
<br />
|
||||
해당 기능은 MES 모듈에서 제공되며, 추후 연동 예정입니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button onClick={() => setShowInvoiceDialog(false)}>
|
||||
확인
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/components/settings/PaymentHistoryManagement/types.ts
Normal file
25
src/components/settings/PaymentHistoryManagement/types.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
// ===== 결제 내역 타입 =====
|
||||
export interface PaymentHistory {
|
||||
id: string;
|
||||
paymentDate: string; // 결제일
|
||||
subscriptionName: string; // 구독명
|
||||
paymentMethod: string; // 결제 수단
|
||||
subscriptionPeriod: { // 구독 기간
|
||||
start: string;
|
||||
end: string;
|
||||
};
|
||||
amount: number; // 금액
|
||||
canViewInvoice: boolean; // 거래명세서 조회 가능 여부
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
// ===== 정렬 옵션 =====
|
||||
export type SortOption = 'latest' | 'oldest' | 'amountHigh' | 'amountLow';
|
||||
|
||||
export const SORT_OPTIONS: { value: SortOption; label: string }[] = [
|
||||
{ value: 'latest', label: '최신순' },
|
||||
{ value: 'oldest', label: '오래된순' },
|
||||
{ value: 'amountHigh', label: '금액 높은순' },
|
||||
{ value: 'amountLow', label: '금액 낮은순' },
|
||||
];
|
||||
Reference in New Issue
Block a user