# 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 필요
