Files
Aislo/docs/wiki/concepts/a00_app_shell_framework.md
eomsangdonandClaude Opus 5 eb30b774f8 chore(docs): docs 폴더 git 추적 전환 · PLAN·OWNERS 최상위 이관
- `docs/` 를 .gitignore 에서 빼 git 추적 대상으로 전환 (위키·완료 이력·검증 기록)
- `docs/raw/PLAN.md` · `docs/raw/OWNERS.md` 를 저장소 최상위로 이동 후 .gitignore 에 등록
  — 창끼리 공유하되 저장소에는 안 올리는 장부
- 살아 있는 경로 참조 7개 파일 정정 (아카이브 107건은 그때 사실이라 그대로 둠)
- graphify 날짜별 산출물(`docs/wiki/graphify-out/20*/`) 제외 — `graphify update` 가 다시 만듦

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-09 18:19:07 +09:00

2.7 KiB

status, related_pages, last_updated, source
status related_pages last_updated source
stable
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
2026-07-18 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에 분리했다.