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:
@@ -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 ? (
|
||||
|
||||
@@ -66,7 +66,7 @@ export const SpaceSkeletonWidget = () => {
|
||||
roomName={room.name}
|
||||
vibeLabel={room.vibeLabel}
|
||||
isImmersionMode={isImmersionMode}
|
||||
onExitImmersionMode={exitImmersionMode}
|
||||
onExitRequested={exitImmersionMode}
|
||||
/>
|
||||
|
||||
<main className="flex-1" />
|
||||
|
||||
Reference in New Issue
Block a user