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}