---
type: page-frontend
status: stable
page_id: B01_Dashboard
related_pages: ["[[B01_Dashboard/B01_backend]]", "[[B01_Dashboard/B01_api]]", "[[B01_Dashboard/B01_db]]", "[[ui_templates]]", "[[architecture/project_map]]", "[[architecture/workflow_data_flow]]"]
last_updated: 2026-08-08
source: ["docs/raw/verification/2026-08-08_verify_dashboard_scroll_limit.md", "docs/raw/verification/2026-07-17_verify_workflow_stepbar.md"]
---

# B01_Dashboard — Frontend

## 파일과 진입점
| 항목 | 위치 | 역할 |
|---|---|---|
| `renderB01Dashboard()` | `B01_Dashboard_UI_Page.ts` | 대시보드 조립 및 메인 오케스트레이션 |
| `request()` | `B01_Dashboard_Api_Fetch.ts` | 쿠키 포함 요청과 공통 오류 처리 |
| `buildResourcePanel()` | `B01_Dashboard_UI_Resources.ts` | CPU·메모리·디스크 현황과 추이 차트 생성 |
| `B01_Dashboard_UI_Style.css` | `B01_Dashboard_UI_Style.css` | 대시보드·표·모달 스타일 |

## 분할된 UI 컴포넌트 파일
| 파일 | 역할 | 주요 구성 요소 |
|---|---|---|
| [[B01_Dashboard/frontend/B01_Dashboard_UI_Page|B01_Dashboard_UI_Page.ts]] | 메인 진입점, 조립 | `renderB01Dashboard`, `loadRoleData`, `buildPage`, `buildHeader` |
| `B01_Dashboard_UI_Common.ts` | 공용 빌딩 블록 | `roleLabel` 및 페이지 전용 텍스트/액션 페어, `DASHBOARD_VISIBLE_ROWS = 4` 높이 제한 상수 정의 |
| `B01_Dashboard_UI_Projects.ts` | 프로젝트 목록 렌더링 | `projectTable`, `workflow` (4행 제한 `limitVisibleRows` 동적 적용) |
| `B01_Dashboard_UI_Company.ts` | 회사 및 멤버 관리 패널 | `buildCompanyPanel`, `memberTable`, `joinRequestTable`, `companyTable` (각 4행 제한 적용) |
| `B01_Dashboard_UI_Admin.ts` | 시스템 관리자 전용 뷰 | `userTable`, `auditLogTable` (각 4행 제한 적용) |
| `B01_Dashboard_UI_Profile.ts` | 사용자 프로필 및 보안 설정 폼 | `buildProfileForm`, `buildSecurityForm` |
| `B01_Dashboard_UI_TempUpload.ts` | 임시 보관함 목록 렌더링 | R2 프로젝트 생성 전 임시 보관함 그룹 렌더링 (4행 스크롤 제한 및 접기/펼치기 토글 시 `remeasureGroups` 재계산 처리) |
| `B01_Dashboard_UI_TempModal.ts` | 임시 보관함 등록 모달 | 모달 내부 업로드 진행률(Progress bar) 표시 및 파일 등록 관리 |
| `B01_Dashboard_Api_Temp.ts` | 임시 보관함 API 바인딩 | 임시 보관함 묶음/파일 API 호출 |

## UI 권한 헬퍼
| 항목 | 위치 | 역할 |
|---|---|---|
| `canEditProject()` | `B01_Dashboard_UI_Helper.ts` | 프로젝트 수정 버튼 표시 판단 |
| `canDeleteProject()` | `B01_Dashboard_UI_Helper.ts` | SYSTEM_ADMIN 삭제 버튼 표시 판단 |
| `canAddUser()` | `B01_Dashboard_UI_Helper.ts` | ADMIN 이상 팀원 추가 표시 판단 |
| `canChangeRole()` | `B01_Dashboard_UI_Helper.ts` | SYSTEM_ADMIN 역할 변경 표시 판단 |
| `canDeleteUser()` | `B01_Dashboard_UI_Helper.ts` | 사용자 제거 표시 판단 |
| `canManageAutomation()` | `B01_Dashboard_UI_Helper.ts` | ADMIN 이상 자동화 관리 표시 판단 |

> UI 헬퍼는 표시만 제어한다. 최종 권한 검증은 백엔드가 수행한다. 상세: [[auth_rbac]].

## 모달
| 항목 | 위치 | 역할 |
|---|---|---|
| `openEditProjectModal()` | `B01_Dashboard_UI_Modals.ts` | 프로젝트 기본정보 수정 |
| `openDeleteProjectModal()` | `B01_Dashboard_UI_Modals.ts` | 프로젝트 삭제 확인 (`DashboardUser.project_delete_hard` 플래그에 따라 하드 삭제 전용 물리 삭제 경고 문구로 스위칭) |
| `openEditUserModal()` | `B01_Dashboard_UI_Modals.ts` | 사용자 정보 수정 |
| `openChangeRoleModal()` | `B01_Dashboard_UI_Modals.ts` | 사용자 역할 변경 |
| `openDeleteUserModal()` | `B01_Dashboard_UI_Modals.ts` | 사용자 제거 확인 |
| `openCreateCompanyModal()` | `B01_Dashboard_UI_Modals.ts` | 회사 생성 |
| `openFindCompanyModal()` | `B01_Dashboard_UI_Modals.ts` | 회사 검색·가입 신청 |
| `openAddMemberModal()` | `B01_Dashboard_UI_Modals.ts` | 회사 팀원 추가 |
| `openAutomationModal()` | `B01_Dashboard_UI_Modals.ts` | 프로젝트 자동화 조회·관리 |
| `openTempUploadModal()` | `B01_Dashboard_UI_TempModal.ts` | 임시 보관함 자료 등록 모달 |

## 공유 자원 연결
| 항목 | 위치 | 역할 |
|---|---|---|
| 인증·역할 | `B01_Dashboard_UI_Page.ts` | 역할별 섹션 제어 → [[auth_rbac]] |
| workflow 상태 | `B01_Dashboard_UI_Projects.ts` | 공통 `createStepBar(compact)` 호출 및 배치 `workflow_state` 데이터 매핑 → [[workflow_state]] |
| 임시 보관함 | `B01_Dashboard_UI_TempUpload.ts` | R2 임시 보관함 자료 관리 → [[temp_upload]] |
| 공통 UI / 높이 제한 | `B01_Dashboard_UI_Projects.ts` | `limitVisibleRows()` 헬퍼를 이용해 4행 제한 안쪽 스크롤 레이아웃 적용 → [[ui_templates]] |