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

fix(space): rail과 수정 액션 역할 분리

Browse Source
This commit is contained in:
corpi
2026-03-14 19:04:00 +09:00
parent 0b8c207fe2
commit 74e44fff69
5 changed files with 63 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/shared/i18n/messages/space.ts
View File

@@ -39,7 +39,6 @@ export const space = {
intentLabel: '이번 세션 목표',
microStepLabel: '지금 할 한 조각',
intentExpandAriaLabel: '목표 카드 펼치기',
intentCollapseAriaLabel: '목표 카드 접기',
refocusButton: '목표 수정',
intentEditLabel: '수정',
refocusTitle: '다시 방향 잡기',

125
src/widgets/space-focus-hud/ui/IntentCapsule.tsx
View File

@@ -64,25 +64,12 @@ export const IntentCapsule = ({
};
}, [isExpanded, showActions]);
const handleGoalClick = () => {
if (!canInteract) {
return;
}
if (!isExpanded) {
setPinnedExpanded(true);
return;
}
onOpenRefocus();
};
const handleToggleExpanded = () => {
const handleExpand = () => {
if (!showActions) {
return;
}
setPinnedExpanded((current) => !current);
setPinnedExpanded(true);
};
return (
@@ -130,76 +117,56 @@ export const IntentCapsule = ({
/>
<div className="relative">
<div className="flex items-center gap-3">
<button
type="button"
onClick={handleGoalClick}
disabled={!canInteract}
aria-label={copy.space.focusHud.refocusButton}
className="min-w-0 flex-1 text-left transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/14 disabled:cursor-default disabled:hover:opacity-100"
>
<span className="flex min-w-0 items-center gap-2">
<p
className={cn(
'min-w-0 truncate font-medium tracking-tight text-white/96 transition-[font-size,line-height] duration-200 ease-out',
isExpanded ? 'text-[18px] md:text-[20px]' : 'text-[15px] md:text-[16px]',
)}
>
{isExpanded ? (
<div className="flex items-center gap-3">
<div className="min-w-0 flex-1">
<p className="min-w-0 truncate text-[18px] font-medium tracking-tight text-white/96 md:text-[20px]">
{goal}
</p>
{isExpanded && canInteract ? (
<span className="inline-flex shrink-0 items-center gap-1 rounded-full border border-white/10 bg-black/10 px-2 py-1 text-[11px] font-medium tracking-[0.06em] text-white/54 transition-colors duration-200 group-hover:text-white/72">
<svg
aria-hidden
viewBox="0 0 16 16"
className="h-3 w-3"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
>
<path d="m10.9 2.6 2.5 2.5" />
<path d="M3.4 12.6 2.6 15l2.4-.8 7.7-7.7-1.6-1.6-7.7 7.7Z" />
</svg>
<span>{copy.space.focusHud.intentEditLabel}</span>
</span>
) : null}
</span>
</button>
</div>
{showActions ? (
<button
type="button"
onClick={handleToggleExpanded}
aria-label={
isExpanded
? copy.space.focusHud.intentCollapseAriaLabel
: copy.space.focusHud.intentExpandAriaLabel
}
{canInteract ? (
<button
type="button"
onClick={onOpenRefocus}
aria-label={copy.space.focusHud.refocusButton}
className="inline-flex shrink-0 items-center gap-1 rounded-full border border-white/10 bg-black/10 px-2 py-1 text-[11px] font-medium tracking-[0.06em] text-white/54 transition-colors duration-200 hover:text-white/72 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/14"
>
<svg
aria-hidden
viewBox="0 0 16 16"
className="h-3 w-3"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
>
<path d="m10.9 2.6 2.5 2.5" />
<path d="M3.4 12.6 2.6 15l2.4-.8 7.7-7.7-1.6-1.6-7.7 7.7Z" />
</svg>
<span>{copy.space.focusHud.intentEditLabel}</span>
</button>
) : null}
</div>
) : (
<button
type="button"
onClick={handleExpand}
disabled={!showActions}
aria-label={copy.space.focusHud.intentExpandAriaLabel}
className="flex min-w-0 w-full items-center text-left transition-opacity hover:opacity-92 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/14 disabled:cursor-default disabled:hover:opacity-100"
>
<p
className={cn(
'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/8 bg-black/10 text-white/56 transition-all duration-200 hover:border-white/14 hover:bg-black/16 hover:text-white/82 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12',
isExpanded && 'border-white/12 bg-black/14 text-white/82',
'min-w-0 flex-1 truncate font-medium tracking-tight text-white/96 transition-[font-size,line-height] duration-200 ease-out',
'text-[15px] md:text-[16px]',
)}
>
<svg
aria-hidden
viewBox="0 0 16 16"
className={cn(
'h-3.5 w-3.5 transition-transform duration-200 ease-out',
isExpanded ? 'rotate-180' : 'rotate-0',
)}
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.6"
>
<path d="M4.5 6.5 8 10l3.5-3.5" />
</svg>
</button>
) : null}
</div>
{goal}
</p>
</button>
)}
<div
className={cn(