f3b07ac875
- 루트 문서 30개를 도메인별 하위 폴더로 이동 - accounting/, architecture/, dev/, guides/, security/ 등 카테고리 분류 - archive/ 폴더에 QA 스크린샷 이동 - _index.md 문서 맵 업데이트 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
98 lines
3.8 KiB
Markdown
98 lines
3.8 KiB
Markdown
# Handler Hook 공통화 완료 보고서
|
|
|
|
**작성일**: 2025-02-06
|
|
**상태**: ✅ 완료
|
|
|
|
## 개요
|
|
|
|
리스트 페이지에서 중복 사용되던 `handleRowClick`, `handleEdit` 핸들러를 공통 Hook으로 추출하여 17개 파일에 적용 완료.
|
|
|
|
## 생성된 Hook
|
|
|
|
### `/src/hooks/useListHandlers.ts`
|
|
|
|
```typescript
|
|
'use client';
|
|
|
|
import { useCallback } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
export function useListHandlers<T extends { id: string }>(basePath: string) {
|
|
const router = useRouter();
|
|
|
|
const handleRowClick = useCallback(
|
|
(item: T) => {
|
|
router.push(`/ko/${basePath}/${item.id}?mode=view`);
|
|
},
|
|
[router, basePath]
|
|
);
|
|
|
|
const handleEdit = useCallback(
|
|
(item: T) => {
|
|
router.push(`/ko/${basePath}/${item.id}?mode=edit`);
|
|
},
|
|
[router, basePath]
|
|
);
|
|
|
|
return { handleRowClick, handleEdit, router };
|
|
}
|
|
```
|
|
|
|
## 마이그레이션 완료 파일 (17개)
|
|
|
|
| # | 파일 | basePath | 비고 |
|
|
|---|------|----------|------|
|
|
| 1 | ContractListClient.tsx | `construction/project/contract` | |
|
|
| 2 | BiddingListClient.tsx | `construction/project/bidding` | |
|
|
| 3 | EstimateListClient.tsx | `construction/project/bidding/estimates` | |
|
|
| 4 | HandoverReportListClient.tsx | `construction/project/contract/handover-report` | |
|
|
| 5 | PartnerListClient.tsx | `construction/project/bidding/partners` | router 사용 (handleCreate) |
|
|
| 6 | OrderManagementListClient.tsx | `construction/order/order-management` | router 사용 (handleCreate, handleCalendarEventClick) |
|
|
| 7 | ProgressBillingManagementListClient.tsx | `construction/billing/progress-billing-management` | |
|
|
| 8 | SiteManagementListClient.tsx | `construction/order/site-management` | |
|
|
| 9 | WorkerStatusListClient.tsx | `construction/project/worker-status` | handleRowClick만 사용 (handleEdit 없음) |
|
|
| 10 | StructureReviewListClient.tsx | `construction/order/structure-review` | router 사용 (handleCreate) |
|
|
| 11 | IssueManagementListClient.tsx | `construction/project/issue-management` | router 사용 (handleCreate) |
|
|
| 12 | SiteBriefingListClient.tsx | `construction/project/bidding/site-briefings` | router 사용 (handleCreate) |
|
|
| 13 | ItemManagementClient.tsx | `construction/order/base-info/items` | handleRowClick만 (handleEdit 시그니처 다름) |
|
|
| 14 | LaborManagementClient.tsx | `construction/order/base-info/labor` | router 사용 (handleCreate) |
|
|
| 15 | PricingListClient.tsx | `construction/order/base-info/pricing` | router 사용 (handleCreate) |
|
|
| 16 | ConstructionManagementListClient.tsx | `construction/project/construction-management` | router 사용 (handleCalendarEventClick) |
|
|
| 17 | ProjectListClient.tsx | `construction/project/execution-management` | handleGanttProjectClick → handleRowClick로 대체 |
|
|
|
|
## 사용 패턴
|
|
|
|
### 기본 사용
|
|
```typescript
|
|
const { handleRowClick, handleEdit } = useListHandlers<YourType>('your/base/path');
|
|
```
|
|
|
|
### router도 필요한 경우
|
|
```typescript
|
|
const { handleRowClick, handleEdit, router } = useListHandlers<YourType>('your/base/path');
|
|
|
|
// 추가 핸들러에서 router 사용
|
|
const handleCreate = useCallback(() => {
|
|
router.push('/ko/your/base/path?mode=new');
|
|
}, [router]);
|
|
```
|
|
|
|
## 효과
|
|
|
|
- **~100줄 이상** 중복 코드 제거
|
|
- 네비게이션 로직 중앙화
|
|
- 유지보수 용이성 향상
|
|
- 일관된 핸들러 패턴 적용
|
|
|
|
## 다음 작업 (우선순위)
|
|
|
|
1. ~~Handler Hook 공통화~~ ✅ 완료
|
|
2. **MOCK 데이터 공통화** - 중복되는 MOCK 옵션 데이터 통합
|
|
3. **customSortFn 공통화** - 정렬 로직 공통 유틸 함수 추출
|
|
|
|
## 주의사항
|
|
|
|
- `ItemManagementClient.tsx`의 `handleEdit`는 시그니처가 다름 (`(e: React.MouseEvent, itemId: string)`)
|
|
- 일부 파일은 `handleEdit` 없이 `handleRowClick`만 사용
|
|
- 추가 핸들러(handleCreate, handleCalendarEventClick 등)에서 router가 필요한 경우 hook에서 router도 destructuring 필요
|