Files
Aislo/docs/raw/verification/2026-07-18_verify_layout_improvement.md
T
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

4.2 KiB

검증 보고서: B05 레이아웃 및 앱 셸 푸터 제거 개선

  • 검증 일자: 2026-07-18
  • 검증 대상 커밋 및 작업:
    • babf558d372a3c966e8238504855b4f4fdee0530 (260718_3)
    • 50da12c4914e65ea7994d9d58e15101ca7dd28d5 (260718_4)
    • A00_Common/main.ts 로컬 수정 (B그룹 전체 B01~B11 푸터 제외 정책 적용)
  • 검증자: Antigravity (코드 검증 역할)

1. 검증 항목 및 소스코드 대조 결과

1) B05 전용 레이아웃 개선

  • 요구사항: B05 상세/3D 영역을 헤더 제외 한 화면 높이에 고정하고 옵션 패널과 세로 크기 계산 분리.
  • 수정 파일:
  • 코드 검증 결과:
    • renderB05Route 함수에서 레이아웃 루트에 b05-route-layout 클래스를 부여하여 스타일 바인딩 지점을 명확히 제공함.
    • height: calc(100vh - var(--spacing-64))height: calc(100dvh - var(--spacing-64))를 이중 정의하여 모바일/데스크톱 브라우저 환경에서 동적 뷰포트 높이 변화에 유연하게 대처함.
    • 부모 요소에 overflow: hidden, min-height: 0을 지정하여 3D 뷰포트 영역의 불필요한 스크롤 발생을 방지함.
    • .b05-route__viewport에 적용되어 있던 강제 최소 높이인 min-height: 560pxmin-height: 0으로 완화하여 플렉스박스 또는 그리드 내부에서 유연하게 수축할 수 있도록 설계됨.

2) B04B09 및 B그룹 전체(B01B11) 작업 화면 공통 푸터 제거 및 아울렛 확장

  • 요구사항: B그룹 전체(B01~B11) 작업 화면은 공통 앱 셸의 푸터를 제외하고 outlet을 헤더 아래 전체 화면 높이로 확장.
  • 수정 파일:
  • 코드 검증 결과:
    • renderShell 함수가 showFooter 불리언 옵션(기본값 true)을 받도록 파라미터화하여 기존 셸 호출 코드와의 완벽한 하위 호환성을 보장함.
    • 푸터가 비활성화된 경우 app-outlet--without-footer 클래스를 추가하고, 이를 통해 푸터 높이(56px)를 제외한 순수 뷰포트 높이 min-height: calc(100vh - 64px)를 만족시킴.
    • main.tsFOOTERLESS_ROUTES 상수를 확장하여 기존 B04~B09 외에도 B01_ACCOUNT, B02_PROJ_REGISTER, B03_FILE_INPUT, B10_PAYMENT, B11_STATUS를 모두 추가함.
    • 이를 통해 B그룹의 전체 단계(B01~B11) 진입 시 공통 푸터가 렌더링되지 않으며, 화면 전체 높이를 온전히 사용할 수 있도록 정합성이 확보됨.

2. 기술적 적합성 및 안정성 검증

  1. TypeScript 타입 체크 검증:
    • 로컬 수정 이후 프로젝트 루트에서 tsc --noEmit을 실행한 결과 타입 에러나 참조 오류 없이 정상적으로 빌드 및 타입 검증이 완료됨을 확인함.
  2. CSS 디자인 시스템 정합성:
    • 사용된 CSS 변수 --spacing-64ui_template_theme.css64px로 올바르게 정의되어 있어, 헤더 크기와 공백 처리가 정밀하게 매칭됨.
  3. 성능 및 레이아웃 이탈 여부:
    • 3D 캔버스 컨테이너의 크기를 부모 컨테이너가 제어하며 화면 외각으로 삐져나가는 현상(Layout Overflow)이 방지됨.

3. 종합 의견

  • 합격 (PASS): 설계 목표인 B05 3D 레이아웃 세로 크기 고정 및 B그룹 전체(B01~B11) 화면의 하단 푸터 제거를 통한 아울렛 화면 확장이 부작용(Side Effect) 없이 완벽히 구현되었습니다.