fix(space): intent 카드 dismissal 규칙 정리

This commit is contained in:
2026-03-14 18:56:27 +09:00
parent 729afe0cbf
commit 0b8c207fe2
4 changed files with 47 additions and 1 deletions

View File

@@ -1,6 +1,6 @@
'use client';
import { useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';
@@ -28,6 +28,7 @@ export const IntentCapsule = ({
const [isPinnedExpanded, setPinnedExpanded] = useState(false);
const [isHovered, setHovered] = useState(false);
const [isFocusWithin, setFocusWithin] = useState(false);
const sectionRef = useRef<HTMLElement | null>(null);
const normalizedMicroStep = microStep?.trim() ? microStep.trim() : null;
const isExpanded = showActions && (isPinnedExpanded || isHovered || isFocusWithin);
@@ -35,6 +36,34 @@ export const IntentCapsule = ({
const microGlyphClass =
'inline-flex h-5 w-5 items-center justify-center rounded-full border border-white/18 text-white/62 transition-all duration-200 hover:border-white/32 hover:text-white focus-visible:border-white/32 focus-visible:text-white disabled:cursor-default disabled:opacity-30';
useEffect(() => {
if (!isExpanded || !showActions) {
return;
}
const handlePointerDown = (event: PointerEvent) => {
const target = event.target;
if (!(target instanceof Node)) {
return;
}
if (sectionRef.current?.contains(target)) {
return;
}
setPinnedExpanded(false);
setHovered(false);
setFocusWithin(false);
};
document.addEventListener('pointerdown', handlePointerDown);
return () => {
document.removeEventListener('pointerdown', handlePointerDown);
};
}, [isExpanded, showActions]);
const handleGoalClick = () => {
if (!canInteract) {
return;
@@ -59,6 +88,7 @@ export const IntentCapsule = ({
return (
<div className="pointer-events-none flex w-full">
<section
ref={sectionRef}
className={cn(
'pointer-events-auto relative overflow-hidden border text-white transition-[width,padding,background-color,border-color,box-shadow] duration-200 ease-out',
isExpanded