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}
+
+
)}
>
-
2) Goal
+
이번 세션 한 줄(필수)
-
+
{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}