# 30. 통합 반응형 UI 개선 (Integrated Responsive UI Improvement)

## 1. 배경 (Background)

현재 UI는 모바일 화면을 기준으로 개발되었으나, 웹(Web) 환경에서 테스트 시 화면이 너무 커지거나 레이아웃이 어색해지는 문제가 있습니다.
사용자는 "웹에서 너무 커지는 것보다 태블릿에서 사용해도 문제가 되지 않을 정도의 해상도"를 원하며, `BottomNavigationBar`를 포함한 전체적인 UI가 웹 환경에서 어색하지 않게 조정되기를 원합니다.

## 2. 목표 (Objective)

- **최대 너비 및 높이 제한 (Max Width & Height Constraint):**
  - 웹이나 태블릿 등 큰 화면에서 콘텐츠가 지나치게 늘어나는 것을 방지합니다.
  - **MaxWidth:** 600px (태블릿/모바일 적정 너비)
  - **MaxHeight:** 1000px (세로 비율 유지)
- **전역 중앙 정렬 (Global Center Alignment):**
  - 앱의 모든 화면(`MainWrapper`, `CharacterSelectionScreen` 등)을 중앙에 배치하고, 남는 여백은 어두운 배경(검은색)으로 처리하여 몰입감을 높입니다.
- **ResponsiveContainer 도입:**
  - 위 제약 조건을 쉽게 적용할 수 있는 재사용 가능한 위젯을 구현합니다.

## 3. 작업 상세 (Implementation Details)

### A. `lib/widgets/responsive_container.dart` 구현

- `maxWidth`와 `maxHeight`를 제한하고 중앙 정렬하는 래퍼 위젯.
- 기본값: `maxWidth = 600.0`, `maxHeight = 1000.0`.

### B. 화면별 적용

1.  **MainWrapper (`lib/screens/main_wrapper.dart`)**:
    - 전체 앱(`Scaffold` + `BottomNavigationBar`)을 `ResponsiveContainer`로 감싸서 하단 바도 함께 줄어들도록 처리.
    - 외부 배경은 `Colors.black`으로 설정.
2.  **CharacterSelectionScreen (`lib/screens/character_selection_screen.dart`)**:
    - 동일하게 외부 배경과 `ResponsiveContainer` 적용.
3.  **BattleScreen (`lib/screens/battle_screen.dart`)**:
    - `ResponsiveContainer` 내부에서 `Stack`과 플로팅 텍스트(`DamageEvent`, `EffectEvent`) 위치가 올바르게 계산되도록 `GlobalKey` 활용 및 좌표 보정 로직 적용.

## 4. 검증 (Verification)

- **Web 빌드 테스트:**
  - 브라우저 창을 가로/세로로 크게 늘렸을 때, 앱 화면이 600x1000 박스 내에 유지되는지 확인.
  - `BottomNavigationBar`가 전체 너비로 늘어나지 않고 앱 너비에 맞춰지는지 확인.
  - 플로팅 텍스트가 캐릭터 위치에 정확히 뜨는지 확인.