fix(space): intent 카드 dismissal 규칙 정리
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user