Skip to content

[Design] 승인 CTA 및 승인 대기 강조 인터랙션 명세 #47

Description

@BcKmini

배경

"다음 · 요청문 승인", "검토하기", "내 승인 대기" 등 승인 관련 CTA의 문구·우선순위·강조 방식이 아직 확정되지 않았다.

승인 대기 상태를 알리기 위한 반짝임·Pulse 등의 모션도 업무 집중을 방해하지 않도록 Figma에서 먼저 검증해야 한다. 디자인 확정 전까지 구현하지 않는다.

Figma에서 결정할 항목

  • CTA 문구 체계
    • 다음 행동
    • 요청문 승인
    • 검토하기
  • Primary·Secondary·Blocked·Disabled 상태
  • 승인 대기 건수의 강조 수준
  • 반짝임·Pulse·Glow 등 애니메이션 사용 여부
  • 애니메이션 실행 조건, 반복 횟수, 중단 조건
  • 승인 완료 및 승인 0건일 때의 상태 변화
  • 색상 외 아이콘·텍스트 Label 병행
  • Hover·Focus·Keyboard 및 Reduce Motion 대응

완료 조건

  • PWF에 승인 CTA의 기본·Hover·Focus·Disabled 상태를 정의한다.
  • 승인 대기 카드의 기본·강조·완료·0건 상태를 정의한다.
  • 모션 사용 시 지속시간·반복·중단 조건을 명시한다.
  • 승인 0건일 때 애니메이션이 나오지 않도록 명세한다.
  • 접근성 대비와 키보드 Focus 상태를 확인한다.
  • 관련 Figma Node 링크를 이슈에 첨부한다.
  • 개발용 문구와 컴포넌트 Props 기준을 기록한다.
  • 구현 시 #44의 데이터 상태와 #46의 모션 토큰을 재사용한다.

참고

범위 제외

  • Figma 명세 확정 전 구현
  • 페이지 전체 전환 애니메이션
  • 모바일 반응형 조정

Metadata

Metadata

Assignees

Labels

area:dashboardHR 대시보드 화면design:needs-reviewFigma 화면 검토·확정 필요priority:P2일정에 따라 미룰 수 있는 작업status:blocked선행 작업·디자인 확정 대기type:feature사용자 기능 개발

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions