refactor(space): 하단 다이내믹 독 형태의 잡념 수집기 UIUX 재설계 및 오류 수정
- 중앙 모놀리스 영역에서 벗어나 화면 최하단의 플로팅 바 형식으로 UI 전면 개편 - 마우스 호버 시 알약(Pill) 형태로 변하고, 활성화 시 거대한 입력창으로 몰핑되는 부드러운 트랜지션 적용 - backdrop-filter 팝인 버그 수정을 위한 transition 개별 요소 적용 - Cmd+K (Mac) 및 Ctrl+K (Windows) 단축키 인식 오류 수정 및 전역 이벤트 리스너 리팩토링 - 마우스 호버 시 뷰가 부르르 떨리는 현상(Jittering)을 가상 요소(before) 히트박스로 원천 차단
This commit is contained in:
@@ -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")} />
|
||||
|
||||
Reference in New Issue
Block a user