sam-react-prod/claudedocs/architecture/[ANALYSIS-2026-01-20] 공통화-현황-분석.md

프로젝트 공통화 현황 분석

1. 핵심 지표 요약

구분	적용 현황	비고
IntegratedDetailTemplate	96개 파일 (228회 사용)	상세/수정/등록 페이지 통합
IntegratedListTemplateV2	50개 파일 (60회 사용)	목록 페이지 통합
DetailConfig 파일	39개 생성	설정 기반 페이지 구성
레거시 패턴 (PageLayout 직접 사용)	~40-50개 파일	마이그레이션 대상

---

2. 공통화 달성률

2.1 상세 페이지 (Detail)

총 Detail 컴포넌트: ~105개
IntegratedDetailTemplate 적용: ~65개
적용률: 약 62%

2.2 목록 페이지 (List)

총 List 컴포넌트: ~61개
IntegratedListTemplateV2 적용: ~50개
적용률: 약 82%

2.3 폼 컴포넌트 (Form)

총 Form 컴포넌트: ~72개
공통 템플릿 미적용 (개별 구현)
적용률: 0%

---

3. 잘 공통화된 영역 ✅

3.1 템플릿 시스템

템플릿	용도	적용 현황
IntegratedDetailTemplate	상세/수정/등록	96개 파일
IntegratedListTemplateV2	목록 페이지	50개 파일
UniversalListPage	범용 목록	7개 파일

3.2 UI 컴포넌트 (Radix UI 기반)

• AlertDialog: 65개 파일에서 일관되게 사용
• Dialog: 142개 파일에서 사용
• Toast (Sonner): 133개 파일에서 일관되게 사용
• Pagination: 54개 파일에서 통합 사용

3.3 데이터 테이블

• DataTable: 공통 컴포넌트로 추상화됨
• IntegratedListTemplateV2에 통합: 자동 페이지네이션, 필터링

---

4. 추가 공통화 기회 🔧

4.1 우선순위 높음 (High Priority)

📋 Form 템플릿 (IntegratedFormTemplate)

현황: 72개 Form 컴포넌트가 개별적으로 구현됨 제안:

// 제안: IntegratedFormTemplate
<IntegratedFormTemplate
  config={formConfig}
  mode="create" | "edit"
  initialData={data}
  onSubmit={handleSubmit}
  onCancel={handleCancel}
  renderFields={() => <CustomFields />}
/>

효과:

• 폼 레이아웃 일관성
• 버튼 영역 통합 (저장/취소/삭제)
• 유효성 검사 패턴 통합

📝 레거시 페이지 마이그레이션

현황: ~40-50개 파일이 PageLayout/PageHeader 직접 사용 대상 파일 (샘플):

• SubscriptionClient.tsx
• SubscriptionManagement.tsx
• ComprehensiveAnalysis/index.tsx
• DailyReport/index.tsx
• ReceivablesStatus/index.tsx
• FAQManagement/FAQList.tsx
• DepartmentManagement/index.tsx
• 등등

---

4.2 우선순위 중간 (Medium Priority)

🗑️ 삭제 확인 다이얼로그 통합

현황: 각 컴포넌트에서 AlertDialog 반복 구현 제안:

// 제안: useDeleteConfirm hook
const { openDeleteConfirm, DeleteConfirmDialog } = useDeleteConfirm({
  title: '삭제 확인',
  description: '정말 삭제하시겠습니까?',
  onConfirm: handleDelete,
});

// 또는 공통 컴포넌트
<DeleteConfirmDialog
  isOpen={isOpen}
  itemName={itemName}
  onConfirm={handleDelete}
  onCancel={() => setIsOpen(false)}
/>

📁 파일 업로드/다운로드 패턴 통합

현황: 여러 컴포넌트에서 파일 처리 로직 중복 제안:

// 제안: useFileUpload hook
const { uploadFile, downloadFile, FileDropzone } = useFileUpload({
  accept: ['image/*', '.pdf'],
  maxSize: 10 * 1024 * 1024,
});

🔄 로딩 상태 표시 통합

현황: 43개 파일에서 다양한 로딩 패턴 사용 제안:

• LoadingOverlay 컴포넌트 확대 적용
• Skeleton 패턴 표준화

---

4.3 우선순위 낮음 (Low Priority)

📊 대시보드 카드 컴포넌트

현황: CEO 대시보드, 생산 대시보드 등에서 유사 패턴 제안: DashboardCard, StatCard 공통 컴포넌트

🔍 검색/필터 패턴

현황: IntegratedListTemplateV2에 이미 통합됨 추가: 독립 검색 컴포넌트 표준화

---

5. 레거시 파일 정리 대상

5.1 _legacy 폴더 (삭제 검토)

src/components/hr/CardManagement/_legacy/
  - CardDetail.tsx
  - CardForm.tsx

src/components/settings/AccountManagement/_legacy/
  - AccountDetail.tsx

5.2 V1/V2 중복 파일 (통합 검토)

• LaborDetailClient.tsx vs LaborDetailClientV2.tsx
• PricingDetailClient.tsx vs PricingDetailClientV2.tsx
• DepositDetail.tsx vs DepositDetailClientV2.tsx
• WithdrawalDetail.tsx vs WithdrawalDetailClientV2.tsx

---

6. 권장 액션 플랜

Phase 7: 레거시 페이지 마이그레이션

순서	대상	예상 작업량
1	설정 관리 페이지 (8개)	중간
2	회계 관리 페이지 (5개)	중간
3	인사 관리 페이지 (5개)	중간
4	보고서/분석 페이지 (3개)	낮음

Phase 8: Form 템플릿 개발

1. IntegratedFormTemplate 설계
2. 파일럿 적용 (2-3개 Form)
3. 점진적 마이그레이션

Phase 9: 유틸리티 Hook 개발

1. useDeleteConfirm
2. useFileUpload
3. useFormState (공통 폼 상태 관리)

Phase 10: 레거시 정리

1. _legacy 폴더 삭제
2. V1/V2 중복 파일 통합
3. 미사용 컴포넌트 정리

---

7. 결론

공통화 성과

• 상세 페이지: 62% 공통화 달성 (Phase 6 완료)
• 목록 페이지: 82% 공통화 달성
• UI 컴포넌트: Radix UI 기반 일관성 확보
• 토스트/알림: Sonner로 완전 통합

남은 과제

• Form 템플릿: 72개 폼 컴포넌트 공통화 필요
• 레거시 페이지: ~40-50개 마이그레이션 필요
• 코드 정리: _legacy, V1/V2 중복 파일 정리

예상 효과 (추가 공통화 시)

• 코드 중복 30% 추가 감소
• 신규 페이지 개발 시간 50% 단축
• 유지보수성 대폭 향상