hushroom/.cli/tasks/0020-flight-mission-view-ux-polish.md

.cli/current.md

TASK_META (수정 금지)

• TASK_TITLE: Flight 화면 "이번 항해 목표" 뷰 UI/UX 개선
• TASK_SLUG: flight-mission-view-ux-polish

문제(관찰)

• Flight 화면에서 목표 문구가 단순 인용문 형태로 노출되어 정보 위계가 약하고, 가독성과 완성도가 떨어진다.

작업 목표

• Flight HUD 내 목표 영역을 카드형 정보 블록으로 개선해, 목표 인지성/가독성/시각적 완성도를 높인다.

합리적 가정

• 이번 작업은 목표 뷰의 UI/UX 개선에 한정하며, 타이머/일시정지/종료 같은 항해 동작 로직은 변경하지 않는다.
• 기존 비주얼 톤(우주 배경, 다크 기반)은 유지한다.

적용 범위

• 목표 표시 UI 컴포넌트: src/widgets/flight-hud/ui/FlightHudWidget.tsx
• 필요 시 공용 스타일 유틸/프리미티브: src/shared/ui/** (최소 변경)

작업 요구사항

1. 목표 문구 영역을 단순 인용문에서 카드형 블록으로 변경한다.
2. 카드 내부에 라벨(예: 이번 항해 목표)과 본문 텍스트를 분리해 정보 위계를 명확히 한다.
3. 긴 목표 문구가 레이아웃을 깨지 않도록 줄바꿈/최대 높이/말줄임 처리 중 하나를 적용해 모바일/데스크톱 모두 안정적으로 보이게 한다.
4. 텍스트 대비(contrast)와 간격(spacing)을 개선해 현재보다 읽기 쉬운 상태를 만든다.
5. 기존 상단 상태 배지, 중앙 타이머, 하단 버튼 동작은 그대로 유지한다.

Non-scope

• 타이머 계산/표시 포맷 로직 변경 금지
• 항해 제어 버튼(일시정지/종료) 기능 변경 금지
• 배경 이펙트/스타필드 로직 변경 금지
• 신규 라우트/상태 모델 추가 금지

적용 파일(예상)

• src/widgets/flight-hud/ui/FlightHudWidget.tsx
• src/shared/ui/** (필요한 경우에만)

완료 조건(AC)

• Flight 화면 목표 영역이 카드형 UI로 변경되어 라벨과 본문이 분리되어 보인다
• 긴 목표 문구 입력 시에도 레이아웃 깨짐 없이 반응형으로 표시된다
• 목표 텍스트 가독성(대비/행간/여백)이 기존 대비 개선된다
• 타이머/버튼 기능과 항해 흐름은 기존과 동일하게 동작한다

완료 후 출력(최소)

• 수정/생성/삭제된 파일 경로 목록
• AC 체크 결과(OK/NO)