sam-react-prod/claudedocs/refactoring/[REF-2025-02-06] useListHandlers-commonization.md

Handler Hook 공통화 완료 보고서

작성일: 2025-02-06 상태: ✅ 완료

개요

리스트 페이지에서 중복 사용되던 handleRowClick, handleEdit 핸들러를 공통 Hook으로 추출하여 17개 파일에 적용 완료.

생성된 Hook

/src/hooks/useListHandlers.ts

'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로 대체

사용 패턴

기본 사용

const { handleRowClick, handleEdit } = useListHandlers<YourType>('your/base/path');

router도 필요한 경우

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