refactor(space): scene 도메인과 current session 계약을 정리

2026-03-09 13:05:44 +09:00
parent 8184915cb1
commit 675014166a
19 changed files with 243 additions and 208 deletions
--- a/src/features/scene-select/ui/SceneSelectCarousel.tsx
+++ b/src/features/scene-select/ui/SceneSelectCarousel.tsx
@@ -0,0 +1,51 @@
+import { getSceneCardBackgroundStyle, type SceneTheme } from '@/entities/scene';
+import { cn } from '@/shared/lib/cn';
+
+interface SceneSelectCarouselProps {
+  scenes: SceneTheme[];
+  selectedSceneId: string;
+  onSelect: (sceneId: string) => void;
+}
+
+export const SceneSelectCarousel = ({
+  scenes,
+  selectedSceneId,
+  onSelect,
+}: SceneSelectCarouselProps) => {
+  return (
+    <div className="-mx-1 overflow-x-auto px-1 pb-1">
+      <div className="flex min-w-full gap-2.5">
+        {scenes.map((scene) => {
+          const selected = scene.id === selectedSceneId;
+
+          return (
+            <button
+              key={scene.id}
+              type="button"
+              onClick={() => onSelect(scene.id)}
+              className={cn(
+                'group relative h-24 min-w-[138px] overflow-hidden rounded-xl border text-left sm:min-w-[148px]',
+                selected
+                  ? '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={getSceneCardBackgroundStyle(scene)}
+              aria-label={`${scene.name} 선택`}
+            >
+              <span className="absolute inset-x-0 bottom-0 h-[56%] bg-[linear-gradient(180deg,rgba(2,6,23,0)_0%,rgba(2,6,23,0.2)_52%,rgba(2,6,23,0.24)_100%)]" />
+              {selected ? (
+                <span className="absolute right-2 top-2 inline-flex h-5 w-5 items-center justify-center rounded-full border border-sky-200/64 bg-sky-200/24 text-[10px] font-semibold text-sky-50">
+                  ✓
+                </span>
+              ) : null}
+              <div className="absolute inset-x-2 bottom-2">
+                <p className="truncate text-sm font-semibold text-white/96">{scene.name}</p>
+                <p className="truncate text-[11px] text-white/66">{scene.vibeLabel}</p>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};