refactor(space): 하단 다이내믹 독 형태의 잡념 수집기 UIUX 재설계 및 오류 수정

- 중앙 모놀리스 영역에서 벗어나 화면 최하단의 플로팅 바 형식으로 UI 전면 개편

- 마우스 호버 시 알약(Pill) 형태로 변하고, 활성화 시 거대한 입력창으로 몰핑되는 부드러운 트랜지션 적용

- backdrop-filter 팝인 버그 수정을 위한 transition 개별 요소 적용

- Cmd+K (Mac) 및 Ctrl+K (Windows) 단축키 인식 오류 수정 및 전역 이벤트 리스너 리팩토링

- 마우스 호버 시 뷰가 부르르 떨리는 현상(Jittering)을 가상 요소(before) 히트박스로 원천 차단
This commit is contained in:
2026-03-18 14:38:21 +09:00
parent 14d7165ffe
commit 9b013f1843
4 changed files with 84 additions and 91 deletions

View File

@@ -101,9 +101,14 @@ export const EndSessionConfirmModal = ({
>
{/* Abyssal Backdrop: Direct filter animation to prevent WebKit blur pop-in */}
<div
onClick={() => {
if (activeStage === 'decision' || activeStage === 'unfinished-confirm') {
onClose();
}
}}
className={cn(
'absolute inset-0 transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] transform-gpu',
open ? 'bg-black/80 backdrop-blur-[40px]' : 'bg-transparent backdrop-blur-none',
open ? 'bg-black/80 backdrop-blur-[40px] pointer-events-auto' : 'bg-transparent backdrop-blur-none pointer-events-none',
)}
>
<div className={cn("absolute inset-0 bg-[url('/noise.png')] mix-blend-overlay pointer-events-none transition-opacity duration-1000", open ? "opacity-20" : "opacity-0")} />