# Skybound Hangar Layout Guardrails Scroll Islands

작성일: 2026-04-26 17:24 KST

## 요청 요약

- Mount Bays 목록이 전체적으로 확인되지 않고 하단이 잘린다.
- 이런 문제가 여러 UI에서 반복적으로 발생한다.
- 사용자가 하나씩 찾아서 수정 요청하기 어렵기 때문에 근본적으로 수정해야 한다.

## 핵심 문제

행거 UI에는 `overflow: hidden`과 고정 높이 카드가 여러 곳에 섞여 있었다.

특히 Loadout 화면의 Mount Bays는 다음 구조였다.

- 부모 컬럼은 `overflow: hidden`
- 내부 슬롯은 고정 `min-height`
- 화면 높이가 줄어들면 마지막 슬롯이 부모 밖으로 밀림
- 부모가 hidden이므로 사용자가 확인하거나 스크롤할 수 없음

이 문제는 Mount Bays만의 문제가 아니라, 장비 목록, 업그레이드 목록, 포지 목록처럼 콘텐츠량이 가변적인 UI 전반에서 반복될 수 있는 구조적 문제다.

## 적용한 해결 방향

이번 수정은 개별 카드 하나를 줄이는 방식이 아니라, 행거 전체에 `Scroll Island` 규칙을 추가하는 방향으로 처리했다.

원칙:

- 화면 전체는 가능한 한 유지한다.
- 콘텐츠가 많은 영역만 내부 스크롤을 가진다.
- `overflow: hidden`은 레이아웃 컨테이너를 안정화하는 곳에만 쓰고, 실제 목록 영역은 반드시 스크롤 가능하게 둔다.
- 고정 높이보다 `minmax(0, 1fr)`와 `min-height: 0`을 우선한다.
- 작은 화면에서는 외부 shell 자체도 스크롤 가능하게 둔다.

## 적용한 변경

### 행거 전체 레이아웃 방어선 추가

변경:

- `.hangar-overlay`를 `overflow: auto`로 변경
- `.hangar-inner`를 `96vh` 기준으로 확장
- grid row를 `auto minmax(0, 1fr) auto`로 고정
- 주요 패널에 `min-height: 0` 적용

의도:

- 전체 화면 높이가 줄어도 UI가 잘려 접근 불가능해지는 상황을 방지한다.

### 탭 콘텐츠 공통 스크롤 처리

변경:

- `.tab-content`, `.upgrade-shop`, `.pass-panel`에 내부 스크롤 규칙 적용
- 공통 스크롤바 스타일 적용
- 목록형 영역에 `overscroll-behavior: contain` 적용

의도:

- 특정 탭의 콘텐츠가 많아도 화면 밖으로 사라지지 않고 해당 탭 내부에서 스크롤된다.

### Mount Bays 스크롤 아일랜드 적용

변경:

- `.mount-bay-column`을 grid로 변경
- 제목 영역과 목록 영역을 분리
- `.slots-container.compact`에 `overflow-y: auto` 적용
- 슬롯 최소 높이를 줄여 4개 부위가 더 안정적으로 보이도록 조정

의도:

- Weapon, Armor, Engine, Wings를 모두 접근 가능하게 한다.
- 화면 높이가 작아져도 마지막 Aero Stabilizer가 숨지 않게 한다.

### Footer 압축 및 작은 화면 대응

변경:

- Footer 최소 높이 축소
- Mission Mode, Tactical Support, Launch 영역이 메인 콘텐츠를 과도하게 밀어내지 않도록 조정
- 낮은 화면 높이에서는 카드 높이와 미리보기 높이를 자동으로 압축
- 좁은 화면에서는 left telemetry panel을 숨기고 메인 콘텐츠 우선

의도:

- 핵심 작업 영역이 footer 때문에 잘리는 문제를 줄인다.

## 수정 파일

- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HangarOverlay.css`

## 검증

- `npm run build` 성공
- 출력 디렉터리: `dist/43`

## 후속 체크 포인트

- Loadout에서 Mount Bays 4개가 모두 접근 가능한지 확인한다.
- 화면 높이를 줄였을 때 Mount Bays 내부 스크롤이 동작하는지 확인한다.
- Upgrade, Merge, Salvage, Forge, Pass 탭에서 목록이 잘리지 않는지 확인한다.
- Footer가 메인 콘텐츠를 과하게 밀어내지 않는지 확인한다.
- 좁은 화면에서 left telemetry panel이 숨겨져도 핵심 기능 접근이 가능한지 확인한다.