Files
hushroom/.cli/tasks/0023-finish-hold-visual-alt-for-non-circle-button.md

2.4 KiB

.cli/current.md

TASK_META (수정 금지)

  • TASK_TITLE: 종료 버튼 길게 누르기 진행선 비주얼 어색함 개선(원형 대안 적용)
  • TASK_SLUG: finish-hold-visual-alt-for-non-circle-button

문제(관찰)

  • 종료 버튼은 원형이 아닌데, 원형 진행선(또는 원형에 가까운 테두리 애니메이션) 표현이 버튼 형태와 맞지 않아 어색하다.

작업 목표

  • 버튼 형태와 일치하는 진행 피드백으로 교체해, 길게 누르기(2초) 인터랙션을 자연스럽고 명확하게 보이게 한다.

합리적 가정

  • 이번 작업은 시각 피드백 방식 개선이 핵심이며, 2초 길게 누르면 종료 모달 오픈 동작 규칙은 유지한다.
  • 원형 진행선 대신 버튼 내부 수평 진행(fill) 또는 버튼 외곽 라운드 사각 진행선 중 하나를 채택한다.

적용 범위

  • 종료 버튼 UI/hold 시각 피드백: src/widgets/flight-hud/ui/FlightHudWidget.tsx
  • hold 진행 상태 계산/노출(필요 시): src/features/flight-session/model/useFlightSession.ts

작업 요구사항

  1. 원형 진행선 기반 표현을 제거하고, 버튼 형태와 일치하는 진행 피드백으로 교체한다.
  2. 진행 피드백은 0%~100%가 2초 동안 선형으로 증가하며, 사용자가 즉시 인지 가능해야 한다.
  3. 눌렀다 떼면 진행률은 즉시 0으로 리셋되어야 한다.
  4. 100% 도달 시 기존과 동일하게 종료 모달이 열린다.
  5. 모바일/데스크톱 모두에서 텍스트 가독성과 버튼 상태(기본/누름/완료 직전)가 명확해야 한다.

Non-scope

  • 종료 모달 내부 UI/카피 개편 금지
  • 타이머/일시정지/배경 이펙트 변경 금지
  • 항해 저장/라우팅 정책 변경 금지

적용 파일(예상)

  • src/widgets/flight-hud/ui/FlightHudWidget.tsx
  • src/features/flight-session/model/useFlightSession.ts (필요 시)

완료 조건(AC)

  • 종료 버튼에서 원형 진행선이 제거되고 버튼 형태와 일치한 진행 피드백이 적용된다
  • 2초 길게 누르는 동안 진행 상태가 자연스럽게 증가해 보인다
  • 2초 이전 해제 시 진행 상태가 즉시 초기화된다
  • 2초 완료 시 종료 모달이 기존 규칙대로 열린다
  • 기존 종료 플로우(모달 이후 동작)에 회귀가 없다

완료 후 출력(최소)

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