style(space): 리추얼 진입 UX와 포커스 전환 흐름을 고급화
맥락: - /space 진입 경험이 설정 패널처럼 보여 몰입형 라운지 톤이 약했습니다. - 목표 입력 후 시작 전환 동선을 더 빠르고 일관되게 만들 필요가 있었습니다. 변경사항: - 도크 아이콘을 이모지에서 단일 라인 SVG 세트로 통일해 시각 언어 일관성을 맞췄습니다. - Setup Drawer 밀도를 낮추고(타이포/테두리/칩 크기) 3-step 리추얼 흐름을 더 간결하게 정리했습니다. - 목표 입력 필드 자동 포커스를 추가해 진입 즉시 타이핑이 가능하도록 했습니다. - 시작 버튼을 form submit으로 연결해 Enter 입력과 버튼 클릭이 동일하게 동작하도록 변경했습니다. - SpaceSideSheet에 300ms 닫힘 전환(오버레이/시트 opacity+translate) 애니메이션을 적용했습니다. - Focus 진입 토스트 카피를 목표 중심 문구로 바꾸고 Setup 선택지를 최소 개수로 제한했습니다. - 배경에 미세 stage-pan/light-drift 키프레임을 추가해 정적인 평면감을 줄였습니다. 검증: - npx tsc --noEmit - npm run build 세션-상태: /space에서 목표 입력 후 10초 내 Focus 전환 가능한 리추얼 흐름이 정리되었습니다. 세션-다음: 실제 브라우저에서 애니메이션 강도와 드로어 밀도 체감 QA를 진행합니다. 세션-리스크: 저사양 환경에서 배경 미세 모션이 과하게 느껴질 수 있어 추후 reduce-motion 강화를 검토할 수 있습니다.
This commit is contained in:
@@ -49,3 +49,23 @@ body {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes space-stage-pan {
|
||||
0% {
|
||||
transform: scale(1.02) translate3d(-0.4%, -0.25%, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.07) translate3d(0.55%, 0.35%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes space-light-drift {
|
||||
0% {
|
||||
transform: translate3d(-1.2%, -0.8%, 0);
|
||||
opacity: 0.86;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(1.2%, 0.9%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import type { GoalChip } from '@/entities/session';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface SessionGoalFieldProps {
|
||||
autoFocus?: boolean;
|
||||
goalInput: string;
|
||||
selectedGoalId: string | null;
|
||||
goalChips: GoalChip[];
|
||||
@@ -13,40 +14,49 @@ interface SessionGoalFieldProps {
|
||||
}
|
||||
|
||||
export const SessionGoalField = ({
|
||||
autoFocus = false,
|
||||
goalInput,
|
||||
selectedGoalId,
|
||||
goalChips,
|
||||
onGoalChange,
|
||||
onGoalChipSelect,
|
||||
}: SessionGoalFieldProps) => {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const visibleChips = useMemo(() => {
|
||||
if (expanded) {
|
||||
return goalChips;
|
||||
useEffect(() => {
|
||||
if (!autoFocus) {
|
||||
return;
|
||||
}
|
||||
|
||||
return goalChips.slice(0, 4);
|
||||
}, [expanded, goalChips]);
|
||||
const raf = window.requestAnimationFrame(() => {
|
||||
inputRef.current?.focus();
|
||||
});
|
||||
|
||||
return () => {
|
||||
window.cancelAnimationFrame(raf);
|
||||
};
|
||||
}, [autoFocus]);
|
||||
|
||||
return (
|
||||
<div className="space-y-2.5">
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="space-goal-input" className="text-xs font-medium text-white/86">
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="space-goal-input" className="text-[12px] font-medium text-white/88">
|
||||
이번 25분, 딱 한 가지 <span className="text-sky-100">(필수)</span>
|
||||
</label>
|
||||
<input
|
||||
ref={inputRef}
|
||||
id="space-goal-input"
|
||||
autoFocus={autoFocus}
|
||||
value={goalInput}
|
||||
onChange={(event) => onGoalChange(event.target.value)}
|
||||
placeholder="예: 계약서 1페이지 정리"
|
||||
className="h-11 w-full rounded-xl border border-white/18 bg-slate-950/48 px-3 text-sm text-white placeholder:text-white/42 focus:border-sky-200/58 focus:outline-none"
|
||||
className="h-10 w-full rounded-xl border border-white/14 bg-slate-950/42 px-3 text-sm text-white placeholder:text-white/42 focus:border-sky-200/46 focus:outline-none"
|
||||
/>
|
||||
<p className="text-[11px] text-white/54">크게 말고, 바로 다음 한 조각.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{visibleChips.map((chip) => {
|
||||
{goalChips.slice(0, 4).map((chip) => {
|
||||
const selected = chip.id === selectedGoalId;
|
||||
|
||||
return (
|
||||
@@ -55,26 +65,16 @@ export const SessionGoalField = ({
|
||||
type="button"
|
||||
onClick={() => onGoalChipSelect(chip)}
|
||||
className={cn(
|
||||
'rounded-full border px-2.5 py-1 text-[11px] transition-colors',
|
||||
'rounded-full border px-2.5 py-0.5 text-[10px] transition-colors',
|
||||
selected
|
||||
? 'border-sky-200/42 bg-sky-200/16 text-white/92'
|
||||
: 'border-white/16 bg-white/6 text-white/72 hover:bg-white/11',
|
||||
? 'border-sky-200/34 bg-sky-200/12 text-white/90'
|
||||
: 'border-white/12 bg-white/[0.035] text-white/66 hover:bg-white/9',
|
||||
)}
|
||||
>
|
||||
{chip.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
{goalChips.length > 4 ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpanded((current) => !current)}
|
||||
className="rounded-full border border-white/14 bg-white/4 px-2.5 py-1 text-[11px] text-white/62 transition-colors hover:bg-white/10 hover:text-white/82"
|
||||
>
|
||||
{expanded ? '접기' : '+ 더보기'}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import type { FormEvent } from 'react';
|
||||
import type { RoomTheme } from '@/entities/room';
|
||||
import type { GoalChip, SoundPreset } from '@/entities/session';
|
||||
import { SpaceSelectCarousel } from '@/features/space-select';
|
||||
@@ -43,6 +46,16 @@ export const SpaceSetupDrawerWidget = ({
|
||||
onSoundSelect,
|
||||
onStart,
|
||||
}: SpaceSetupDrawerWidgetProps) => {
|
||||
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!canStart) {
|
||||
return;
|
||||
}
|
||||
|
||||
onStart();
|
||||
};
|
||||
|
||||
return (
|
||||
<SpaceSideSheet
|
||||
open={open}
|
||||
@@ -52,17 +65,17 @@ export const SpaceSetupDrawerWidget = ({
|
||||
dismissible={dismissible}
|
||||
widthClassName="w-[min(360px,94vw)]"
|
||||
footer={(
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1.5">
|
||||
{!canStart ? (
|
||||
<p className="text-[11px] text-white/58">목표를 적으면 시작할 수 있어요.</p>
|
||||
<p className="text-[10px] text-white/56">목표를 적으면 시작할 수 있어요.</p>
|
||||
) : null}
|
||||
<Button
|
||||
type="button"
|
||||
type="submit"
|
||||
form="space-setup-ritual-form"
|
||||
size="full"
|
||||
onClick={onStart}
|
||||
disabled={!canStart}
|
||||
className={cn(
|
||||
'h-11 rounded-xl !bg-sky-300/85 !text-slate-900 shadow-[0_8px_20px_rgba(125,211,252,0.24)] hover:!bg-sky-300 disabled:!bg-white/12 disabled:!text-white/42',
|
||||
'h-10 rounded-xl !bg-sky-300/84 !text-slate-900 shadow-[0_6px_14px_rgba(125,211,252,0.2)] hover:!bg-sky-300 disabled:!bg-white/10 disabled:!text-white/42',
|
||||
)}
|
||||
>
|
||||
시작하기
|
||||
@@ -70,11 +83,9 @@ export const SpaceSetupDrawerWidget = ({
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className="space-y-5">
|
||||
<section className="space-y-2.5">
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-sm font-medium text-white/84">공간</p>
|
||||
</div>
|
||||
<form id="space-setup-ritual-form" className="space-y-4" onSubmit={handleSubmit}>
|
||||
<section className="space-y-2">
|
||||
<p className="text-[12px] font-medium text-white/84">공간</p>
|
||||
<SpaceSelectCarousel
|
||||
rooms={rooms}
|
||||
selectedRoomId={selectedRoomId}
|
||||
@@ -82,11 +93,10 @@ export const SpaceSetupDrawerWidget = ({
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="space-y-2.5">
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-sm font-medium text-white/84">이번 세션 한 줄(필수)</p>
|
||||
</div>
|
||||
<section className="space-y-2 border-t border-white/8 pt-3">
|
||||
<p className="text-[12px] font-medium text-white/84">이번 세션 한 줄(필수)</p>
|
||||
<SessionGoalField
|
||||
autoFocus={open}
|
||||
goalInput={goalInput}
|
||||
selectedGoalId={selectedGoalId}
|
||||
goalChips={goalChips}
|
||||
@@ -95,13 +105,11 @@ export const SpaceSetupDrawerWidget = ({
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="space-y-2.5">
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-sm font-medium text-white/84">분위기(선택)</p>
|
||||
</div>
|
||||
<section className="space-y-2 border-t border-white/8 pt-3">
|
||||
<p className="text-[12px] font-medium text-white/84">분위기(선택)</p>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{soundPresets.map((preset) => {
|
||||
{soundPresets.slice(0, 6).map((preset) => {
|
||||
const selected = preset.id === selectedSoundPresetId;
|
||||
|
||||
return (
|
||||
@@ -110,10 +118,10 @@ export const SpaceSetupDrawerWidget = ({
|
||||
type="button"
|
||||
onClick={() => onSoundSelect(preset.id)}
|
||||
className={cn(
|
||||
'rounded-full border px-2.5 py-1 text-[11px] transition-colors',
|
||||
'rounded-full border px-2.5 py-0.5 text-[10px] transition-colors',
|
||||
selected
|
||||
? 'border-sky-200/36 bg-sky-200/14 text-white/92'
|
||||
: 'border-white/16 bg-white/6 text-white/72 hover:bg-white/11',
|
||||
? 'border-sky-200/30 bg-sky-200/12 text-white/90'
|
||||
: 'border-white/12 bg-white/[0.03] text-white/66 hover:bg-white/8',
|
||||
)}
|
||||
>
|
||||
{preset.label}
|
||||
@@ -122,7 +130,7 @@ export const SpaceSetupDrawerWidget = ({
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
</SpaceSideSheet>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, type ReactNode } from 'react';
|
||||
import { useEffect, useRef, useState, type ReactNode } from 'react';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
const SHEET_TRANSITION_MS = 300;
|
||||
|
||||
interface SpaceSideSheetProps {
|
||||
open: boolean;
|
||||
title: string;
|
||||
@@ -24,6 +26,41 @@ export const SpaceSideSheet = ({
|
||||
widthClassName,
|
||||
dismissible = true,
|
||||
}: SpaceSideSheetProps) => {
|
||||
const closeTimerRef = useRef<number | null>(null);
|
||||
const [shouldRender, setShouldRender] = useState(open);
|
||||
const [visible, setVisible] = useState(open);
|
||||
|
||||
useEffect(() => {
|
||||
if (closeTimerRef.current) {
|
||||
window.clearTimeout(closeTimerRef.current);
|
||||
closeTimerRef.current = null;
|
||||
}
|
||||
|
||||
if (open) {
|
||||
setShouldRender(true);
|
||||
const raf = window.requestAnimationFrame(() => {
|
||||
setVisible(true);
|
||||
});
|
||||
|
||||
return () => {
|
||||
window.cancelAnimationFrame(raf);
|
||||
};
|
||||
}
|
||||
|
||||
setVisible(false);
|
||||
closeTimerRef.current = window.setTimeout(() => {
|
||||
setShouldRender(false);
|
||||
closeTimerRef.current = null;
|
||||
}, SHEET_TRANSITION_MS);
|
||||
|
||||
return () => {
|
||||
if (closeTimerRef.current) {
|
||||
window.clearTimeout(closeTimerRef.current);
|
||||
closeTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
return;
|
||||
@@ -42,7 +79,7 @@ export const SpaceSideSheet = ({
|
||||
};
|
||||
}, [open, onClose]);
|
||||
|
||||
if (!open) {
|
||||
if (!shouldRender) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -53,39 +90,54 @@ export const SpaceSideSheet = ({
|
||||
type="button"
|
||||
aria-label="시트 닫기"
|
||||
onClick={onClose}
|
||||
className="fixed inset-0 z-40 bg-slate-950/18 backdrop-blur-[1px]"
|
||||
className={cn(
|
||||
'fixed inset-0 z-40 bg-slate-950/14 backdrop-blur-[1px] transition-opacity duration-300',
|
||||
visible ? 'opacity-100' : 'pointer-events-none opacity-0',
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div aria-hidden className="fixed inset-0 z-40 bg-slate-950/12 backdrop-blur-[1px]" />
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'fixed inset-0 z-40 bg-slate-950/8 backdrop-blur-[1px] transition-opacity duration-300',
|
||||
visible ? 'opacity-100' : 'opacity-0',
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<aside
|
||||
className={cn(
|
||||
'fixed inset-y-0 right-0 z-50 p-2 sm:p-3',
|
||||
'fixed inset-y-0 right-0 z-50 p-2 transition-opacity duration-300 sm:p-3',
|
||||
visible ? 'opacity-100' : 'pointer-events-none opacity-0',
|
||||
widthClassName ?? 'w-[min(360px,92vw)]',
|
||||
)}
|
||||
>
|
||||
<div className="flex h-full flex-col overflow-hidden rounded-3xl border border-white/20 bg-slate-950/58 text-white shadow-[0_20px_60px_rgba(2,6,23,0.42)] backdrop-blur-2xl">
|
||||
<header className="flex items-start justify-between gap-3 border-b border-white/10 px-4 py-3 sm:px-5">
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-full flex-col overflow-hidden rounded-3xl border border-white/14 bg-[linear-gradient(180deg,rgba(15,23,42,0.74)_0%,rgba(10,15,30,0.62)_100%)] text-white shadow-[0_18px_52px_rgba(2,6,23,0.34)] backdrop-blur-2xl transition-transform duration-300',
|
||||
visible ? 'translate-x-0' : 'translate-x-8',
|
||||
)}
|
||||
>
|
||||
<header className="flex items-start justify-between gap-3 border-b border-white/7 px-4 py-3 sm:px-5">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-white">{title}</h2>
|
||||
{subtitle ? <p className="mt-1 text-xs text-white/58">{subtitle}</p> : null}
|
||||
<h2 className="text-[1.05rem] font-semibold tracking-tight text-white">{title}</h2>
|
||||
{subtitle ? <p className="mt-1 text-[11px] text-white/56">{subtitle}</p> : null}
|
||||
</div>
|
||||
{dismissible ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label="닫기"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/18 bg-white/8 text-sm text-white/80 transition-colors hover:bg-white/14 hover:text-white"
|
||||
className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/14 bg-white/6 text-[12px] text-white/72 transition-colors hover:bg-white/12 hover:text-white"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
) : null}
|
||||
</header>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-5">{children}</div>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-3.5 sm:px-5">{children}</div>
|
||||
|
||||
{footer ? <footer className="border-t border-white/10 bg-white/4 px-4 py-3 sm:px-5">{footer}</footer> : null}
|
||||
{footer ? <footer className="border-t border-white/8 bg-white/[0.02] px-4 py-3 sm:px-5">{footer}</footer> : null}
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
|
||||
@@ -34,14 +34,13 @@ interface SpaceToolsDockWidgetProps {
|
||||
|
||||
const TOOL_ITEMS: Array<{
|
||||
id: SpaceToolPanelId;
|
||||
icon: string;
|
||||
label: string;
|
||||
}> = [
|
||||
{ id: 'sound', icon: '🎧', label: 'Sound' },
|
||||
{ id: 'notes', icon: '📝', label: 'Notes' },
|
||||
{ id: 'inbox', icon: '📨', label: 'Inbox' },
|
||||
{ id: 'stats', icon: '📊', label: 'Stats' },
|
||||
{ id: 'settings', icon: '⚙', label: 'Settings' },
|
||||
{ id: 'sound', label: 'Sound' },
|
||||
{ id: 'notes', label: 'Notes' },
|
||||
{ id: 'inbox', label: 'Inbox' },
|
||||
{ id: 'stats', label: 'Stats' },
|
||||
{ id: 'settings', label: 'Settings' },
|
||||
];
|
||||
|
||||
const PANEL_TITLE_MAP: Record<SpaceToolPanelId, string> = {
|
||||
@@ -52,6 +51,59 @@ const PANEL_TITLE_MAP: Record<SpaceToolPanelId, string> = {
|
||||
settings: '설정',
|
||||
};
|
||||
|
||||
const DockIcon = ({ id }: { id: SpaceToolPanelId }) => {
|
||||
const commonProps = {
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
className: 'h-4 w-4',
|
||||
stroke: 'currentColor',
|
||||
strokeWidth: 1.8,
|
||||
strokeLinecap: 'round' as const,
|
||||
strokeLinejoin: 'round' as const,
|
||||
};
|
||||
|
||||
switch (id) {
|
||||
case 'sound':
|
||||
return (
|
||||
<svg {...commonProps}>
|
||||
<path d="M4 13V11a2 2 0 0 1 2-2h2l3-3h2v12h-2l-3-3H6a2 2 0 0 1-2-2Z" />
|
||||
<path d="M16 9a4 4 0 0 1 0 6" />
|
||||
<path d="M18 7a7 7 0 0 1 0 10" />
|
||||
</svg>
|
||||
);
|
||||
case 'notes':
|
||||
return (
|
||||
<svg {...commonProps}>
|
||||
<rect x="5" y="4" width="14" height="16" rx="2.5" />
|
||||
<path d="M9 9h6M9 13h6M9 17h4" />
|
||||
</svg>
|
||||
);
|
||||
case 'inbox':
|
||||
return (
|
||||
<svg {...commonProps}>
|
||||
<path d="M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-9Z" />
|
||||
<path d="M4 12h4l1.5 2h5L16 12h4" />
|
||||
</svg>
|
||||
);
|
||||
case 'stats':
|
||||
return (
|
||||
<svg {...commonProps}>
|
||||
<path d="M5 18V10M12 18V7M19 18v-5" />
|
||||
<path d="M4 18h16" />
|
||||
</svg>
|
||||
);
|
||||
case 'settings':
|
||||
return (
|
||||
<svg {...commonProps}>
|
||||
<path d="M12 8.5A3.5 3.5 0 1 1 8.5 12 3.5 3.5 0 0 1 12 8.5Z" />
|
||||
<path d="M12 3.5v2M12 18.5v2M20.5 12h-2M5.5 12h-2M18 6l-1.4 1.4M7.4 16.6 6 18M18 18l-1.4-1.4M7.4 7.4 6 6" />
|
||||
</svg>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const SpaceToolsDockWidget = ({
|
||||
isFocusMode,
|
||||
thoughts,
|
||||
@@ -78,10 +130,10 @@ export const SpaceToolsDockWidget = ({
|
||||
<div className="fixed right-3.5 top-1/2 z-30 -translate-y-1/2">
|
||||
<div
|
||||
className={cn(
|
||||
'flex w-11 flex-col items-center gap-1.5 rounded-[18px] border py-1.5 backdrop-blur-lg transition-opacity',
|
||||
'flex w-10 flex-col items-center gap-1.5 rounded-[18px] border py-1.5 backdrop-blur-lg transition-opacity',
|
||||
isFocusMode && activePanel === null
|
||||
? 'border-white/12 bg-slate-950/22 opacity-40 hover:opacity-92'
|
||||
: 'border-white/16 bg-slate-950/34 opacity-92',
|
||||
? 'border-white/12 bg-slate-950/18 opacity-32 hover:opacity-86'
|
||||
: 'border-white/14 bg-slate-950/28 opacity-86',
|
||||
)}
|
||||
>
|
||||
{TOOL_ITEMS.map((item) => {
|
||||
@@ -95,13 +147,13 @@ export const SpaceToolsDockWidget = ({
|
||||
aria-label={item.label}
|
||||
onClick={() => setActivePanel(item.id)}
|
||||
className={cn(
|
||||
'relative inline-flex h-8 w-8 items-center justify-center rounded-[10px] border text-[15px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
|
||||
'relative inline-flex h-8 w-8 items-center justify-center rounded-[10px] border text-white/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70',
|
||||
selected
|
||||
? 'border-sky-200/58 bg-sky-200/18 shadow-[0_0_0_1px_rgba(186,230,253,0.28)]'
|
||||
: 'border-white/14 bg-white/7 hover:bg-white/13',
|
||||
? 'border-sky-200/44 bg-sky-200/14 text-white shadow-[0_0_0_1px_rgba(186,230,253,0.2)]'
|
||||
: 'border-white/12 bg-white/6 hover:bg-white/10',
|
||||
)}
|
||||
>
|
||||
<span aria-hidden>{item.icon}</span>
|
||||
<DockIcon id={item.id} />
|
||||
{item.id === 'inbox' && thoughtCount > 0 ? (
|
||||
<span className="absolute -right-1 -top-1 inline-flex min-w-[0.95rem] items-center justify-center rounded-full bg-sky-200/26 px-1 py-0.5 text-[8px] font-semibold text-sky-50">
|
||||
{thoughtCount > 99 ? '99+' : `${thoughtCount}`}
|
||||
|
||||
@@ -69,6 +69,10 @@ export const SpaceWorkspaceWidget = () => {
|
||||
const selectedRoom = useMemo(() => {
|
||||
return getRoomById(selectedRoomId) ?? ROOM_THEMES[0];
|
||||
}, [selectedRoomId]);
|
||||
const setupRooms = useMemo(() => {
|
||||
const restRooms = ROOM_THEMES.filter((room) => room.id !== selectedRoom.id);
|
||||
return [selectedRoom, ...restRooms].slice(0, 4);
|
||||
}, [selectedRoom]);
|
||||
|
||||
const canStart = goalInput.trim().length > 0;
|
||||
const isFocusMode = workspaceMode === 'focus';
|
||||
@@ -95,8 +99,7 @@ export const SpaceWorkspaceWidget = () => {
|
||||
setSetupDrawerOpen(false);
|
||||
|
||||
pushToast({
|
||||
title: '집중을 시작했어요 (더미)',
|
||||
description: `${selectedRoom.name} · ${goalInput.trim()}`,
|
||||
title: `목표: ${goalInput.trim()} 시작해요.`,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -106,18 +109,26 @@ export const SpaceWorkspaceWidget = () => {
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden text-white">
|
||||
<div aria-hidden className="absolute inset-0" style={getRoomBackgroundStyle(selectedRoom)} />
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(180deg, rgba(15,23,42,0.16) 0%, rgba(15,23,42,0.32) 100%)',
|
||||
}}
|
||||
className="absolute inset-0 bg-cover bg-center will-change-transform animate-[space-stage-pan_42s_ease-in-out_infinite_alternate] motion-reduce:animate-none"
|
||||
style={getRoomBackgroundStyle(selectedRoom)}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 opacity-[0.08]"
|
||||
className="absolute inset-0 opacity-[0.2] bg-[radial-gradient(68%_54%_at_18%_12%,rgba(191,219,254,0.58)_0%,rgba(191,219,254,0)_72%)] animate-[space-light-drift_24s_ease-in-out_infinite_alternate] motion-reduce:animate-none"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 opacity-[0.14] bg-[radial-gradient(62%_48%_at_82%_14%,rgba(125,211,252,0.5)_0%,rgba(125,211,252,0)_72%)] animate-[space-light-drift_30s_ease-in-out_infinite_alternate] motion-reduce:animate-none"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-[linear-gradient(180deg,rgba(15,23,42,0.08)_0%,rgba(15,23,42,0.24)_100%)]"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 opacity-[0.06]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 2px)',
|
||||
@@ -151,7 +162,7 @@ export const SpaceWorkspaceWidget = () => {
|
||||
<SpaceSetupDrawerWidget
|
||||
open={isSetupDrawerOpen}
|
||||
dismissible={isFocusMode}
|
||||
rooms={ROOM_THEMES}
|
||||
rooms={setupRooms}
|
||||
selectedRoomId={selectedRoom.id}
|
||||
goalInput={goalInput}
|
||||
selectedGoalId={selectedGoalId}
|
||||
|
||||
Reference in New Issue
Block a user