style(space): 스테이지 중심 첫 인상과 Setup/Focus 톤을 정리
맥락: - /space 첫 화면이 그라데이션 안내 화면처럼 보이며 공간 서비스의 무대감이 약했습니다. - Setup 안내 카드/상단 크롬/도크 존재감이 커서 몰입형 인상(Portal/LifeAt 톤)을 해치고 있었습니다. 변경사항: - 배경을 실제 공간 프리뷰 이미지 우선 렌더로 전환하고, 실패 시 그라데이션 fallback만 남기도록 조정했습니다. - 배경 오버레이를 과한 비네팅 대신 단일 규칙(얕은 읽기용 필터 + 고정 그레인)으로 정리했습니다. - Setup 상태의 중앙 안내 카드를 제거하고, 진입 시 Setup Drawer 자동 오픈 흐름만 남겼습니다. - Setup Drawer 헤더 안내 문구를 1줄로 축약하고 섹션을 3단(Space/Goal/Sound) 번호 체계로 고정했습니다. - Setup 상태에서는 Drawer 닫기를 막아 설명 박스 없이도 자연스러운 입력 흐름을 유지했습니다. - 상단 크롬을 최소화하고 Focus 상태의 Setup 열기 버튼을 약한 보조 액션으로 낮췄습니다. - 오른쪽 도크 레일의 폭/간격/아이콘 박스를 정돈하고 Focus 기본 opacity를 낮춰 몰입 방해를 줄였습니다. 검증: - npx tsc --noEmit - npm run build 세션-상태: /space 첫 진입이 장면+드로어 중심으로 정리되어 설명 없이도 시작 흐름이 읽힙니다. 세션-다음: 필요 시 Setup Drawer 내부 타이포 스케일과 칩 밀도를 추가 미세 조정합니다. 세션-리스크: 외부 이미지 소스 품질 편차에 따라 장면 밝기 체감이 달라질 수 있습니다.
This commit is contained in:
@@ -75,13 +75,13 @@ export const SpaceToolsDockWidget = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed right-3 top-1/2 z-30 -translate-y-1/2">
|
||||
<div className="fixed right-3.5 top-1/2 z-30 -translate-y-1/2">
|
||||
<div
|
||||
className={cn(
|
||||
'flex w-12 flex-col items-center gap-2 rounded-2xl border py-2 backdrop-blur-xl transition-opacity',
|
||||
'flex w-11 flex-col items-center gap-1.5 rounded-[18px] border py-1.5 backdrop-blur-lg transition-opacity',
|
||||
isFocusMode && activePanel === null
|
||||
? 'border-white/14 bg-slate-950/34 opacity-56 hover:opacity-100'
|
||||
: 'border-white/18 bg-slate-950/50 opacity-100',
|
||||
? 'border-white/12 bg-slate-950/22 opacity-40 hover:opacity-92'
|
||||
: 'border-white/16 bg-slate-950/34 opacity-92',
|
||||
)}
|
||||
>
|
||||
{TOOL_ITEMS.map((item) => {
|
||||
@@ -95,15 +95,15 @@ export const SpaceToolsDockWidget = ({
|
||||
aria-label={item.label}
|
||||
onClick={() => setActivePanel(item.id)}
|
||||
className={cn(
|
||||
'relative inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base 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-[15px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
|
||||
selected
|
||||
? 'border-sky-200/64 bg-sky-200/22'
|
||||
: 'border-white/18 bg-white/8 hover:bg-white/14',
|
||||
? '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',
|
||||
)}
|
||||
>
|
||||
<span aria-hidden>{item.icon}</span>
|
||||
{item.id === 'inbox' && thoughtCount > 0 ? (
|
||||
<span className="absolute -right-1 -top-1 inline-flex min-w-[1rem] items-center justify-center rounded-full bg-sky-200/28 px-1 py-0.5 text-[9px] font-semibold text-sky-50">
|
||||
<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}`}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
Reference in New Issue
Block a user