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

feat(space): recovery 카피와 CTA 위계 분리

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

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

@@ -87,6 +87,14 @@ export const GoalCompleteSheet = ({
const canConfirm = draft.trim().length > 0;
const isSubmitting = submissionMode !== null;
const trimmedCurrentGoal = currentGoal.trim();
const title =
view === 'next'
? copy.space.goalComplete.nextTitle
: copy.space.goalComplete.title;
const description =
view === 'next'
? copy.space.goalComplete.nextDescription
: copy.space.goalComplete.description;
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
@@ -143,8 +151,8 @@ export const GoalCompleteSheet = ({
<header className="relative 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 text-[1rem] font-medium tracking-tight text-white/94">{copy.space.goalComplete.title}</h3>
<p className="mt-1 text-[12px] text-white/56">{copy.space.goalComplete.description}</p>
<h3 className="mt-1 max-w-[22rem] text-[1rem] font-medium tracking-tight text-white/94">{title}</h3>
<p className="mt-1 max-w-[21rem] text-[12px] leading-[1.55] text-white/56">{description}</p>
</div>
<button
type="button"
@@ -171,18 +179,16 @@ export const GoalCompleteSheet = ({
<footer className="mt-4 space-y-2">
<button
type="button"
onClick={handleFinish}
onClick={() => setView('next')}
disabled={isSubmitting}
className={HUD_OPTION_ROW}
className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
>
<div>
<p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
{submissionMode === 'finish'
? copy.space.goalComplete.finishPending
: copy.space.goalComplete.finishButton}
<div className="max-w-[20.5rem]">
<p className="text-[13px] font-semibold tracking-[0.01em] text-white/90">
{copy.space.goalComplete.chooseNextButton}
</p>
<p className="mt-1 text-[12px] text-white/44">
{copy.space.goalComplete.finishDescription}
<p className="mt-1 text-[12px] leading-[1.55] text-white/48">
{copy.space.goalComplete.chooseNextDescription}
</p>
</div>
<span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>
@@ -193,11 +199,11 @@ export const GoalCompleteSheet = ({
disabled={isSubmitting}
className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_BREAK)}
>
<div>
<div className="max-w-[20.5rem]">
<p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
{copy.space.goalComplete.restButton}
</p>
<p className="mt-1 text-[12px] text-emerald-50/56">
<p className="mt-1 text-[12px] leading-[1.55] text-emerald-50/56">
{copy.space.goalComplete.restDescription}
</p>
</div>
@@ -205,16 +211,18 @@ export const GoalCompleteSheet = ({
</button>
<button
type="button"
onClick={() => setView('next')}
onClick={handleFinish}
disabled={isSubmitting}
className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
className={HUD_OPTION_ROW}
>
<div>
<p className="text-[13px] font-semibold tracking-[0.01em] text-white/90">
{copy.space.goalComplete.chooseNextButton}
<div className="max-w-[20.5rem]">
<p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
{submissionMode === 'finish'
? copy.space.goalComplete.finishPending
: copy.space.goalComplete.finishButton}
</p>
<p className="mt-1 text-[12px] text-white/48">
{copy.space.goalComplete.chooseNextDescription}
<p className="mt-1 text-[12px] leading-[1.55] text-white/44">
{copy.space.goalComplete.finishDescription}
</p>
</div>
<span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>

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

@@ -30,9 +30,9 @@ export const PauseRefocusPrompt = ({
return (
<div
className={cn(
'pointer-events-none w-full overflow-hidden transition-all duration-300 ease-out motion-reduce:duration-0',
'pointer-events-none w-full overflow-hidden transition-all duration-200 ease-out motion-reduce:duration-0',
open
? 'max-h-[24rem] translate-y-0 opacity-100'
? 'max-h-[26rem] translate-y-0 opacity-100'
: 'pointer-events-none max-h-0 -translate-y-2 opacity-0',
)}
aria-hidden={!open}
@@ -59,15 +59,15 @@ export const PauseRefocusPrompt = ({
disabled={isBusy}
className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
>
<div className="min-w-0">
<div className="min-w-0 max-w-[20.5rem]">
<p className="text-[14px] font-semibold leading-[1.35] tracking-[-0.01em] text-white/92">
{copy.space.focusHud.pausePromptRefocus}
</p>
<p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/50">
<p className="mt-1.5 text-[12px] leading-[1.55] text-white/50">
{copy.space.focusHud.pausePromptRefocusHint}
</p>
</div>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
</button>
<button
type="button"
@@ -75,15 +75,15 @@ export const PauseRefocusPrompt = ({
disabled={isBusy}
className={HUD_OPTION_ROW}
>
<div className="min-w-0">
<div className="min-w-0 max-w-[20.5rem]">
<p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
{copy.space.focusHud.pausePromptKeep}
</p>
<p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
<p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
{copy.space.focusHud.pausePromptKeepHint}
</p>
</div>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
</button>
</div>
</div>

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

@@ -41,9 +41,12 @@ export const ReturnPrompt = ({
return (
<div
className={cn(
'pointer-events-none w-full overflow-hidden transition-all duration-300 ease-out motion-reduce:duration-0',
'pointer-events-none w-full overflow-hidden transition-all motion-reduce:duration-0',
open
? 'max-h-[22rem] translate-y-0 opacity-100'
? 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',
)}
aria-hidden={!open}
@@ -70,7 +73,7 @@ export const ReturnPrompt = ({
: copy.space.focusHud.returnPromptFocusDescription}
</p>
<div className="mt-5 space-y-2.5 border-t pt-4 border-white/8">
<div className="mt-5 space-y-2.5 border-t border-white/8 pt-4">
{isBreakReturn ? (
<>
<button
@@ -79,15 +82,15 @@ export const ReturnPrompt = ({
disabled={isBusy}
className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_BREAK)}
>
<div className="min-w-0">
<div className="min-w-0 max-w-[20.5rem]">
<p className="text-[14px] font-semibold leading-[1.35] tracking-[-0.01em] text-white/92">
{copy.space.focusHud.returnPromptRest}
</p>
<p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-emerald-50/56">
<p className="mt-1.5 text-[12px] leading-[1.55] text-emerald-50/56">
{copy.space.focusHud.returnPromptRestHint}
</p>
</div>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1 text-emerald-100/34 group-hover:text-emerald-100/58')}>→</span>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px] text-emerald-100/34 group-hover:text-emerald-100/58')}>→</span>
</button>
<button
type="button"
@@ -95,15 +98,15 @@ export const ReturnPrompt = ({
disabled={isBusy}
className={HUD_OPTION_ROW}
>
<div className="min-w-0">
<div className="min-w-0 max-w-[20.5rem]">
<p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
{copy.space.focusHud.returnPromptNext}
</p>
<p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
<p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
{copy.space.focusHud.returnPromptNextHint}
</p>
</div>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
</button>
<button
type="button"
@@ -111,15 +114,15 @@ export const ReturnPrompt = ({
disabled={isBusy}
className={HUD_OPTION_ROW}
>
<div className="min-w-0">
<div className="min-w-0 max-w-[20.5rem]">
<p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
{copy.space.focusHud.returnPromptRefocus}
</p>
<p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
<p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
{copy.space.focusHud.returnPromptRefocusHint}
</p>
</div>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
</button>
</>
) : (
@@ -130,15 +133,15 @@ export const ReturnPrompt = ({
disabled={isBusy}
className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
>
<div className="min-w-0">
<div className="min-w-0 max-w-[20.5rem]">
<p className="text-[14px] font-semibold leading-[1.35] tracking-[-0.01em] text-white/92">
{copy.space.focusHud.returnPromptContinue}
</p>
<p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/48">
<p className="mt-1.5 text-[12px] leading-[1.55] text-white/48">
{copy.space.focusHud.returnPromptContinueHint}
</p>
</div>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
</button>
<button
type="button"
@@ -146,15 +149,15 @@ export const ReturnPrompt = ({
disabled={isBusy}
className={HUD_OPTION_ROW}
>
<div className="min-w-0">
<div className="min-w-0 max-w-[20.5rem]">
<p className="text-[14px] font-medium leading-[1.35] tracking-[-0.01em] text-white/82">
{copy.space.focusHud.returnPromptRefocus}
</p>
<p className="mt-1.5 max-w-[20rem] text-[12px] leading-[1.5] text-white/46">
<p className="mt-1.5 text-[12px] leading-[1.55] text-white/46">
{copy.space.focusHud.returnPromptRefocusHint}
</p>
</div>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-1')}>→</span>
<span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'mt-[2px]')}>→</span>
</button>
</>
)}