Files

유병철 c309ac479f feat: [vehicle] 법인차량 관리 모듈 + MES 분석 보고서 + 프론트엔드 문서

- 법인차량 관리 3개 페이지 (차량등록, 운행일지, 정비이력)
- MES 데이터 정합성 분석 보고서 v1/v2
- sam-docs 프론트엔드 기술문서 v1 (9개 챕터)
- claudedocs 가이드/테스트URL 업데이트

2026-03-13 17:52:57 +09:00

3.8 KiB

Raw Blame History

공통 Hooks

경로: src/hooks/

리스트 페이지 관련

useColumnSettings

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

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

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

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

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

useCRUDHandlers

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

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

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

useDeleteDialog

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

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

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

상세 페이지 관련

useDetailPageState

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

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

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

useDetailData

상세 데이터 비동기 로드.

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

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

데이터 관련

useCommonCodes

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

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

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

useClientList

거래처 목록 조회.

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

const { clients, isLoading } = useClientList();

useItemList

품목 목록 조회.

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

const { items, isLoading } = useItemList();

유틸리티 관련

useDateRange

날짜 범위 상태 관리.

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

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

usePermission

권한 기반 접근 제어.

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

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

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

useDaumPostcode

다음 우편번호 API 연동.

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

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

3.8 KiB Raw Blame History