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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user