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

fix(space): recovery 트레이 공통 레이아웃 정리

Browse Source
This commit is contained in:
corpi
2026-03-14 18:30:23 +09:00
parent 425943cf89
commit b0fe2887c6
5 changed files with 132 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,6 +13,7 @@ import {
HUD_REVEAL_BASE,
HUD_REVEAL_COMPLETE,
HUD_REVEAL_HIDDEN,
HUD_TRAY_CONTENT,
HUD_TEXT_LINK,
HUD_TEXT_LINK_STRONG,
HUD_TRAY_HAIRLINE,
@@ -149,7 +150,8 @@ export const GoalCompleteSheet = ({
<div aria-hidden className={HUD_TRAY_LAYER} />
<div aria-hidden className={HUD_TRAY_HAIRLINE} />
<header className="relative flex items-start justify-between gap-2">
<div className={HUD_TRAY_CONTENT}>
<header className="flex items-start justify-between gap-2">
<div>
<p className="text-[11px] font-medium tracking-[0.08em] text-white/38">목표 완료</p>
<h3 className="mt-1 max-w-[22rem] text-[1rem] font-medium tracking-tight text-white/94">{title}</h3>
@@ -167,7 +169,7 @@ export const GoalCompleteSheet = ({
</header>
{view === 'choice' ? (
<div className="relative mt-3 space-y-3">
<div className="mt-3 space-y-3">
{trimmedCurrentGoal ? (
<div className="rounded-[18px] border border-white/8 bg-black/10 px-3.5 py-3">
<p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/36">
@@ -231,7 +233,7 @@ export const GoalCompleteSheet = ({
</footer>
</div>
) : (
<form className="relative mt-3 space-y-3" onSubmit={handleSubmit}>
<form className="mt-3 space-y-3" onSubmit={handleSubmit}>
{trimmedCurrentGoal ? (
<div className="rounded-[18px] border border-white/8 bg-black/10 px-3.5 py-3">
<p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/36">
@@ -275,6 +277,7 @@ export const GoalCompleteSheet = ({
</footer>
</form>
)}
</div>
</section>
</div>
);

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

@@ -9,6 +9,7 @@ import {
HUD_REVEAL_BASE,
HUD_REVEAL_HIDDEN,
HUD_REVEAL_NEXT_BEAT,
HUD_TRAY_CONTENT,
HUD_TRAY_HAIRLINE,
HUD_TRAY_LAYER,
HUD_TRAY_SHELL,
@@ -45,7 +46,7 @@ export const NextMicroStepPrompt = ({
<div aria-hidden className={HUD_TRAY_LAYER} />
<div aria-hidden className={HUD_TRAY_HAIRLINE} />
<div className="relative px-6 py-5">
<div className={HUD_TRAY_CONTENT}>
<p className="text-[11px] font-medium tracking-[0.08em] text-white/42">
{copy.space.focusHud.microStepPromptEyebrow}
</p>

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

@@ -12,6 +12,7 @@ import {
HUD_REVEAL_BASE,
HUD_REVEAL_HIDDEN,
HUD_REVEAL_PAUSE,
HUD_TRAY_CONTENT,
HUD_TRAY_HAIRLINE,
HUD_TRAY_LAYER,
HUD_TRAY_SHELL,
@@ -42,7 +43,7 @@ export const PauseRefocusPrompt = ({
<div aria-hidden className={HUD_TRAY_LAYER} />
<div aria-hidden className={HUD_TRAY_HAIRLINE} />
<div className="relative px-6 py-5 md:px-6 md:py-5">
<div className={HUD_TRAY_CONTENT}>
<p className={HUD_PAUSE_EYEBROW}>
{copy.space.focusHud.pausePromptEyebrow}
</p>

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

@@ -13,6 +13,7 @@ import {
HUD_REVEAL_RETURN_FOCUS,
HUD_RETURN_BODY,
HUD_RETURN_TITLE,
HUD_TRAY_CONTENT,
HUD_TRAY_HAIRLINE_BREAK,
HUD_TRAY_HAIRLINE,
HUD_TRAY_LAYER_BREAK,
@@ -58,7 +59,7 @@ export const ReturnPrompt = ({
<div aria-hidden className={isBreakReturn ? HUD_TRAY_LAYER_BREAK : HUD_TRAY_LAYER} />
<div aria-hidden className={isBreakReturn ? HUD_TRAY_HAIRLINE_BREAK : HUD_TRAY_HAIRLINE} />
<div className="relative px-6 py-5">
<div className={HUD_TRAY_CONTENT}>
<p className={cn(
'text-[11px] font-medium tracking-[0.12em]',
isBreakReturn ? 'text-emerald-100/54' : 'text-white/42',

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

@@ -14,6 +14,8 @@ 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_TRAY_CONTENT = 'relative px-6 py-5';
export const HUD_REVEAL_BASE =
'pointer-events-none w-full origin-top-left overflow-hidden transition-[max-height,opacity,transform] motion-reduce:transition-none';