sam-react-prod/claudedocs/dashboard/[IMPL-2026-01-08] dashboard-settings-popup-checklist.md

대시보드 항목 설정 팝업 구현 계획서

개요

• 화면명: 항목 설정_대시보드 팝업
• 목적: CEO 대시보드에 표시할 섹션들을 사용자가 ON/OFF로 선택할 수 있는 설정 팝업
• 경로: 대시보드 > 항목 설정 버튼 클릭 시 팝업 표시

기능 요구사항

1. 기본 구조

• 모달/다이얼로그 형태의 팝업
• 헤더: "항목 설정" 제목 + X 닫기 버튼
• 푸터: 취소 | 저장 버튼

2. 섹션별 ON/OFF 토글

오늘의 이슈 (전체 토글 + 개별 토글)

항목	기본값	비고
오늘의 이슈 (전체)	ON	빨간 배경 - 전체 ON/OFF
수주	ON
채권 추심	ON
안전 재고	ON
세금 신고	OFF
신규 업체 등록	OFF
연차	ON
지각	ON
결근	OFF
발주	OFF
결재 요청	OFF

메인 섹션 토글 (접기/펼치기 가능)

섹션	기본값	하위 설정
일일 일보	ON	-
당월 예상 지출 내역	ON	-
카드/가지급금 관리	ON	-
접대비 현황	ON	접대비 한도 관리 (연간/분기), 기업 구분
복리후생비 현황	ON	복리후생비 한도 관리, 계산 방식, 금액 설정
미수금 현황	ON	미수금 상위 회사 현황
채권추심 현황	ON	-
부가세 현황	ON	-
캘린더	ON	-

3. 상세 설정 옵션

접대비 현황 하위 설정

• 접대비 한도 관리: 연간 / 분기 선택 (드롭다운)
• 기업 구분: 기업 선택 (드롭다운) + 설명 버튼

복리후생비 현황 하위 설정

• 복리후생비 한도 관리: 연간 / 분기 선택 (드롭다운)
• 계산 방식: 직원당 정해 금액 방식 / 연봉 총액 X 비율 방식 (드롭다운)
• 직원당 정해 금액/월: 금액 입력 (계산 방식이 "직원당 정해 금액 방식"일 때)
• 비율: % 입력 (계산 방식이 "연봉 총액 X 비율 방식"일 때)
• 연간 복리후생비총액: 자동 계산 또는 직접 입력

4. 기업 구분 설명 패널

• 1-2 버튼 클릭 시 기업 구분 기준 설명 펼침/접힘
• 중소기업 판단 기준 설명 (자본총액 기준, 매출액 기준)
• 정보 제공용 (읽기 전용)

5. 데이터 저장

• localStorage 또는 API를 통한 설정 저장
• 저장 버튼 클릭 시 설정 적용 및 대시보드 새로고침
• 취소 버튼 클릭 시 변경사항 무시하고 팝업 닫기

---

구현 체크리스트

Phase 1: 기본 팝업 구조

• 1.1 DashboardSettingsDialog 컴포넌트 생성
• 1.2 타입 정의 (DashboardSettings 인터페이스)
• 1.3 기본 다이얼로그 UI 구현 (헤더, 푸터)
• 1.4 CEODashboard에서 팝업 연결

Phase 2: 오늘의 이슈 섹션

• 2.1 전체 토글 (빨간 배경) 구현
• 2.2 개별 항목 토글 목록 구현
• 2.3 전체 토글 연동 (전체 OFF 시 개별 모두 OFF)

Phase 3: 메인 섹션 토글

• 3.1 접기/펼치기 가능한 섹션 아코디언 구현
• 3.2 일일 일보 ~ 캘린더 섹션 토글 구현
• 3.3 섹션별 ON/OFF 상태 관리

Phase 4: 상세 설정 옵션

• 4.1 접대비 현황 하위 설정 (한도 관리, 기업 구분)
• 4.2 복리후생비 현황 하위 설정 (한도 관리, 계산 방식, 금액)
• 4.3 기업 구분 설명 패널 (펼침/접힘) - 기획서 확인 후 추가 구현 필요

Phase 5: 데이터 연동

• 5.1 설정 상태 관리 (useState/useReducer)
• 5.2 localStorage 저장/불러오기
• 5.3 대시보드에 설정 적용 (조건부 렌더링)

Phase 6: 마무리

• 6.1 스타일 정리 및 반응형 대응
• 6.2 테스트 및 검증 (빌드 확인 필요)

---

파일 구조

src/components/business/CEODashboard/
├── CEODashboard.tsx (수정 완료)
├── components.tsx
├── types.ts (수정 완료 - 설정 타입 추가)
├── dialogs/
│   └── DashboardSettingsDialog.tsx (신규 생성 완료)
├── hooks/
│   └── useDashboardSettings.ts (필요 시 추가)
└── sections/
    └── ... (기존)

---

참고사항

• 기획서 Description 영역의 번호(01, 02 등)는 설명용이므로 UI에 구현하지 않음
• 디자인은 프로젝트 기존 Dialog/Switch 컴포넌트 패턴 따름

구현 완료 (2026-01-08)

• DashboardSettingsDialog 컴포넌트 생성
• 커스텀 ToggleSwitch 컴포넌트 (ON/OFF 라벨, 색상 지원)
• Collapsible 기반 아코디언 섹션 구현
• localStorage 기반 설정 영속화
• 대시보드 섹션 조건부 렌더링 적용