# 공통 Hooks

**경로**: `src/hooks/`

---

## 리스트 페이지 관련

### useColumnSettings

테이블 컬럼 표시/숨기기 및 너비 관리. `IntegratedListTemplateV2`와 함께 사용.

```tsx
import { useColumnSettings } from '@/hooks/useColumnSettings';

const columns = [
  { key: 'name', label: '이름', width: '200px' },
  { key: 'code', label: '코드', width: '150px' },
  { key: 'status', label: '상태', width: '100px' },
];

const {
  visibleColumns,              // 현재 표시되는 컬럼
  allColumnsWithVisibility,    // 전체 컬럼 (visibility/locked 포함)
  columnWidths,                // 컬럼 너비 맵
  setColumnWidth,              // 컬럼 너비 변경
  toggleColumnVisibility,      // 컬럼 표시/숨기기 토글
  resetSettings,               // 초기화
  hasHiddenColumns,            // 숨겨진 컬럼 존재 여부
} = useColumnSettings({
  pageId: 'item-list',          // Zustand 저장 키 (고유)
  columns,
  alwaysVisibleKeys: ['name'],  // 항상 표시되는 컬럼 (숨기기 불가)
});
```

### useListHandlers

리스트 페이지 검색, 필터, 페이지네이션 핸들러 통합.

```tsx
import { useListHandlers } from '@/hooks/useListHandlers';

const { search, setSearch, pagination, handlePageChange, handleSearch } = useListHandlers({
  initialSearch: '',
  fetchData: getItems,
});
```

### useCRUDHandlers

생성, 수정, 삭제 핸들러 통합.

```tsx
import { useCRUDHandlers } from '@/hooks/useCRUDHandlers';

const { handleCreate, handleUpdate, handleDelete, isSubmitting } = useCRUDHandlers({
  createFn: createItem,
  updateFn: updateItem,
  deleteFn: deleteItems,
  onSuccess: () => fetchData(),
});
```

### useDeleteDialog

삭제 확인 다이얼로그 상태 관리.

```tsx
import { useDeleteDialog } from '@/hooks/useDeleteDialog';

const { isOpen, openDialog, closeDialog, confirmDelete, targetId } = useDeleteDialog({
  onConfirm: async (id) => {
    await deleteItem(id);
    fetchData();
  },
});
```

---

## 상세 페이지 관련

### useDetailPageState

상세/수정/등록 페이지의 모드 및 상태 관리.

```tsx
import { useDetailPageState } from '@/hooks/useDetailPageState';

const { mode, isEditMode, isNewMode, isViewMode } = useDetailPageState();
```

### useDetailData

상세 데이터 비동기 로드.

```tsx
import { useDetailData } from '@/hooks/useDetailData';

const { data, isLoading, error, refetch } = useDetailData({
  id: params.id,
  fetchFn: getItem,
});
```

---

## 데이터 관련

### useCommonCodes

공통 코드 조회 (상태, 분류 등).

```tsx
import { useCommonCodes } from '@/hooks/useCommonCodes';

const { codes, isLoading } = useCommonCodes('item_status');
// codes: [{ id: 'active', name: '활성' }, { id: 'inactive', name: '비활성' }]
```

### useClientList

거래처 목록 조회.

```tsx
import { useClientList } from '@/hooks/useClientList';

const { clients, isLoading } = useClientList();
```

### useItemList

품목 목록 조회.

```tsx
import { useItemList } from '@/hooks/useItemList';

const { items, isLoading } = useItemList();
```

---

## 유틸리티 관련

### useDateRange

날짜 범위 상태 관리.

```tsx
import { useDateRange } from '@/hooks/useDateRange';

const { startDate, endDate, setStartDate, setEndDate, reset } = useDateRange({
  defaultStart: '2024-01-01',
  defaultEnd: '2024-12-31',
});
```

### usePermission

권한 기반 접근 제어.

```tsx
import { usePermission } from '@/hooks/usePermission';

const { canRead, canWrite, canDelete } = usePermission('item_master');

if (!canWrite) {
  return <div>수정 권한이 없습니다.</div>;
}
```

### useDaumPostcode

다음 우편번호 API 연동.

```tsx
import { useDaumPostcode } from '@/hooks/useDaumPostcode';

const { openPostcode } = useDaumPostcode({
  onComplete: (data) => {
    setAddress(data.address);
    setZipCode(data.zonecode);
  },
});
```