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

fix(space): next beat 트레이 레이아웃 보정

Browse Source
This commit is contained in:
corpi
2026-03-14 18:24:32 +09:00
parent caf53f0b68
commit 9abe868db6
2 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/widgets/space-focus-hud/ui/NextMicroStepPrompt.tsx
View File

@@ -6,6 +6,9 @@ import {
HUD_OPTION_CHEVRON,
HUD_OPTION_ROW,
HUD_OPTION_ROW_PRIMARY,
HUD_REVEAL_BASE,
HUD_REVEAL_HIDDEN,
HUD_REVEAL_NEXT_BEAT,
HUD_TRAY_HAIRLINE,
HUD_TRAY_LAYER,
HUD_TRAY_SHELL,
@@ -33,10 +36,8 @@ export const NextMicroStepPrompt = ({
return (
<div
className={cn(
'pointer-events-none w-full overflow-hidden transition-all duration-300 ease-out motion-reduce:duration-0',
open
? 'max-h-[18rem] translate-y-0 opacity-100'
: 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
HUD_REVEAL_BASE,
open ? HUD_REVEAL_NEXT_BEAT : HUD_REVEAL_HIDDEN,
)}
aria-hidden={!open}
>
@@ -44,12 +45,12 @@ export const NextMicroStepPrompt = ({
<div aria-hidden className={HUD_TRAY_LAYER} />
<div aria-hidden className={HUD_TRAY_HAIRLINE} />
<div className="relative w-full">
<div className="relative px-6 py-5">
<p className="text-[11px] font-medium tracking-[0.08em] text-white/42">다음 한 조각</p>
<h3 className="mt-1 text-[1rem] font-medium tracking-tight text-white/94">
<h3 className="mt-1 max-w-[22rem] text-[1rem] font-medium tracking-tight text-white/94">
{copy.space.focusHud.microStepPromptTitle}
</h3>
<p className="mt-1 text-[13px] text-white/56">
<p className="mt-1 max-w-[21rem] text-[12px] leading-[1.55] text-white/56">
{copy.space.focusHud.microStepPromptDescription}
</p>
@@ -68,22 +69,22 @@ export const NextMicroStepPrompt = ({
</p>
) : null}
<div className="mt-4 space-y-2">
<div className="mt-4 space-y-2.5 border-t border-white/8 pt-4">
<button
type="button"
onClick={onKeepGoalOnly}
disabled={isSubmitting}
className={HUD_OPTION_ROW}
>
<div>
<div className="max-w-[20.5rem]">
<p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
{copy.space.focusHud.microStepPromptKeep}
</p>
<p className="mt-1 text-[12px] text-white/44">
<p className="mt-1 text-[12px] leading-[1.55] text-white/44">
{copy.space.focusHud.microStepPromptKeepHint}
</p>
</div>
<span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
</button>
<button
type="button"
@@ -91,15 +92,15 @@ export const NextMicroStepPrompt = ({
disabled={isSubmitting}
className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
>
<div>
<div className="max-w-[20.5rem]">
<p className="text-[13px] font-semibold tracking-[0.01em] text-white/90">
{copy.space.focusHud.microStepPromptDefine}
</p>
<p className="mt-1 text-[12px] text-white/48">
<p className="mt-1 text-[12px] leading-[1.55] text-white/48">
{copy.space.focusHud.microStepPromptDefineHint}
</p>
</div>
<span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
</button>
</div>
</div>

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

@@ -32,6 +32,9 @@ export const HUD_REVEAL_RETURN_BREAK =
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_REVEAL_NEXT_BEAT =
'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_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';