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:
2026-03-02 15:12:03 +09:00
parent 564e53fa8c
commit 78a65fa15b
5 changed files with 64 additions and 75 deletions

View File

@@ -8,6 +8,7 @@ import { SpaceSideSheet } from '@/widgets/space-sheet-shell';
interface SpaceSetupDrawerWidgetProps {
open: boolean;
dismissible?: boolean;
rooms: RoomTheme[];
selectedRoomId: string;
goalInput: string;
@@ -26,6 +27,7 @@ interface SpaceSetupDrawerWidgetProps {
export const SpaceSetupDrawerWidget = ({
open,
dismissible = true,
rooms,
selectedRoomId,
goalInput,
@@ -45,8 +47,9 @@ export const SpaceSetupDrawerWidget = ({
<SpaceSideSheet
open={open}
title="Setup"
subtitle="공간 선택 → 목표(필수) → 사운드(선택)"
subtitle="공간을 고르고, 한 줄 목표를 적어주세요."
onClose={onClose}
dismissible={dismissible}
widthClassName="w-[min(360px,94vw)]"
footer={(
<Button
@@ -63,10 +66,9 @@ export const SpaceSetupDrawerWidget = ({
)}
>
<div className="space-y-5">
<section className="space-y-2">
<section className="space-y-2.5">
<div className="space-y-0.5">
<p className="text-[11px] uppercase tracking-[0.16em] text-white/55">Space</p>
<p className="text-xs text-white/62"> .</p>
<p className="text-[11px] uppercase tracking-[0.16em] text-white/55">1) Space</p>
</div>
<SpaceSelectCarousel
rooms={rooms}
@@ -75,10 +77,9 @@ export const SpaceSetupDrawerWidget = ({
/>
</section>
<section className="space-y-2">
<section className="space-y-2.5">
<div className="space-y-0.5">
<p className="text-[11px] uppercase tracking-[0.16em] text-white/55">Goal</p>
<p className="text-xs text-white/62"> .</p>
<p className="text-[11px] uppercase tracking-[0.16em] text-white/55">2) Goal</p>
</div>
<SessionGoalField
goalInput={goalInput}
@@ -89,10 +90,9 @@ export const SpaceSetupDrawerWidget = ({
/>
</section>
<section className="space-y-2">
<section className="space-y-2.5">
<div className="space-y-0.5">
<p className="text-[11px] uppercase tracking-[0.16em] text-white/55">Sound</p>
<p className="text-xs text-white/62"> . .</p>
<p className="text-[11px] uppercase tracking-[0.16em] text-white/55">3) Sound</p>
</div>
<div className="grid grid-cols-2 gap-2">