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
@@ -28,14 +28,13 @@ import {
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import {
|
||||
IntegratedListTemplateV2,
|
||||
UniversalListPage,
|
||||
type UniversalListConfig,
|
||||
type TabOption,
|
||||
type TableColumn,
|
||||
} from '@/components/templates/IntegratedListTemplateV2';
|
||||
import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
||||
import { toast } from 'sonner';
|
||||
import type { Post, SortOption } from '../types';
|
||||
import type { Post } from '../types';
|
||||
import { getBoards } from '../BoardManagement/actions';
|
||||
import { isNextRedirectError } from '@/lib/utils/redirect-error';
|
||||
import { getPosts, getMyPosts, deletePost } from '../actions';
|
||||
@@ -45,10 +44,7 @@ export function BoardList() {
|
||||
const router = useRouter();
|
||||
|
||||
// ===== 상태 관리 =====
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [sortOption] = useState<SortOption>('latest'); // 기본 정렬: 최신순
|
||||
const [activeTab, setActiveTab] = useState<string>(''); // 첫 번째 게시판 코드로 설정
|
||||
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
||||
const [activeTab, setActiveTab] = useState<string>('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 20;
|
||||
|
||||
@@ -68,14 +64,14 @@ export function BoardList() {
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [currentUserId, setCurrentUserId] = useState<string>('');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
// ===== 게시판 목록 조회 =====
|
||||
// ===== 게시판 목록 조회 (탭 생성용) =====
|
||||
useEffect(() => {
|
||||
async function fetchBoards() {
|
||||
const result = await getBoards();
|
||||
if (result.success && result.data) {
|
||||
setBoards(result.data);
|
||||
// 첫 번째 게시판을 기본 탭으로 설정
|
||||
if (result.data.length > 0 && !activeTab) {
|
||||
setActiveTab(result.data[0].boardCode);
|
||||
}
|
||||
@@ -94,14 +90,12 @@ export function BoardList() {
|
||||
let result;
|
||||
|
||||
if (activeTab === 'my') {
|
||||
// 나의 게시글 조회
|
||||
result = await getMyPosts({
|
||||
search: searchQuery || undefined,
|
||||
per_page: itemsPerPage,
|
||||
page: currentPage,
|
||||
});
|
||||
} else {
|
||||
// 특정 게시판 게시글 조회
|
||||
result = await getPosts(activeTab, {
|
||||
search: searchQuery || undefined,
|
||||
per_page: itemsPerPage,
|
||||
@@ -137,59 +131,19 @@ export function BoardList() {
|
||||
|
||||
// ===== 현재 사용자 ID 가져오기 =====
|
||||
useEffect(() => {
|
||||
// TODO: 실제 인증 컨텍스트에서 가져오기
|
||||
// 임시로 localStorage에서 가져옴
|
||||
const userId = localStorage.getItem('user_id') || '';
|
||||
setCurrentUserId(userId);
|
||||
}, []);
|
||||
|
||||
// ===== 체크박스 핸들러 =====
|
||||
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 toggleSelectAll = useCallback(() => {
|
||||
if (selectedItems.size === posts.length && posts.length > 0) {
|
||||
setSelectedItems(new Set());
|
||||
} else {
|
||||
setSelectedItems(new Set(posts.map((item) => item.id)));
|
||||
if (typeof window !== 'undefined') {
|
||||
const userId = localStorage.getItem('user_id') || '';
|
||||
setCurrentUserId(userId);
|
||||
}
|
||||
}, [selectedItems.size, posts]);
|
||||
|
||||
// ===== 필터링된 데이터 (클라이언트 정렬만) =====
|
||||
const sortedData = useMemo(() => {
|
||||
const result = [...posts];
|
||||
|
||||
// 정렬 (상단 고정은 항상 최상위)
|
||||
result.sort((a, b) => {
|
||||
// 상단 고정 우선
|
||||
if (a.isPinned !== b.isPinned) return a.isPinned ? -1 : 1;
|
||||
|
||||
// 정렬 옵션에 따라
|
||||
switch (sortOption) {
|
||||
case 'latest':
|
||||
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
|
||||
case 'oldest':
|
||||
return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
|
||||
case 'viewCount':
|
||||
return b.viewCount - a.viewCount;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
}, [posts, sortOption]);
|
||||
}, []);
|
||||
|
||||
// ===== 액션 핸들러 =====
|
||||
const handleRowClick = useCallback((item: Post) => {
|
||||
router.push(`/ko/board/${item.boardCode}/${item.id}`);
|
||||
}, [router]);
|
||||
const handleRowClick = useCallback(
|
||||
(item: Post) => {
|
||||
router.push(`/ko/board/${item.boardCode}/${item.id}`);
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const handleNewPost = useCallback(() => {
|
||||
const boardCode = activeTab !== 'my' ? activeTab : boards[0]?.boardCode;
|
||||
@@ -211,11 +165,6 @@ export function BoardList() {
|
||||
const result = await deletePost(deleteTargetBoardCode, deleteTargetId);
|
||||
if (result.success) {
|
||||
setPosts((prev) => prev.filter((item) => item.id !== deleteTargetId));
|
||||
setSelectedItems((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.delete(deleteTargetId);
|
||||
return newSet;
|
||||
});
|
||||
toast.success('게시글이 삭제되었습니다.');
|
||||
} else {
|
||||
toast.error(result.error || '게시글 삭제에 실패했습니다.');
|
||||
@@ -226,19 +175,12 @@ export function BoardList() {
|
||||
setDeleteTargetBoardCode('');
|
||||
}, [deleteTargetId, deleteTargetBoardCode]);
|
||||
|
||||
// ===== 탭 변경 핸들러 =====
|
||||
const handleTabChange = useCallback((tab: string) => {
|
||||
setActiveTab(tab);
|
||||
setCurrentPage(1);
|
||||
setSelectedItems(new Set());
|
||||
}, []);
|
||||
|
||||
// ===== 탭 옵션 (게시판 목록 + 나의 게시글) =====
|
||||
const tabs: TabOption[] = useMemo(() => {
|
||||
const boardTabs = boards.map((board) => ({
|
||||
value: board.boardCode,
|
||||
label: board.boardName,
|
||||
count: 0, // API에서 게시글 수를 가져오면 업데이트
|
||||
count: 0,
|
||||
}));
|
||||
|
||||
return [
|
||||
@@ -251,219 +193,254 @@ export function BoardList() {
|
||||
];
|
||||
}, [boards]);
|
||||
|
||||
// ===== 테이블 컬럼 (스크린샷 기준: No., 제목, 작성자, 등록일, 조회수) =====
|
||||
const tableColumns: TableColumn[] = useMemo(() => [
|
||||
{ key: 'no', label: 'No.', className: 'w-[60px] text-center' },
|
||||
{ key: 'title', label: '제목', className: 'min-w-[300px]' },
|
||||
{ key: 'author', label: '작성자', className: 'w-[120px]' },
|
||||
{ key: 'createdAt', label: '등록일', className: 'w-[120px]' },
|
||||
{ key: 'viewCount', label: '조회수', className: 'w-[80px] text-center' },
|
||||
{ key: 'actions', label: '작업', className: 'w-[100px] text-center' },
|
||||
], []);
|
||||
// ===== 정렬된 데이터 (상단 고정 우선) =====
|
||||
const sortedData = useMemo(() => {
|
||||
const result = [...posts];
|
||||
result.sort((a, b) => {
|
||||
if (a.isPinned !== b.isPinned) return a.isPinned ? -1 : 1;
|
||||
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
|
||||
});
|
||||
return result;
|
||||
}, [posts]);
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
const renderTableRow = useCallback((item: Post, index: number, globalIndex: number) => {
|
||||
const isSelected = selectedItems.has(item.id);
|
||||
const isMyPost = item.authorId === currentUserId;
|
||||
// ===== 탭 변경 핸들러 =====
|
||||
const handleTabChange = useCallback((tab: string) => {
|
||||
setActiveTab(tab);
|
||||
setCurrentPage(1);
|
||||
}, []);
|
||||
|
||||
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(item.id)} />
|
||||
</TableCell>
|
||||
{/* No. */}
|
||||
<TableCell className="text-center text-sm text-gray-500">
|
||||
{item.isPinned ? (
|
||||
<span className="inline-flex items-center justify-center w-6 h-6 bg-red-500 text-white rounded-full text-xs font-bold">
|
||||
공지
|
||||
</span>
|
||||
) : (
|
||||
globalIndex
|
||||
)}
|
||||
</TableCell>
|
||||
{/* 제목 */}
|
||||
<TableCell className="font-medium">
|
||||
<div className="flex items-center gap-2">
|
||||
{item.isPinned && (
|
||||
<span className="text-xs text-red-500 font-medium">[공지]</span>
|
||||
)}
|
||||
{item.isSecret && (
|
||||
<span className="text-xs text-gray-500 font-medium">[비밀]</span>
|
||||
)}
|
||||
<span className="truncate">{item.title}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
{/* 작성자 */}
|
||||
<TableCell>{item.authorName}</TableCell>
|
||||
{/* 등록일 */}
|
||||
<TableCell>{format(new Date(item.createdAt), 'yyyy-MM-dd')}</TableCell>
|
||||
{/* 조회수 */}
|
||||
<TableCell className="text-center">{item.viewCount}</TableCell>
|
||||
{/* 작업 */}
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
{isSelected && isMyPost && (
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-gray-600 hover:text-gray-700 hover:bg-gray-50"
|
||||
onClick={() => router.push(`/ko/board/${item.boardCode}/${item.id}/edit`)}
|
||||
// ===== UniversalListPage 설정 =====
|
||||
const boardListConfig: UniversalListConfig<Post> = useMemo(
|
||||
() => ({
|
||||
title: '게시판',
|
||||
description: '게시판의 게시글을 등록하고 관리합니다.',
|
||||
icon: FileText,
|
||||
basePath: '/board',
|
||||
|
||||
idField: 'id',
|
||||
|
||||
actions: {
|
||||
getList: async () => ({
|
||||
success: true,
|
||||
data: sortedData,
|
||||
totalCount: totalItems,
|
||||
totalPages: totalPages,
|
||||
}),
|
||||
},
|
||||
|
||||
columns: [
|
||||
{ key: 'no', label: 'No.', className: 'w-[60px] text-center' },
|
||||
{ key: 'title', label: '제목', className: 'min-w-[300px]' },
|
||||
{ key: 'author', label: '작성자', className: 'w-[120px]' },
|
||||
{ key: 'createdAt', label: '등록일', className: 'w-[120px]' },
|
||||
{ key: 'viewCount', label: '조회수', className: 'w-[80px] text-center' },
|
||||
{ key: 'actions', label: '작업', className: 'w-[100px] text-center' },
|
||||
],
|
||||
|
||||
tabs: tabs,
|
||||
defaultTab: activeTab,
|
||||
|
||||
dateRangeSelector: {
|
||||
enabled: true,
|
||||
showPresets: false,
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange: setStartDate,
|
||||
onEndDateChange: setEndDate,
|
||||
},
|
||||
|
||||
createButton: {
|
||||
label: '게시글 등록',
|
||||
icon: Plus,
|
||||
onClick: handleNewPost,
|
||||
},
|
||||
|
||||
searchPlaceholder: '제목, 작성자 검색...',
|
||||
|
||||
itemsPerPage: itemsPerPage,
|
||||
|
||||
renderTableRow: (item, index, globalIndex, handlers) => {
|
||||
const { isSelected, onToggle, onRowClick } = handlers;
|
||||
const isMyPost = item.authorId === currentUserId;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="hover:bg-muted/50 cursor-pointer"
|
||||
onClick={onRowClick}
|
||||
>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox checked={isSelected} onCheckedChange={onToggle} />
|
||||
</TableCell>
|
||||
<TableCell className="text-center text-sm text-gray-500">
|
||||
{item.isPinned ? (
|
||||
<span className="inline-flex items-center justify-center w-6 h-6 bg-red-500 text-white rounded-full text-xs font-bold">
|
||||
공지
|
||||
</span>
|
||||
) : (
|
||||
globalIndex
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
<div className="flex items-center gap-2">
|
||||
{item.isPinned && (
|
||||
<span className="text-xs text-red-500 font-medium">[공지]</span>
|
||||
)}
|
||||
{item.isSecret && (
|
||||
<span className="text-xs text-gray-500 font-medium">[비밀]</span>
|
||||
)}
|
||||
<span className="truncate">{item.title}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{item.authorName}</TableCell>
|
||||
<TableCell>{format(new Date(item.createdAt), 'yyyy-MM-dd')}</TableCell>
|
||||
<TableCell className="text-center">{item.viewCount}</TableCell>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
{isSelected && isMyPost && (
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-gray-600 hover:text-gray-700 hover:bg-gray-50"
|
||||
onClick={() =>
|
||||
router.push(`/ko/board/${item.boardCode}/${item.id}/edit`)
|
||||
}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-red-500 hover:text-red-600 hover:bg-red-50"
|
||||
onClick={() => handleDeleteClick(item.id, item.boardCode)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
},
|
||||
|
||||
renderMobileCard: (item, index, globalIndex, handlers) => {
|
||||
const { isSelected, onToggle, onRowClick } = handlers;
|
||||
const isMyPost = item.authorId === currentUserId;
|
||||
|
||||
return (
|
||||
<ListMobileCard
|
||||
id={item.id}
|
||||
title={
|
||||
<div className="flex items-center gap-2">
|
||||
{item.isPinned && (
|
||||
<span className="text-xs text-red-500 font-medium">[공지]</span>
|
||||
)}
|
||||
{item.isSecret && (
|
||||
<span className="text-xs text-gray-500 font-medium">[비밀]</span>
|
||||
)}
|
||||
<span>{item.title}</span>
|
||||
</div>
|
||||
}
|
||||
isSelected={isSelected}
|
||||
onToggleSelection={onToggle}
|
||||
onCardClick={onRowClick}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<InfoField label="작성자" value={item.authorName} />
|
||||
<InfoField
|
||||
label="등록일"
|
||||
value={format(new Date(item.createdAt), 'yyyy-MM-dd')}
|
||||
/>
|
||||
<InfoField label="조회수" value={String(item.viewCount)} />
|
||||
<InfoField label="게시판" value={item.boardName} />
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
isSelected && isMyPost ? (
|
||||
<div className="flex gap-2 w-full">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
onClick={() =>
|
||||
router.push(`/ko/board/${item.boardCode}/${item.id}/edit`)
|
||||
}
|
||||
>
|
||||
<Pencil className="w-4 h-4 mr-2" /> 수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1 text-red-500 border-red-200 hover:bg-red-50 hover:text-red-600"
|
||||
onClick={() => handleDeleteClick(item.id, item.boardCode)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" /> 삭제
|
||||
</Button>
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
renderDialogs: () => (
|
||||
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>게시글 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>정말 삭제하시겠습니까?</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleConfirmDelete}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-red-500 hover:text-red-600 hover:bg-red-50"
|
||||
onClick={() => handleDeleteClick(item.id, item.boardCode)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}, [selectedItems, currentUserId, toggleSelection, handleRowClick, handleDeleteClick, router]);
|
||||
|
||||
// ===== 모바일 카드 렌더링 =====
|
||||
const renderMobileCard = useCallback((
|
||||
item: Post,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
isSelected: boolean,
|
||||
onToggle: () => void
|
||||
) => {
|
||||
const isMyPost = item.authorId === currentUserId;
|
||||
|
||||
return (
|
||||
<ListMobileCard
|
||||
id={item.id}
|
||||
title={
|
||||
<div className="flex items-center gap-2">
|
||||
{item.isPinned && (
|
||||
<span className="text-xs text-red-500 font-medium">[공지]</span>
|
||||
)}
|
||||
{item.isSecret && (
|
||||
<span className="text-xs text-gray-500 font-medium">[비밀]</span>
|
||||
)}
|
||||
<span>{item.title}</span>
|
||||
</div>
|
||||
}
|
||||
isSelected={isSelected}
|
||||
onToggleSelection={onToggle}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<InfoField label="작성자" value={item.authorName} />
|
||||
<InfoField label="등록일" value={format(new Date(item.createdAt), 'yyyy-MM-dd')} />
|
||||
<InfoField label="조회수" value={String(item.viewCount)} />
|
||||
<InfoField label="게시판" value={item.boardName} />
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
isSelected && isMyPost ? (
|
||||
<div className="flex gap-2 w-full">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
onClick={() => router.push(`/ko/board/${item.boardCode}/${item.id}/edit`)}
|
||||
>
|
||||
<Pencil className="w-4 h-4 mr-2" /> 수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1 text-red-500 border-red-200 hover:bg-red-50 hover:text-red-600"
|
||||
onClick={() => handleDeleteClick(item.id, item.boardCode)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" /> 삭제
|
||||
</Button>
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
onClick={() => handleRowClick(item)}
|
||||
/>
|
||||
);
|
||||
}, [currentUserId, handleRowClick, handleDeleteClick, router]);
|
||||
|
||||
// ===== 헤더 액션 =====
|
||||
const headerActions = (
|
||||
<>
|
||||
<DateRangeSelector
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onStartDateChange={setStartDate}
|
||||
onEndDateChange={setEndDate}
|
||||
/>
|
||||
<Button className="ml-auto" onClick={handleNewPost}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
게시글 등록
|
||||
</Button>
|
||||
</>
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
),
|
||||
}),
|
||||
[
|
||||
sortedData,
|
||||
totalItems,
|
||||
totalPages,
|
||||
tabs,
|
||||
activeTab,
|
||||
startDate,
|
||||
endDate,
|
||||
handleNewPost,
|
||||
currentUserId,
|
||||
router,
|
||||
handleDeleteClick,
|
||||
showDeleteDialog,
|
||||
handleConfirmDelete,
|
||||
]
|
||||
);
|
||||
|
||||
// ===== 로딩 상태 =====
|
||||
if (isLoading && posts.length === 0) {
|
||||
if (isLoading && posts.length === 0 && boards.length === 0) {
|
||||
return <ContentLoadingSpinner text="게시글을 불러오는 중..." />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<IntegratedListTemplateV2<Post>
|
||||
title="게시판"
|
||||
description="게시판의 게시글을 등록하고 관리합니다."
|
||||
icon={FileText}
|
||||
headerActions={headerActions}
|
||||
searchValue={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
searchPlaceholder="제목, 작성자 검색..."
|
||||
tabs={tabs}
|
||||
activeTab={activeTab}
|
||||
onTabChange={handleTabChange}
|
||||
tableColumns={tableColumns}
|
||||
data={sortedData}
|
||||
totalCount={totalItems}
|
||||
allData={sortedData}
|
||||
selectedItems={selectedItems}
|
||||
onToggleSelection={toggleSelection}
|
||||
onToggleSelectAll={toggleSelectAll}
|
||||
getItemId={(item) => item.id}
|
||||
renderTableRow={renderTableRow}
|
||||
renderMobileCard={renderMobileCard}
|
||||
pagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems,
|
||||
itemsPerPage,
|
||||
onPageChange: setCurrentPage,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>게시글 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
정말 삭제하시겠습니까?
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleConfirmDelete}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
>
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
<UniversalListPage<Post>
|
||||
config={boardListConfig}
|
||||
initialData={sortedData}
|
||||
initialTotalCount={totalItems}
|
||||
externalPagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems,
|
||||
itemsPerPage,
|
||||
onPageChange: (page) => {
|
||||
setCurrentPage(page);
|
||||
},
|
||||
}}
|
||||
onTabChange={handleTabChange}
|
||||
onSearchChange={setSearchQuery}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default BoardList;
|
||||
export default BoardList;
|
||||
|
||||
Reference in New Issue
Block a user