특붕쿤~ 모바일UI 개선해줘

[Jinbro98]

모바일에서도 사용하는데 모바일에서는 이미지 크기나 해상도 선택 moderation 선택같은게 안돼.
모바일에서도 잘 보이도록 UI 개선해줘~~~!

[lidge-jun]

모바일이 된다고...? 오키오키

[lidge-jun]

모바일 UI 갈아엎었어요~~ 0.09.45 / .46 / .47 / .48 네 단계로 분리해서 PLAN 짜고, Oracle(gpt-5-pro) 한번 거쳐서 스코프 잡고 나서 한 PR로 묶어서 갑니다.

핵심 변경 (이슈 #33이 짚은 부분)

• 우측 설정 드로어가 모바일에서 진짜로 열림 — 톱니/슬라이더 아이콘 토글이 우상단에 44px 원형 버튼으로 떠 있고, env(safe-area-inset-*)로 노치 회피
• 백드롭 탭으로 닫기 — pointer-events: none으로 죽어있던 백드롭을 살림 (HT-1)
• Quality / Size / Moderation / Format / Count 전부 44px 탭 타겟으로 그리드 재배치
• Custom W×H 입력칸 16px 폰트로 — iOS focus 시 zoom 안 뜸 (HT-7)

추가로 같이 해결한 것

• 모바일에서 사이드바를 56px 상단 앱바로 압축 → 캔버스가 화면 절반만 차지하던 문제 해소. "Compose" 버튼 누르면 75dvh 바텀시트로 펼쳐짐
• Gallery / CustomSizeConfirm / MetadataRestore / PromptDetail 4개 모달 모바일 룰 추가, SettingsWorkspace nav는 <select> 드롭다운으로
• Node 모드: 미니맵 숨기고 node-batch-bar 안전영역 패딩
• Card-news 모드: 데스크톱 권장 배너 (1회 dismiss) + 그리드 가로 오버플로우 차단
• viewport meta에 viewport-fit=cover + interactive-widget=resizes-content 추가 (iOS 키보드 대응)

검증

• npx tsc --noEmit ✅
• npm run build ✅ (300 modules, 905ms)
• 로컬 헤드리스 브라우저로 모바일 viewport 렌더링 확인 — 토글/드로어/탭 타겟/모더레이션 컨트롤 노출 OK
• 신규 dependency 0개 (lucide-react·vaul 같은 거 안 깔았음)

변경 파일

신규 5: useIsMobile.ts, useVisualViewportInset.ts, MobileSettingsToggle.tsx, MobileAppBar.tsx, MobileComposeSheet.tsx
수정 12: App.tsx, Sidebar.tsx, RightPanel.tsx, SizePicker.tsx, SettingsWorkspace.tsx, NodeCanvas.tsx, card-news/CardNewsWorkspace.tsx, index.html, index.css(@media 블록 확장), i18n/{ko,en}.json, store/useAppStore.ts

devlog: devlog/_plan/260428_0.09.45-mobile-ui-overhaul/ (PLAN.md + INVESTIGATION.md), 그 외 .46/.47/.48 폴더 각각.

아마 잘 되겠지만 실기기 테스트 부탁드려요

실제 iPhone Safari · Android Chrome에서 한 번씩 만져보고 — 특히

1. 우상단 톱니 토글이 잘 보이는지 (다이나믹 아일랜드 안 가리는지)
2. Quality/Size/Moderation 누르기 편한지
3. Custom 크기 입력할 때 줌 안 들어가는지
4. 키보드 올라왔을 때 입력칸 가려지는지 (이건 0.09.46의 visualViewport 훅으로 부분 보정 — 안되면 후속 PR)
5. 백드롭 탭으로 닫히는지

리뷰 도와주세요~ 🦈

[Jinbro98]

테스트해봤고 실제로 조금 개선됐음.
그러나 아직 설정창같은것들은 제대로 안되어있음. 모바일 화면에 맞게 안되어있고 PC기준이라서 한 화면에 전부 안들어옴.
그리고 우상단에 appbar.compose 이런 버튼이 생겼는데 이걸 눌러야 생성화면으로 넘어가지고 오른쪽아래 필터 버튼으로 설정창 진입하는건 잘됨.
근데 appbar.compose누르는게 조금 직관적이지가않음.
모바일 UI자체가 전체적으로 직관적이지가 않은듯