---
status: stable
related_pages: ["[[A01_Home/A01_frontend]]", "[[A02_ProgDetail/A02_frontend]]", "[[B01_Dashboard/B01_frontend]]", "[[B08_wf5_Quantity/B08_frontend]]"]
last_updated: 2026-07-12
source: A00_Common 공유 프레임워크 소스 코드
---

# A00_Common — App Shell Framework

모든 페이지의 공통 스켈레톤. 헤더(로고/네비/언어·테마/인증버튼) + 콘텐츠 아울렛 + 푸터를 통합 관리.

## 파일 구성

| 파일 | 역할 |
|---|---|
| `app_shell.ts` (284줄) | 헤더·푸터 렌더링, 테마·언어 토글, 인증 상태별 버튼 채우기 |
| `b_page_scaffold.ts` (163줄) | B 그룹(B03~B09) 페이지용 스캐폴드—"준비 중" 임시 페이지 래퍼, 워크플로우 셸 헬퍼 |
| `router.ts` (158줄) | SPA 라우터(해시 기반), 인증 가드, 지연 로딩 |

## 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개 링크
  - App_Nav_Program → A02_PROG_DETAIL
  - App_Nav_Company → A03_COMP_DETAIL
  - App_Nav_News → A04_NEWS_HISTORY
  - App_Nav_Education → A05_EDU_DETAIL
  - App_Nav_Support → A08_SUPPORT
- **우측 액션**:
  - 언어 버튼 ("EN" / "한")
  - 테마 버튼 ("☀" / "☾")
  - 인증 버튼 (로그인/회원가입 또는 계정/로그아웃)

### 인증 버튼 (비동기 fillAuthActions)
**미로그인 상태**: "로그인", "회원가입"
**로그인 상태**: 사용자명(또는 "내 계정"), "로그아웃"

### 로그아웃 (onApp_Logout_Click)
- `A06_Login.logout()` 호출 → 세션 쿠키 제거
- 오류 무시 후 홈(`A01_HOME`)으로 이동

### 푸터
- 높이 56px
- 저작권 텍스트 (App_Footer_Copyright)

## router 라우팅 테이블

| 라우트 | 렌더 함수 위치 |
|---|---|
| A01_HOME | A01_Home/A01_Home_UI_Page.ts |
| A02_PROG_DETAIL | A02_ProgDetail/A02_ProgDetail_UI_Page.ts |
| A03_COMP_DETAIL | A03_CompDetail/A03_CompDetail_UI_Page.ts |
| A04_NEWS_HISTORY | A04_NewsHistory/A04_NewsHistory_UI_Page.ts |
| A05_EDU_DETAIL | A05_EduDetail/A05_EduDetail_UI_Page.ts |
| A06_LOGIN | A06_Login/A06_Login_UI_Auth_Page.ts |
| A07_REGISTER | A07_Register/A07_Register_UI_Auth_Page.ts |
| A08_SUPPORT | A08_Support/A08_Support_UI_Page.ts |
| A09_SECURITY | A09_Security/A09_Security_UI_Page.ts |
| B01_ACCOUNT | B01_Dashboard/B01_Dashboard_UI_Page.ts |
| B02_PROJ_REGISTER | B02_ProjRegister/B02_ProjRegister_UI_Page.ts |
| B03_FILE_INPUT | B03_FileInput/B03_FileInput_UI_Page.ts |
| B04_WF1_SURFACE | B04_wf1_Surface/B04_wf1_Surface_UI_Page.ts |
| B05_WF2_ROUTE | B05_wf2_Route/B05_wf2_Route_UI_Page.ts |
| B06_WF3_PROFILE_CROSS | B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Page.ts |
| B07_WF4_DESIGN_DETAIL | B07_wf4_DesignDetail/B07_wf4_DesignDetail_UI_Page.ts |
| B08_WF5_QUANTITY | B08_wf5_Quantity/B08_wf5_Quantity_UI_Page.ts |
| B09_WF6_ESTIMATION | B09_wf6_Estimation/B09_wf6_Estimation_UI_Page.ts |
| B10_PAYMENT | B10_Payment/B10_Payment_UI_Page.ts |
| B11_STATUS | B11_Status/B11_Status_UI_Page.ts |

## 인증 가드

- **PROTECTED_ROUTES** (config_frontend.ts 정의): 토큰 없으면 A06_LOGIN으로 리다이렉트
- **워크플로우 라우트** (B02~B11): 추가 검증
  - 사용자 없음 → A06_LOGIN으로 리다이렉트
  - company_id 미보유 & SYSTEM_ADMIN 아님 → B01_ACCOUNT로 리다이렉트 (회사 가입 강제)

## 세부 스캐폴드·CSS·종속성

`b_page_scaffold`, CSS 주입, 공통 종속성, 전체 사용처는 [[a00_app_shell_framework_scaffold]]에 분리했다.