스타일 가이드 (모바일)

아이콘: phosphor_flutter 만

앱 전체 아이콘은 phosphor_flutter 의 PhosphorIcons. Material Icons / Lucide 등 다른 패키지 금지.

import 'package:phosphor_flutter/phosphor_flutter.dart';

PhosphorIcon(PhosphorIcons.x())                              // regular
PhosphorIcon(PhosphorIcons.x(PhosphorIconsStyle.fill))       // fill
Icon(PhosphorIcons.gear(), size: 20, color: colors.primary)  // 색·크기 지정

PhosphorIcons.xxx() 는 함수 호출이라 const Icon(...) 안 됨 → Icon(...).

Material → Phosphor 매핑 (자주)

Material	Phosphor
Icons.close	PhosphorIcons.x()
Icons.search	PhosphorIcons.magnifyingGlass()
Icons.add	PhosphorIcons.plus()
Icons.settings	PhosphorIcons.gear()
Icons.arrow_back	PhosphorIcons.arrowLeft()
Icons.chevron_right	PhosphorIcons.caretRight()
Icons.info	PhosphorIcons.info()
Icons.sparkle	PhosphorIcons.sparkle()

UI 위계

보조 인터랙션은 인라인

피드백·평가 등 보조 컨트롤은 별도 카드로 분리하지 않고 기존 주요 카드 내부에 컴팩트 배치.

예시:

• AI 분석 피드백 👍/👎 → AnalysisCard 헤더 우측 소형 버튼
• 좋아요/북마크 → 콘텐츠 옆 인라인 아이콘
• 메뉴 → 우측 상단 IconButton

네이티브 Alert 금지

AlertDialog (Material) / CupertinoAlertDialog 같은 네이티브 팝업 사용 금지. 대신 커스텀 Modal:

• showModalBottomSheet (시트 형태)
• showDialog 안에 직접 빌드한 카드 (반투명 백드롭 + 중앙 카드)

작은 컨트롤 터치 영역

썸브 버튼 등 32×26 px 내외 작은 컨트롤은 hitSlop 또는 padding 으로 터치 영역 충분히 확보.

키보드 UX 패턴 (Flutter)

1. 콘텐츠 위치 유지

Scaffold(resizeToAvoidBottomInset: false) — 키보드 떠도 body 압축 안 됨. 검색창 / 콘텐츠 원래 위치 유지.

기본값 true 는 body 압축 → 위로 밀려 올라감 → "왜 화면이 변하지?" 사용자 혼란.

2. 빈 영역 탭으로 키보드 dismiss

iOS 는 키보드 dismiss 버튼 없음. 빈 영역 탭 패턴:

Scaffold(
  resizeToAvoidBottomInset: false,
  body: GestureDetector(
    behavior: HitTestBehavior.translucent,  // 인터랙티브 위젯 탭은 그대로
    onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
    child: ...,
  ),
);

HitTestBehavior.translucent 가 핵심. 빈 영역만 unfocus, TextField / 버튼 탭은 정상 동작.

3. Floating nav bar 키보드 시 숨김

Floating glass pill nav bar 가 키보드 위에 뜨면 거슬림 → 키보드 시 숨김:

final keyboardOpen = MediaQuery.viewInsetsOf(context).bottom > 0;
if (!keyboardOpen)
  Positioned(bottom: 0, child: navBar),

ListView padding 의 floatingNavBarReservedSpace 도 키보드 시 0 반환 → 빈 공간 방지.

적용 위치: mobile/lib/app/router.dart (Shell). 모든 화면이 동일 Shell 사용 → 한 곳 수정.