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_CHEVRON,
HUD_OPTION_ROW, HUD_OPTION_ROW,
HUD_OPTION_ROW_PRIMARY, HUD_OPTION_ROW_PRIMARY,
HUD_REVEAL_BASE,
HUD_REVEAL_HIDDEN,
HUD_REVEAL_NEXT_BEAT,
HUD_TRAY_HAIRLINE, HUD_TRAY_HAIRLINE,
HUD_TRAY_LAYER, HUD_TRAY_LAYER,
HUD_TRAY_SHELL, HUD_TRAY_SHELL,
@@ -33,10 +36,8 @@ export const NextMicroStepPrompt = ({
return ( return (
<div <div
className={cn( className={cn(
'pointer-events-none w-full overflow-hidden transition-all duration-300 ease-out motion-reduce:duration-0', HUD_REVEAL_BASE,
open open ? HUD_REVEAL_NEXT_BEAT : HUD_REVEAL_HIDDEN,
? 'max-h-[18rem] translate-y-0 opacity-100'
: 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
)} )}
aria-hidden={!open} aria-hidden={!open}
> >
@@ -44,12 +45,12 @@ export const NextMicroStepPrompt = ({
<div aria-hidden className={HUD_TRAY_LAYER} /> <div aria-hidden className={HUD_TRAY_LAYER} />
<div aria-hidden className={HUD_TRAY_HAIRLINE} /> <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> <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} {copy.space.focusHud.microStepPromptTitle}
</h3> </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} {copy.space.focusHud.microStepPromptDescription}
</p> </p>
@@ -68,22 +69,22 @@ export const NextMicroStepPrompt = ({
</p> </p>
) : null} ) : null}
<div className="mt-4 space-y-2"> <div className="mt-4 space-y-2.5 border-t border-white/8 pt-4">
<button <button
type="button" type="button"
onClick={onKeepGoalOnly} onClick={onKeepGoalOnly}
disabled={isSubmitting} disabled={isSubmitting}
className={HUD_OPTION_ROW} className={HUD_OPTION_ROW}
> >
<div> <div className="max-w-[20.5rem]">
<p className="text-[13px] font-medium tracking-[0.01em] text-white/78"> <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
{copy.space.focusHud.microStepPromptKeep} {copy.space.focusHud.microStepPromptKeep}
</p> </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} {copy.space.focusHud.microStepPromptKeepHint}
</p> </p>
</div> </div>
<span aria-hidden className={HUD_OPTION_CHEVRON}>→</span> <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
</button> </button>
<button <button
type="button" type="button"
@@ -91,15 +92,15 @@ export const NextMicroStepPrompt = ({
disabled={isSubmitting} disabled={isSubmitting}
className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)} 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"> <p className="text-[13px] font-semibold tracking-[0.01em] text-white/90">
{copy.space.focusHud.microStepPromptDefine} {copy.space.focusHud.microStepPromptDefine}
</p> </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} {copy.space.focusHud.microStepPromptDefineHint}
</p> </p>
</div> </div>
<span aria-hidden className={HUD_OPTION_CHEVRON}>→</span> <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
</button> </button>
</div> </div>
</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 = 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)]'; '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 = 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'; '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';