fix(app): 배경 공간 드래그 스크롤 클릭 충돌 수정

src/features/scene-select/ui/SceneSelectCarousel.tsx

@@ -2,6 +2,7 @@ import type { SceneTheme } from '@/entities/scene';
 import { getSceneCardBackgroundStyle, type SceneAssetMap } from '@/entities/media';
 import { copy } from '@/shared/i18n';
 import { cn } from '@/shared/lib/cn';
+import { useDragScroll } from '@/shared/lib/useDragScroll';
 
 interface SceneSelectCarouselProps {
   scenes: SceneTheme[];
@@ -16,8 +17,17 @@ export const SceneSelectCarousel = ({
   sceneAssetMap,
   onSelect,
 }: SceneSelectCarouselProps) => {
+  const { containerRef, events, isDragging, shouldSuppressClick } = useDragScroll();
+
   return (
-    <div className="-mx-1 overflow-x-auto px-1 pb-1">
+    <div 
+      ref={containerRef}
+      {...events}
+      className={cn(
+        "-mx-1 overflow-x-auto px-1 pb-1 scrollbar-none",
+        isDragging ? "cursor-grabbing" : "cursor-grab"
+      )}
+    >
       <div className="flex min-w-full gap-2.5">
         {scenes.map((scene) => {
           const selected = scene.id === selectedSceneId;
@@ -26,12 +36,17 @@ export const SceneSelectCarousel = ({
             <button
               key={scene.id}
               type="button"
-              onClick={() => onSelect(scene.id)}
+              onClick={() => {
+                if (!shouldSuppressClick) {
+                  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',
+                isDragging && 'pointer-events-none'
               )}
               style={getSceneCardBackgroundStyle(scene, sceneAssetMap?.[scene.id])}
               aria-label={`${scene.name} ${copy.common.select}`}