Files
sam-react-prod/claudedocs/dashboard/[IMPL-2026-01-07] ceo-dashboard-checklist.md
유병철 b59150551e chore(WEB): PermissionManagement 오류 수정 및 claudedocs 폴더 정리
- PermissionManagement externalSelection 콜백 함수 오류 수정
  - setSelectedItems → onToggleSelection, onToggleSelectAll, getItemId 변경
- claudedocs 문서 폴더별 정리 (26개 파일)
  - dashboard/, guides/, settings/, construction/, sales/ 등

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-17 13:11:35 +09:00

23 KiB
Raw Blame History

[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개 섹션) 완료