corpi/viberoom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(space): recovery 트레이 모션 polish

Browse Source
This commit is contained in:
corpi
2026-03-14 18:22:52 +09:00
parent cc3eafb2fa
commit caf53f0b68
8 changed files with 49 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/widgets/space-focus-hud/ui/GoalCompleteSheet.tsx
View File

@@ -10,6 +10,9 @@ import {
HUD_OPTION_ROW,
HUD_OPTION_ROW_BREAK,
HUD_OPTION_ROW_PRIMARY,
HUD_REVEAL_BASE,
HUD_REVEAL_COMPLETE,
HUD_REVEAL_HIDDEN,
HUD_TEXT_LINK,
HUD_TEXT_LINK_STRONG,
HUD_TRAY_HAIRLINE,
@@ -137,10 +140,8 @@ export const GoalCompleteSheet = ({
return (
<div
className={cn(
'pointer-events-none w-full overflow-hidden transition-all duration-300 ease-out motion-reduce:duration-0',
open
? 'max-h-[28rem] translate-y-0 opacity-100'
: 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
HUD_REVEAL_BASE,
open ? HUD_REVEAL_COMPLETE : HUD_REVEAL_HIDDEN,
)}
aria-hidden={!open}
>

9
src/widgets/space-focus-hud/ui/PauseRefocusPrompt.tsx
View File

@@ -9,6 +9,9 @@ import {
HUD_PAUSE_BODY,
HUD_PAUSE_EYEBROW,
HUD_PAUSE_TITLE,
HUD_REVEAL_BASE,
HUD_REVEAL_HIDDEN,
HUD_REVEAL_PAUSE,
HUD_TRAY_HAIRLINE,
HUD_TRAY_LAYER,
HUD_TRAY_SHELL,
@@ -30,10 +33,8 @@ export const PauseRefocusPrompt = ({
return (
<div
className={cn(
'pointer-events-none w-full overflow-hidden transition-all duration-200 ease-out motion-reduce:duration-0',
open
? 'max-h-[26rem] translate-y-0 opacity-100'
: 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
HUD_REVEAL_BASE,
open ? HUD_REVEAL_PAUSE : HUD_REVEAL_HIDDEN,
)}
aria-hidden={!open}
>

15
src/widgets/space-focus-hud/ui/ReturnPrompt.tsx
View File

@@ -7,6 +7,10 @@ import {
HUD_OPTION_ROW,
HUD_OPTION_ROW_BREAK,
HUD_OPTION_ROW_PRIMARY,
HUD_REVEAL_BASE,
HUD_REVEAL_HIDDEN,
HUD_REVEAL_RETURN_BREAK,
HUD_REVEAL_RETURN_FOCUS,
HUD_RETURN_BODY,
HUD_RETURN_TITLE,
HUD_TRAY_HAIRLINE_BREAK,
@@ -41,13 +45,12 @@ export const ReturnPrompt = ({
return (
<div
className={cn(
'pointer-events-none w-full overflow-hidden transition-all motion-reduce:duration-0',
HUD_REVEAL_BASE,
open
? cn(
'max-h-[24rem] translate-y-0 opacity-100',
isBreakReturn ? 'duration-300 ease-out' : 'duration-220 ease-out',
)
: 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
? isBreakReturn
? HUD_REVEAL_RETURN_BREAK
: HUD_REVEAL_RETURN_FOCUS
: HUD_REVEAL_HIDDEN,
)}
aria-hidden={!open}
>

18
src/widgets/space-focus-hud/ui/overlayStyles.ts
View File

@@ -14,6 +14,24 @@ export const HUD_TRAY_HAIRLINE = 'pointer-events-none absolute inset-x-0 top-0 h
export const HUD_TRAY_HAIRLINE_BREAK = 'pointer-events-none absolute inset-x-0 top-0 h-px bg-emerald-200/18';
export const HUD_REVEAL_BASE =
'pointer-events-none w-full origin-top-left overflow-hidden transition-[max-height,opacity,transform] motion-reduce:transition-none';
export const HUD_REVEAL_HIDDEN =
'pointer-events-none max-h-0 -translate-y-3 scale-[0.985] opacity-0';
export const HUD_REVEAL_PAUSE =
'max-h-[26rem] translate-y-0 scale-100 opacity-100 duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]';
export const HUD_REVEAL_RETURN_FOCUS =
'max-h-[24rem] translate-y-0 scale-100 opacity-100 duration-220 ease-[cubic-bezier(0.2,0.9,0.2,1)]';
export const HUD_REVEAL_RETURN_BREAK =
'max-h-[24rem] translate-y-0 scale-100 opacity-100 duration-320 ease-[cubic-bezier(0.16,1,0.3,1)]';
export const HUD_REVEAL_COMPLETE =
'max-h-[28rem] translate-y-0 scale-100 opacity-100 duration-260 ease-[cubic-bezier(0.18,1,0.32,1)]';
export const HUD_FIELD =
'h-11 w-full rounded-[18px] border border-white/10 bg-black/14 px-3.5 text-[0.98rem] tracking-tight text-white placeholder:text-white/30 focus:border-white/20 focus:bg-black/20 focus:outline-none focus:ring-2 focus:ring-white/8';