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

## 개요
- **화면명**: 항목 설정_대시보드 팝업
- **목적**: 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: 기본 팝업 구조
- [x] 1.1 DashboardSettingsDialog 컴포넌트 생성
- [x] 1.2 타입 정의 (DashboardSettings 인터페이스)
- [x] 1.3 기본 다이얼로그 UI 구현 (헤더, 푸터)
- [x] 1.4 CEODashboard에서 팝업 연결

### Phase 2: 오늘의 이슈 섹션
- [x] 2.1 전체 토글 (빨간 배경) 구현
- [x] 2.2 개별 항목 토글 목록 구현
- [x] 2.3 전체 토글 연동 (전체 OFF 시 개별 모두 OFF)

### Phase 3: 메인 섹션 토글
- [x] 3.1 접기/펼치기 가능한 섹션 아코디언 구현
- [x] 3.2 일일 일보 ~ 캘린더 섹션 토글 구현
- [x] 3.3 섹션별 ON/OFF 상태 관리

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

### Phase 5: 데이터 연동
- [x] 5.1 설정 상태 관리 (useState/useReducer)
- [x] 5.2 localStorage 저장/불러오기
- [x] 5.3 대시보드에 설정 적용 (조건부 렌더링)

### Phase 6: 마무리
- [x] 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 기반 설정 영속화
- 대시보드 섹션 조건부 렌더링 적용