feat(WEB): 리스트 페이지 UI 레이아웃 표준화

- 공통 레이아웃 패턴 적용: [달력] → [프리셋] → [검색창] → [버튼들] - beforeTableContent → headerActions + createButton 마이그레이션 - DateRangeSelector extraActions prop 활용하여 검색창 통합 - PricingListClient 테이블 행 클릭 → 상세 이동 기능 추가 - 회계 관련 페이지 (입금/출금/매입/매출/어음/카드/예상지출 등) 정리 - 건설 관련 페이지 검색 영역 정리 - 부모 메뉴 리다이렉트 컴포넌트 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-26 22:04:36 +09:00
parent ff93ab7fa2
commit 1f6b592b9f
65 changed files with 1974 additions and 503 deletions
--- a/list-page-ui-standardization-checklist.md
+++ b/list-page-ui-standardization-checklist.md
@@ -0,0 +1,180 @@
+# 리스트 페이지 UI 표준화 체크리스트
+
+## 📋 프로젝트 개요
+- **목적**: 모든 리스트 페이지에 공정관리/출금관리 UI 패턴 적용
+- **시작일**: 2025-01-26
+- **프로토타입**: ProcessListClient, WithdrawalManagement
+
+## 🎯 적용 패턴
+
+### 1. 검색창 패턴
+```tsx
+dateRangeSelector: {
+  enabled: true,
+  showPresets: true,
+  startDate,
+  endDate,
+  onStartDateChange: setStartDate,
+  onEndDateChange: setEndDate,
+  extraActions: (
+    <div className="relative w-full xl:flex-1">
+      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+      <Input
+        type="text"
+        placeholder="검색..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        className="pl-9 w-full bg-white"
+      />
+    </div>
+  ),
+},
+hideSearch: true,
+```
+
+### 2. beforeTableContent 모바일 레이아웃
+```tsx
+beforeTableContent: ({ selectedItems }) => (
+  <div className="flex flex-col xl:flex-row xl:items-center xl:justify-end w-full gap-3">
+    <div className="flex items-center justify-start xl:justify-end gap-2">
+      {/* 버튼들 */}
+    </div>
+  </div>
+),
+```
+
+### 3. customFilterFn 방어적 코딩
+```tsx
+customFilterFn: (items) => {
+  if (!items || items.length === 0) return items;
+  return items.filter((item) => {
+    // 필터 로직
+  });
+},
+```
+
+---
+
+## 그룹 A: DateRangeSelector 사용 페이지 (26개)
+
+### 회계관리 (5개)
+- [x] `src/components/accounting/SalesManagement/index.tsx`
+- [x] `src/components/accounting/PurchaseManagement/index.tsx`
+- [x] `src/components/accounting/DepositManagement/index.tsx`
+- [x] `src/components/accounting/CardTransactionInquiry/index.tsx`
+- [x] `src/components/accounting/BadDebtCollection/index.tsx` ※dateRangeSelector 없음, customFilterFn만 수정
+
+### 인사관리 (4개)
+- [x] `src/components/hr/EmployeeManagement/index.tsx`
+- [x] `src/components/hr/AttendanceManagement/index.tsx`
+- [x] `src/components/hr/SalaryManagement/index.tsx`
+- [x] `src/components/hr/VacationManagement/index.tsx` ※headerActions 패턴 사용
+
+### 건설관리 (17개)
+- [x] `src/components/business/construction/bidding/BiddingListClient.tsx`
+- [x] `src/components/business/construction/contract/ContractListClient.tsx`
+- [x] `src/components/business/construction/estimates/EstimateListClient.tsx`
+- [x] `src/components/business/construction/handover-report/HandoverReportListClient.tsx`
+- [x] `src/components/business/construction/issue-management/IssueManagementListClient.tsx`
+- [x] `src/components/business/construction/item-management/ItemManagementClient.tsx` ※externalSearch 패턴 - hideSearch만 추가
+- [x] `src/components/business/construction/labor-management/LaborManagementClient.tsx`
+- [x] `src/components/business/construction/management/ConstructionManagementListClient.tsx`
+- [N/A] `src/components/business/construction/management/ProjectListClient.tsx` ※UniversalListPage 미사용 (커스텀 Gantt차트 구현)
+- [x] `src/components/business/construction/order-management/OrderManagementListClient.tsx`
+- [x] `src/components/business/construction/partners/PartnerListClient.tsx` ※dateRangeSelector 없음, customFilterFn 방어코드만 추가
+- [x] `src/components/business/construction/progress-billing/ProgressBillingManagementListClient.tsx`
+- [x] `src/components/business/construction/site-briefings/SiteBriefingListClient.tsx`
+- [x] `src/components/business/construction/site-management/SiteManagementListClient.tsx`
+- [x] `src/components/business/construction/structure-review/StructureReviewListClient.tsx`
+- [x] `src/components/business/construction/utility-management/UtilityManagementListClient.tsx`
+- [x] `src/components/business/construction/worker-status/WorkerStatusListClient.tsx`
+
+---
+
+## 그룹 B: DateRangeSelector 미사용 페이지 (11개)
+
+### 기준정보 (2개)
+- [N/A] `src/components/items/ItemListClient.tsx` ※useItemList 훅 패턴, customFilterFn 없음
+- [N/A] `src/components/pricing/PricingListClient.tsx` ※tabFilter/searchFilter 패턴, customFilterFn 없음
+
+### 회계관리 (1개)
+- [x] `src/components/accounting/VendorManagement/index.tsx` ※customFilterFn 방어코드 추가
+
+### 인사관리 (1개)
+- [N/A] `src/components/hr/CardManagement/index.tsx` ※tabFilter/searchFilter 패턴, customFilterFn 없음
+
+### 게시판 (1개)
+- [N/A] `src/components/board/BoardManagement/index.tsx` ※tabFilter/searchFilter 패턴, customFilterFn 없음
+
+### 설정 (2개)
+- [N/A] `src/components/settings/PermissionManagement/index.tsx` ※externalSearch 패턴, customFilterFn 없음
+- [N/A] `src/components/settings/AccountManagement/index.tsx` ※getList 내 검색 처리, customFilterFn 없음
+
+### 고객센터 (3개)
+- [x] `src/components/customer-center/NoticeManagement/NoticeList.tsx` ※customFilterFn 방어코드 추가
+- [x] `src/components/customer-center/InquiryManagement/InquiryList.tsx` ※customFilterFn 방어코드 추가
+- [x] `src/components/customer-center/EventManagement/EventList.tsx` ※customFilterFn 방어코드 추가
+
+---
+
+## 그룹 C: IntegratedListTemplateV2 마이그레이션 (7개)
+※ 분석 결과: 모두 UniversalListPage 이미 사용 중, customFilterFn 없거나 그룹 B에서 처리됨
+
+- [N/A] `src/components/accounting/ExpectedExpenseManagement/index.tsx` ※이미 UniversalListPage, tableData에서 필터링
+- [N/A] `src/components/accounting/BillManagement/index.tsx` ※이미 UniversalListPage, 서버 사이드 필터링
+- [x] `src/components/customer-center/NoticeManagement/NoticeList.tsx` ※그룹 B에서 처리됨
+- [x] `src/components/customer-center/InquiryManagement/InquiryList.tsx` ※그룹 B에서 처리됨
+- [x] `src/components/customer-center/EventManagement/EventList.tsx` ※그룹 B에서 처리됨
+- [N/A] `src/components/quotes/QuoteManagementClient.tsx` ※이미 UniversalListPage, tabFilter/searchFilter만 사용
+- [N/A] `src/components/settings/PopupManagement/PopupList.tsx` ※이미 UniversalListPage, searchFilter만 사용
+
+---
+
+## 📊 진행 현황
+
+| 그룹 | 총 개수 | 완료 | N/A | 진행률 |
+|-----|--------|-----|-----|-------|
+| A | 26 | 25 | 1 | 100% |
+| B | 11 | 4 | 7 | 100% |
+| C | 7 | 3 | 4 | 100% |
+| **합계** | **44** | **32** | **12** | **100%** |
+
+---
+
+## 📝 작업 로그
+
+### 2025-01-26
+- 체크리스트 생성
+- 프로토타입 분석 완료 (ProcessListClient, WithdrawalManagement)
+- 그룹 A 회계관리 5개 완료:
+  - SalesManagement: extraActions 검색창, hideSearch, 모바일 레이아웃, 방어적 코딩
+  - PurchaseManagement: extraActions 검색창, hideSearch, 모바일 레이아웃, 방어적 코딩
+  - DepositManagement: extraActions 검색창, hideSearch, 모바일 레이아웃, 방어적 코딩
+  - CardTransactionInquiry: extraActions 검색창, hideSearch, 모바일 레이아웃, 방어적 코딩
+  - BadDebtCollection: 방어적 코딩만 (dateRangeSelector 없음)
+- 그룹 A 인사관리 4개 완료:
+  - EmployeeManagement: extraActions 검색창, hideSearch, 방어적 코딩
+  - AttendanceManagement: extraActions 검색창, hideSearch, 방어적 코딩
+  - SalaryManagement: extraActions 검색창, hideSearch
+  - VacationManagement: headerActions 내 검색창, hideSearch (다른 구조 사용)
+- 그룹 A 건설관리 16개 완료 (1개 N/A):
+  - BiddingListClient, ContractListClient, EstimateListClient, HandoverReportListClient: 전체 패턴 적용
+  - IssueManagementListClient, LaborManagementClient, ConstructionManagementListClient, OrderManagementListClient: 전체 패턴 적용
+  - ProgressBillingManagementListClient, SiteBriefingListClient, SiteManagementListClient: 전체 패턴 적용
+  - StructureReviewListClient, UtilityManagementListClient, WorkerStatusListClient: 전체 패턴 적용
+  - ItemManagementClient: externalSearch 패턴 사용 - hideSearch만 추가
+  - PartnerListClient: dateRangeSelector 없음 - 방어적 코딩만 추가
+  - ProjectListClient: UniversalListPage 미사용 (커스텀 Gantt차트) - 제외
+- 그룹 B 분석 및 수정 완료 (11개 분석, 4개 수정):
+  - 대부분 tabFilter/searchFilter 또는 externalSearch 패턴 사용 (customFilterFn 없음)
+  - VendorManagement: customFilterFn 방어코드 추가
+  - NoticeList: customFilterFn 방어코드 추가
+  - InquiryList: customFilterFn 방어코드 추가
+  - EventList: customFilterFn 방어코드 추가
+  - N/A 처리: ItemListClient, PricingListClient, CardManagement, BoardManagement, PermissionManagement, AccountManagement (다른 패턴 사용)
+- 그룹 C 분석 완료 (7개 분석):
+  - 모든 파일이 이미 UniversalListPage 사용 중 (IntegratedListTemplateV2 아님)
+  - NoticeList, InquiryList, EventList: 그룹 B에서 방어코드 추가됨
+  - ExpectedExpenseManagement, BillManagement: 서버 사이드/테이블 데이터 필터링 사용
+  - QuoteManagementClient, PopupList: tabFilter/searchFilter 패턴만 사용
+- **프로젝트 완료**: 총 44개 파일 분석, 32개 수정, 12개 N/A (다른 패턴 사용)