feat(WEB): UniversalListPage 컴포넌트 및 파일럿 마이그레이션
- UniversalListPage 템플릿 컴포넌트 생성 - 카드관리(HR) 파일럿 마이그레이션 (기본 케이스) - 게시판목록 파일럿 마이그레이션 (동적 탭 fetchTabs) - 발주관리 파일럿 마이그레이션 (ScheduleCalendar beforeTableContent) - 클라이언트 사이드 필터링 지원 (customFilterFn, customSortFn) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
14
src/app/[locale]/(protected)/board-test/page.tsx
Normal file
14
src/app/[locale]/(protected)/board-test/page.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 게시판 목록 UniversalListPage 테스트 페이지
|
||||
*
|
||||
* URL: /ko/board-test
|
||||
* 비교: /ko/board (기존)
|
||||
*/
|
||||
|
||||
import { BoardListUnified } from '@/components/board/BoardList/BoardListUnified';
|
||||
|
||||
export default function BoardListTestPage() {
|
||||
return <BoardListUnified />;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 발주관리 UniversalListPage 테스트 페이지
|
||||
*
|
||||
* 특이 케이스: ScheduleCalendar 컴포넌트 (beforeTableContent)
|
||||
* URL: /ko/construction/order/order-management-test
|
||||
*
|
||||
* 비교 테스트: /ko/construction/order/order-management (기존)
|
||||
*/
|
||||
|
||||
import { OrderManagementUnified } from '@/components/business/construction/order-management/OrderManagementUnified';
|
||||
|
||||
export default function OrderManagementTestPage() {
|
||||
return <OrderManagementUnified />;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 카드관리 UniversalListPage 테스트 페이지
|
||||
*
|
||||
* 기존 CardManagement와 동일한 기능을 UniversalListPage config 방식으로 구현한 테스트 버전
|
||||
* URL: /ko/hr/card-management-test
|
||||
*
|
||||
* 비교 테스트 완료 후 삭제 예정
|
||||
*/
|
||||
|
||||
import { CardManagementUnified } from '@/components/hr/CardManagement/CardManagementUnified';
|
||||
|
||||
export default function CardManagementTestPage() {
|
||||
return <CardManagementUnified />;
|
||||
}
|
||||
371
src/components/board/BoardList/BoardListUnified.tsx
Normal file
371
src/components/board/BoardList/BoardListUnified.tsx
Normal file
@@ -0,0 +1,371 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 게시판 리스트 - UniversalListPage 버전
|
||||
*
|
||||
* 특이 케이스:
|
||||
* - 동적 탭 (API에서 게시판 목록 로드)
|
||||
* - 탭별 다른 API 호출 (일반 게시판 vs 나의 게시글)
|
||||
* - 본인 글만 수정/삭제 가능
|
||||
*/
|
||||
|
||||
import { useState, useMemo, useEffect, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { format } from 'date-fns';
|
||||
import { FileText, Plus, Pencil, Trash2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { TableRow, TableCell } from '@/components/ui/table';
|
||||
import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
||||
import {
|
||||
UniversalListPage,
|
||||
type UniversalListConfig,
|
||||
type SelectionHandlers,
|
||||
type RowClickHandlers,
|
||||
type TabOption,
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import type { Post } from '../types';
|
||||
import { getBoards } from '../BoardManagement/actions';
|
||||
import { getPosts, getMyPosts, deletePost } from '../actions';
|
||||
import type { Board } from '../BoardManagement/types';
|
||||
|
||||
export function BoardListUnified() {
|
||||
const router = useRouter();
|
||||
|
||||
// 동적 탭을 위한 게시판 목록 상태
|
||||
const [boards, setBoards] = useState<Board[]>([]);
|
||||
const [activeTab, setActiveTab] = useState<string>('');
|
||||
const [currentUserId, setCurrentUserId] = useState<string>('');
|
||||
|
||||
// 날짜 범위 필터 상태
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
|
||||
// 현재 사용자 ID 가져오기
|
||||
useEffect(() => {
|
||||
const userId = localStorage.getItem('user_id') || '';
|
||||
setCurrentUserId(userId);
|
||||
}, []);
|
||||
|
||||
// 게시판 목록 로드 및 동적 탭 생성
|
||||
const fetchTabs = useCallback(async (): Promise<TabOption[]> => {
|
||||
const result = await getBoards();
|
||||
if (result.success && result.data) {
|
||||
setBoards(result.data);
|
||||
// 첫 번째 게시판을 기본 탭으로 설정
|
||||
if (result.data.length > 0 && !activeTab) {
|
||||
setActiveTab(result.data[0].boardCode);
|
||||
}
|
||||
|
||||
const boardTabs = result.data.map((board) => ({
|
||||
value: board.boardCode,
|
||||
label: board.boardName,
|
||||
count: 0,
|
||||
}));
|
||||
|
||||
return [
|
||||
...boardTabs,
|
||||
{
|
||||
value: 'my',
|
||||
label: '나의 게시글',
|
||||
count: 0,
|
||||
},
|
||||
];
|
||||
}
|
||||
return [];
|
||||
}, [activeTab]);
|
||||
|
||||
// UniversalListPage Config 정의
|
||||
const config: UniversalListConfig<Post> = useMemo(() => ({
|
||||
// ===== 페이지 기본 정보 =====
|
||||
title: '게시판',
|
||||
description: '게시판의 게시글을 등록하고 관리합니다.',
|
||||
icon: FileText,
|
||||
basePath: '/board',
|
||||
|
||||
// ===== ID 추출 =====
|
||||
idField: 'id',
|
||||
|
||||
// ===== API 액션 =====
|
||||
actions: {
|
||||
getList: async (params) => {
|
||||
const tab = params?.tab || activeTab;
|
||||
if (!tab) {
|
||||
return { success: true, data: [], totalCount: 0 };
|
||||
}
|
||||
|
||||
let result;
|
||||
if (tab === 'my') {
|
||||
// 나의 게시글 조회
|
||||
result = await getMyPosts({
|
||||
search: params?.search,
|
||||
per_page: params?.pageSize || 20,
|
||||
page: params?.page || 1,
|
||||
});
|
||||
} else {
|
||||
// 특정 게시판 게시글 조회
|
||||
result = await getPosts(tab, {
|
||||
search: params?.search,
|
||||
per_page: params?.pageSize || 20,
|
||||
page: params?.page || 1,
|
||||
});
|
||||
}
|
||||
|
||||
if (result.success && result.posts) {
|
||||
return {
|
||||
success: true,
|
||||
data: result.posts,
|
||||
totalCount: result.data?.total || result.posts.length,
|
||||
totalPages: result.data?.last_page || 1,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
success: false,
|
||||
error: result.error,
|
||||
data: [],
|
||||
totalCount: 0,
|
||||
};
|
||||
},
|
||||
deleteItem: async (id: string) => {
|
||||
// 게시글 삭제는 boardCode가 필요하므로 별도 처리
|
||||
// UniversalListPage에서는 사용하지 않고 커스텀 삭제 처리
|
||||
return { success: false, error: 'Use custom delete handler' };
|
||||
},
|
||||
},
|
||||
|
||||
// ===== 테이블 컬럼 =====
|
||||
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' },
|
||||
],
|
||||
|
||||
// ===== 동적 탭 =====
|
||||
fetchTabs,
|
||||
defaultTab: activeTab || undefined,
|
||||
|
||||
// ===== 검색 설정 =====
|
||||
searchPlaceholder: '제목, 작성자 검색...',
|
||||
|
||||
// ===== 상세 보기 모드 =====
|
||||
detailMode: 'none', // 커스텀 라우팅 사용 (boardCode 포함)
|
||||
|
||||
// ===== 헤더 액션 =====
|
||||
headerActions: ({ onCreate }) => (
|
||||
<>
|
||||
<DateRangeSelector
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onStartDateChange={setStartDate}
|
||||
onEndDateChange={setEndDate}
|
||||
/>
|
||||
<Button
|
||||
className="ml-auto"
|
||||
onClick={() => {
|
||||
const boardCode = activeTab !== 'my' ? activeTab : boards[0]?.boardCode;
|
||||
if (boardCode) {
|
||||
router.push(`/ko/board/${boardCode}/create`);
|
||||
} else {
|
||||
router.push('/ko/board/create');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
게시글 등록
|
||||
</Button>
|
||||
</>
|
||||
),
|
||||
|
||||
// ===== 삭제 확인 메시지 =====
|
||||
deleteConfirmMessage: {
|
||||
title: '게시글 삭제',
|
||||
description: '정말 삭제하시겠습니까?',
|
||||
},
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
renderTableRow: (
|
||||
item: Post,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Post>
|
||||
) => {
|
||||
const { isSelected, onToggle } = handlers;
|
||||
const isMyPost = item.authorId === currentUserId;
|
||||
|
||||
const handleRowClick = () => {
|
||||
router.push(`/ko/board/${item.boardCode}/${item.id}`);
|
||||
};
|
||||
|
||||
const handleEdit = () => {
|
||||
router.push(`/ko/board/${item.boardCode}/${item.id}/edit`);
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (confirm('정말 삭제하시겠습니까?')) {
|
||||
const result = await deletePost(item.boardCode, item.id);
|
||||
if (result.success) {
|
||||
window.location.reload(); // 삭제 후 새로고침
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="hover:bg-muted/50 cursor-pointer"
|
||||
onClick={handleRowClick}
|
||||
>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox checked={isSelected} onCheckedChange={onToggle} />
|
||||
</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={handleEdit}
|
||||
>
|
||||
<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={handleDelete}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
},
|
||||
|
||||
// ===== 모바일 카드 렌더링 =====
|
||||
renderMobileCard: (
|
||||
item: Post,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Post>
|
||||
) => {
|
||||
const { isSelected, onToggle } = handlers;
|
||||
const isMyPost = item.authorId === currentUserId;
|
||||
|
||||
const handleRowClick = () => {
|
||||
router.push(`/ko/board/${item.boardCode}/${item.id}`);
|
||||
};
|
||||
|
||||
const handleEdit = () => {
|
||||
router.push(`/ko/board/${item.boardCode}/${item.id}/edit`);
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (confirm('정말 삭제하시겠습니까?')) {
|
||||
const result = await deletePost(item.boardCode, item.id);
|
||||
if (result.success) {
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ListMobileCard
|
||||
key={item.id}
|
||||
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={handleEdit}
|
||||
>
|
||||
<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={handleDelete}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" /> 삭제
|
||||
</Button>
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
onClick={handleRowClick}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
// ===== 추가 옵션 =====
|
||||
showCheckbox: true,
|
||||
showRowNumber: true,
|
||||
itemsPerPage: 20,
|
||||
}), [activeTab, boards, currentUserId, fetchTabs, router, startDate, endDate]);
|
||||
|
||||
return (
|
||||
<UniversalListPage<Post>
|
||||
config={config}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default BoardListUnified;
|
||||
@@ -0,0 +1,640 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 발주관리 리스트 - UniversalListPage 버전
|
||||
*
|
||||
* 특이 케이스:
|
||||
* - ScheduleCalendar 컴포넌트 (beforeTableContent)
|
||||
* - 9개의 다중선택 필터
|
||||
* - 달력 날짜 클릭 시 테이블 필터링
|
||||
* - 클라이언트 사이드 필터링/페이지네이션
|
||||
*/
|
||||
|
||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Package, Pencil, Trash2, Plus } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { TableCell, TableRow } from '@/components/ui/table';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { MultiSelectCombobox, MultiSelectOption } from '@/components/ui/multi-select-combobox';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
UniversalListPage,
|
||||
type UniversalListConfig,
|
||||
type SelectionHandlers,
|
||||
type RowClickHandlers,
|
||||
type FilterFieldConfig,
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
|
||||
import { ScheduleCalendar, ScheduleEvent, DayBadge } from '@/components/common/ScheduleCalendar';
|
||||
import { format, parseISO, isSameDay, startOfDay } from 'date-fns';
|
||||
import type { Order } from './types';
|
||||
import {
|
||||
ORDER_STATUS_OPTIONS,
|
||||
ORDER_SORT_OPTIONS,
|
||||
ORDER_STATUS_STYLES,
|
||||
ORDER_STATUS_LABELS,
|
||||
ORDER_TYPE_OPTIONS,
|
||||
ORDER_TYPE_LABELS,
|
||||
MOCK_PARTNERS,
|
||||
MOCK_SITES,
|
||||
MOCK_CONSTRUCTION_PM,
|
||||
MOCK_ORDER_MANAGERS,
|
||||
MOCK_ORDER_COMPANIES,
|
||||
MOCK_WORK_TEAM_LEADERS,
|
||||
getScheduleColorByManager,
|
||||
} from './types';
|
||||
import {
|
||||
getOrderList,
|
||||
deleteOrder,
|
||||
deleteOrders,
|
||||
} from './actions';
|
||||
|
||||
interface OrderManagementUnifiedProps {
|
||||
initialData?: Order[];
|
||||
}
|
||||
|
||||
export function OrderManagementUnified({ initialData }: OrderManagementUnifiedProps) {
|
||||
const router = useRouter();
|
||||
|
||||
// 달력 관련 상태 (beforeTableContent에서 사용하므로 config 외부에서 관리)
|
||||
const [selectedCalendarDate, setSelectedCalendarDate] = useState<Date | null>(null);
|
||||
const [calendarDate, setCalendarDate] = useState<Date>(new Date());
|
||||
const [siteFilters, setSiteFilters] = useState<string[]>([]);
|
||||
const [workTeamFilters, setWorkTeamFilters] = useState<string[]>([]);
|
||||
|
||||
// 날짜 범위 필터 상태
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
|
||||
// 전체 데이터 (달력 이벤트용)
|
||||
const [allOrders, setAllOrders] = useState<Order[]>(initialData || []);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// 필터 옵션들
|
||||
const siteOptions: MultiSelectOption[] = useMemo(() => MOCK_SITES, []);
|
||||
const workTeamOptions: MultiSelectOption[] = useMemo(() => MOCK_WORK_TEAM_LEADERS, []);
|
||||
const partnerOptions: MultiSelectOption[] = useMemo(() => MOCK_PARTNERS, []);
|
||||
const constructionPMOptions: MultiSelectOption[] = useMemo(() => MOCK_CONSTRUCTION_PM, []);
|
||||
const orderManagerOptions: MultiSelectOption[] = useMemo(() => MOCK_ORDER_MANAGERS, []);
|
||||
const orderCompanyOptions: MultiSelectOption[] = useMemo(() => MOCK_ORDER_COMPANIES, []);
|
||||
const orderTypeOptions: MultiSelectOption[] = useMemo(() => ORDER_TYPE_OPTIONS, []);
|
||||
|
||||
// 데이터 로드
|
||||
const loadData = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await getOrderList({
|
||||
size: 1000,
|
||||
startDate: startDate || undefined,
|
||||
endDate: endDate || undefined,
|
||||
});
|
||||
|
||||
if (result.success && result.data) {
|
||||
setAllOrders(result.data.items);
|
||||
}
|
||||
} catch {
|
||||
console.error('데이터 로드 실패');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [startDate, endDate]);
|
||||
|
||||
// 초기 데이터가 없으면 로드
|
||||
useEffect(() => {
|
||||
if (!initialData || initialData.length === 0) {
|
||||
loadData();
|
||||
}
|
||||
}, [initialData, loadData]);
|
||||
|
||||
// 달력용 이벤트 데이터 변환 (필터 적용)
|
||||
const calendarEvents: ScheduleEvent[] = useMemo(() => {
|
||||
return allOrders
|
||||
.filter((order) => {
|
||||
// 현장 필터
|
||||
if (siteFilters.length > 0) {
|
||||
const matchingSite = MOCK_SITES.find((s) => order.siteName.includes(s.label.split(' ')[0]));
|
||||
if (!matchingSite || !siteFilters.includes(matchingSite.value)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 작업반장 필터
|
||||
if (workTeamFilters.length > 0) {
|
||||
const matchingLeader = MOCK_WORK_TEAM_LEADERS.find((l) => order.orderManager.includes(l.label.replace('반장', '')));
|
||||
if (!matchingLeader || !workTeamFilters.includes(matchingLeader.value)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
})
|
||||
.map((order) => ({
|
||||
id: order.id,
|
||||
title: `${order.orderManager} - ${order.siteName} / ${order.orderNumber}`,
|
||||
startDate: order.periodStart,
|
||||
endDate: order.periodEnd,
|
||||
color: getScheduleColorByManager(order.orderManager),
|
||||
status: order.status,
|
||||
data: order,
|
||||
}));
|
||||
}, [allOrders, siteFilters, workTeamFilters]);
|
||||
|
||||
// 달력용 뱃지 데이터 - 사용하지 않음
|
||||
const calendarBadges: DayBadge[] = [];
|
||||
|
||||
// 달력 이벤트 핸들러
|
||||
const handleCalendarDateClick = useCallback((date: Date) => {
|
||||
if (selectedCalendarDate && isSameDay(selectedCalendarDate, date)) {
|
||||
setSelectedCalendarDate(null);
|
||||
} else {
|
||||
setSelectedCalendarDate(date);
|
||||
}
|
||||
}, [selectedCalendarDate]);
|
||||
|
||||
const handleCalendarEventClick = useCallback((event: ScheduleEvent) => {
|
||||
if (event.data) {
|
||||
router.push(`/ko/construction/order/order-management/${event.id}`);
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
const handleCalendarMonthChange = useCallback((date: Date) => {
|
||||
setCalendarDate(date);
|
||||
}, []);
|
||||
|
||||
// 날짜 포맷
|
||||
const formatDate = (dateStr: string | null) => {
|
||||
if (!dateStr) return '-';
|
||||
return dateStr.split('T')[0];
|
||||
};
|
||||
|
||||
// 달력 필터 슬롯
|
||||
const calendarFilterSlot = (
|
||||
<div className="flex items-center gap-2">
|
||||
<MultiSelectCombobox
|
||||
options={siteOptions}
|
||||
value={siteFilters}
|
||||
onChange={setSiteFilters}
|
||||
placeholder="현장"
|
||||
searchPlaceholder="현장 검색..."
|
||||
className="w-[160px]"
|
||||
/>
|
||||
<MultiSelectCombobox
|
||||
options={workTeamOptions}
|
||||
value={workTeamFilters}
|
||||
onChange={setWorkTeamFilters}
|
||||
placeholder="작업반장"
|
||||
searchPlaceholder="작업반장 검색..."
|
||||
className="w-[130px]"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
// UniversalListPage Config 정의
|
||||
const config: UniversalListConfig<Order> = useMemo(() => ({
|
||||
// ===== 페이지 기본 정보 =====
|
||||
title: '발주관리',
|
||||
description: '발주 스케줄 및 목록을 관리합니다',
|
||||
icon: Package,
|
||||
basePath: '/construction/order/order-management',
|
||||
|
||||
// ===== ID 추출 =====
|
||||
idField: 'id',
|
||||
|
||||
// ===== API 액션 =====
|
||||
actions: {
|
||||
getList: async () => {
|
||||
const result = await getOrderList({
|
||||
size: 1000,
|
||||
startDate: startDate || undefined,
|
||||
endDate: endDate || undefined,
|
||||
});
|
||||
return {
|
||||
success: result.success,
|
||||
data: result.data?.items || [],
|
||||
totalCount: result.data?.items?.length || 0,
|
||||
error: result.error,
|
||||
};
|
||||
},
|
||||
deleteItem: async (id: string) => {
|
||||
return await deleteOrder(id);
|
||||
},
|
||||
deleteBulk: async (ids: string[]) => {
|
||||
return await deleteOrders(ids);
|
||||
},
|
||||
},
|
||||
|
||||
// ===== 테이블 컬럼 =====
|
||||
columns: [
|
||||
{ key: 'no', label: '번호', className: 'w-[50px] text-center' },
|
||||
{ key: 'contractNumber', label: '계약번호', className: 'w-[100px]' },
|
||||
{ key: 'partnerName', label: '거래처', className: 'w-[80px]' },
|
||||
{ key: 'siteName', label: '현장명', className: 'min-w-[100px]' },
|
||||
{ key: 'name', label: '명칭', className: 'w-[80px]' },
|
||||
{ key: 'constructionPM', label: '공사PM', className: 'w-[70px]' },
|
||||
{ key: 'orderManager', label: '발주담당자', className: 'w-[80px]' },
|
||||
{ key: 'orderNumber', label: '발주번호', className: 'w-[100px]' },
|
||||
{ key: 'orderCompany', label: '발주처명', className: 'w-[80px]' },
|
||||
{ key: 'workTeamLeader', label: '작업반장', className: 'w-[70px]' },
|
||||
{ key: 'constructionStartDate', label: '시공투입일', className: 'w-[90px]' },
|
||||
{ key: 'orderType', label: '구분', className: 'w-[80px] text-center' },
|
||||
{ key: 'item', label: '품목', className: 'w-[80px]' },
|
||||
{ key: 'quantity', label: '수량', className: 'w-[60px] text-right' },
|
||||
{ key: 'orderDate', label: '발주일', className: 'w-[90px]' },
|
||||
{ key: 'plannedDeliveryDate', label: '계획인수일', className: 'w-[90px]' },
|
||||
{ key: 'actualDeliveryDate', label: '실제인수일', className: 'w-[90px]' },
|
||||
{ key: 'status', label: '상태', className: 'w-[80px] text-center' },
|
||||
{ key: 'actions', label: '작업', className: 'w-[80px] text-center' },
|
||||
],
|
||||
|
||||
// ===== 클라이언트 사이드 필터링 =====
|
||||
clientSideFiltering: true,
|
||||
|
||||
// 검색 필터 함수
|
||||
searchFilter: (item: Order, searchValue: string) => {
|
||||
const search = searchValue.toLowerCase();
|
||||
return (
|
||||
item.orderNumber.toLowerCase().includes(search) ||
|
||||
item.partnerName.toLowerCase().includes(search) ||
|
||||
item.siteName.toLowerCase().includes(search) ||
|
||||
item.orderManager.toLowerCase().includes(search)
|
||||
);
|
||||
},
|
||||
|
||||
// ===== 필터 설정 =====
|
||||
filterConfig: [
|
||||
{ key: 'partners', label: '거래처', type: 'multi', options: partnerOptions },
|
||||
{ key: 'sites', label: '현장명', type: 'multi', options: siteOptions },
|
||||
{ key: 'constructionPMs', label: '공사PM', type: 'multi', options: constructionPMOptions },
|
||||
{ key: 'orderManagers', label: '발주담당자', type: 'multi', options: orderManagerOptions },
|
||||
{ key: 'orderCompanies', label: '발주처', type: 'multi', options: orderCompanyOptions },
|
||||
{ key: 'workTeamLeaders', label: '작업반장', type: 'multi', options: workTeamOptions },
|
||||
{ key: 'orderTypes', label: '구분', type: 'multi', options: orderTypeOptions },
|
||||
{ key: 'status', label: '상태', type: 'single', options: ORDER_STATUS_OPTIONS.filter(opt => opt.value !== 'all') },
|
||||
{ key: 'sortBy', label: '정렬', type: 'single', options: ORDER_SORT_OPTIONS, allOptionLabel: '최신순' },
|
||||
] as FilterFieldConfig[],
|
||||
|
||||
// 커스텀 필터 적용 함수
|
||||
customFilterFn: (items: Order[], filterValues: Record<string, string | string[]>) => {
|
||||
return items.filter((order) => {
|
||||
// 거래처 필터
|
||||
const partners = filterValues.partners as string[] || [];
|
||||
if (partners.length > 0) {
|
||||
const matchingPartner = MOCK_PARTNERS.find((p) => p.label === order.partnerName);
|
||||
if (!matchingPartner || !partners.includes(matchingPartner.value)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 현장명 필터
|
||||
const sites = filterValues.sites as string[] || [];
|
||||
if (sites.length > 0) {
|
||||
const matchingSite = MOCK_SITES.find((s) => s.label === order.siteName);
|
||||
if (!matchingSite || !sites.includes(matchingSite.value)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 공사PM 필터
|
||||
const constructionPMs = filterValues.constructionPMs as string[] || [];
|
||||
if (constructionPMs.length > 0) {
|
||||
const matchingPM = MOCK_CONSTRUCTION_PM.find((p) => p.label === order.constructionPM);
|
||||
if (!matchingPM || !constructionPMs.includes(matchingPM.value)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 발주담당자 필터
|
||||
const orderManagers = filterValues.orderManagers as string[] || [];
|
||||
if (orderManagers.length > 0) {
|
||||
const matchingManager = MOCK_ORDER_MANAGERS.find((m) => m.label === order.orderManager);
|
||||
if (!matchingManager || !orderManagers.includes(matchingManager.value)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 발주처 필터
|
||||
const orderCompanies = filterValues.orderCompanies as string[] || [];
|
||||
if (orderCompanies.length > 0) {
|
||||
const matchingCompany = MOCK_ORDER_COMPANIES.find((c) => c.label === order.orderCompany);
|
||||
if (!matchingCompany || !orderCompanies.includes(matchingCompany.value)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 작업반장 필터
|
||||
const workTeamLeaders = filterValues.workTeamLeaders as string[] || [];
|
||||
if (workTeamLeaders.length > 0) {
|
||||
const matchingLeader = MOCK_WORK_TEAM_LEADERS.find((l) => l.label === order.workTeamLeader);
|
||||
if (!matchingLeader || !workTeamLeaders.includes(matchingLeader.value)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 구분 필터
|
||||
const orderTypes = filterValues.orderTypes as string[] || [];
|
||||
if (orderTypes.length > 0 && !orderTypes.includes(order.orderType)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 상태 필터
|
||||
const status = filterValues.status as string || 'all';
|
||||
if (status !== 'all' && order.status !== status) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 달력 날짜 필터 (selectedCalendarDate)
|
||||
if (selectedCalendarDate) {
|
||||
const orderStart = startOfDay(parseISO(order.periodStart));
|
||||
const orderEnd = startOfDay(parseISO(order.periodEnd));
|
||||
const selected = startOfDay(selectedCalendarDate);
|
||||
|
||||
if (selected < orderStart || selected > orderEnd) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
},
|
||||
|
||||
// 커스텀 정렬 함수
|
||||
customSortFn: (items: Order[], filterValues: Record<string, string | string[]>) => {
|
||||
const sortBy = filterValues.sortBy as string || 'latest';
|
||||
const sorted = [...items];
|
||||
|
||||
switch (sortBy) {
|
||||
case 'latest':
|
||||
sorted.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
break;
|
||||
case 'oldest':
|
||||
sorted.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
|
||||
break;
|
||||
case 'partnerNameAsc':
|
||||
sorted.sort((a, b) => a.partnerName.localeCompare(b.partnerName, 'ko'));
|
||||
break;
|
||||
case 'partnerNameDesc':
|
||||
sorted.sort((a, b) => b.partnerName.localeCompare(a.partnerName, 'ko'));
|
||||
break;
|
||||
case 'siteNameAsc':
|
||||
sorted.sort((a, b) => a.siteName.localeCompare(b.siteName, 'ko'));
|
||||
break;
|
||||
case 'siteNameDesc':
|
||||
sorted.sort((a, b) => b.siteName.localeCompare(a.siteName, 'ko'));
|
||||
break;
|
||||
case 'deliveryDateAsc':
|
||||
sorted.sort((a, b) => a.plannedDeliveryDate.localeCompare(b.plannedDeliveryDate));
|
||||
break;
|
||||
case 'deliveryDateDesc':
|
||||
sorted.sort((a, b) => b.plannedDeliveryDate.localeCompare(a.plannedDeliveryDate));
|
||||
break;
|
||||
}
|
||||
|
||||
return sorted;
|
||||
},
|
||||
|
||||
// ===== 검색 설정 =====
|
||||
searchPlaceholder: '발주번호, 거래처, 현장명, 발주담당 검색',
|
||||
|
||||
// ===== 상세 보기 모드 =====
|
||||
detailMode: 'page',
|
||||
|
||||
// ===== 헤더 액션 =====
|
||||
headerActions: ({ onCreate }) => (
|
||||
<DateRangeSelector
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onStartDateChange={setStartDate}
|
||||
onEndDateChange={setEndDate}
|
||||
extraActions={
|
||||
<Button onClick={onCreate}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
발주 등록
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
),
|
||||
|
||||
// ===== 테이블 헤더 추가 액션 =====
|
||||
tableHeaderActions: (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{selectedCalendarDate && (
|
||||
<>
|
||||
<span className="text-sm text-primary">
|
||||
({format(selectedCalendarDate, 'M/d')} 필터 적용중)
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setSelectedCalendarDate(null)}
|
||||
>
|
||||
날짜 필터 해제
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
|
||||
// ===== 삭제 확인 메시지 =====
|
||||
deleteConfirmMessage: {
|
||||
title: '발주 삭제',
|
||||
description: '선택한 발주를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.',
|
||||
},
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
renderTableRow: (
|
||||
item: Order,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Order>
|
||||
) => {
|
||||
const { isSelected, onToggle, onRowClick, onEdit, onDelete } = handlers;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => onRowClick(item)}
|
||||
>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={onToggle}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-center text-muted-foreground">{globalIndex}</TableCell>
|
||||
<TableCell>{item.contractNumber}</TableCell>
|
||||
<TableCell>{item.partnerName}</TableCell>
|
||||
<TableCell>{item.siteName}</TableCell>
|
||||
<TableCell>{item.name}</TableCell>
|
||||
<TableCell>{item.constructionPM}</TableCell>
|
||||
<TableCell>{item.orderManager}</TableCell>
|
||||
<TableCell>{item.orderNumber}</TableCell>
|
||||
<TableCell>{item.orderCompany}</TableCell>
|
||||
<TableCell>{item.workTeamLeader}</TableCell>
|
||||
<TableCell>{formatDate(item.constructionStartDate)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<span className="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
||||
{ORDER_TYPE_LABELS[item.orderType]}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>{item.item}</TableCell>
|
||||
<TableCell className="text-right">{item.quantity}</TableCell>
|
||||
<TableCell>{formatDate(item.orderDate)}</TableCell>
|
||||
<TableCell>{formatDate(item.plannedDeliveryDate)}</TableCell>
|
||||
<TableCell>{formatDate(item.actualDeliveryDate)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${ORDER_STATUS_STYLES[item.status]}`}>
|
||||
{ORDER_STATUS_LABELS[item.status]}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
{isSelected && (
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => onEdit?.(item)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
onClick={() => onDelete?.(item)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
},
|
||||
|
||||
// ===== 모바일 카드 렌더링 =====
|
||||
renderMobileCard: (
|
||||
item: Order,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Order>
|
||||
) => {
|
||||
const { isSelected, onToggle, onRowClick, onEdit, onDelete } = handlers;
|
||||
|
||||
return (
|
||||
<ListMobileCard
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
title={item.siteName}
|
||||
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">
|
||||
{item.orderNumber}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
statusBadge={
|
||||
<Badge className={ORDER_STATUS_STYLES[item.status]}>
|
||||
{ORDER_STATUS_LABELS[item.status]}
|
||||
</Badge>
|
||||
}
|
||||
isSelected={isSelected}
|
||||
onToggleSelection={onToggle}
|
||||
onCardClick={() => onRowClick(item)}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||
<InfoField label="거래처" value={item.partnerName} />
|
||||
<InfoField label="발주담당" value={item.orderManager} />
|
||||
<InfoField label="계획납품일" value={formatDate(item.plannedDeliveryDate)} />
|
||||
<InfoField label="구분" value={ORDER_TYPE_LABELS[item.orderType]} />
|
||||
</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(); onEdit?.(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(); onDelete?.(item); }}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
// ===== 테이블 전 콘텐츠 (달력) =====
|
||||
beforeTableContent: (
|
||||
<div className="w-full flex-shrink-0 mb-6">
|
||||
<ScheduleCalendar
|
||||
events={calendarEvents}
|
||||
badges={calendarBadges}
|
||||
currentDate={calendarDate}
|
||||
selectedDate={selectedCalendarDate}
|
||||
onDateClick={handleCalendarDateClick}
|
||||
onEventClick={handleCalendarEventClick}
|
||||
onMonthChange={handleCalendarMonthChange}
|
||||
titleSlot="발주 스케줄"
|
||||
filterSlot={calendarFilterSlot}
|
||||
maxEventsPerDay={5}
|
||||
weekStartsOn={0}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
|
||||
// ===== 추가 옵션 =====
|
||||
showCheckbox: true,
|
||||
showRowNumber: true,
|
||||
itemsPerPage: 20,
|
||||
}), [
|
||||
startDate,
|
||||
endDate,
|
||||
selectedCalendarDate,
|
||||
calendarDate,
|
||||
calendarEvents,
|
||||
calendarBadges,
|
||||
calendarFilterSlot,
|
||||
isLoading,
|
||||
handleCalendarDateClick,
|
||||
handleCalendarEventClick,
|
||||
handleCalendarMonthChange,
|
||||
partnerOptions,
|
||||
siteOptions,
|
||||
constructionPMOptions,
|
||||
orderManagerOptions,
|
||||
orderCompanyOptions,
|
||||
workTeamOptions,
|
||||
orderTypeOptions,
|
||||
router,
|
||||
]);
|
||||
|
||||
return (
|
||||
<UniversalListPage<Order>
|
||||
config={config}
|
||||
initialData={initialData}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default OrderManagementUnified;
|
||||
266
src/components/hr/CardManagement/CardManagementUnified.tsx
Normal file
266
src/components/hr/CardManagement/CardManagementUnified.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { CreditCard, Edit, Trash2, Plus } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { TableRow, TableCell } from '@/components/ui/table';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
||||
import {
|
||||
UniversalListPage,
|
||||
type UniversalListConfig,
|
||||
type SelectionHandlers,
|
||||
type RowClickHandlers,
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import type { Card } from './types';
|
||||
import {
|
||||
CARD_STATUS_LABELS,
|
||||
CARD_STATUS_COLORS,
|
||||
getCardCompanyLabel,
|
||||
} from './types';
|
||||
import { getCards, deleteCard, deleteCards } from './actions';
|
||||
|
||||
// 카드번호는 이미 마스킹되어 있음 (****-****-****-1234)
|
||||
const maskCardNumber = (cardNumber: string): string => {
|
||||
return cardNumber;
|
||||
};
|
||||
|
||||
interface CardManagementUnifiedProps {
|
||||
initialData?: Card[];
|
||||
}
|
||||
|
||||
export function CardManagementUnified({ initialData }: CardManagementUnifiedProps) {
|
||||
// UniversalListPage Config 정의
|
||||
const config: UniversalListConfig<Card> = useMemo(() => ({
|
||||
// ===== 페이지 기본 정보 =====
|
||||
title: '카드관리',
|
||||
description: '카드 목록을 관리합니다',
|
||||
icon: CreditCard,
|
||||
basePath: '/hr/card-management',
|
||||
|
||||
// ===== ID 추출 =====
|
||||
idField: 'id',
|
||||
|
||||
// ===== API 액션 =====
|
||||
actions: {
|
||||
getList: async () => {
|
||||
const result = await getCards({ per_page: 100 });
|
||||
return {
|
||||
success: result.success,
|
||||
data: result.data,
|
||||
totalCount: result.data?.length || 0,
|
||||
error: result.error,
|
||||
};
|
||||
},
|
||||
deleteItem: async (id: string) => {
|
||||
return await deleteCard(id);
|
||||
},
|
||||
deleteBulk: async (ids: string[]) => {
|
||||
return await deleteCards(ids);
|
||||
},
|
||||
},
|
||||
|
||||
// ===== 테이블 컬럼 =====
|
||||
columns: [
|
||||
{ key: 'rowNumber', label: '번호', className: 'w-[60px] text-center' },
|
||||
{ key: 'cardCompany', label: '카드사', className: 'min-w-[100px]' },
|
||||
{ key: 'cardNumber', label: '카드번호', className: 'min-w-[160px]' },
|
||||
{ key: 'cardName', label: '카드명', className: 'min-w-[120px]' },
|
||||
{ key: 'status', label: '상태', className: 'min-w-[80px]' },
|
||||
{ key: 'department', label: '부서', className: 'min-w-[100px]' },
|
||||
{ key: 'userName', label: '사용자', className: 'min-w-[100px]' },
|
||||
{ key: 'position', label: '직책', className: 'min-w-[100px]' },
|
||||
{ key: 'actions', label: '작업', className: 'w-[100px] text-right' },
|
||||
],
|
||||
|
||||
// ===== 클라이언트 사이드 필터링 =====
|
||||
clientSideFiltering: true,
|
||||
|
||||
// 탭 필터 함수
|
||||
tabFilter: (item: Card, activeTab: string) => {
|
||||
if (activeTab === 'all') return true;
|
||||
return item.status === activeTab;
|
||||
},
|
||||
|
||||
// 검색 필터 함수
|
||||
searchFilter: (item: Card, searchValue: string) => {
|
||||
const search = searchValue.toLowerCase();
|
||||
return (
|
||||
item.cardName.toLowerCase().includes(search) ||
|
||||
item.cardNumber.includes(search) ||
|
||||
getCardCompanyLabel(item.cardCompany).toLowerCase().includes(search) ||
|
||||
(item.user?.employeeName.toLowerCase().includes(search) || false)
|
||||
);
|
||||
},
|
||||
|
||||
// ===== 탭 설정 (데이터 기반으로 count 업데이트) =====
|
||||
tabs: [
|
||||
{ value: 'all', label: '전체', count: 0, color: 'gray' },
|
||||
{ value: 'active', label: '사용', count: 0, color: 'green' },
|
||||
{ value: 'suspended', label: '정지', count: 0, color: 'red' },
|
||||
],
|
||||
|
||||
// ===== 검색 설정 =====
|
||||
searchPlaceholder: '카드명, 카드번호, 카드사, 사용자 검색...',
|
||||
|
||||
// ===== 상세 보기 모드 =====
|
||||
detailMode: 'page',
|
||||
|
||||
// ===== 헤더 액션 =====
|
||||
headerActions: ({ onCreate }) => (
|
||||
<Button className="ml-auto" onClick={onCreate}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
카드 등록
|
||||
</Button>
|
||||
),
|
||||
|
||||
// ===== 삭제 확인 메시지 =====
|
||||
deleteConfirmMessage: {
|
||||
title: '카드 삭제',
|
||||
description: '삭제된 카드 정보는 복구할 수 없습니다.',
|
||||
},
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
renderTableRow: (
|
||||
item: Card,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Card>
|
||||
) => {
|
||||
const { isSelected, onToggle, onRowClick, onEdit, onDelete } = handlers;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="hover:bg-muted/50 cursor-pointer"
|
||||
onClick={() => onRowClick(item)}
|
||||
>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={onToggle}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground text-center">
|
||||
{globalIndex}
|
||||
</TableCell>
|
||||
<TableCell>{getCardCompanyLabel(item.cardCompany)}</TableCell>
|
||||
<TableCell className="font-mono">{maskCardNumber(item.cardNumber)}</TableCell>
|
||||
<TableCell>{item.cardName}</TableCell>
|
||||
<TableCell>
|
||||
<Badge className={CARD_STATUS_COLORS[item.status]}>
|
||||
{CARD_STATUS_LABELS[item.status]}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{item.user?.departmentName || '-'}</TableCell>
|
||||
<TableCell>{item.user?.employeeName || '-'}</TableCell>
|
||||
<TableCell>{item.user?.positionName || '-'}</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={() => onEdit?.(item)}
|
||||
title="수정"
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onDelete?.(item)}
|
||||
title="삭제"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
},
|
||||
|
||||
// ===== 모바일 카드 렌더링 =====
|
||||
renderMobileCard: (
|
||||
item: Card,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Card>
|
||||
) => {
|
||||
const { isSelected, onToggle, onRowClick, onEdit, onDelete } = handlers;
|
||||
|
||||
return (
|
||||
<ListMobileCard
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
title={item.cardName}
|
||||
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">
|
||||
{getCardCompanyLabel(item.cardCompany)}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
statusBadge={
|
||||
<Badge className={CARD_STATUS_COLORS[item.status]}>
|
||||
{CARD_STATUS_LABELS[item.status]}
|
||||
</Badge>
|
||||
}
|
||||
isSelected={isSelected}
|
||||
onToggleSelection={onToggle}
|
||||
onCardClick={() => onRowClick(item)}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||
<InfoField label="카드번호" value={maskCardNumber(item.cardNumber)} />
|
||||
<InfoField label="유효기간" value={`${item.expiryDate.slice(0, 2)}/${item.expiryDate.slice(2)}`} />
|
||||
<InfoField label="부서" value={item.user?.departmentName || '-'} />
|
||||
<InfoField label="사용자" value={item.user?.employeeName || '-'} />
|
||||
<InfoField label="직책" value={item.user?.positionName || '-'} />
|
||||
</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(); onEdit?.(item); }}
|
||||
>
|
||||
<Edit 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(); onDelete?.(item); }}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
// ===== 추가 옵션 =====
|
||||
showCheckbox: true,
|
||||
showRowNumber: true,
|
||||
itemsPerPage: 20,
|
||||
}), []);
|
||||
|
||||
return (
|
||||
<UniversalListPage<Card>
|
||||
config={config}
|
||||
initialData={initialData}
|
||||
/>
|
||||
);
|
||||
}
|
||||
525
src/components/templates/UniversalListPage/index.tsx
Normal file
525
src/components/templates/UniversalListPage/index.tsx
Normal file
@@ -0,0 +1,525 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* UniversalListPage - 통합 리스트 페이지 컴포넌트
|
||||
*
|
||||
* 59개 리스트 페이지를 하나의 config 기반 컴포넌트로 통합
|
||||
* 기존 기능 100% 유지, 테이블 영역만 공통화
|
||||
*
|
||||
* 지원 모드:
|
||||
* - 서버 사이드 필터링/페이지네이션 (기본)
|
||||
* - 클라이언트 사이드 필터링/페이지네이션 (clientSideFiltering: true)
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import {
|
||||
IntegratedListTemplateV2,
|
||||
type PaginationConfig,
|
||||
} from '@/components/templates/IntegratedListTemplateV2';
|
||||
import type {
|
||||
UniversalListPageProps,
|
||||
TabOption,
|
||||
FilterValues,
|
||||
} from './types';
|
||||
|
||||
export function UniversalListPage<T>({
|
||||
config,
|
||||
initialData,
|
||||
initialTotalCount,
|
||||
}: UniversalListPageProps<T>) {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const locale = (params.locale as string) || 'ko';
|
||||
|
||||
// ===== 상태 관리 =====
|
||||
// 원본 데이터 (클라이언트 사이드 필터링용)
|
||||
const [rawData, setRawData] = useState<T[]>(initialData || []);
|
||||
// UI 상태
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [isLoading, setIsLoading] = useState(!initialData);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
||||
// 탭이 없으면 IntegratedListTemplateV2의 기본값 'default'와 일치해야 함
|
||||
const [activeTab, setActiveTab] = useState(
|
||||
config.defaultTab || config.tabs?.[0]?.value || 'default'
|
||||
);
|
||||
const [filters, setFilters] = useState<Record<string, string | string[]>>(
|
||||
config.initialFilters || {}
|
||||
);
|
||||
const [tabs, setTabs] = useState<TabOption[]>(config.tabs || []);
|
||||
|
||||
// 모달 상태 (detailMode === 'modal'일 때 사용)
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [selectedItem, setSelectedItem] = useState<T | null>(null);
|
||||
|
||||
// 삭제 다이얼로그 상태
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [itemToDelete, setItemToDelete] = useState<T | null>(null);
|
||||
const [isBulkDelete, setIsBulkDelete] = useState(false);
|
||||
|
||||
const itemsPerPage = config.itemsPerPage || 20;
|
||||
|
||||
// ===== ID 추출 헬퍼 =====
|
||||
const getItemId = useCallback(
|
||||
(item: T): string => {
|
||||
if (typeof config.idField === 'function') {
|
||||
return config.idField(item);
|
||||
}
|
||||
return String(item[config.idField]);
|
||||
},
|
||||
[config.idField]
|
||||
);
|
||||
|
||||
// ===== 클라이언트 사이드 필터링 =====
|
||||
const filteredData = useMemo(() => {
|
||||
if (!config.clientSideFiltering) {
|
||||
return rawData;
|
||||
}
|
||||
|
||||
let filtered = [...rawData];
|
||||
|
||||
// 커스텀 필터 함수 (filterConfig 기반 복잡한 필터링)
|
||||
if (config.customFilterFn) {
|
||||
filtered = config.customFilterFn(filtered, filters);
|
||||
}
|
||||
|
||||
// 탭 필터
|
||||
if (activeTab !== 'all' && config.tabFilter) {
|
||||
filtered = filtered.filter((item) => config.tabFilter!(item, activeTab));
|
||||
}
|
||||
|
||||
// 검색 필터
|
||||
if (searchValue && config.searchFilter) {
|
||||
filtered = filtered.filter((item) =>
|
||||
config.searchFilter!(item, searchValue)
|
||||
);
|
||||
}
|
||||
|
||||
// 커스텀 정렬 함수
|
||||
if (config.customSortFn) {
|
||||
filtered = config.customSortFn(filtered, filters);
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}, [rawData, activeTab, searchValue, filters, config.clientSideFiltering, config.tabFilter, config.searchFilter, config.customFilterFn, config.customSortFn]);
|
||||
|
||||
// 클라이언트 사이드 페이지네이션
|
||||
const paginatedData = useMemo(() => {
|
||||
if (!config.clientSideFiltering) {
|
||||
return rawData;
|
||||
}
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
return filteredData.slice(startIndex, startIndex + itemsPerPage);
|
||||
}, [config.clientSideFiltering, filteredData, currentPage, itemsPerPage, rawData]);
|
||||
|
||||
// 총 개수 및 페이지 수
|
||||
const totalCount = config.clientSideFiltering ? filteredData.length : rawData.length;
|
||||
const totalPages = Math.ceil(totalCount / itemsPerPage);
|
||||
|
||||
// 표시할 데이터
|
||||
const displayData = config.clientSideFiltering ? paginatedData : rawData;
|
||||
|
||||
// ===== 탭 카운트 계산 (클라이언트 사이드) =====
|
||||
const computedTabs = useMemo(() => {
|
||||
if (!config.clientSideFiltering || !config.tabs || !config.tabFilter) {
|
||||
return tabs;
|
||||
}
|
||||
|
||||
return config.tabs.map((tab) => {
|
||||
if (tab.value === 'all') {
|
||||
return { ...tab, count: rawData.length };
|
||||
}
|
||||
const count = rawData.filter((item) => config.tabFilter!(item, tab.value)).length;
|
||||
return { ...tab, count };
|
||||
});
|
||||
}, [config.clientSideFiltering, config.tabs, config.tabFilter, rawData, tabs]);
|
||||
|
||||
// ===== 데이터 로딩 =====
|
||||
const fetchData = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await config.actions.getList(
|
||||
config.clientSideFiltering
|
||||
? { pageSize: 9999 } // 클라이언트 사이드: 전체 데이터 로드
|
||||
: {
|
||||
page: currentPage,
|
||||
pageSize: itemsPerPage,
|
||||
search: searchValue,
|
||||
filters,
|
||||
tab: activeTab,
|
||||
}
|
||||
);
|
||||
|
||||
if (result.success && result.data) {
|
||||
setRawData(result.data);
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
toast.error(result.error || '데이터를 불러오는데 실패했습니다.');
|
||||
setIsLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[UniversalListPage] Fetch error:', error);
|
||||
toast.error('데이터를 불러오는데 실패했습니다.');
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [config.actions, config.clientSideFiltering, currentPage, itemsPerPage, searchValue, filters, activeTab]);
|
||||
|
||||
// 초기 로딩
|
||||
useEffect(() => {
|
||||
if (!initialData) {
|
||||
fetchData();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 서버 사이드 필터링: 의존성 변경 시 데이터 새로고침
|
||||
useEffect(() => {
|
||||
if (!config.clientSideFiltering && !isLoading) {
|
||||
fetchData();
|
||||
}
|
||||
}, [currentPage, searchValue, filters, activeTab]);
|
||||
|
||||
// 동적 탭 로딩
|
||||
useEffect(() => {
|
||||
if (config.fetchTabs) {
|
||||
config.fetchTabs().then((fetchedTabs) => {
|
||||
setTabs(fetchedTabs);
|
||||
if (!activeTab || activeTab === 'all') {
|
||||
setActiveTab(fetchedTabs[0]?.value || 'all');
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [config.fetchTabs]);
|
||||
|
||||
// ===== 선택 핸들러 =====
|
||||
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(() => {
|
||||
const currentData = displayData;
|
||||
if (selectedItems.size === currentData.length && currentData.length > 0) {
|
||||
setSelectedItems(new Set());
|
||||
} else {
|
||||
const allIds = new Set(currentData.map((item) => getItemId(item)));
|
||||
setSelectedItems(allIds);
|
||||
}
|
||||
}, [displayData, selectedItems.size, getItemId]);
|
||||
|
||||
// ===== 행 클릭 핸들러 =====
|
||||
const handleRowClick = useCallback(
|
||||
(item: T) => {
|
||||
const id = getItemId(item);
|
||||
const detailMode = config.detailMode || 'page';
|
||||
|
||||
if (detailMode === 'modal') {
|
||||
setSelectedItem(item);
|
||||
setIsModalOpen(true);
|
||||
} else if (detailMode === 'page') {
|
||||
router.push(`/${locale}${config.basePath}/${id}`);
|
||||
}
|
||||
},
|
||||
[config.basePath, config.detailMode, getItemId, locale, router]
|
||||
);
|
||||
|
||||
const handleEdit = useCallback(
|
||||
(item: T) => {
|
||||
const id = getItemId(item);
|
||||
router.push(`/${locale}${config.basePath}/${id}/edit`);
|
||||
},
|
||||
[config.basePath, getItemId, locale, router]
|
||||
);
|
||||
|
||||
const handleCreate = useCallback(() => {
|
||||
router.push(`/${locale}${config.basePath}/new`);
|
||||
}, [config.basePath, locale, router]);
|
||||
|
||||
// ===== 삭제 핸들러 =====
|
||||
const handleDeleteClick = useCallback((item: T) => {
|
||||
setItemToDelete(item);
|
||||
setIsBulkDelete(false);
|
||||
setDeleteDialogOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleBulkDeleteClick = useCallback(() => {
|
||||
if (selectedItems.size === 0) {
|
||||
toast.warning('삭제할 항목을 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
setIsBulkDelete(true);
|
||||
setDeleteDialogOpen(true);
|
||||
}, [selectedItems.size]);
|
||||
|
||||
const handleDeleteConfirm = useCallback(async () => {
|
||||
try {
|
||||
if (isBulkDelete) {
|
||||
if (config.actions.deleteBulk) {
|
||||
const result = await config.actions.deleteBulk(Array.from(selectedItems));
|
||||
if (result.success) {
|
||||
toast.success(`${selectedItems.size}건이 삭제되었습니다.`);
|
||||
// 클라이언트 사이드: 로컬 데이터에서 제거
|
||||
if (config.clientSideFiltering) {
|
||||
setRawData((prev) =>
|
||||
prev.filter((item) => !selectedItems.has(getItemId(item)))
|
||||
);
|
||||
} else {
|
||||
fetchData();
|
||||
}
|
||||
setSelectedItems(new Set());
|
||||
} else {
|
||||
toast.error(result.error || '삭제에 실패했습니다.');
|
||||
}
|
||||
} else if (config.actions.deleteItem) {
|
||||
const ids = Array.from(selectedItems);
|
||||
let successCount = 0;
|
||||
for (const id of ids) {
|
||||
const result = await config.actions.deleteItem(id);
|
||||
if (result.success) successCount++;
|
||||
}
|
||||
toast.success(`${successCount}건이 삭제되었습니다.`);
|
||||
if (config.clientSideFiltering) {
|
||||
setRawData((prev) =>
|
||||
prev.filter((item) => !selectedItems.has(getItemId(item)))
|
||||
);
|
||||
} else {
|
||||
fetchData();
|
||||
}
|
||||
setSelectedItems(new Set());
|
||||
}
|
||||
} else if (itemToDelete) {
|
||||
if (config.actions.deleteItem) {
|
||||
const id = getItemId(itemToDelete);
|
||||
const result = await config.actions.deleteItem(id);
|
||||
if (result.success) {
|
||||
toast.success('삭제되었습니다.');
|
||||
if (config.clientSideFiltering) {
|
||||
setRawData((prev) => prev.filter((item) => getItemId(item) !== id));
|
||||
} else {
|
||||
fetchData();
|
||||
}
|
||||
} else {
|
||||
toast.error(result.error || '삭제에 실패했습니다.');
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[UniversalListPage] Delete error:', error);
|
||||
toast.error('삭제 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setDeleteDialogOpen(false);
|
||||
setItemToDelete(null);
|
||||
}
|
||||
}, [config.actions, config.clientSideFiltering, fetchData, getItemId, isBulkDelete, itemToDelete, selectedItems]);
|
||||
|
||||
// ===== 검색 핸들러 =====
|
||||
const handleSearchChange = useCallback((value: string) => {
|
||||
setSearchValue(value);
|
||||
setCurrentPage(1);
|
||||
setSelectedItems(new Set());
|
||||
}, []);
|
||||
|
||||
// ===== 필터 핸들러 =====
|
||||
const handleFilterChange = useCallback((key: string, value: string | string[]) => {
|
||||
setFilters((prev) => ({ ...prev, [key]: value }));
|
||||
setCurrentPage(1);
|
||||
setSelectedItems(new Set());
|
||||
}, []);
|
||||
|
||||
const handleFilterReset = useCallback(() => {
|
||||
setFilters(config.initialFilters || {});
|
||||
setCurrentPage(1);
|
||||
setSelectedItems(new Set());
|
||||
}, [config.initialFilters]);
|
||||
|
||||
// ===== 탭 핸들러 =====
|
||||
const handleTabChange = useCallback((value: string) => {
|
||||
setActiveTab(value);
|
||||
setCurrentPage(1);
|
||||
setSelectedItems(new Set());
|
||||
}, []);
|
||||
|
||||
// ===== 페이지네이션 핸들러 =====
|
||||
const handlePageChange = useCallback((page: number) => {
|
||||
setCurrentPage(page);
|
||||
setSelectedItems(new Set());
|
||||
}, []);
|
||||
|
||||
// ===== 통계 카드 계산 =====
|
||||
const computedStats = useMemo(() => {
|
||||
if (config.computeStats) {
|
||||
return config.computeStats(
|
||||
config.clientSideFiltering ? rawData : displayData,
|
||||
config.clientSideFiltering ? rawData.length : totalCount
|
||||
);
|
||||
}
|
||||
return config.stats;
|
||||
}, [config.computeStats, config.stats, config.clientSideFiltering, rawData, displayData, totalCount]);
|
||||
|
||||
// ===== 필터 값 변환 =====
|
||||
const filterValuesObj: FilterValues = useMemo(() => {
|
||||
return filters as FilterValues;
|
||||
}, [filters]);
|
||||
|
||||
// ===== 페이지네이션 config =====
|
||||
const paginationConfig: PaginationConfig = useMemo(
|
||||
() => ({
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems: totalCount,
|
||||
itemsPerPage,
|
||||
onPageChange: handlePageChange,
|
||||
}),
|
||||
[currentPage, totalPages, totalCount, itemsPerPage, handlePageChange]
|
||||
);
|
||||
|
||||
// ===== 렌더링 함수 래퍼 =====
|
||||
const renderTableRow = useCallback(
|
||||
(item: T, index: number, globalIndex: number) => {
|
||||
const id = getItemId(item);
|
||||
const isSelected = selectedItems.has(id);
|
||||
return config.renderTableRow(item, index, globalIndex, {
|
||||
isSelected,
|
||||
onToggle: () => toggleSelection(id),
|
||||
onRowClick: () => handleRowClick(item),
|
||||
onEdit: () => handleEdit(item),
|
||||
onDelete: () => handleDeleteClick(item),
|
||||
});
|
||||
},
|
||||
[config, getItemId, handleDeleteClick, handleEdit, handleRowClick, selectedItems, toggleSelection]
|
||||
);
|
||||
|
||||
const renderMobileCard = useCallback(
|
||||
(item: T, index: number, globalIndex: number, isSelected: boolean, onToggle: () => void) => {
|
||||
return config.renderMobileCard(item, index, globalIndex, {
|
||||
isSelected,
|
||||
onToggle,
|
||||
onRowClick: () => handleRowClick(item),
|
||||
onEdit: () => handleEdit(item),
|
||||
onDelete: () => handleDeleteClick(item),
|
||||
});
|
||||
},
|
||||
[config, handleDeleteClick, handleEdit, handleRowClick]
|
||||
);
|
||||
|
||||
// ===== 삭제 확인 메시지 =====
|
||||
const deleteConfirmTitle = config.deleteConfirmMessage?.title || '삭제 확인';
|
||||
const deleteConfirmDescription =
|
||||
config.deleteConfirmMessage?.description ||
|
||||
(isBulkDelete
|
||||
? `선택한 ${selectedItems.size}건을 삭제하시겠습니까?`
|
||||
: '이 항목을 삭제하시겠습니까?');
|
||||
|
||||
return (
|
||||
<>
|
||||
<IntegratedListTemplateV2<T>
|
||||
// 페이지 헤더
|
||||
title={config.title}
|
||||
description={config.description}
|
||||
icon={config.icon}
|
||||
headerActions={config.headerActions?.({ onCreate: handleCreate })}
|
||||
// 탭 콘텐츠
|
||||
tabsContent={config.tabsContent}
|
||||
// 통계 카드
|
||||
stats={computedStats}
|
||||
// 경고 배너
|
||||
alertBanner={config.alertBanner}
|
||||
// 검색 및 필터
|
||||
searchValue={searchValue}
|
||||
onSearchChange={handleSearchChange}
|
||||
searchPlaceholder={config.searchPlaceholder}
|
||||
extraFilters={config.extraFilters}
|
||||
hideSearch={config.hideSearch}
|
||||
// 탭 (빈 배열일 때는 undefined로 전달해서 IntegratedListTemplateV2의 기본 탭 사용)
|
||||
tabs={computedTabs.length > 0 ? computedTabs : undefined}
|
||||
activeTab={activeTab}
|
||||
onTabChange={handleTabChange}
|
||||
// 필터 시스템
|
||||
filterConfig={config.filterConfig}
|
||||
filterValues={filterValuesObj}
|
||||
onFilterChange={handleFilterChange}
|
||||
onFilterReset={handleFilterReset}
|
||||
filterTitle={config.filterTitle}
|
||||
// 테이블 앞 콘텐츠
|
||||
beforeTableContent={config.beforeTableContent}
|
||||
// 테이블 헤더 액션
|
||||
tableHeaderActions={config.tableHeaderActions}
|
||||
// 테이블 컬럼
|
||||
tableColumns={config.columns}
|
||||
// 테이블 푸터
|
||||
tableFooter={config.tableFooter}
|
||||
// 데이터
|
||||
data={displayData}
|
||||
totalCount={totalCount}
|
||||
allData={config.clientSideFiltering ? filteredData : undefined}
|
||||
// 체크박스 선택
|
||||
selectedItems={selectedItems}
|
||||
onToggleSelection={toggleSelection}
|
||||
onToggleSelectAll={toggleSelectAll}
|
||||
getItemId={getItemId}
|
||||
onBulkDelete={config.actions.deleteItem ? handleBulkDeleteClick : undefined}
|
||||
// 표시 옵션
|
||||
showCheckbox={config.showCheckbox}
|
||||
showRowNumber={config.showRowNumber}
|
||||
// 렌더링 함수
|
||||
renderTableRow={renderTableRow}
|
||||
renderMobileCard={renderMobileCard}
|
||||
// 페이지네이션
|
||||
pagination={paginationConfig}
|
||||
// 로딩 상태
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{deleteConfirmTitle}</AlertDialogTitle>
|
||||
<AlertDialogDescription>{deleteConfirmDescription}</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDeleteConfirm}>삭제</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* 상세 모달 (detailMode === 'modal'일 때) */}
|
||||
{config.detailMode === 'modal' && config.DetailModalComponent && (
|
||||
<config.DetailModalComponent
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => {
|
||||
setIsModalOpen(false);
|
||||
setSelectedItem(null);
|
||||
}}
|
||||
item={selectedItem}
|
||||
onRefresh={fetchData}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// 타입 re-export
|
||||
export * from './types';
|
||||
257
src/components/templates/UniversalListPage/types.ts
Normal file
257
src/components/templates/UniversalListPage/types.ts
Normal file
@@ -0,0 +1,257 @@
|
||||
/**
|
||||
* UniversalListPage 타입 정의
|
||||
*
|
||||
* 59개 리스트 페이지를 통합하기 위한 config 기반 타입 시스템
|
||||
* 기존 기능 100% 유지, 테이블 영역만 공통화
|
||||
*/
|
||||
|
||||
import { ReactNode, RefObject } from 'react';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
import type { FilterFieldConfig, FilterValues } from '@/components/molecules/MobileFilter';
|
||||
|
||||
// ===== 기본 타입 (IntegratedListTemplateV2에서 re-export) =====
|
||||
export type { FilterFieldConfig, FilterValues };
|
||||
|
||||
export interface TabOption {
|
||||
value: string;
|
||||
label: string;
|
||||
count: number;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export interface TableColumn {
|
||||
key: string;
|
||||
label: string;
|
||||
className?: string;
|
||||
hideOnMobile?: boolean;
|
||||
hideOnTablet?: boolean;
|
||||
}
|
||||
|
||||
export interface StatCard {
|
||||
label: string;
|
||||
value: string | number;
|
||||
icon: LucideIcon;
|
||||
iconColor: string;
|
||||
onClick?: () => void;
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
// ===== API 응답 타입 =====
|
||||
export interface ListResult<T> {
|
||||
success: boolean;
|
||||
data?: T[];
|
||||
totalCount?: number;
|
||||
totalPages?: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface DeleteResult {
|
||||
success: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
// ===== 액션 설정 =====
|
||||
export interface ListActions<T> {
|
||||
/** 목록 조회 API */
|
||||
getList: (params?: ListParams) => Promise<ListResult<T>>;
|
||||
/** 단일 삭제 API (선택) */
|
||||
deleteItem?: (id: string) => Promise<DeleteResult>;
|
||||
/** 일괄 삭제 API (선택) */
|
||||
deleteBulk?: (ids: string[]) => Promise<DeleteResult>;
|
||||
}
|
||||
|
||||
export interface ListParams {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
search?: string;
|
||||
filters?: Record<string, string | string[]>;
|
||||
tab?: string;
|
||||
sortBy?: string;
|
||||
sortOrder?: 'asc' | 'desc';
|
||||
}
|
||||
|
||||
// ===== 상세 보기 모드 =====
|
||||
export type DetailMode = 'page' | 'modal' | 'none';
|
||||
|
||||
// ===== 커스텀 액션 버튼 =====
|
||||
export interface CustomAction<T> {
|
||||
key: string;
|
||||
label: string;
|
||||
icon?: LucideIcon;
|
||||
variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
|
||||
/** 단일 아이템에 대한 액션 */
|
||||
onClick?: (item: T) => void | Promise<void>;
|
||||
/** 선택된 아이템들에 대한 일괄 액션 */
|
||||
onBulkClick?: (items: T[]) => void | Promise<void>;
|
||||
/** 액션 표시 조건 */
|
||||
showWhen?: 'always' | 'selected' | 'single-selected' | 'multi-selected';
|
||||
/** 확인 다이얼로그 표시 여부 */
|
||||
confirmDialog?: {
|
||||
title: string;
|
||||
description: string;
|
||||
confirmText?: string;
|
||||
cancelText?: string;
|
||||
};
|
||||
}
|
||||
|
||||
// ===== 선택 핸들러 (renderTableRow, renderMobileCard에서 사용) =====
|
||||
export interface SelectionHandlers {
|
||||
isSelected: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
// ===== 행 클릭 핸들러 =====
|
||||
export interface RowClickHandlers<T> {
|
||||
onRowClick: (item: T) => void;
|
||||
onEdit?: (item: T) => void;
|
||||
onDelete?: (item: T) => void;
|
||||
}
|
||||
|
||||
// ===== 메인 Config 타입 =====
|
||||
export interface UniversalListConfig<T> {
|
||||
// ===== 페이지 기본 정보 =====
|
||||
/** 페이지 제목 */
|
||||
title: string;
|
||||
/** 페이지 설명 (선택) */
|
||||
description?: string;
|
||||
/** 페이지 아이콘 (선택) */
|
||||
icon?: LucideIcon;
|
||||
/** 기본 경로 (예: '/hr/employee-management') */
|
||||
basePath: string;
|
||||
|
||||
// ===== ID 추출 =====
|
||||
/** 아이템에서 ID 추출 (string 키 또는 함수) */
|
||||
idField: keyof T | ((item: T) => string);
|
||||
|
||||
// ===== API 액션 =====
|
||||
actions: ListActions<T>;
|
||||
|
||||
// ===== 테이블 컬럼 =====
|
||||
columns: TableColumn[];
|
||||
|
||||
// ===== 필터 설정 =====
|
||||
/** 필터 필드 설정 */
|
||||
filterConfig?: FilterFieldConfig[];
|
||||
/** 필터 초기값 */
|
||||
initialFilters?: Record<string, string | string[]>;
|
||||
/** 필터 바텀시트 제목 (모바일) */
|
||||
filterTitle?: string;
|
||||
|
||||
// ===== 탭 설정 =====
|
||||
/** 고정 탭 목록 */
|
||||
tabs?: TabOption[];
|
||||
/** 동적 탭 (API에서 가져오기) */
|
||||
fetchTabs?: () => Promise<TabOption[]>;
|
||||
/** 기본 활성 탭 */
|
||||
defaultTab?: string;
|
||||
|
||||
// ===== 통계 카드 =====
|
||||
/** 고정 통계 카드 */
|
||||
stats?: StatCard[];
|
||||
/** 동적 통계 (데이터 기반 계산) */
|
||||
computeStats?: (data: T[], totalCount: number) => StatCard[];
|
||||
|
||||
// ===== 렌더링 함수 =====
|
||||
/** 테이블 행 렌더링 */
|
||||
renderTableRow: (
|
||||
item: T,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<T>
|
||||
) => ReactNode;
|
||||
/** 모바일 카드 렌더링 */
|
||||
renderMobileCard: (
|
||||
item: T,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<T>
|
||||
) => ReactNode;
|
||||
|
||||
// ===== 상세 보기 설정 =====
|
||||
/** 상세 보기 모드 (기본: 'page') */
|
||||
detailMode?: DetailMode;
|
||||
/** 모달 모드일 때 사용할 모달 컴포넌트 */
|
||||
DetailModalComponent?: React.ComponentType<{
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
item: T | null;
|
||||
onRefresh?: () => void;
|
||||
}>;
|
||||
|
||||
// ===== 커스텀 액션 =====
|
||||
/** 헤더 액션 (등록 버튼 등) */
|
||||
headerActions?: (params: { onCreate?: () => void }) => ReactNode;
|
||||
/** 커스텀 액션 버튼 (상신, 승인 등) */
|
||||
customActions?: CustomAction<T>[];
|
||||
|
||||
// ===== 추가 옵션 =====
|
||||
/** 검색 플레이스홀더 */
|
||||
searchPlaceholder?: string;
|
||||
/** 검색창 숨김 */
|
||||
hideSearch?: boolean;
|
||||
/** 체크박스 표시 여부 (기본: true) */
|
||||
showCheckbox?: boolean;
|
||||
/** 번호 컬럼 표시 여부 (기본: true) */
|
||||
showRowNumber?: boolean;
|
||||
/** 페이지당 항목 수 (기본: 20) */
|
||||
itemsPerPage?: number;
|
||||
/** 삭제 확인 메시지 */
|
||||
deleteConfirmMessage?: {
|
||||
title?: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
// ===== 클라이언트 사이드 필터링 =====
|
||||
/**
|
||||
* 클라이언트 사이드 필터링 모드 (기본: false)
|
||||
* true인 경우 getList가 전체 데이터를 반환하고, 컴포넌트 내부에서 필터링/페이지네이션 처리
|
||||
*/
|
||||
clientSideFiltering?: boolean;
|
||||
/** 클라이언트 사이드 검색 필터 함수 */
|
||||
searchFilter?: (item: T, searchValue: string) => boolean;
|
||||
/** 클라이언트 사이드 탭 필터 함수 */
|
||||
tabFilter?: (item: T, activeTab: string) => boolean;
|
||||
/** 커스텀 필터 함수 (filterConfig 기반 복잡한 필터링) */
|
||||
customFilterFn?: (items: T[], filterValues: Record<string, string | string[]>) => T[];
|
||||
/** 커스텀 정렬 함수 */
|
||||
customSortFn?: (items: T[], filterValues: Record<string, string | string[]>) => T[];
|
||||
|
||||
// ===== 테이블 헤더 액션 =====
|
||||
/** 테이블 헤더 우측 추가 액션 (총건, 필터 해제 버튼 등) */
|
||||
tableHeaderActions?: ReactNode;
|
||||
|
||||
// ===== 추가 슬롯 =====
|
||||
/** 테이블 앞 커스텀 콘텐츠 */
|
||||
beforeTableContent?: ReactNode;
|
||||
/** 테이블 하단 푸터 */
|
||||
tableFooter?: ReactNode;
|
||||
/** 경고 배너 */
|
||||
alertBanner?: ReactNode;
|
||||
/** 헤더 액션 영역 아래, 검색 위 커스텀 탭 */
|
||||
tabsContent?: ReactNode;
|
||||
/** 추가 필터 (Select, DatePicker 등) */
|
||||
extraFilters?: ReactNode;
|
||||
}
|
||||
|
||||
// ===== 컴포넌트 Props =====
|
||||
export interface UniversalListPageProps<T> {
|
||||
config: UniversalListConfig<T>;
|
||||
/** 초기 데이터 (SSR용, 선택) */
|
||||
initialData?: T[];
|
||||
/** 초기 총 개수 */
|
||||
initialTotalCount?: number;
|
||||
}
|
||||
|
||||
// ===== 내부 상태 타입 =====
|
||||
export interface ListState<T> {
|
||||
data: T[];
|
||||
totalCount: number;
|
||||
totalPages: number;
|
||||
currentPage: number;
|
||||
isLoading: boolean;
|
||||
searchValue: string;
|
||||
selectedItems: Set<string>;
|
||||
activeTab: string;
|
||||
filters: Record<string, string | string[]>;
|
||||
tabs: TabOption[];
|
||||
}
|
||||
@@ -8,4 +8,21 @@ export type {
|
||||
VersionHistoryItem,
|
||||
DevMetadata,
|
||||
IntegratedListTemplateV2Props,
|
||||
} from "./IntegratedListTemplateV2";
|
||||
} from "./IntegratedListTemplateV2";
|
||||
|
||||
// UniversalListPage - 통합 리스트 페이지 컴포넌트
|
||||
export { UniversalListPage } from "./UniversalListPage";
|
||||
export type {
|
||||
UniversalListConfig,
|
||||
UniversalListPageProps,
|
||||
ListActions,
|
||||
ListParams,
|
||||
ListResult,
|
||||
DeleteResult,
|
||||
CustomAction,
|
||||
DetailMode,
|
||||
SelectionHandlers,
|
||||
RowClickHandlers,
|
||||
FilterFieldConfig,
|
||||
FilterValues,
|
||||
} from "./UniversalListPage";
|
||||
@@ -93,6 +93,9 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
|
||||
// 회사 선택 상태 (목업)
|
||||
const [selectedCompany, setSelectedCompany] = useState<string>("all");
|
||||
|
||||
// 알림 벨 애니메이션 상태 (클릭으로 토글)
|
||||
const [bellAnimating, setBellAnimating] = useState(true);
|
||||
|
||||
// 🔧 클라이언트 마운트 상태 (새로고침 시 스피너 표시용)
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
@@ -438,52 +441,20 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
|
||||
<Award className="h-3.5 w-3.5 min-[320px]:h-4 min-[320px]:w-4 sm:h-5 sm:w-5" />
|
||||
</Button>
|
||||
|
||||
{/* 알림 버튼 */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px] p-0 rounded-lg min-[320px]:rounded-xl hover:bg-accent transition-all duration-200 flex items-center justify-center relative"
|
||||
>
|
||||
<Bell className={`h-3.5 w-3.5 min-[320px]:h-4 min-[320px]:w-4 sm:h-5 sm:w-5 text-amber-600 ${MOCK_NOTIFICATIONS.some(n => n.isNew) ? 'animate-bell-ring' : ''}`} />
|
||||
{/* 알림 있을 때 빨간 점 */}
|
||||
{MOCK_NOTIFICATIONS.some(n => n.isNew) && (
|
||||
<span className="absolute top-1 right-1 min-[320px]:top-1.5 min-[320px]:right-1.5 sm:top-2 sm:right-2 w-1 h-1 min-[320px]:w-1.5 min-[320px]:h-1.5 sm:w-2 sm:h-2 bg-red-500 rounded-full" />
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-80 p-0">
|
||||
{/* 알림 리스트 */}
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
{MOCK_NOTIFICATIONS.map((notification) => (
|
||||
<div
|
||||
key={notification.id}
|
||||
className="flex items-start gap-3 p-3 border-b border-border hover:bg-accent/50 cursor-pointer"
|
||||
>
|
||||
{/* 이미지 플레이스홀더 */}
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-muted border border-border rounded-lg flex items-center justify-center text-muted-foreground text-xs">
|
||||
IMG
|
||||
</div>
|
||||
{/* 내용 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-muted-foreground text-xs">{notification.category}</span>
|
||||
{notification.isNew && (
|
||||
<span className="w-4 h-4 rounded-full bg-red-500 text-white text-xs flex items-center justify-center font-bold">
|
||||
N
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-foreground font-medium text-sm mt-1 truncate">{notification.title}</p>
|
||||
</div>
|
||||
{/* 날짜 */}
|
||||
<span className="flex-shrink-0 text-muted-foreground text-xs">{notification.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{/* 알림 버튼 - 클릭하면 애니메이션 토글 */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setBellAnimating(!bellAnimating)}
|
||||
className="min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px] p-0 rounded-lg min-[320px]:rounded-xl hover:bg-accent transition-all duration-200 flex items-center justify-center relative"
|
||||
title={bellAnimating ? '알림 애니메이션 끄기' : '알림 애니메이션 켜기'}
|
||||
>
|
||||
<Bell className={`h-3.5 w-3.5 min-[320px]:h-4 min-[320px]:w-4 sm:h-5 sm:w-5 text-amber-600 ${bellAnimating ? 'animate-bell-ring' : ''}`} />
|
||||
{/* 애니메이션 상태 표시 */}
|
||||
{bellAnimating && (
|
||||
<span className="absolute top-1 right-1 min-[320px]:top-1.5 min-[320px]:right-1.5 sm:top-2 sm:right-2 w-1 h-1 min-[320px]:w-1.5 min-[320px]:h-1.5 sm:w-2 sm:h-2 bg-red-500 rounded-full" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* 유저 프로필 드롭다운 */}
|
||||
<DropdownMenu>
|
||||
@@ -647,50 +618,22 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
|
||||
<span className="hidden xl:inline">품질인정심사</span>
|
||||
</Button>
|
||||
|
||||
{/* 알림 버튼 */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="p-1 rounded-xl hover:bg-accent transition-all duration-200 relative">
|
||||
<div className="w-14 h-14 bg-amber-50 rounded-full flex items-center justify-center">
|
||||
<Bell className={`text-amber-500 ${MOCK_NOTIFICATIONS.some(n => n.isNew) ? 'animate-bell-ring' : ''}`} style={{ width: 23, height: 23 }} />
|
||||
</div>
|
||||
{/* 알림 있을 때 빨간 점 */}
|
||||
{MOCK_NOTIFICATIONS.some(n => n.isNew) && (
|
||||
<span className="absolute top-0 right-0 w-3.5 h-3.5 bg-red-500 rounded-full border-2 border-background" />
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-96 p-0">
|
||||
{/* 알림 리스트 */}
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
{MOCK_NOTIFICATIONS.map((notification) => (
|
||||
<div
|
||||
key={notification.id}
|
||||
className="flex items-start gap-3 p-4 border-b border-border hover:bg-accent/50 cursor-pointer"
|
||||
>
|
||||
{/* 이미지 플레이스홀더 */}
|
||||
<div className="flex-shrink-0 w-16 h-16 bg-muted border border-border rounded-lg flex items-center justify-center text-muted-foreground text-xs">
|
||||
IMG
|
||||
</div>
|
||||
{/* 내용 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-muted-foreground text-sm">{notification.category}</span>
|
||||
{notification.isNew && (
|
||||
<span className="w-5 h-5 rounded-full bg-red-500 text-white text-xs flex items-center justify-center font-bold">
|
||||
N
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-foreground font-medium mt-1 truncate">{notification.title}</p>
|
||||
</div>
|
||||
{/* 날짜 */}
|
||||
<span className="flex-shrink-0 text-muted-foreground text-sm">{notification.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{/* 알림 버튼 - 클릭하면 애니메이션 토글 */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setBellAnimating(!bellAnimating)}
|
||||
className="p-1 rounded-xl hover:bg-accent transition-all duration-200 relative"
|
||||
title={bellAnimating ? '알림 애니메이션 끄기' : '알림 애니메이션 켜기'}
|
||||
>
|
||||
<div className="w-14 h-14 bg-amber-50 rounded-full flex items-center justify-center">
|
||||
<Bell className={`text-amber-500 ${bellAnimating ? 'animate-bell-ring' : ''}`} style={{ width: 23, height: 23 }} />
|
||||
</div>
|
||||
{/* 애니메이션 상태 표시 */}
|
||||
{bellAnimating && (
|
||||
<span className="absolute top-0 right-0 w-3.5 h-3.5 bg-red-500 rounded-full border-2 border-background" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* 유저 프로필 드롭다운 */}
|
||||
<DropdownMenu>
|
||||
|
||||
Reference in New Issue
Block a user