폴더블 펼친 화면 넓은 레이아웃 추가 #750

왜

펼친 iPhone Duo 에서 폰 크기 창으로 표시

• iPhone Duo 시뮬레이터(iOS 27.1)를 펼친 상태에서 앱이 가운데 세로 창으로 뜸
• 화면 양옆 검정 여백
• 앱 안 화면 렌더링은 정상
• 접은 상태 표시는 확인 전
• 원인: 앱이 세로 고정 · iPhone 전용으로 선언됨

웹 레이아웃도 좁은 화면 기준

• 앱은 웹뷰로 웹 화면을 띄움
• 웹 루트 컨테이너 최대 너비 480px (app/layout.tsx 의 max-w-120)
• 결과: 앱이 꽉 차도 넓은 화면에서는 가운데 480px 만 사용

펼친 화면 전체 표시 조건

• iOS 27 SDK 로 빌드한 앱만 펼친 화면 크기로 표시
• 이전 SDK 빌드는 호환 창으로 표시
• 조건: iOS 27 SDK 빌드에 UIScene 생명주기 전환 필요 (iOS 27 SDK 빌드 대비 UIScene 생명주기 전환 #749)
• 참조: Prepare your app for iPhone Duo (Apple Tech Talk)

무엇을

1단계 iOS 27 SDK 빌드 환경

• iOS 27 SDK 빌드 대비 UIScene 생명주기 전환 #749 UIScene 생명주기 전환
• Xcode 27 빌드 환경 지정
  • 대안: eas.json 에 Xcode 27 빌드 이미지 지정
  • 대안: Xcode 27 을 기본으로 쓰는 Expo SDK 로 업그레이드

2단계 앱 설정

• 화면 크기를 직접 읽는 앱 코드 0곳 (Dimensions.get · useWindowDimensions)
  • 결과: 웹뷰가 화면을 꽉 채우면 앱 코드 수정 없음
• 위험: 펼친 화면의 세로 고정 처리 동작이 자료마다 다름
  • Apple 포럼: 기존 설정은 따르지만 일부 접힘 상태 · 방향에서 기존 iPhone 과 다르게 동작
  • 참조: A Summary of the iPhone Duo Group Lab
• supportsTablet 을 true 로 바꾸는 경우
  • 위험: iPad 지원도 함께 열림

3단계 웹 레이아웃

1. 디자인팀에 펼친 화면 시안 요청
   • 예시: 토너먼트 1:1 비교 좌우 확대
   • 예시: 위시 그리드 열 수 증가
2. 넓은 화면 브레이크포인트 결정
3. 루트 컨테이너 480px 제한 해제
4. max-w-120 을 쓰는 하단 고정 · 겹침 요소 정리

• 화면 너비를 읽는 웹 JS 코드 0곳
  • 결과: CSS 반응형만으로 처리 가능
• 접기 · 펼치기 때 웹뷰는 새로고침 없이 크기만 바뀜
  • 상태 유지 확인 대상: 토너먼트 진행 중 · 상품 정보 입력 중

4단계 확인 · 배포

• Duo 시뮬레이터 확인: 펼침 · 접힘 · 반만 접기 · 회전
• 웹은 앱보다 먼저 배포 가능
  • 조건: 좁은 화면 레이아웃이 그대로 동작
  • 원인: 구버전 앱은 호환 창으로 계속 표시
• 넓은 화면 표시는 iOS 27 SDK 로 빌드한 새 앱 버전 배포 후 적용
  • 비용: 네이티브 변경이라 스토어 심사 필요

참조

• 확인 환경: Xcode 27.1 · iPhone Duo 시뮬레이터 iOS 27.1 · EAS development 시뮬레이터 빌드
• 선행 이슈: iOS 27 SDK 빌드 대비 UIScene 생명주기 전환 #749