9.1 KiB

Raw Blame History

기사 관리 위젯 구현 계획

개요

대시보드에 추가할 수 있는 기사 관리 위젯을 구현합니다. 실시간으로 기사와 차량의 운행 상태를 확인하고 관리할 수 있는 기능을 제공합니다.

주요 기능

1. 기사 정보 표시

차량 번호: 예) 12가 3456
기사 이름: 예) 홍길동
출발지: 예) 서울시 강남구
목적지: 예) 경기도 성남시
차량 유형: 예) 1톤 트럭, 2.5톤 트럭, 5톤 트럭, 카고, 탑차, 냉동차 등
운행 상태: 대기중, 운행중, 휴식중, 점검중
연락처: 기사 전화번호
운행 시작 시간: 출발 시간
예상 도착 시간: 목적지 도착 예정 시간

2. 운행 상태 구분

대기중 (회색): 출발지/목적지가 없는 상태
운행중 (초록색): 출발지/목적지가 있고 운행 중
휴식중 (주황색): 휴게 중
점검중 (빨간색): 차량 점검 또는 수리 중

3. 뷰 타입

리스트 뷰: 테이블 형식으로 전체 기사 목록 표시
맵 뷰 (향후 확장): 지도에 기사 위치 표시

4. 필터링 및 검색

상태별 필터: 운행중, 대기중, 휴식중, 점검중
차량 유형별 필터: 1톤, 2.5톤, 5톤 등
검색: 기사 이름, 차량 번호로 검색

5. 정렬 기능

기사 이름순
차량 번호순
출발 시간순
운행 상태별

6. 설정 옵션

뷰 타입: 리스트
자동 새로고침: 실시간 데이터 갱신 (10초, 30초, 1분)
표시 항목: 사용자가 원하는 컬럼만 표시
테마: Light, Dark, 사용자 지정

데이터 구조

interface DriverInfo {
  id: string; // 기사 고유 ID
  name: string; // 기사 이름
  vehicleNumber: string; // 차량 번호
  vehicleType: string; // 차량 유형
  phone: string; // 연락처
  status: "standby" | "driving" | "resting" | "maintenance"; // 운행 상태
  departure?: string; // 출발지 (운행 중일 때)
  destination?: string; // 목적지 (운행 중일 때)
  departureTime?: string; // 출발 시간
  estimatedArrival?: string; // 예상 도착 시간
  progress?: number; // 운행 진행률 (0-100)
}

목업 데이터

const MOCK_DRIVERS: DriverInfo[] = [
  {
    id: "DRV001",
    name: "홍길동",
    vehicleNumber: "12가 3456",
    vehicleType: "1톤 트럭",
    phone: "010-1234-5678",
    status: "driving",
    departure: "서울시 강남구",
    destination: "경기도 성남시",
    departureTime: "2025-10-14T09:00:00",
    estimatedArrival: "2025-10-14T11:30:00",
    progress: 65,
  },
  {
    id: "DRV002",
    name: "김철수",
    vehicleNumber: "34나 7890",
    vehicleType: "2.5톤 트럭",
    phone: "010-2345-6789",
    status: "standby",
  },
  {
    id: "DRV003",
    name: "이영희",
    vehicleNumber: "56다 1234",
    vehicleType: "5톤 트럭",
    phone: "010-3456-7890",
    status: "driving",
    departure: "인천광역시",
    destination: "충청남도 천안시",
    departureTime: "2025-10-14T08:30:00",
    estimatedArrival: "2025-10-14T10:00:00",
    progress: 85,
  },
  {
    id: "DRV004",
    name: "박민수",
    vehicleNumber: "78라 5678",
    vehicleType: "카고",
    phone: "010-4567-8901",
    status: "resting",
  },
  {
    id: "DRV005",
    name: "정수진",
    vehicleNumber: "90마 9012",
    vehicleType: "냉동차",
    phone: "010-5678-9012",
    status: "maintenance",
  },
];

구현 단계

✅ Step 1: 타입 정의

DriverManagementConfig 인터페이스 정의
DriverInfo 인터페이스 정의
types.ts에 기사 관리 설정 타입 추가
요소 타입에 'driver-management' subtype 추가

✅ Step 2: 목업 데이터 생성

driverMockData.ts - 기사 목업 데이터 생성
다양한 운행 상태의 샘플 데이터 (15개)
차량 유형별 샘플 데이터

✅ Step 3: 유틸리티 함수

driverUtils.ts - 기사 관리 유틸리티 함수
운행 상태별 색상 반환
진행률 계산
시간 포맷팅
필터링/정렬 로직

✅ Step 4: 리스트 뷰 컴포넌트

DriverListView.tsx - 테이블 형식 리스트 뷰
상태별 색상 구분
정렬 기능 (유틸리티에서 처리)
반응형 테이블 디자인 (컴팩트 모드 포함)

✅ Step 5: 카드 뷰 컴포넌트

카드 뷰는 현재 구현하지 않음 (리스트 뷰만 사용)
DriverCardView.tsx - 향후 추가 예정

✅ Step 6: 메인 위젯 컴포넌트

DriverManagementWidget.tsx - 메인 위젯
리스트 뷰 표시
필터링 UI (상태별)
검색 기능
자동 새로고침 (시뮬레이션)

✅ Step 7: 설정 UI

DriverManagementSettings.tsx - 설정 컴포넌트
자동 새로고침 간격 설정
표시 컬럼 선택
테마 설정
정렬 기준 설정

✅ Step 8: 통합

DashboardSidebar에 기사 관리 위젯 추가
CanvasElement에서 기사 관리 위젯 렌더링
DashboardDesigner에 기본값 설정
ElementConfigModal에 예외 처리 추가

✅ Step 9: 스타일링 및 최적화

반응형 디자인 (다양한 위젯 크기 대응)
컴팩트 모드 (작은 크기)
로딩 상태 처리
빈 데이터 상태 처리

✅ Step 10: 향후 확장 기능

실제 REST API 연동
웹소켓을 통한 실시간 업데이트
맵 뷰 (지도에 기사 위치 표시)
기사별 상세 정보 모달
운행 이력 조회
알림 기능 (지연, 긴급 상황 등)

위젯 크기별 최적화

2x2 (최소 크기)

요약 정보만 표시 (운행중 기사 수, 대기 기사 수)
간단한 상태 표시

3x3

카드 뷰 (2-3개 기사 표시)
기본 정보 표시

4x3 이상 (권장)

리스트 뷰 또는 카드 뷰 전체 표시
필터링 및 검색 기능
모든 정보 표시

완료 기준

기본 타입 정의 완료
목업 데이터 생성 완료
리스트 뷰 구현 완료
카드 뷰 구현 완료 (향후 추가)
필터링/검색 기능 구현 완료
설정 UI 구현 완료
대시보드 통합 완료
다양한 크기에서 테스트 완료 (사용자 테스트 필요)

주의사항

성능 최적화: 많은 기사 데이터를 처리할 때 가상 스크롤링 고려
실시간 업데이트: 자동 새로고침 시 부드러운 전환 애니메이션
접근성: 키보드 네비게이션 지원
에러 처리: API 연동 시 에러 상태 처리
반응형: 작은 크기에서도 정보가 잘 보이도록 디자인

추가 개선 사항 제안

1. 통계 정보

오늘 총 운행 건수
평균 운행 시간
차량 유형별 운행 통계

2. 긴급 상황 알림

운행 지연 알림 (예상 시간 초과)
차량 점검 필요 알림
기사 연락 두절 알림

3. 배차 관리 (고급 기능)

대기 중인 기사에게 배차
운행 스케줄 관리
경로 최적화 제안

4. 보고서 기능

일일 운행 보고서
기사별 운행 실적
차량별 가동률

🎯 구현 우선순위

필수 (Phase 1)
- 타입 정의
- 목업 데이터
- 리스트 뷰
- 기본 필터링
중요 (Phase 2)
- 카드 뷰
- 검색 기능
- 설정 UI
- 자동 새로고침
추가 (Phase 3)
- 통계 정보
- 상세 정보 모달
- 운행 이력
향후 (Phase 4)
- 맵 뷰
- 실시간 위치 추적
- 배차 관리
- 보고서 기능

구현 시작일: 2025-10-14 구현 완료일: 2025-10-14 현재 진행률: 90% (카드 뷰 및 최종 테스트 제외)

🎉 구현 완료!

기사 관리 위젯의 핵심 기능이 모두 구현되었습니다!

✅ 구현된 기능

데이터 구조
- DriverInfo, DriverManagementConfig 타입 정의
- 15개의 다양한 목업 데이터
- 6가지 차량 유형 지원
리스트 뷰
- 테이블 형식의 깔끔한 UI
- 상태별 색상 구분 (운행중/대기중/휴식중/점검중)
- 컴팩트 모드 지원 (2x2 크기)
필터링 및 검색
- 상태별 필터 (전체/운행중/대기중/휴식중/점검중)
- 기사명, 차량번호 검색
- 실시간 필터링
정렬 기능
- 기사명, 차량번호, 운행상태, 출발시간 기준 정렬
- 오름차순/내림차순 지원
자동 새로고침
- 10초/30초/1분/5분 간격 설정 가능
- 실시간 데이터 시뮬레이션
설정 UI
- Popover 방식의 직관적인 설정
- 표시 컬럼 선택 (9개 컬럼)
- 테마 설정 (Light/Dark/Custom)
- 정렬 기준 및 순서 설정
대시보드 통합
- 사이드바에 드래그 가능한 위젯 추가
- 캔버스에서 자유로운 배치 및 크기 조절
- 설정 저장 및 불러오기

🚀 향후 개선 사항

카드 뷰 구현
맵 뷰 (지도 연동)
실제 REST API 연동
웹소켓 실시간 업데이트
통계 정보 추가
배차 관리 기능

9.1 KiB Raw Blame History

기사 관리 위젯 구현 계획

개요

주요 기능

1. 기사 정보 표시

2. 운행 상태 구분

3. 뷰 타입

4. 필터링 및 검색

5. 정렬 기능

6. 설정 옵션

데이터 구조

목업 데이터

구현 단계

✅ Step 1: 타입 정의

✅ Step 2: 목업 데이터 생성

✅ Step 3: 유틸리티 함수

✅ Step 4: 리스트 뷰 컴포넌트

✅ Step 5: 카드 뷰 컴포넌트

✅ Step 6: 메인 위젯 컴포넌트

✅ Step 7: 설정 UI

✅ Step 8: 통합

✅ Step 9: 스타일링 및 최적화

✅ Step 10: 향후 확장 기능

위젯 크기별 최적화

2x2 (최소 크기)

3x3

4x3 이상 (권장)

완료 기준

주의사항

추가 개선 사항 제안

1. 통계 정보

2. 긴급 상황 알림

3. 배차 관리 (고급 기능)

4. 보고서 기능

🎯 구현 우선순위

🎉 구현 완료!

✅ 구현된 기능

🚀 향후 개선 사항

9.1 KiB

Raw Blame History