feat(WEB): UniversalListPage 전체 마이그레이션 및 코드 정리
- UniversalListPage/IntegratedListTemplateV2 컴포넌트 기능 개선 - 회계, HR, 건설, 고객센터, 결재, 설정 등 전체 리스트 컴포넌트 마이그레이션 - 테스트 페이지 및 미사용 API 라우트 정리 (board-test, order-management-test 등) - 미들웨어 토큰 갱신 로직 개선 - AuthenticatedLayout 구조 개선 - claudedocs 문서 업데이트 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
@@ -1,5 +1,13 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 계좌관리 - UniversalListPage 마이그레이션
|
||||
*
|
||||
* 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
|
||||
* - 클라이언트 사이드 필터링 (전체 데이터 로드 후 필터)
|
||||
* - 삭제/일괄삭제 다이얼로그
|
||||
*/
|
||||
|
||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
@@ -25,9 +33,12 @@ import {
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import { TableRow, TableCell } from '@/components/ui/table';
|
||||
import {
|
||||
IntegratedListTemplateV2,
|
||||
type TableColumn,
|
||||
} from '@/components/templates/IntegratedListTemplateV2';
|
||||
UniversalListPage,
|
||||
type UniversalListConfig,
|
||||
type SelectionHandlers,
|
||||
type RowClickHandlers,
|
||||
type ListParams,
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
||||
import type { Account } from './types';
|
||||
import {
|
||||
@@ -58,83 +69,16 @@ export function AccountManagement() {
|
||||
const router = useRouter();
|
||||
|
||||
// ===== 상태 관리 =====
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 20;
|
||||
|
||||
// 로딩 상태
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
// 삭제 다이얼로그
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
|
||||
const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
|
||||
|
||||
// API 데이터
|
||||
const [data, setData] = useState<Account[]>([]);
|
||||
|
||||
// ===== 데이터 로드 =====
|
||||
const loadData = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await getBankAccounts();
|
||||
if (result.success && result.data) {
|
||||
setData(result.data);
|
||||
} else {
|
||||
toast.error(result.error || '계좌 목록을 불러오는데 실패했습니다.');
|
||||
}
|
||||
} catch {
|
||||
toast.error('서버 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 초기 로드
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
// ===== 체크박스 핸들러 =====
|
||||
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 filteredData = useMemo(() => {
|
||||
if (!searchQuery) return data;
|
||||
|
||||
const search = searchQuery.toLowerCase();
|
||||
return data.filter(item =>
|
||||
item.accountName.toLowerCase().includes(search) ||
|
||||
item.accountNumber.includes(search) ||
|
||||
item.accountHolder.toLowerCase().includes(search) ||
|
||||
BANK_LABELS[item.bankCode]?.toLowerCase().includes(search)
|
||||
);
|
||||
}, [data, searchQuery]);
|
||||
|
||||
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 toggleSelectAll = useCallback(() => {
|
||||
if (selectedItems.size === filteredData.length && filteredData.length > 0) {
|
||||
setSelectedItems(new Set());
|
||||
} else {
|
||||
setSelectedItems(new Set(filteredData.map(item => String(item.id))));
|
||||
}
|
||||
}, [selectedItems.size, filteredData]);
|
||||
const [bulkDeleteIds, setBulkDeleteIds] = useState<string[]>([]);
|
||||
|
||||
// ===== 액션 핸들러 =====
|
||||
const handleRowClick = useCallback((item: Account) => {
|
||||
@@ -158,12 +102,8 @@ export function AccountManagement() {
|
||||
const result = await deleteBankAccount(Number(deleteTargetId));
|
||||
if (result.success) {
|
||||
toast.success('계좌가 삭제되었습니다.');
|
||||
setData(prev => prev.filter(item => String(item.id) !== deleteTargetId));
|
||||
setSelectedItems(prev => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.delete(deleteTargetId);
|
||||
return newSet;
|
||||
});
|
||||
// 페이지 새로고침으로 데이터 갱신
|
||||
window.location.reload();
|
||||
} else {
|
||||
toast.error(result.error || '계좌 삭제에 실패했습니다.');
|
||||
}
|
||||
@@ -176,14 +116,15 @@ export function AccountManagement() {
|
||||
}
|
||||
}, [deleteTargetId]);
|
||||
|
||||
const handleBulkDelete = useCallback(() => {
|
||||
if (selectedItems.size > 0) {
|
||||
const handleBulkDelete = useCallback((selectedIds: string[]) => {
|
||||
if (selectedIds.length > 0) {
|
||||
setBulkDeleteIds(selectedIds);
|
||||
setShowBulkDeleteDialog(true);
|
||||
}
|
||||
}, [selectedItems.size]);
|
||||
}, []);
|
||||
|
||||
const handleConfirmBulkDelete = useCallback(async () => {
|
||||
const ids = Array.from(selectedItems).map(id => Number(id));
|
||||
const ids = bulkDeleteIds.map(id => Number(id));
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
const result = await deleteBankAccounts(ids);
|
||||
@@ -192,8 +133,8 @@ export function AccountManagement() {
|
||||
if (result.error) {
|
||||
toast.warning(result.error);
|
||||
}
|
||||
setData(prev => prev.filter(item => !selectedItems.has(String(item.id))));
|
||||
setSelectedItems(new Set());
|
||||
// 페이지 새로고침으로 데이터 갱신
|
||||
window.location.reload();
|
||||
} else {
|
||||
toast.error(result.error || '계좌 삭제에 실패했습니다.');
|
||||
}
|
||||
@@ -202,174 +143,210 @@ export function AccountManagement() {
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
setShowBulkDeleteDialog(false);
|
||||
setBulkDeleteIds([]);
|
||||
}
|
||||
}, [selectedItems]);
|
||||
}, [bulkDeleteIds]);
|
||||
|
||||
const handleCreate = useCallback(() => {
|
||||
router.push('/ko/settings/accounts/new');
|
||||
}, [router]);
|
||||
|
||||
// ===== 테이블 컬럼 =====
|
||||
const tableColumns: TableColumn[] = useMemo(() => [
|
||||
{ key: 'no', label: '번호', className: 'text-center w-[60px]' },
|
||||
{ key: 'bank', label: '은행', className: 'min-w-[100px]' },
|
||||
{ key: 'accountNumber', label: '계좌번호', className: 'min-w-[160px]' },
|
||||
{ key: 'accountName', label: '계좌명', className: 'min-w-[120px]' },
|
||||
{ key: 'accountHolder', label: '예금주', className: 'min-w-[80px]' },
|
||||
{ key: 'status', label: '상태', className: 'min-w-[80px]' },
|
||||
{ key: 'actions', label: '작업', className: 'w-[100px] text-right' },
|
||||
], []);
|
||||
// ===== UniversalListPage Config =====
|
||||
const config: UniversalListConfig<Account> = useMemo(
|
||||
() => ({
|
||||
// 페이지 기본 정보
|
||||
title: '계좌관리',
|
||||
description: '계좌 목록을 관리합니다',
|
||||
icon: Landmark,
|
||||
basePath: '/settings/accounts',
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
const renderTableRow = useCallback((item: Account, index: number, globalIndex: number) => {
|
||||
const itemIdStr = String(item.id);
|
||||
const isSelected = selectedItems.has(itemIdStr);
|
||||
// ID 추출
|
||||
idField: 'id',
|
||||
getItemId: (item: Account) => String(item.id),
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="hover:bg-muted/50 cursor-pointer"
|
||||
onClick={() => handleRowClick(item)}
|
||||
>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(itemIdStr)} />
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground text-center">{globalIndex}</TableCell>
|
||||
<TableCell>{BANK_LABELS[item.bankCode] || item.bankCode}</TableCell>
|
||||
<TableCell className="font-mono">{maskAccountNumber(item.accountNumber)}</TableCell>
|
||||
<TableCell>{item.accountName}</TableCell>
|
||||
<TableCell>{item.accountHolder}</TableCell>
|
||||
<TableCell>
|
||||
<Badge className={ACCOUNT_STATUS_COLORS[item.status]}>
|
||||
{ACCOUNT_STATUS_LABELS[item.status]}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
|
||||
{isSelected && (
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(item)}
|
||||
title="수정"
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDeleteClick(itemIdStr)}
|
||||
title="삭제"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}, [selectedItems, toggleSelection, handleRowClick, handleEdit, handleDeleteClick]);
|
||||
// API 액션
|
||||
actions: {
|
||||
getList: async (params?: ListParams) => {
|
||||
try {
|
||||
const result = await getBankAccounts();
|
||||
if (result.success && result.data) {
|
||||
// 클라이언트 사이드 검색 필터링
|
||||
let filteredData = result.data;
|
||||
if (params?.search) {
|
||||
const search = params.search.toLowerCase();
|
||||
filteredData = result.data.filter(item =>
|
||||
item.accountName.toLowerCase().includes(search) ||
|
||||
item.accountNumber.includes(search) ||
|
||||
item.accountHolder.toLowerCase().includes(search) ||
|
||||
BANK_LABELS[item.bankCode]?.toLowerCase().includes(search)
|
||||
);
|
||||
}
|
||||
|
||||
// ===== 모바일 카드 렌더링 =====
|
||||
const renderMobileCard = useCallback((
|
||||
item: Account,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
isSelected: boolean,
|
||||
onToggle: () => void
|
||||
) => {
|
||||
return (
|
||||
<ListMobileCard
|
||||
id={String(item.id)}
|
||||
title={item.accountName}
|
||||
headerBadges={
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
#{globalIndex}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{BANK_LABELS[item.bankCode] || item.bankCode}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
statusBadge={
|
||||
<Badge className={ACCOUNT_STATUS_COLORS[item.status]}>
|
||||
{ACCOUNT_STATUS_LABELS[item.status]}
|
||||
</Badge>
|
||||
}
|
||||
isSelected={isSelected}
|
||||
onToggleSelection={onToggle}
|
||||
onCardClick={() => handleRowClick(item)}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||
<InfoField label="계좌번호" value={maskAccountNumber(item.accountNumber)} />
|
||||
<InfoField label="예금주" value={item.accountHolder} />
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
isSelected ? (
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button
|
||||
variant="default"
|
||||
size="default"
|
||||
className="flex-1 min-w-[100px] h-11"
|
||||
onClick={(e) => { e.stopPropagation(); handleEdit(item); }}
|
||||
>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="default"
|
||||
className="flex-1 min-w-[100px] h-11 border-red-200 text-red-600 hover:border-red-300 bg-transparent"
|
||||
onClick={(e) => { e.stopPropagation(); handleDeleteClick(String(item.id)); }}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
}, [handleRowClick, handleEdit, handleDeleteClick]);
|
||||
return {
|
||||
success: true,
|
||||
data: filteredData,
|
||||
totalCount: filteredData.length,
|
||||
totalPages: Math.ceil(filteredData.length / itemsPerPage),
|
||||
};
|
||||
}
|
||||
return { success: false, error: result.error || '계좌 목록을 불러오는데 실패했습니다.' };
|
||||
} catch {
|
||||
return { success: false, error: '서버 오류가 발생했습니다.' };
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// ===== 헤더 액션 (카드관리와 동일한 패턴) =====
|
||||
const headerActions = (
|
||||
<Button className="ml-auto" onClick={handleCreate}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
계좌 등록
|
||||
</Button>
|
||||
// 테이블 컬럼
|
||||
columns: [
|
||||
{ key: 'no', label: '번호', className: 'text-center w-[60px]' },
|
||||
{ key: 'bank', label: '은행', className: 'min-w-[100px]' },
|
||||
{ key: 'accountNumber', label: '계좌번호', className: 'min-w-[160px]' },
|
||||
{ key: 'accountName', label: '계좌명', className: 'min-w-[120px]' },
|
||||
{ key: 'accountHolder', label: '예금주', className: 'min-w-[80px]' },
|
||||
{ key: 'status', label: '상태', className: 'min-w-[80px]' },
|
||||
{ key: 'actions', label: '작업', className: 'w-[100px] text-right' },
|
||||
],
|
||||
|
||||
// 클라이언트 사이드 필터링
|
||||
clientSideFiltering: true,
|
||||
itemsPerPage,
|
||||
|
||||
// 검색
|
||||
searchPlaceholder: '은행명, 계좌번호, 계좌명, 예금주 검색...',
|
||||
|
||||
// 헤더 액션
|
||||
headerActions: () => (
|
||||
<Button className="ml-auto" onClick={handleCreate}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
계좌 등록
|
||||
</Button>
|
||||
),
|
||||
|
||||
// 일괄 삭제 핸들러
|
||||
onBulkDelete: handleBulkDelete,
|
||||
|
||||
// 테이블 행 렌더링
|
||||
renderTableRow: (
|
||||
item: Account,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Account>
|
||||
) => {
|
||||
return (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="hover:bg-muted/50 cursor-pointer"
|
||||
onClick={() => handleRowClick(item)}
|
||||
>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox checked={handlers.isSelected} onCheckedChange={handlers.onToggle} />
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground text-center">{globalIndex}</TableCell>
|
||||
<TableCell>{BANK_LABELS[item.bankCode] || item.bankCode}</TableCell>
|
||||
<TableCell className="font-mono">{maskAccountNumber(item.accountNumber)}</TableCell>
|
||||
<TableCell>{item.accountName}</TableCell>
|
||||
<TableCell>{item.accountHolder}</TableCell>
|
||||
<TableCell>
|
||||
<Badge className={ACCOUNT_STATUS_COLORS[item.status]}>
|
||||
{ACCOUNT_STATUS_LABELS[item.status]}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
|
||||
{handlers.isSelected && (
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(item)}
|
||||
title="수정"
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDeleteClick(String(item.id))}
|
||||
title="삭제"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
},
|
||||
|
||||
// 모바일 카드 렌더링
|
||||
renderMobileCard: (
|
||||
item: Account,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Account>
|
||||
) => {
|
||||
return (
|
||||
<ListMobileCard
|
||||
key={item.id}
|
||||
id={String(item.id)}
|
||||
title={item.accountName}
|
||||
headerBadges={
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
#{globalIndex}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{BANK_LABELS[item.bankCode] || item.bankCode}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
statusBadge={
|
||||
<Badge className={ACCOUNT_STATUS_COLORS[item.status]}>
|
||||
{ACCOUNT_STATUS_LABELS[item.status]}
|
||||
</Badge>
|
||||
}
|
||||
isSelected={handlers.isSelected}
|
||||
onToggleSelection={handlers.onToggle}
|
||||
onClick={() => handleRowClick(item)}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||
<InfoField label="계좌번호" value={maskAccountNumber(item.accountNumber)} />
|
||||
<InfoField label="예금주" value={item.accountHolder} />
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
handlers.isSelected ? (
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button
|
||||
variant="default"
|
||||
size="default"
|
||||
className="flex-1 min-w-[100px] h-11"
|
||||
onClick={(e) => { e.stopPropagation(); handleEdit(item); }}
|
||||
>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="default"
|
||||
className="flex-1 min-w-[100px] h-11 border-red-200 text-red-600 hover:border-red-300 bg-transparent"
|
||||
onClick={(e) => { e.stopPropagation(); handleDeleteClick(String(item.id)); }}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
}),
|
||||
[handleCreate, handleRowClick, handleEdit, handleDeleteClick, handleBulkDelete]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<IntegratedListTemplateV2
|
||||
title="계좌관리"
|
||||
description="계좌 목록을 관리합니다"
|
||||
icon={Landmark}
|
||||
headerActions={headerActions}
|
||||
searchValue={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
searchPlaceholder="은행명, 계좌번호, 계좌명, 예금주 검색..."
|
||||
tableColumns={tableColumns}
|
||||
data={paginatedData}
|
||||
totalCount={filteredData.length}
|
||||
allData={filteredData}
|
||||
selectedItems={selectedItems}
|
||||
onToggleSelection={toggleSelection}
|
||||
onToggleSelectAll={toggleSelectAll}
|
||||
getItemId={(item: Account) => String(item.id)}
|
||||
renderTableRow={renderTableRow}
|
||||
renderMobileCard={renderMobileCard}
|
||||
pagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems: filteredData.length,
|
||||
itemsPerPage,
|
||||
onPageChange: setCurrentPage,
|
||||
}}
|
||||
/>
|
||||
<UniversalListPage config={config} />
|
||||
|
||||
{/* 단일 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
||||
@@ -408,7 +385,7 @@ export function AccountManagement() {
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>계좌 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
선택하신 {selectedItems.size}개의 계좌를 정말 삭제하시겠습니까?
|
||||
선택하신 {bulkDeleteIds.length}개의 계좌를 정말 삭제하시겠습니까?
|
||||
<br />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
삭제된 계좌의 과거 사용 내역은 보존됩니다.
|
||||
@@ -434,4 +411,4 @@ export function AccountManagement() {
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,13 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 결제내역 - UniversalListPage 마이그레이션
|
||||
*
|
||||
* 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
|
||||
* - 서버 사이드 페이지네이션 (getPayments API)
|
||||
* - 검색 숨김, 체크박스 숨김
|
||||
*/
|
||||
|
||||
import { useState, useMemo, useCallback } from 'react';
|
||||
import { Receipt, FileText } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -13,9 +21,12 @@ import {
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
IntegratedListTemplateV2,
|
||||
type TableColumn,
|
||||
} from '@/components/templates/IntegratedListTemplateV2';
|
||||
UniversalListPage,
|
||||
type UniversalListConfig,
|
||||
type SelectionHandlers,
|
||||
type RowClickHandlers,
|
||||
type ListParams,
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
||||
import { getPayments } from './actions';
|
||||
import type { PaymentHistory, SortOption } from './types';
|
||||
@@ -37,209 +48,184 @@ export function PaymentHistoryClient({
|
||||
initialPagination,
|
||||
}: PaymentHistoryClientProps) {
|
||||
// ===== 상태 관리 =====
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [sortOption, setSortOption] = useState<SortOption>('latest');
|
||||
const [currentPage, setCurrentPage] = useState(initialPagination.currentPage);
|
||||
const [data, setData] = useState<PaymentHistory[]>(initialData);
|
||||
const [totalPages, setTotalPages] = useState(initialPagination.lastPage);
|
||||
const [totalItems, setTotalItems] = useState(initialPagination.total);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const itemsPerPage = initialPagination.perPage;
|
||||
|
||||
// 거래명세서 팝업 상태
|
||||
const [showInvoiceDialog, setShowInvoiceDialog] = useState(false);
|
||||
const [selectedPaymentId, setSelectedPaymentId] = useState<string | null>(null);
|
||||
|
||||
// ===== 페이지 변경 핸들러 =====
|
||||
const handlePageChange = useCallback(async (page: number) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await getPayments({ page, perPage: itemsPerPage });
|
||||
if (result.success) {
|
||||
setData(result.data);
|
||||
setCurrentPage(result.pagination.currentPage);
|
||||
setTotalPages(result.pagination.lastPage);
|
||||
setTotalItems(result.pagination.total);
|
||||
}
|
||||
} catch (error) {
|
||||
if (isNextRedirectError(error)) throw error;
|
||||
console.error('[PaymentHistoryClient] Page change error:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [itemsPerPage]);
|
||||
|
||||
// ===== 필터링된 데이터 (클라이언트 사이드 필터링) =====
|
||||
const filteredData = useMemo(() => {
|
||||
let result = [...data];
|
||||
|
||||
// 검색 필터 (클라이언트 사이드)
|
||||
if (searchQuery) {
|
||||
result = result.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 handleViewInvoice = useCallback((paymentId: string) => {
|
||||
setSelectedPaymentId(paymentId);
|
||||
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' },
|
||||
], []);
|
||||
// ===== UniversalListPage Config =====
|
||||
const config: UniversalListConfig<PaymentHistory> = useMemo(
|
||||
() => ({
|
||||
// 페이지 기본 정보
|
||||
title: '결제내역',
|
||||
description: '결제 내역을 확인합니다',
|
||||
icon: Receipt,
|
||||
basePath: '/settings/payment-history',
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
const renderTableRow = useCallback((item: PaymentHistory, index: number) => {
|
||||
const isLatest = index === 0; // 최신 항목 (초록색 버튼)
|
||||
// ID 추출
|
||||
idField: 'id',
|
||||
|
||||
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
|
||||
? `${item.subscriptionPeriod.start} ~ ${item.subscriptionPeriod.end}`
|
||||
: '-'}
|
||||
</TableCell>
|
||||
{/* 금액 */}
|
||||
<TableCell className="text-right font-medium">
|
||||
{item.amount.toLocaleString()}원
|
||||
</TableCell>
|
||||
{/* 거래명세서 */}
|
||||
<TableCell className="text-center">
|
||||
{item.canViewInvoice ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant={isLatest ? 'default' : 'secondary'}
|
||||
className={isLatest ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
|
||||
onClick={() => handleViewInvoice(item.id)}
|
||||
>
|
||||
<FileText className="h-4 w-4 mr-1" />
|
||||
거래명세서
|
||||
</Button>
|
||||
) : (
|
||||
<span className="text-muted-foreground text-sm">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}, [handleViewInvoice]);
|
||||
// API 액션 (서버 사이드 페이지네이션)
|
||||
actions: {
|
||||
getList: async (params?: ListParams) => {
|
||||
try {
|
||||
const result = await getPayments({
|
||||
page: params?.page || 1,
|
||||
perPage: itemsPerPage,
|
||||
});
|
||||
|
||||
// ===== 모바일 카드 렌더링 =====
|
||||
const renderMobileCard = useCallback((
|
||||
item: PaymentHistory,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
isSelected: boolean,
|
||||
onToggle: () => void
|
||||
) => {
|
||||
const isLatest = globalIndex === 1;
|
||||
if (result.success) {
|
||||
return {
|
||||
success: true,
|
||||
data: result.data,
|
||||
totalCount: result.pagination.total,
|
||||
totalPages: result.pagination.lastPage,
|
||||
};
|
||||
}
|
||||
return { success: false, error: '데이터 로드 중 오류가 발생했습니다.' };
|
||||
} catch (error) {
|
||||
if (isNextRedirectError(error)) throw error;
|
||||
return { success: false, error: '데이터 로드 중 오류가 발생했습니다.' };
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
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
|
||||
? `${item.subscriptionPeriod.start} ~ ${item.subscriptionPeriod.end}`
|
||||
: '-'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
item.canViewInvoice ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant={isLatest ? 'default' : 'secondary'}
|
||||
className={isLatest ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
|
||||
onClick={() => handleViewInvoice(item.id)}
|
||||
>
|
||||
<FileText className="h-4 w-4 mr-1" />
|
||||
거래명세서
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
);
|
||||
}, [handleViewInvoice]);
|
||||
// 테이블 컬럼
|
||||
columns: [
|
||||
{ key: 'paymentDate', label: '결제일' },
|
||||
{ key: 'subscriptionName', label: '구독명' },
|
||||
{ key: 'paymentMethod', label: '결제 수단' },
|
||||
{ key: 'subscriptionPeriod', label: '구독 기간' },
|
||||
{ key: 'amount', label: '금액', className: 'text-right' },
|
||||
{ key: 'invoice', label: '거래명세서', className: 'text-center' },
|
||||
],
|
||||
|
||||
// 서버 사이드 페이지네이션
|
||||
clientSideFiltering: false,
|
||||
itemsPerPage,
|
||||
|
||||
// 검색 숨김
|
||||
hideSearch: true,
|
||||
|
||||
// 체크박스/번호 숨김
|
||||
showCheckbox: false,
|
||||
showRowNumber: false,
|
||||
|
||||
// 테이블 행 렌더링
|
||||
renderTableRow: (
|
||||
item: PaymentHistory,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<PaymentHistory>
|
||||
) => {
|
||||
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
|
||||
? `${item.subscriptionPeriod.start} ~ ${item.subscriptionPeriod.end}`
|
||||
: '-'}
|
||||
</TableCell>
|
||||
{/* 금액 */}
|
||||
<TableCell className="text-right font-medium">
|
||||
{item.amount.toLocaleString()}원
|
||||
</TableCell>
|
||||
{/* 거래명세서 */}
|
||||
<TableCell className="text-center">
|
||||
{item.canViewInvoice ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant={isLatest ? 'default' : 'secondary'}
|
||||
className={isLatest ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
|
||||
onClick={() => handleViewInvoice(item.id)}
|
||||
>
|
||||
<FileText className="h-4 w-4 mr-1" />
|
||||
거래명세서
|
||||
</Button>
|
||||
) : (
|
||||
<span className="text-muted-foreground text-sm">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
},
|
||||
|
||||
// 모바일 카드 렌더링
|
||||
renderMobileCard: (
|
||||
item: PaymentHistory,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<PaymentHistory>
|
||||
) => {
|
||||
const isLatest = globalIndex === 1;
|
||||
|
||||
return (
|
||||
<ListMobileCard
|
||||
key={item.id}
|
||||
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
|
||||
? `${item.subscriptionPeriod.start} ~ ${item.subscriptionPeriod.end}`
|
||||
: '-'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
item.canViewInvoice ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant={isLatest ? 'default' : 'secondary'}
|
||||
className={isLatest ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
|
||||
onClick={() => handleViewInvoice(item.id)}
|
||||
>
|
||||
<FileText className="h-4 w-4 mr-1" />
|
||||
거래명세서
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
}),
|
||||
[itemsPerPage, handleViewInvoice]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<IntegratedListTemplateV2
|
||||
title="결제내역"
|
||||
description="결제 내역을 확인합니다"
|
||||
icon={Receipt}
|
||||
hideSearch={true}
|
||||
tableColumns={tableColumns}
|
||||
data={filteredData}
|
||||
totalCount={totalItems}
|
||||
allData={filteredData}
|
||||
selectedItems={new Set()}
|
||||
onToggleSelection={() => {}}
|
||||
onToggleSelectAll={() => {}}
|
||||
getItemId={(item: PaymentHistory) => item.id}
|
||||
renderTableRow={renderTableRow}
|
||||
renderMobileCard={renderMobileCard}
|
||||
showCheckbox={false}
|
||||
showRowNumber={false}
|
||||
pagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems,
|
||||
itemsPerPage,
|
||||
onPageChange: handlePageChange,
|
||||
}}
|
||||
/>
|
||||
<UniversalListPage config={config} initialData={initialData} />
|
||||
|
||||
{/* ===== 거래명세서 안내 다이얼로그 ===== */}
|
||||
<Dialog open={showInvoiceDialog} onOpenChange={setShowInvoiceDialog}>
|
||||
|
||||
@@ -13,9 +13,10 @@ import {
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
IntegratedListTemplateV2,
|
||||
UniversalListPage,
|
||||
type UniversalListConfig,
|
||||
type TableColumn,
|
||||
} from '@/components/templates/IntegratedListTemplateV2';
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
||||
import type { PaymentHistory, SortOption } from './types';
|
||||
|
||||
@@ -95,7 +96,12 @@ export function PaymentHistoryManagement({
|
||||
], []);
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
const renderTableRow = useCallback((item: PaymentHistory, index: number) => {
|
||||
const renderTableRow = useCallback((
|
||||
item: PaymentHistory,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: { isSelected: boolean; onToggle: () => void; onRowClick?: () => void }
|
||||
) => {
|
||||
const isLatest = index === 0; // 최신 항목 (초록색 버튼)
|
||||
|
||||
return (
|
||||
@@ -138,8 +144,7 @@ export function PaymentHistoryManagement({
|
||||
item: PaymentHistory,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
isSelected: boolean,
|
||||
onToggle: () => void
|
||||
handlers: { isSelected: boolean; onToggle: () => void; onRowClick?: () => void }
|
||||
) => {
|
||||
const isLatest = globalIndex === 1;
|
||||
|
||||
@@ -197,40 +202,37 @@ export function PaymentHistoryManagement({
|
||||
// </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,
|
||||
}}
|
||||
/>
|
||||
// ===== UniversalListPage 설정 =====
|
||||
const paymentHistoryConfig: UniversalListConfig<PaymentHistory> = {
|
||||
title: '결제내역',
|
||||
description: '결제 내역을 확인합니다',
|
||||
icon: Receipt,
|
||||
basePath: '/payment-history',
|
||||
|
||||
{/* ===== 거래명세서 안내 다이얼로그 ===== */}
|
||||
idField: 'id',
|
||||
|
||||
actions: {
|
||||
getList: async () => ({
|
||||
success: true,
|
||||
data: data,
|
||||
totalCount: data.length,
|
||||
}),
|
||||
},
|
||||
|
||||
columns: tableColumns,
|
||||
|
||||
hideSearch: true,
|
||||
showCheckbox: false,
|
||||
showRowNumber: false,
|
||||
|
||||
itemsPerPage,
|
||||
|
||||
clientSideFiltering: true,
|
||||
|
||||
renderTableRow,
|
||||
renderMobileCard,
|
||||
|
||||
renderDialogs: () => (
|
||||
<Dialog open={showInvoiceDialog} onOpenChange={setShowInvoiceDialog}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
@@ -252,6 +254,21 @@ export function PaymentHistoryManagement({
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<UniversalListPage<PaymentHistory>
|
||||
config={paymentHistoryConfig}
|
||||
initialData={filteredData}
|
||||
initialTotalCount={filteredData.length}
|
||||
externalPagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems: filteredData.length,
|
||||
itemsPerPage,
|
||||
onPageChange: setCurrentPage,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -20,11 +20,12 @@ import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { TableRow, TableCell } from '@/components/ui/table';
|
||||
import {
|
||||
IntegratedListTemplateV2,
|
||||
UniversalListPage,
|
||||
type UniversalListConfig,
|
||||
type TableColumn,
|
||||
type StatCard,
|
||||
type TabOption,
|
||||
} from '@/components/templates/IntegratedListTemplateV2';
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
||||
import {
|
||||
AlertDialog,
|
||||
@@ -46,8 +47,6 @@ export function PermissionManagement() {
|
||||
// ===== 상태 관리 =====
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 20;
|
||||
|
||||
// 역할 데이터
|
||||
const [roles, setRoles] = useState<Role[]>([]);
|
||||
@@ -136,13 +135,6 @@ export function PermissionManagement() {
|
||||
return result;
|
||||
}, [roles, searchQuery, activeTab]);
|
||||
|
||||
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 handleAdd = () => {
|
||||
router.push('/settings/permissions/new');
|
||||
@@ -272,8 +264,13 @@ export function PermissionManagement() {
|
||||
}, [selectedItems.size]);
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
const renderTableRow = useCallback((item: Role, index: number, globalIndex: number) => {
|
||||
const isSelected = selectedItems.has(item.id.toString());
|
||||
const renderTableRow = useCallback((
|
||||
item: Role,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: { isSelected: boolean; onToggle: () => void; onRowClick?: () => void }
|
||||
) => {
|
||||
const { isSelected, onToggle } = handlers;
|
||||
const hasSelection = selectedItems.size > 0;
|
||||
|
||||
return (
|
||||
@@ -285,7 +282,7 @@ export function PermissionManagement() {
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => toggleSelection(item.id.toString())}
|
||||
onCheckedChange={onToggle}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-center text-muted-foreground">
|
||||
@@ -341,9 +338,9 @@ export function PermissionManagement() {
|
||||
item: Role,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
isSelected: boolean,
|
||||
onToggle: () => void
|
||||
handlers: { isSelected: boolean; onToggle: () => void; onRowClick?: () => void }
|
||||
) => {
|
||||
const { isSelected, onToggle } = handlers;
|
||||
return (
|
||||
<ListMobileCard
|
||||
id={item.id.toString()}
|
||||
@@ -386,12 +383,17 @@ export function PermissionManagement() {
|
||||
}, []);
|
||||
|
||||
// ===== 헤더 액션 =====
|
||||
const headerActions = (
|
||||
const renderHeaderActions = useCallback(({ selectedItems: selItems }: {
|
||||
onCreate?: () => void;
|
||||
selectedItems: Set<string>;
|
||||
onClearSelection: () => void;
|
||||
onRefresh: () => void;
|
||||
}) => (
|
||||
<div className="flex items-center gap-2 flex-wrap ml-auto">
|
||||
{selectedItems.size > 0 && (
|
||||
{selItems.size > 0 && (
|
||||
<Button variant="destructive" onClick={handleBulkDelete}>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
선택 삭제 ({selectedItems.size})
|
||||
선택 삭제 ({selItems.size})
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={handleAdd}>
|
||||
@@ -399,7 +401,7 @@ export function PermissionManagement() {
|
||||
역할 등록
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
), [handleBulkDelete, handleAdd]);
|
||||
|
||||
// ===== 로딩/에러 상태 =====
|
||||
if (isLoading) {
|
||||
@@ -415,42 +417,56 @@ export function PermissionManagement() {
|
||||
);
|
||||
}
|
||||
|
||||
// ===== 목록 화면 =====
|
||||
return (
|
||||
<>
|
||||
<IntegratedListTemplateV2
|
||||
title="권한관리"
|
||||
description="역할 기반 권한을 관리합니다"
|
||||
icon={Shield}
|
||||
headerActions={headerActions}
|
||||
stats={statCards}
|
||||
searchValue={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
searchPlaceholder="역할명, 설명 검색..."
|
||||
tabs={tabs}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
tableColumns={tableColumns}
|
||||
data={paginatedData}
|
||||
totalCount={filteredData.length}
|
||||
allData={filteredData}
|
||||
selectedItems={selectedItems}
|
||||
onToggleSelection={toggleSelection}
|
||||
onToggleSelectAll={toggleSelectAll}
|
||||
getItemId={(item: Role) => item.id.toString()}
|
||||
onBulkDelete={handleBulkDelete}
|
||||
renderTableRow={renderTableRow}
|
||||
renderMobileCard={renderMobileCard}
|
||||
pagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems: filteredData.length,
|
||||
itemsPerPage,
|
||||
onPageChange: setCurrentPage,
|
||||
}}
|
||||
/>
|
||||
// ===== UniversalListPage 설정 =====
|
||||
const permissionConfig: UniversalListConfig<Role> = {
|
||||
title: '권한관리',
|
||||
description: '역할 기반 권한을 관리합니다',
|
||||
icon: Shield,
|
||||
basePath: '/settings/permissions',
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
idField: 'id',
|
||||
|
||||
actions: {
|
||||
getList: async () => ({
|
||||
success: true,
|
||||
data: roles,
|
||||
totalCount: roles.length,
|
||||
}),
|
||||
},
|
||||
|
||||
columns: tableColumns,
|
||||
|
||||
tabs: tabs,
|
||||
defaultTab: activeTab,
|
||||
|
||||
stats: statCards,
|
||||
|
||||
searchPlaceholder: '역할명, 설명 검색...',
|
||||
|
||||
itemsPerPage: 20,
|
||||
|
||||
clientSideFiltering: true,
|
||||
|
||||
searchFilter: (item, searchValue) => {
|
||||
return (
|
||||
item.name.toLowerCase().includes(searchValue.toLowerCase()) ||
|
||||
(item.description?.toLowerCase().includes(searchValue.toLowerCase()) ?? false)
|
||||
);
|
||||
},
|
||||
|
||||
tabFilter: (item, tabValue) => {
|
||||
if (tabValue === 'all') return true;
|
||||
if (tabValue === 'visible') return !item.is_hidden;
|
||||
if (tabValue === 'hidden') return item.is_hidden;
|
||||
return true;
|
||||
},
|
||||
|
||||
headerActions: renderHeaderActions,
|
||||
|
||||
renderTableRow,
|
||||
renderMobileCard,
|
||||
|
||||
renderDialogs: () => (
|
||||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
@@ -485,6 +501,27 @@ export function PermissionManagement() {
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
),
|
||||
};
|
||||
|
||||
// ===== 목록 화면 =====
|
||||
return (
|
||||
<UniversalListPage<Role>
|
||||
config={permissionConfig}
|
||||
initialData={roles}
|
||||
initialTotalCount={roles.length}
|
||||
externalSelection={{
|
||||
selectedItems,
|
||||
setSelectedItems,
|
||||
}}
|
||||
externalTab={{
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
}}
|
||||
externalSearch={{
|
||||
searchValue: searchQuery,
|
||||
setSearchValue: setSearchQuery,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,42 +1,30 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 팝업관리 리스트 컴포넌트
|
||||
* 팝업관리 리스트 - UniversalListPage 마이그레이션
|
||||
*
|
||||
* 디자인 스펙:
|
||||
* - 페이지 타이틀: 팝업관리
|
||||
* - 페이지 설명: 팝업 목록을 관리합니다.
|
||||
* - 테이블 컬럼: 체크박스, No, 대상, 제목, 상태, 작성자, 등록일, 기간, 작업
|
||||
* 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
|
||||
* - 클라이언트 사이드 필터링 (검색)
|
||||
* - headerActions (팝업 등록 버튼)
|
||||
* - 선택 시 수정/삭제 버튼
|
||||
*/
|
||||
|
||||
import { useState, useMemo, useCallback } from 'react';
|
||||
import { useMemo, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Megaphone, Plus, Pencil, Trash2 } from 'lucide-react';
|
||||
import { Megaphone, Pencil, Trash2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { TableCell, TableRow } from '@/components/ui/table';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import {
|
||||
IntegratedListTemplateV2,
|
||||
type TableColumn,
|
||||
type PaginationConfig,
|
||||
} from '@/components/templates/IntegratedListTemplateV2';
|
||||
UniversalListPage,
|
||||
type UniversalListConfig,
|
||||
type SelectionHandlers,
|
||||
type RowClickHandlers,
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import { type Popup } from './types';
|
||||
import { deletePopup, deletePopups } from './actions';
|
||||
import { isNextRedirectError } from '@/lib/utils/redirect-error';
|
||||
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
import { deletePopup } from './actions';
|
||||
|
||||
interface PopupListProps {
|
||||
initialData: Popup[];
|
||||
@@ -45,65 +33,13 @@ interface PopupListProps {
|
||||
export function PopupList({ initialData }: PopupListProps) {
|
||||
const router = useRouter();
|
||||
|
||||
// ===== 상태 관리 =====
|
||||
const [popups, setPopups] = useState<Popup[]>(initialData);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
// 삭제 확인 다이얼로그
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
|
||||
|
||||
// ===== 필터링된 데이터 =====
|
||||
const filteredData = useMemo(() => {
|
||||
let result = [...popups];
|
||||
|
||||
// 검색 필터
|
||||
if (searchValue) {
|
||||
const searchLower = searchValue.toLowerCase();
|
||||
result = result.filter(
|
||||
(item) =>
|
||||
item.title.toLowerCase().includes(searchLower) ||
|
||||
item.author.toLowerCase().includes(searchLower)
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [popups, searchValue]);
|
||||
|
||||
// ===== 페이지네이션 =====
|
||||
const paginatedData = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
return filteredData.slice(startIndex, startIndex + ITEMS_PER_PAGE);
|
||||
}, [filteredData, currentPage]);
|
||||
|
||||
const totalPages = Math.ceil(filteredData.length / ITEMS_PER_PAGE);
|
||||
|
||||
// ===== 핸들러 =====
|
||||
const handleToggleSelection = useCallback((id: string) => {
|
||||
setSelectedItems((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(id)) {
|
||||
newSet.delete(id);
|
||||
} else {
|
||||
newSet.add(id);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleToggleSelectAll = useCallback(() => {
|
||||
if (selectedItems.size === paginatedData.length) {
|
||||
setSelectedItems(new Set());
|
||||
} else {
|
||||
setSelectedItems(new Set(paginatedData.map((item) => item.id)));
|
||||
}
|
||||
}, [selectedItems.size, paginatedData]);
|
||||
|
||||
const handleRowClick = useCallback((item: Popup) => {
|
||||
router.push(`/ko/settings/popup-management/${item.id}`);
|
||||
}, [router]);
|
||||
const handleRowClick = useCallback(
|
||||
(item: Popup) => {
|
||||
router.push(`/ko/settings/popup-management/${item.id}`);
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const handleEdit = useCallback(
|
||||
(id: string) => {
|
||||
@@ -112,243 +48,197 @@ export function PopupList({ initialData }: PopupListProps) {
|
||||
[router]
|
||||
);
|
||||
|
||||
const handleDelete = useCallback((id: string) => {
|
||||
setDeleteTargetId(id);
|
||||
setShowDeleteDialog(true);
|
||||
}, []);
|
||||
|
||||
const handleConfirmDelete = useCallback(async () => {
|
||||
try {
|
||||
if (deleteTargetId) {
|
||||
const result = await deletePopup(deleteTargetId);
|
||||
if (result.success) {
|
||||
setPopups((prev) => prev.filter((p) => p.id !== deleteTargetId));
|
||||
} else {
|
||||
console.error('[PopupList] Delete failed:', result.error);
|
||||
}
|
||||
}
|
||||
setShowDeleteDialog(false);
|
||||
setDeleteTargetId(null);
|
||||
} catch (error) {
|
||||
if (isNextRedirectError(error)) throw error;
|
||||
console.error('[PopupList] handleConfirmDelete error:', error);
|
||||
}
|
||||
}, [deleteTargetId]);
|
||||
|
||||
const handleBulkDelete = useCallback(async () => {
|
||||
try {
|
||||
const ids = Array.from(selectedItems);
|
||||
const result = await deletePopups(ids);
|
||||
if (result.success) {
|
||||
setPopups((prev) => prev.filter((p) => !selectedItems.has(p.id)));
|
||||
} else {
|
||||
console.error('[PopupList] Bulk delete failed:', result.error);
|
||||
}
|
||||
setSelectedItems(new Set());
|
||||
} catch (error) {
|
||||
if (isNextRedirectError(error)) throw error;
|
||||
console.error('[PopupList] handleBulkDelete error:', error);
|
||||
}
|
||||
}, [selectedItems]);
|
||||
|
||||
const handleCreate = useCallback(() => {
|
||||
router.push('/ko/settings/popup-management/new');
|
||||
}, [router]);
|
||||
|
||||
// ===== 테이블 컬럼 =====
|
||||
const tableColumns: TableColumn[] = [
|
||||
{ key: 'no', label: '번호', className: 'w-[60px] text-center' },
|
||||
{ key: 'target', label: '대상', className: 'w-[80px] text-center' },
|
||||
{ key: 'title', label: '제목', className: 'min-w-[150px]' },
|
||||
{ key: 'status', label: '상태', className: 'w-[80px] text-center' },
|
||||
{ key: 'author', label: '작성자', className: 'w-[100px] text-center' },
|
||||
{ key: 'createdAt', label: '등록일', className: 'w-[110px] text-center' },
|
||||
{ key: 'period', label: '기간', className: 'w-[180px] text-center' },
|
||||
{ key: 'actions', label: '작업', className: 'w-[180px] text-center' },
|
||||
];
|
||||
// ===== UniversalListPage Config =====
|
||||
const config: UniversalListConfig<Popup> = useMemo(
|
||||
() => ({
|
||||
// 페이지 기본 정보
|
||||
title: '팝업관리',
|
||||
description: '팝업 목록을 관리합니다.',
|
||||
icon: Megaphone,
|
||||
basePath: '/settings/popup-management',
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
const renderTableRow = useCallback(
|
||||
(item: Popup, index: number, globalIndex: number) => {
|
||||
const isSelected = selectedItems.has(item.id);
|
||||
// ID 추출
|
||||
idField: 'id',
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="hover:bg-muted/50 cursor-pointer"
|
||||
onClick={() => handleRowClick(item)}
|
||||
>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => handleToggleSelection(item.id)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{globalIndex}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{item.target === 'all' ? '전사' : item.targetName || '부서별'}
|
||||
</TableCell>
|
||||
<TableCell>{item.title}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Badge variant={item.status === 'active' ? 'default' : 'secondary'}>
|
||||
{item.status === 'active' ? '사용함' : '사용안함'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{item.author}</TableCell>
|
||||
<TableCell className="text-center">{item.createdAt}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{item.startDate}~{item.endDate}
|
||||
</TableCell>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
{isSelected && (
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(item.id)}
|
||||
title="수정"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
title="삭제"
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
},
|
||||
[
|
||||
selectedItems,
|
||||
handleRowClick,
|
||||
handleToggleSelection,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
]
|
||||
);
|
||||
// API 액션 (initialData 사용)
|
||||
actions: {
|
||||
getList: async () => {
|
||||
// initialData를 사용하므로 빈 배열 반환 (실제로는 호출되지 않음)
|
||||
return { success: true, data: [], totalCount: 0 };
|
||||
},
|
||||
deleteItem: async (id: string) => {
|
||||
const result = await deletePopup(id);
|
||||
return { success: result.success, error: result.error };
|
||||
},
|
||||
},
|
||||
|
||||
// ===== 모바일 카드 렌더링 =====
|
||||
const renderMobileCard = useCallback(
|
||||
(
|
||||
item: Popup,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
isSelected: boolean,
|
||||
onToggle: () => void
|
||||
) => {
|
||||
return (
|
||||
<Card
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleRowClick(item)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox checked={isSelected} onCheckedChange={onToggle} />
|
||||
</div>
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">#{globalIndex}</span>
|
||||
<Badge variant={item.status === 'active' ? 'default' : 'secondary'}>
|
||||
{item.status === 'active' ? '사용함' : '사용안함'}
|
||||
</Badge>
|
||||
// 테이블 컬럼
|
||||
columns: [
|
||||
{ key: 'no', label: '번호', className: 'w-[60px] text-center' },
|
||||
{ key: 'target', label: '대상', className: 'w-[80px] text-center' },
|
||||
{ key: 'title', label: '제목', className: 'min-w-[150px]' },
|
||||
{ key: 'status', label: '상태', className: 'w-[80px] text-center' },
|
||||
{ key: 'author', label: '작성자', className: 'w-[100px] text-center' },
|
||||
{ key: 'createdAt', label: '등록일', className: 'w-[110px] text-center' },
|
||||
{ key: 'period', label: '기간', className: 'w-[180px] text-center' },
|
||||
{ key: 'actions', label: '작업', className: 'w-[180px] text-center' },
|
||||
],
|
||||
|
||||
// 클라이언트 사이드 필터링
|
||||
clientSideFiltering: true,
|
||||
itemsPerPage: 10,
|
||||
|
||||
// 검색 필터
|
||||
searchPlaceholder: '제목, 작성자로 검색...',
|
||||
searchFilter: (item, searchValue) => {
|
||||
const searchLower = searchValue.toLowerCase();
|
||||
return (
|
||||
item.title.toLowerCase().includes(searchLower) ||
|
||||
item.author.toLowerCase().includes(searchLower)
|
||||
);
|
||||
},
|
||||
|
||||
// 공통 헤더 옵션: 등록 버튼 (오른쪽 끝)
|
||||
createButton: {
|
||||
label: '팝업 등록',
|
||||
onClick: handleCreate,
|
||||
},
|
||||
|
||||
// 삭제 확인 메시지
|
||||
deleteConfirmMessage: {
|
||||
title: '팝업 삭제',
|
||||
description: '선택한 팝업을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.',
|
||||
},
|
||||
|
||||
// 테이블 행 렌더링
|
||||
renderTableRow: (
|
||||
item: Popup,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Popup>
|
||||
) => {
|
||||
return (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="hover:bg-muted/50 cursor-pointer"
|
||||
onClick={() => handleRowClick(item)}
|
||||
>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={handlers.isSelected}
|
||||
onCheckedChange={handlers.onToggle}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{globalIndex}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{item.target === 'all' ? '전사' : item.targetName || '부서별'}
|
||||
</TableCell>
|
||||
<TableCell>{item.title}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Badge variant={item.status === 'active' ? 'default' : 'secondary'}>
|
||||
{item.status === 'active' ? '사용함' : '사용안함'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{item.author}</TableCell>
|
||||
<TableCell className="text-center">{item.createdAt}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{item.startDate}~{item.endDate}
|
||||
</TableCell>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
{handlers.isSelected && (
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(item.id)}
|
||||
title="수정"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handlers.onDelete?.(item)}
|
||||
title="삭제"
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<h3 className="font-medium">{item.title}</h3>
|
||||
<div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
|
||||
<span>{item.target === 'all' ? '전사' : item.targetName || '부서별'}</span>
|
||||
<span>|</span>
|
||||
<span>{item.author}</span>
|
||||
<span>|</span>
|
||||
<span>{item.createdAt}</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
},
|
||||
|
||||
// 모바일 카드 렌더링
|
||||
renderMobileCard: (
|
||||
item: Popup,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Popup>
|
||||
) => {
|
||||
return (
|
||||
<Card
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleRowClick(item)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={handlers.isSelected}
|
||||
onCheckedChange={handlers.onToggle}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
기간: {item.startDate} ~ {item.endDate}
|
||||
</div>
|
||||
{isSelected && (
|
||||
<div className="flex gap-2 pt-2" onClick={(e) => e.stopPropagation()}>
|
||||
<Button variant="outline" size="sm" onClick={() => handleEdit(item.id)}>
|
||||
수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-destructive"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
>
|
||||
삭제
|
||||
</Button>
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">#{globalIndex}</span>
|
||||
<Badge variant={item.status === 'active' ? 'default' : 'secondary'}>
|
||||
{item.status === 'active' ? '사용함' : '사용안함'}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
<h3 className="font-medium">{item.title}</h3>
|
||||
<div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
|
||||
<span>{item.target === 'all' ? '전사' : item.targetName || '부서별'}</span>
|
||||
<span>|</span>
|
||||
<span>{item.author}</span>
|
||||
<span>|</span>
|
||||
<span>{item.createdAt}</span>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
기간: {item.startDate} ~ {item.endDate}
|
||||
</div>
|
||||
{handlers.isSelected && (
|
||||
<div className="flex gap-2 pt-2" onClick={(e) => e.stopPropagation()}>
|
||||
<Button variant="outline" size="sm" onClick={() => handleEdit(item.id)}>
|
||||
수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-destructive"
|
||||
onClick={() => handlers.onDelete?.(item)}
|
||||
>
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
},
|
||||
[handleRowClick, handleEdit, handleDelete]
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
},
|
||||
}),
|
||||
[handleRowClick, handleEdit, handleCreate]
|
||||
);
|
||||
|
||||
// ===== 페이지네이션 설정 =====
|
||||
const pagination: PaginationConfig = {
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems: filteredData.length,
|
||||
itemsPerPage: ITEMS_PER_PAGE,
|
||||
onPageChange: setCurrentPage,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<IntegratedListTemplateV2
|
||||
title="팝업관리"
|
||||
description="팝업 목록을 관리합니다."
|
||||
icon={Megaphone}
|
||||
headerActions={
|
||||
<Button className="ml-auto" onClick={handleCreate}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
팝업 등록
|
||||
</Button>
|
||||
}
|
||||
searchValue={searchValue}
|
||||
onSearchChange={setSearchValue}
|
||||
searchPlaceholder="제목, 작성자로 검색..."
|
||||
tableColumns={tableColumns}
|
||||
data={paginatedData}
|
||||
allData={filteredData}
|
||||
selectedItems={selectedItems}
|
||||
onToggleSelection={handleToggleSelection}
|
||||
onToggleSelectAll={handleToggleSelectAll}
|
||||
getItemId={(item) => item.id}
|
||||
onBulkDelete={handleBulkDelete}
|
||||
renderTableRow={renderTableRow}
|
||||
renderMobileCard={renderMobileCard}
|
||||
pagination={pagination}
|
||||
/>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>팝업 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
선택한 팝업을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleConfirmDelete}>삭제</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
return <UniversalListPage config={config} initialData={initialData} />;
|
||||
}
|
||||
|
||||
export default PopupList;
|
||||
|
||||
Reference in New Issue
Block a user