refactor(fe): 내비게이션 행을 NavigationRow로 공통화

[seongbin9786]

배경

라벨과 오른쪽 chevron을 가진 행 버튼이 두 곳에서 따로 구현돼 있었다.

• components/settings/settings-navigation-item.tsx의 SettingsNavigationItem
• person-profile-view.tsx의 "작업" 섹션 인라인 행 3개

같은 모양인데 누름 피드백(설정은 hover:bg-muted/70, 인물 프로필은 active:opacity-70)과 마크업이 서로 어긋나 있었다.

변경 사항

• 도메인 중립 UI 컴포넌트 src/components/ui/navigation-row.tsx를 신설한다.
  • API: label, onClick, tone('default' | 'destructive'), withDivider, disabled
  • ListGroupItem 래퍼를 내부에서 렌더해 호출부는 ListGroup 안에 바로 넣는다.
  • 라우팅/도메인 타입을 알지 않고, 화면이 onClick으로 push/삭제를 계속 소유한다. (components는 stackflow를 import 하지 않는다)
• 설정 탭 2행과 인물 프로필 "작업" 섹션 3행(기록 작성, 프로필 수정, 인물 삭제)을 NavigationRow로 이관한다.
  • 인물 삭제 행은 tone="destructive"와 disabled={del.pending}로 기존 시각·비활성 동작을 그대로 유지한다.
• SettingsNavigationItem과 스토리 파일을 삭제하고 스토리 커버리지를 UI/NavigationRow로 옮긴다.

누름 피드백 통일

터치 앱 기준으로 눌림 피드백을 하나로 통일한다. NavigationRow는 hover:bg-muted/70(포인터 기기)와 active:opacity-70(누름)를 함께 적용한다. 그 결과 두 호출부의 기존 피드백이 조금씩 바뀐다.

• 설정 탭: 기존 hover 배경에 더해 눌렀을 때 opacity 피드백이 추가된다.
• 인물 프로필: 기존 press opacity에 더해 hover 배경이 추가된다.

Docs

Story	시나리오
Default	기본 tone, 구분선 있음
Destructive	destructive tone(라벨·chevron destructive 색)
WithoutDivider	withDivider={false}로 마지막 행 구분선 제거
Disabled	destructive tone에서 disabled로 opacity 60% 비활성
LongText	긴 라벨 줄바꿈 확인

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mongle	Ready	Preview, Comment	Jul 19, 2026 8:15am