---
status: stable
related_pages: ["[[A01_Home/A01_frontend]]", "[[A02_ProgDetail/A02_frontend]]", "[[B01_Dashboard/B01_frontend]]", "[[B03_FileInput/B03_frontend]]", "[[B04_PreProcess/B04_frontend]]", "[[B05_Profile/B05_frontend]]", "[[B06_Section/B06_frontend]]", "[[B07_Quantity/B07_frontend]]", "[[B08_DesignDetail/B08_frontend]]", "[[B09_Estimation/B09_frontend]]", "[[architecture/shared_resources]]"]
last_updated: 2026-07-18
source: docs/raw/verification/2026-07-18_verify_layout_improvement.md
---

# A00_Common — App Shell Framework

모든 페이지의 공통 스켈레톤. 헤더(로고/네비/언어·테마/인증버튼) + 콘텐츠 아울렛 + 푸터를 통합 관리. B그룹 작업 화면(B01~B11)의 경우 화면 전체 높이 사용을 위해 푸터를 동적 제외(FOOTERLESS_ROUTES) 처리.

## 파일 구성

| 파일 | 역할 |
|---|---|
| `app_shell.ts` (284줄) | 헤더·푸터 렌더링, 테마·언어 토글, `showFooter` 옵션 분기 및 `.app-outlet--without-footer` 뷰포트 확장 |
| `b_page_scaffold.ts` (163줄) | B 그룹(B03~B09) 페이지용 스캐폴드—"준비 중" 임시 페이지 래퍼, 워크플로우 셸 헬퍼 |
| `router.ts` (158줄) / `main.ts` | SPA 라우터(해시 기반), 인증 가드, `FOOTERLESS_ROUTES` 상수(B01~B11) 기준 푸터 비활성화 주입 |
| `b_workflow_nav.ts` (신설) | 7단계 라우트 배열(`WORKFLOW_STEP_ROUTES`), 공통 `fetchWorkflowState`, 네비게이션 `goToWorkflowStage` |

## app_shell 구성요소
### 테마 & 언어 관리
- `initThemeAndLang()` — localStorage 복원 (THEME_STORAGE_KEY, LANG_STORAGE_KEY)
- `onApp_Theme_Toggle_Click()` — light ↔ dark 전환
- `onApp_Lang_Toggle_Click()` — 한국어 ↔ 영문 전환 + 현재 페이지 재렌더

### 헤더 구성 (64px 높이, sticky)
- **로고**: `BRAND_ICON_URL`(prog_icon.jpg) + 브랜드명("Aislo")
- **네비게이션**: 5개 링크 (A02_PROG_DETAIL, A03_COMP_DETAIL, A04_NEWS_HISTORY, A05_EDU_DETAIL, A08_SUPPORT)
- **우측 액션**: 언어 버튼 ("EN" / "한"), 테마 버튼 ("☀" / "☾"), 인증 버튼 (로그인/로그아웃)

## router 라우팅 테이블
- **A그룹 (A01~A09)**: 로그인 전/보안/지원 화면 라우팅
- **B그룹 (B01~B11)**: 대시보드 및 7단계 워크플로우(`B03_FILE_INPUT` ~ `B09_WF6_ESTIMATION`), 결제(`B10`), 상태조회(`B11`) 라우팅

## 인증 가드
- **PROTECTED_ROUTES**: 로그인 토큰 없으면 A06_LOGIN으로 리다이렉트
- **워크플로우 라우트 (B02~B11)**: 추가 검증 (로그인 여부 + `company_id` 미보유 시 B01_ACCOUNT로 강제 이동하여 회사 가입 유도)

## 세부 스캐폴드·CSS·종속성
`b_page_scaffold`, CSS 주입, 공통 종속성은 [[a00_app_shell_framework_scaffold]]에 분리했다.