c309ac479f
- 법인차량 관리 3개 페이지 (차량등록, 운행일지, 정비이력) - MES 데이터 정합성 분석 보고서 v1/v2 - sam-docs 프론트엔드 기술문서 v1 (9개 챕터) - claudedocs 가이드/테스트URL 업데이트
187 lines
3.8 KiB
Markdown
187 lines
3.8 KiB
Markdown
# 공통 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);
|
|
},
|
|
});
|
|
```
|