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

fix(space-ui): /space 포커스 앵커 잘림과 스크롤 문제 수정

Browse Source
This commit is contained in:
corpi
2026-03-03 17:50:49 +09:00
parent ef9cc63cc5
commit be16153bef
8 changed files with 735 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
View File

@@ -36,13 +36,17 @@ export const SpaceTimerHudWidget = ({
)}
style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 0.35rem)' }}
>
<div className="mx-auto w-full max-w-xl pointer-events-auto">
<div className="relative mx-auto w-full max-w-xl pointer-events-auto">
<div
aria-hidden
className="pointer-events-none absolute left-1/2 top-1/2 z-0 h-28 w-[min(760px,96vw)] -translate-x-1/2 -translate-y-1/2 bg-[radial-gradient(ellipse_at_center,rgba(2,6,23,0.2)_0%,rgba(2,6,23,0.12)_45%,rgba(2,6,23,0)_78%)]"
/>
<section
className={cn(
'flex h-16 items-center justify-between gap-3 rounded-2xl px-3.5 transition-colors',
'relative z-10 flex h-16 items-center justify-between gap-3 rounded-2xl px-3.5 transition-colors',
isImmersionMode
? 'border border-white/6 bg-black/16 backdrop-blur-md'
: 'border border-white/10 bg-black/25 backdrop-blur-sm',
? 'border border-white/12 bg-black/22 backdrop-blur-md'
: 'border border-white/12 bg-black/24 backdrop-blur-md',
)}
>
<div className="min-w-0">
@@ -50,29 +54,29 @@ export const SpaceTimerHudWidget = ({
<span
className={cn(
'text-[11px] font-semibold uppercase tracking-[0.16em]',
isImmersionMode ? 'text-white/45' : 'text-white/62',
isImmersionMode ? 'text-white/90' : 'text-white/88',
)}
>
{isBreatheMode ? RECOVERY_30S_MODE_LABEL : 'Focus'}
</span>
<span
className={cn(
'text-2xl font-semibold tracking-tight',
isImmersionMode ? 'text-white/72' : 'text-white',
'text-[1.7rem] font-semibold tracking-tight sm:text-[1.78rem]',
isImmersionMode ? 'text-white/90' : 'text-white/92',
)}
>
25:00
</span>
<span className={cn('text-[11px]', isImmersionMode ? 'text-white/42' : 'text-white/62')}>
<span className={cn('text-[11px]', isImmersionMode ? 'text-white/65' : 'text-white/65')}>
{timerLabel}
</span>
</div>
{hintMessage ? (
<p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/54' : 'text-white/64')}>
<p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/50' : 'text-white/50')}>
{hintMessage}
</p>
) : (
<p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/44' : 'text-white/58')}>
<p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/65' : 'text-white/65')}>
목표: {goal}
</p>
)}
@@ -88,8 +92,8 @@ export const SpaceTimerHudWidget = ({
className={cn(
'inline-flex h-8 w-8 items-center justify-center rounded-full border text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
isImmersionMode
? 'border-white/10 bg-white/5 text-white/64 hover:bg-white/10'
: 'border-white/15 bg-white/8 text-white/82 hover:bg-white/14',
? 'border-white/14 bg-black/26 text-white/82 hover:bg-black/34'
: 'border-white/14 bg-black/26 text-white/84 hover:bg-black/34',
)}
>
<span aria-hidden>{action.icon}</span>
@@ -97,7 +101,10 @@ export const SpaceTimerHudWidget = ({
</button>
))}
</div>
<Restart30sAction onTrigger={triggerRestart} />
<Restart30sAction
onTrigger={triggerRestart}
className={cn(isImmersionMode ? 'text-white/72 hover:text-white/92' : 'text-white/74 hover:text-white/92')}
/>
</div>
</section>
</div>