superport/.claude/equipment_implementation_plan.md

Equipment List 마이그레이션 상세 구현 계획

아키텍처 통합 전략

상태 관리 패턴

• 기존 패턴 유지: EquipmentListController 사용
• 선택 상태 관리: selectedEquipmentIds Map 구조 유지
• 데이터 로딩: MockDataService 싱글톤 패턴 유지
• 라이프사이클: initState, dispose 패턴 준수

의존성 구조

equipment_list_redesign.dart
├── EquipmentListController (기존 컨트롤러 재사용)
├── MockDataService (기존 서비스 재사용)
├── UnifiedEquipment 모델 (기존 모델 재사용)
├── ShadcnTheme (새로운 테마 시스템)
└── ShadcnComponents (새로운 UI 컴포넌트)

이벤트 처리

• 선택 이벤트: 기존 _onEquipmentSelected 메서드 구조 유지
• 액션 이벤트: 기존 핸들러 메서드 구조 유지
• 네비게이션: Named Route 방식 유지

기능별 마이그레이션 계획

우선순위 1: 핵심 기능 (Days 1-3)

1.1 체크박스 선택 기능

수용 기준:

• 각 행에 체크박스 표시
• 선택된 항목 개수 실시간 표시
• 상태별 선택 개수 구분 표시

구현 방법:

// 테이블 헤더에 체크박스 컬럼 추가
Expanded(
  flex: 1,
  child: Checkbox(
    value: _isAllSelected(),
    onChanged: _onSelectAll,
  ),
),

// 각 행에 체크박스 추가
Checkbox(
  value: _controller.selectedEquipmentIds.containsKey('${equipment.status}_${equipment.id}'),
  onChanged: (value) => _onEquipmentSelected(equipment.id, equipment.status, value),
),

1.2 편집/삭제 버튼

수용 기준:

• 각 행 끝에 편집/삭제 아이콘 버튼
• 삭제 시 확인 다이얼로그
• 편집 시 해당 폼으로 네비게이션

구현 방법:

// 액션 버튼 컬럼 추가
Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    IconButton(
      icon: Icon(Icons.edit_outlined, size: 16),
      onPressed: () => _handleEdit(equipment),
    ),
    IconButton(
      icon: Icon(Icons.delete_outline, size: 16),
      onPressed: () => _handleDelete(equipment),
    ),
  ],
),

1.3 상세 정보 표시

수용 기준:

• 시리얼번호, 바코드 컬럼 추가
• 출고/대여 상태일 때 회사, 담당자, 라이센스 정보 표시
• 간소화 모드에서는 주요 정보만 표시

구현 방법:

// 상세 정보 컬럼 조건부 표시
if (_showDetailedColumns) ...[
  Expanded(
    flex: 2,
    child: Text(equipment.equipment.serialNumber ?? '-'),
  ),
  Expanded(
    flex: 2,
    child: Text(equipment.equipment.barcode ?? '-'),
  ),
],

// 출고 정보 표시
if (equipment.status == EquipmentStatus.out) ...[
  Expanded(
    flex: 2,
    child: Text(_controller.getOutEquipmentInfo(equipment.id, 'company')),
  ),
],

우선순위 2: 라우트별 기능 (Days 4-6)

2.1 라우트별 액션 버튼

수용 기준:

• 입고 목록: 입고/출고/대여/폐기 버튼
• 출고 목록: 재입고/수리요청 버튼
• 대여 목록: 반납/연장 버튼

구현 방법:

Widget _buildRouteSpecificActions() {
  switch (widget.currentRoute) {
    case Routes.equipmentInList:
      return Row(
        children: [
          ShadcnButton(
            text: '출고',
            onPressed: _selectedInCount > 0 ? _handleOutEquipment : null,
            icon: Icon(Icons.exit_to_app, size: 16),
          ),
          // ... 다른 버튼들
        ],
      );
    case Routes.equipmentOutList:
      // ... 출고 목록 전용 버튼들
    default:
      return SizedBox.shrink();
  }
}

2.2 검색 기능 확장

수용 기준:

• 시리얼번호, 바코드, 비고 필드 검색
• Enter 키로 검색 실행
• 검색어 하이라이트 (선택사항)

구현 방법:

// 확장된 검색 로직
equipments.where((e) {
  final keyword = _appliedSearchKeyword.toLowerCase();
  return [
    e.equipment.manufacturer,
    e.equipment.name,
    e.equipment.category,
    e.equipment.subCategory,
    e.equipment.subSubCategory,
    e.equipment.serialNumber ?? '',
    e.equipment.barcode ?? '',
    e.equipment.remark ?? '',
    e.notes ?? '',
  ].any((field) => field.toLowerCase().contains(keyword));
}).toList();

우선순위 3: UX 개선 (Days 7-10)

3.1 상세/간소화 뷰 전환

수용 기준:

• 토글 버튼으로 뷰 모드 전환
• 화면 크기에 따른 자동 조정
• 사용자 선택 기억

구현 방법:

// 헤더에 토글 버튼 추가
IconButton(
  icon: Icon(_showDetailedColumns ? Icons.view_column : Icons.view_compact),
  onPressed: () => setState(() => _showDetailedColumns = !_showDetailedColumns),
),

// 화면 크기 감지
@override
void didChangeDependencies() {
  super.didChangeDependencies();
  final width = MediaQuery.of(context).size.width;
  _showDetailedColumns = width > 900;
}

3.2 가로 스크롤 지원

수용 기준:

• 좁은 화면에서 테이블 가로 스크롤
• 스크롤바 표시
• 최소 너비 보장

구현 방법:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: ConstrainedBox(
    constraints: BoxConstraints(minWidth: 1200),
    child: _buildTable(),
  ),
),

성능 최적화 전략

렌더링 최적화

// const 생성자 활용
const SizedBox(width: 8),
const Icon(Icons.edit),

// 조건부 렌더링 최적화
if (_showDetailedColumns) _buildDetailedColumns(),

// ListView.builder 사용 검토 (대량 데이터)

상태 관리 최적화

// 불필요한 setState 방지
if (_selectedStatus != newStatus) {
  setState(() => _selectedStatus = newStatus);
}

// 컨트롤러 재사용
late final EquipmentListController _controller;

테스트 전략

단위 테스트

// 선택 기능 테스트
test('equipment selection works correctly', () {
  controller.selectEquipment(1, 'I', true);
  expect(controller.getSelectedInStockCount(), 1);
});

// 검색 기능 테스트
test('search filters equipment correctly', () {
  final filtered = controller.searchEquipments('Dell');
  expect(filtered.length, greaterThan(0));
});

위젯 테스트

// UI 렌더링 테스트
testWidgets('equipment table renders correctly', (tester) async {
  await tester.pumpWidget(EquipmentListRedesign());
  expect(find.byType(DataTable), findsOneWidget);
});

// 상호작용 테스트
testWidgets('checkbox selection updates UI', (tester) async {
  await tester.tap(find.byType(Checkbox).first);
  await tester.pump();
  expect(find.text('1개 선택됨'), findsOneWidget);
});

마이그레이션 체크리스트

Phase 1 완료 기준

• 체크박스 선택 기능 구현 및 테스트
• 편집/삭제 버튼 구현 및 테스트
• 상세 정보 표시 구현 및 테스트
• 기존 equipment_list와 기능 동일성 확인

Phase 2 완료 기준

• 라우트별 액션 버튼 구현
• 검색 기능 확장 구현
• 출고 정보 표시 구현
• 모든 액션 핸들러 작동 확인

Phase 3 완료 기준

• 상세/간소화 뷰 전환 구현
• 반응형 레이아웃 구현
• 성능 최적화 완료
• 전체 기능 통합 테스트 통과

리스크 및 대응 방안

잠재 리스크

1. 상태 관리 복잡도: 선택 상태와 필터 상태의 동기화

   • 대응: 명확한 상태 플로우 문서화

2. UI 일관성: shadcn 스타일과 기존 기능의 조화

   • 대응: 디자인 시스템 엄격 준수

3. 성능 이슈: 대량 데이터 처리 시 렌더링 지연

   • 대응: 가상 스크롤링 도입 검토

---

작성일: 2025-07-07