260715_0

docs/wiki/concepts/a00_app_shell_framework.md

@@ -0,0 +1,86 @@
+---
+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]]에 분리했다.