From c6082a09d7fc6f9ccf9031cf5aee4ccd5fb07dcc Mon Sep 17 00:00:00 2001 From: corpi Date: Mon, 2 Mar 2026 18:09:20 +0900 Subject: [PATCH] =?UTF-8?q?style(space-setup):=20=EB=A6=AC=EC=B6=94?= =?UTF-8?q?=EC=96=BC=20=ED=86=A4=EC=9D=98=20=EB=93=9C=EB=A1=9C=EC=96=B4=20?= =?UTF-8?q?=EC=B9=B4=ED=94=BC=EC=99=80=20=EC=9E=85=EB=A0=A5=20=ED=9D=90?= =?UTF-8?q?=EB=A6=84=EC=9C=BC=EB=A1=9C=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 맥락: - /space Setup Drawer가 설정 패널처럼 보여 프리미엄 라운지 톤이 약했습니다. - 첫 진입에서 사용자가 설명보다 리추얼 흐름으로 행동하도록 시각 계층을 조정할 필요가 있었습니다. 변경사항: - Setup Drawer 헤더 카피를 감성 톤으로 교체하고 섹션 레이블을 자연어 중심으로 정리했습니다. - Space 썸네일 카드에 텍스트 전용 하단 그라데이션을 적용하고 선택 테두리/글로우를 은은하게 낮췄습니다. - Goal 입력 라벨을 한 조각 중심 카피로 변경하고 보조 힌트를 추가했습니다. - Goal 추천 칩을 기본 4개 + 더보기 토글로 바꿔 부담을 줄였습니다. - Sound 프리셋을 무거운 버튼형에서 가벼운 pill 칩형으로 정리했습니다. - Goal 미입력 시 시작 버튼 상단에 상태 안내 문구를 추가했습니다. 검증: - npx tsc --noEmit - npm run build 세션-상태: Setup Drawer가 설정 패널보다 입장 의식 흐름에 맞는 톤으로 정리되었습니다. 세션-다음: 실제 화면 확인 후 타이포/간격 미세 조정 여부를 판단합니다. 세션-리스크: 더보기 토글 상태는 현재 세션 동안만 유지됩니다. --- .../session-goal/ui/SessionGoalField.tsx | 34 +++++++++++--- .../space-select/ui/SpaceSelectCarousel.tsx | 10 ++--- .../ui/SpaceSetupDrawerWidget.tsx | 45 ++++++++++--------- 3 files changed, 59 insertions(+), 30 deletions(-) diff --git a/src/features/session-goal/ui/SessionGoalField.tsx b/src/features/session-goal/ui/SessionGoalField.tsx index 953f1f7..5627dfd 100644 --- a/src/features/session-goal/ui/SessionGoalField.tsx +++ b/src/features/session-goal/ui/SessionGoalField.tsx @@ -1,3 +1,6 @@ +'use client'; + +import { useMemo, useState } from 'react'; import type { GoalChip } from '@/entities/session'; import { cn } from '@/shared/lib/cn'; @@ -16,11 +19,21 @@ export const SessionGoalField = ({ onGoalChange, onGoalChipSelect, }: SessionGoalFieldProps) => { + const [expanded, setExpanded] = useState(false); + + const visibleChips = useMemo(() => { + if (expanded) { + return goalChips; + } + + return goalChips.slice(0, 4); + }, [expanded, goalChips]); + return (
+

크게 말고, 바로 다음 한 조각.

- {goalChips.map((chip) => { + {visibleChips.map((chip) => { const selected = chip.id === selectedGoalId; return ( @@ -41,16 +55,26 @@ export const SessionGoalField = ({ type="button" onClick={() => onGoalChipSelect(chip)} className={cn( - 'rounded-full border px-2.5 py-1 text-xs transition-colors', + 'rounded-full border px-2.5 py-1 text-[11px] transition-colors', selected - ? 'border-sky-200/56 bg-sky-200/20 text-sky-50' - : 'border-white/18 bg-white/8 text-white/76 hover:bg-white/14', + ? 'border-sky-200/42 bg-sky-200/16 text-white/92' + : 'border-white/16 bg-white/6 text-white/72 hover:bg-white/11', )} > {chip.label} ); })} + + {goalChips.length > 4 ? ( + + ) : null}
); diff --git a/src/features/space-select/ui/SpaceSelectCarousel.tsx b/src/features/space-select/ui/SpaceSelectCarousel.tsx index 094c4ce..68ea3cc 100644 --- a/src/features/space-select/ui/SpaceSelectCarousel.tsx +++ b/src/features/space-select/ui/SpaceSelectCarousel.tsx @@ -26,21 +26,21 @@ export const SpaceSelectCarousel = ({ className={cn( 'group relative h-24 min-w-[138px] overflow-hidden rounded-xl border text-left sm:min-w-[148px]', selected - ? 'border-sky-200/62 shadow-[0_0_0_1px_rgba(186,230,253,0.4),0_0_18px_rgba(56,189,248,0.22)]' - : 'border-white/18 hover:border-white/32', + ? 'border-sky-200/38 shadow-[0_0_0_1px_rgba(186,230,253,0.2),0_0_10px_rgba(56,189,248,0.12)]' + : 'border-white/16 hover:border-white/24', )} style={getRoomCardBackgroundStyle(room)} aria-label={`${room.name} 선택`} > - + {selected ? ( ✓ ) : null}
-

{room.name}

-

{room.vibeLabel}

+

{room.name}

+

{room.vibeLabel}

); diff --git a/src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx b/src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx index c7f15fd..7f6728e 100644 --- a/src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx +++ b/src/widgets/space-setup-drawer/ui/SpaceSetupDrawerWidget.tsx @@ -46,29 +46,34 @@ export const SpaceSetupDrawerWidget = ({ return ( - 시작하기 - +
+ {!canStart ? ( +

목표를 적으면 시작할 수 있어요.

+ ) : null} + +
)} >
-

1) Space

+

공간

-

2) Goal

+

이번 세션 한 줄(필수)

-

3) Sound

+

분위기(선택)

-
+
{soundPresets.map((preset) => { const selected = preset.id === selectedSoundPresetId; @@ -105,10 +110,10 @@ export const SpaceSetupDrawerWidget = ({ type="button" onClick={() => onSoundSelect(preset.id)} className={cn( - 'rounded-xl border px-3 py-2 text-left text-xs transition-colors', + 'rounded-full border px-2.5 py-1 text-[11px] transition-colors', selected - ? 'border-sky-200/64 bg-sky-200/20 text-sky-50' - : 'border-white/18 bg-white/8 text-white/78 hover:bg-white/14', + ? 'border-sky-200/36 bg-sky-200/14 text-white/92' + : 'border-white/16 bg-white/6 text-white/72 hover:bg-white/11', )} > {preset.label}