feat(space): 나가기 버튼 롱프레스 가속 진행 인터랙션 추가

맥락:

- /space에서 실수 이탈을 줄이면서도 명확한 탈출 동선을 유지하기 위해 나가기 액션을 1초 롱프레스 방식으로 변경

변경사항:

- features/exit-hold 추가(useHoldToConfirm, ExitHoldButton)

- 1초 롱프레스와 가속 진행 규칙(0.05초 -> 20%)을 feature 내부에 구현

- 몰입 OFF에서는 bar(좌->우 fill), 몰입 ON에서는 ring 진행 표시로 분기

- 1초 미만 해제/마우스 leave/touch cancel 시 진행률 즉시 리셋

- 완료 시 나가기(더미) 토스트 + 몰입 모드 OFF 동작 연결

- docs/90_current_state.md, docs/session_brief.md 상태 업데이트

검증:

- npx tsc --noEmit

세션-상태: 상단 나가기 액션은 롱프레스 완료 시에만 트리거됨

세션-다음: 롱프레스 인터랙션 인지성 보완용 힌트 카피 도입 여부 검토

세션-리스크: 터치 환경에서 롱프레스 UI 의도를 즉시 이해하지 못할 가능성 있음
This commit is contained in:
2026-02-27 14:29:46 +09:00
parent e2fb720a55
commit 73e7d5004c
7 changed files with 232 additions and 22 deletions

View File

@@ -1,17 +1,17 @@
import Link from 'next/link';
import { ExitHoldButton } from '@/features/exit-hold';
interface SpaceChromeWidgetProps {
roomName: string;
vibeLabel: string;
isImmersionMode: boolean;
onExitImmersionMode: () => void;
onExitRequested: () => void;
}
export const SpaceChromeWidget = ({
roomName,
vibeLabel,
isImmersionMode,
onExitImmersionMode,
onExitRequested,
}: SpaceChromeWidgetProps) => {
return (
<div className="px-4 pt-2 sm:px-6">
@@ -23,23 +23,10 @@ export const SpaceChromeWidget = ({
<p className="text-sm font-medium tracking-tight text-white/90">VibeRoom</p>
</div>
{isImmersionMode ? (
<button
type="button"
onClick={onExitImmersionMode}
className="inline-flex items-center gap-1 rounded-md bg-white/8 px-2 py-1 text-[11px] text-white/74 transition hover:bg-white/14 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80"
>
<span aria-hidden></span>
<span></span>
</button>
) : (
<Link
href="/app"
className="rounded-lg bg-white/8 px-2.5 py-1.5 text-xs text-white/82 transition hover:bg-white/14 hover:text-white"
>
</Link>
)}
<ExitHoldButton
variant={isImmersionMode ? 'ring' : 'bar'}
onConfirm={onExitRequested}
/>
</header>
{!isImmersionMode ? (

View File

@@ -66,7 +66,7 @@ export const SpaceSkeletonWidget = () => {
roomName={room.name}
vibeLabel={room.vibeLabel}
isImmersionMode={isImmersionMode}
onExitImmersionMode={exitImmersionMode}
onExitRequested={exitImmersionMode}
/>
<main className="flex-1" />