- PermissionManagement externalSelection 콜백 함수 오류 수정 - setSelectedItems → onToggleSelection, onToggleSelectAll, getItemId 변경 - claudedocs 문서 폴더별 정리 (26개 파일) - dashboard/, guides/, settings/, construction/, sales/ 등 Co-Authored-By: Claude <noreply@anthropic.com>
23 KiB
23 KiB
[IMPL-2026-01-07] 대표님 전용 대시보드 구현
프로젝트 개요
| 항목 | 내용 |
|---|---|
| 작업명 | 대표님 전용 대시보드 (CEO Dashboard) |
| 기준 페이지 | /reports/comprehensive-analysis (종합분석) |
| 대상 페이지 | /dashboard (대시보드) |
| 기존 대시보드 처리 | 백업 후 새 대시보드로 교체 |
| 공통 컴포넌트 활용 | ScheduleCalendar (달력) |
작업 범위
Phase 1: 본 화면 구현 (현재 작업) ✅ 완료
- 스크린샷 분석 및 계획서 작성
- 기존 Dashboard 컴포넌트 백업
- CEO Dashboard 컴포넌트 생성
- 각 섹션별 컴포넌트 구현 (11개 섹션)
Phase 2: 팝업/상세 화면 구현 (추후 작업)
- 항목 설정 팝업
- 일일 일보 정보 팝업
- 해당월 예상 지출 상세 팝업
- 납부세액 내역 상세 팝업
- 일정 상세 팝업
- 기타 상세 팝업들
페이지 구조 (스크린샷 기준)
섹션 1: 대시보드 헤더 (Page 31 상단)
┌─────────────────────────────────────────────────────────┐
│ LOGO 대시보드 - 전체 현황을 조회합니다. [항목 설정] │
└─────────────────────────────────────────────────────────┘
| 요소 | 설명 | 클릭 동작 |
|---|---|---|
| 항목 설정 버튼 | 우측 상단 | 대시보드 항목 설정 팝업 표시 |
섹션 2: 오늘의 이슈 (Page 31)
┌─────────────────────────────────────────────────────────┐
│ 🔴 오늘의 이슈 │
├──────────┬──────────┬──────────┬──────────────────────┤
│ 수주 │ 채권 추심 │ 반전 재고 │ 제규 신고 │
│ 3건 │ 3건 │ 3건 │ 부가세 신고 D-15 │
├──────────┼──────────┼──────────┼──────────────────────┤
│ 신규업체 │ 연차 │ 발주 │ 결재 요청 │
│ 등록 3건│ 3건 │ 3건 │ 3건 │
└──────────┴──────────┴──────────┴──────────────────────┘
| 요소 | 설명 | 클릭 동작 |
|---|---|---|
| 수주 | 수주 건수 | 수주 관리 화면 이동 |
| 채권 추심 | 채권 추심 건수 | 채권 추심 관리 화면 이동 |
| 반전 재고 | 빨간색 강조 (위험) | 재고 관리 화면 이동 |
| 제규 신고 | 부가세 신고 D-day | 세무 관리 화면 이동 |
| 신규 업체 등록 | 신규 업체 건수 | 업체 관리 화면 이동 |
| 연차 | 연차 신청 건수 | 연차 관리 화면 이동 |
| 발주 | 발주 건수 | 발주 관리 화면 이동 |
| 결재 요청 | 결재 대기 건수 | 결재 관리 화면 이동 |
섹션 3: 일일 일보 (Page 31)
┌─────────────────────────────────────────────────────────┐
│ 🔴 일일 일보 2026년 1월 5일 월요일 │
├──────────────┬──────────────┬──────────────┬───────────┤
│ 입금/자산 │ 전월 매출 │ (지표3) │ (지표4) │
│ 30.5억원 │ $11,123,000 │ 10.2억원 │ 3.5억원 │
└──────────────┴──────────────┴──────────────┴───────────┘
│ ⚠️ 최근 7일 평균 대비 3배 이상으로 입금이 발생했습니다. │
│ ⚠️ 102만원이 감지됐습니다... (이상거래 감지) │
│ ℹ️ 현금성 자산이 300건전환입니다. 월 운영비와 비용보다... │
└─────────────────────────────────────────────────────────┘
| 요소 | 설명 | 클릭 동작 |
|---|---|---|
| 일일 일보 영역 전체 | 오늘 날짜 기준 일보 | 일일 일보 정보 팝업 표시 |
섹션 4: 당월 예상 지출 내역 (Page 32)
┌─────────────────────────────────────────────────────────┐
│ 🔴 당월 예상 지출 내역 │
├──────────────┬──────────────┬──────────────┬───────────┤
│ 미청산가지급금│ 이달 예상 │ 전달 대비 │ 차이 │
│ 30.5억원 │30,123,000원 │30,123,000원 │ 3.5억원 │
│ 전달14%,+5% │ │ │ │
└──────────────┴──────────────┴──────────────┴───────────┘
│ ⚠️ 이번 달 예상 지출이 전달 해당 15% 증가했습니다... │
│ ⚠️ 이번 달 예상 지출이 예상 12% 초과했습니다... │
│ ✅ 이번 달 예상 지출이 전달 대비 8% 감소했습니다... │
└─────────────────────────────────────────────────────────┘
| 요소 | 설명 | 클릭 동작 |
|---|---|---|
| 가지급금 | 미청산 가지급금 | 가지급금 관리 화면 이동 |
| 미청산 가지급금 | 대상 금액 | 미청산 가지급금 상세 화면 이동 |
| 해당월 예상 지출 | 지출 상세 | 해당월 예상 지출 상세 팝업 표시 |
섹션 5: 카드/가지급금 관리 (Page 32)
┌─────────────────────────────────────────────────────────┐
│ 🔴 카드/가지급금 관리 │
├──────────────┬──────────────┬──────────────┬───────────┤
│ 해당달 대상 │ 가지급금 │ 미정산 │ 총잔액 │
│30,123,000원 │ 3.5억원 │3,123,000원 │3,123,000원│
└──────────────┴──────────────┴──────────────┴───────────┘
│ ⚠️ 법인카드 사용 총 85만원이 가지급금으로 전환됐습니다... │
│ ⚠️ 전 가지급금 1,520만원은 4.6%, 연 약 70만원의 인정이자...│
│ ⚠️ 상품권/귀금속 등 현대비 불인정 항목 매입 건이 있습니다 │
│ ℹ️ 주말 카드 사용 총 100만원 중 결과 지의... │
└─────────────────────────────────────────────────────────┘
| 요소 | 설명 | 클릭 동작 |
|---|---|---|
| 법인카드 예상 가능 영역 | 카드 사용 현황 | 법인카드 관리 화면 이동 |
섹션 6: 접대비 현황 (Page 32~33)
┌─────────────────────────────────────────────────────────┐
│ 🔴 접대비 현황 │
├──────────────┬──────────────┬──────────────┬───────────┤
│ 접대비 한도 │ 접대비 사용액 │ 한도 잔액 │ 기타 │
│ 305.3억원 │40,123,000원 │30,123,000원 │10,000,000원│
└──────────────┴──────────────┴──────────────┴───────────┘
│ ✅ 접대비 사용 총 2,400만원 중 / 한도 4,000만원 (60%)... │
│ ⚠️ 접대비 85% 도달. 연내 한도 600만원 잔액입니다... │
│ ❌ 접대비 한도 초과 320만원 발생. 손금불산입되어... │
│ ℹ️ 접대비 사용 총 3건(45만원)이 거래처 한도 누락... │
└─────────────────────────────────────────────────────────┘
| 요소 | 설명 | 클릭 동작 |
|---|---|---|
| 접대비 영역 | 접대비 현황 | 해당월 예상 지출 상세 팝업 표시 |
섹션 7: 복리후생비 현황 (Page 33)
┌─────────────────────────────────────────────────────────┐
│ 🔴 복리후생비 현황 │
├──────────────┬──────────────┬──────────────┬───────────┤
│ 총 복리후생비│누적 사용 │ 잠정 사용액 │ 잠정 한도 │
│30,123,000원 │10,123,000원 │ 5,123,000원 │5,123,000원│
└──────────────┴──────────────┴──────────────┴───────────┘
│ ✅ 1인당 월 복리후생비 18만원. 업계 평균 내 정상 운영... │
│ ⚠️ 식대가 월 25만원으로 비과세 한도 초과... │
└─────────────────────────────────────────────────────────┘
섹션 8: 미수금 현황 (Page 33)
┌─────────────────────────────────────────────────────────┐
│ 🔴 미수금 현황 │
├──────────────┬──────────────┬──────────────┬───────────┤
│ 누계 미수금 │ 30일 초과 │ 60일 초과 │ 90일 초과 │
│30,123,000원 │10,123,000원 │ 3,123,000원 │2,123,000원│
│매출:6,012만 │매출:6,012만 │매출:6,012만 │매출:6,012만│
└──────────────┴──────────────┴──────────────┴───────────┘
│ ❌ 90일 이상 장기 미수금 3건(2,500만원) 발생. 회수조치... │
│ ⚠️ (주)대한전자 미수금 4,500만원으로 전체의 35%... │
└─────────────────────────────────────────────────────────┘
| 요소 | 설명 | 클릭 동작 |
|---|---|---|
| 미수금 현황 목록 | 미수금 상세 | 미수금 상세 화면으로 이동 (1,2차 표시) |
섹션 9: 채권추심 현황 (Page 34)
┌─────────────────────────────────────────────────────────┐
│ 🔴 채권추심 현황 │
├──────────────┬──────────────┬──────────────┬───────────┤
│ 총 채권 │ 추심 진행 │ 이달(?) │ 미회수(?) │
│ 3.5억원 │30,123,000원 │ 3,123,000원 │ 2.8억원 │
└──────────────┴──────────────┴──────────────┴───────────┘
│ ℹ️ (주)대한전자 건 지급명령 신청 완료. 법원 결정까지... │
│ ⚠️ (주)삼성테크 건 회수 불가 판정. 대손 처리 검토... │
└─────────────────────────────────────────────────────────┘
| 요소 | 설명 | 클릭 동작 |
|---|---|---|
| 채권추심 현황 확록 | 채권 추심 목록 | 미상대금 수심관리 화면으로 이동 |
섹션 10: 부가세 현황 (Page 34~35)
┌─────────────────────────────────────────────────────────┐
│ 🔴 부가세 현황 │
├──────────────┬──────────────┬──────────────┬───────────┤
│ 예상 납부세액 │ 예상 납부세액 │ 금액 │ 건수 │
│ 30.5억원 │ 20.5억원 │ 1.1억원 │ 3건 │
└──────────────┴──────────────┴──────────────┴───────────┘
│ ⚠️ 2026년 1기 예정신고 기한, 예상 환급세액은 5,200... │
│ ⚠️ 2026년 1기 예정신고 기한, 예상 납부세액은 118,100... │
└─────────────────────────────────────────────────────────┘
| 요소 | 설명 | 클릭 동작 |
|---|---|---|
| 부가세 현황 확록 | 납부세액 내역 | 해당 납부세액 내역 상세 팝업 표시 |
섹션 11: 캘린더 (Page 34~35)
┌─────────────────────────────────────────────────────────┐
│ < 2026년 1월 > [일정추가] [일우 월일요] │
│ [전체▼] [발주▼] [사업▼] │
├─────────────────────────────────────────────────────────┤
│ 일 월 화 수 목 금 토 │
│ 1 2 3 4 5 │
│ 6 7 8 9 10 11 12 ← 6일 선택 (주황색) │
│ 13 14 15 16 17 18 19 토/일 배경 노란색 │
│ 20 21 22 23 24 25 26 │
│ 27 28 29 30 31 │
├─────────────────────────────────────────────────────────┤
│ 1월 6일 화요일 총 4건 │
├─────────────────────────────────────────────────────────┤
│ ● 제목: 부서세 ✏️ │
│ 기간: 2026-01-01~01-06 │
│ 시간: 09:00 ~ 12:00 │
├─────────────────────────────────────────────────────────┤
│ ● 제목: 회의 │
│ 기간: 2026-01-01~01-07 │
│ 시간: 전일 │
├─────────────────────────────────────────────────────────┤
│ ● 제목: 1,123 │
└─────────────────────────────────────────────────────────┘
| 요소 | 설명 | 클릭 동작 |
|---|---|---|
| 일정추가 버튼 | 일정 추가 | (미정) |
| 일우 월일요 버튼 | 일정/다음달 스케쥴 표시 | 일정/다음달 스케쥴 토글 |
| 필터 셀렉트 | 전체, 발주, 사업 등 | 일정 유형 필터링 (다중선택) |
| 날짜 클릭 | 해당 날짜 선택 | 선택 날짜 일정 목록 표시 |
| 일정 항목 | 개별 일정 | 일정 상세 팝업 표시 |
| 수정 아이콘 (✏️) | 일정 수정 | 일정 수정 화면으로 이동 |
달력 스타일:
- 토요일/일요일: 배경 노란색
- 선택된 날짜: 배경 주황색
- 이전/다음 달: 이전달/다음달 이동
체크리스트
1. 사전 준비 ✅
- 기존 Dashboard 컴포넌트 백업 (
Dashboard.tsx.backup2) - 기존 MainDashboard 컴포넌트 백업 (
MainDashboard.tsx.backup) - CEO Dashboard 디렉토리 구조 생성
2. 컴포넌트 구조 생성
src/components/business/CEODashboard/
├── index.tsx # 메인 컴포넌트 (export)
├── CEODashboard.tsx # 메인 레이아웃
├── types.ts # 타입 정의
├── actions.ts # Server Actions
├── sections/
│ ├── DashboardHeader.tsx # 헤더 (항목 설정 버튼)
│ ├── TodayIssueSection.tsx # 오늘의 이슈
│ ├── DailyReportSection.tsx # 일일 일보
│ ├── MonthlyExpenseSection.tsx # 당월 예상 지출 내역
│ ├── CardManagementSection.tsx # 카드/가지급금 관리
│ ├── EntertainmentSection.tsx # 접대비 현황
│ ├── WelfareSection.tsx # 복리후생비 현황
│ ├── ReceivableSection.tsx # 미수금 현황
│ ├── DebtCollectionSection.tsx # 채권추심 현황
│ ├── VatSection.tsx # 부가세 현황
│ └── CalendarSection.tsx # 캘린더
└── dialogs/ # Phase 2에서 구현
├── ItemSettingDialog.tsx # 항목 설정 팝업
├── DailyReportDialog.tsx # 일일 일보 정보 팝업
└── ...
3. 섹션별 구현 체크리스트 ✅
3.1 대시보드 헤더 ✅
- 로고 영역
- 제목 + 설명
- 항목 설정 버튼
- 항목 설정 팝업 연동 (Phase 2)
3.2 오늘의 이슈 ✅
- 8개 이슈 카드 그리드 (4x2)
- 각 카드 클릭 시 해당 화면 이동
- 반전 재고 빨간색 강조
- 제규 신고 D-day 표시
3.3 일일 일보 ✅
- 날짜 표시 (년/월/일/요일)
- 4개 지표 카드
- 체크포인트 메시지 (경고/정보)
- 클릭 시 일일 일보 팝업 (Phase 2)
3.4 당월 예상 지출 내역 ✅
- 4개 금액 카드
- 전월 대비 증감 표시
- 체크포인트 메시지
- 클릭 시 상세 팝업 (Phase 2)
3.5 카드/가지급금 관리 ✅
- 4개 금액 카드
- 체크포인트 메시지
- 클릭 시 해당 화면 이동
3.6 접대비 현황 ✅
- 4개 금액 카드
- 체크포인트 메시지
- 클릭 시 상세 팝업 (Phase 2)
3.7 복리후생비 현황 ✅
- 4개 금액 카드
- 체크포인트 메시지
3.8 미수금 현황 ✅
- 4개 금액 카드 (기간별 분류)
- 매출/입금 서브 정보
- 체크포인트 메시지
- 클릭 시 미수금 상세 화면 이동
3.9 채권추심 현황 ✅
- 4개 금액 카드
- 체크포인트 메시지
- 클릭 시 미상대금 수심관리 화면 이동
3.10 부가세 현황 ✅
- 4개 금액 카드
- 체크포인트 메시지
- 클릭 시 납부세액 내역 팝업 (Phase 2)
3.11 캘린더 ✅
- ScheduleCalendar 공통 컴포넌트 활용
- 일정추가 버튼
- 필터 셀렉트 (전체/발주/사업/회의/세금)
- 토/일 배경 노란색 스타일 커스터마이징 (추후)
- 선택 날짜 주황색 스타일 (추후)
- 선택 날짜 일정 목록 표시
- 일정 항목 클릭 시 상세 팝업 (Phase 2)
- 수정 아이콘 클릭 시 수정 화면 이동
4. 대시보드 교체 ✅
- Dashboard.tsx에서 MainDashboard → CEODashboard로 교체
- 타입 체크 통과
연동 페이지 목록 (오늘의 이슈 클릭 시)
| 이슈 항목 | 연동 페이지 | 경로 (예상) |
|---|---|---|
| 수주 | 수주 관리 | /sales/orders |
| 채권 추심 | 채권 추심 관리 | /accounting/debt-collection |
| 반전 재고 | 재고 관리 | /inventory/stock |
| 제규 신고 | 세무 관리 | /accounting/tax |
| 신규 업체 등록 | 업체 관리 | /partners/vendors |
| 연차 | 연차 관리 | /hr/vacation |
| 발주 | 발주 관리 | /purchase/orders |
| 결재 요청 | 결재 관리 | /approval/pending |
팝업 목록 (Phase 2에서 구현)
| 팝업 이름 | 트리거 | 내용 |
|---|---|---|
| 항목 설정 팝업 | 항목 설정 버튼 클릭 | 대시보드 표시 항목 설정 |
| 일일 일보 정보 팝업 | 일일 일보 영역 클릭 | 일일 일보 상세 정보 |
| 해당월 예상 지출 상세 팝업 | 당월 예상 지출 클릭 | 지출 상세 내역 |
| 납부세액 내역 상세 팝업 | 부가세 현황 클릭 | 납부세액 상세 내역 |
| 일정 상세 팝업 | 일정 항목 클릭 | 일정 상세 정보 |
참고 사항
기존 컴포넌트 재활용
ComprehensiveAnalysis: 많은 섹션 패턴 참고 가능SectionTitle: 섹션 제목 컴포넌트AmountCardItem: 금액 카드 컴포넌트CheckPointItem: 체크포인트 메시지 컴포넌트
ScheduleCalendar: 달력 공통 컴포넌트- 월/주 뷰 지원
- 이벤트/뱃지 표시
- 커스터마이징 가능
스타일 가이드
- 빨간색 강조: 위험/긴급 항목 (반전 재고 등)
- 주황색: 선택된 날짜
- 노란색 배경: 토요일/일요일
- 체크포인트 아이콘:
- ✅ 성공 (초록)
- ⚠️ 경고 (주황)
- ❌ 에러 (빨강)
- ℹ️ 정보 (파랑)
변경 이력
| 날짜 | 작업 내용 | 상태 |
|---|---|---|
| 2026-01-07 | 계획서 작성 | 완료 |
| 2026-01-07 | Phase 1 본 화면 구현 완료 (11개 섹션) | 완료 |