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

src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx

@@ -11,6 +11,7 @@ import { SOUND_PRESETS, type TimerPreset } from '@/entities/session';
 import { copy } from '@/shared/i18n';
 import { cn } from '@/shared/lib/cn';
 import { useReducedMotion } from '@/shared/lib/useReducedMotion';
+import { useDragScroll } from '@/shared/lib/useDragScroll';
 import { Toggle } from '@/shared/ui';
 
 interface ControlCenterSheetWidgetProps {
@@ -73,16 +74,26 @@ export const ControlCenterSheetWidget = ({
     return scenes.find((scene) => scene.id === selectedSceneId) ?? scenes[0];
   }, [scenes, selectedSceneId]);
 
+  const {
+    containerRef: sceneContainerRef,
+    events: sceneDragEvents,
+    isDragging: isSceneDragging,
+    shouldSuppressClick: shouldSuppressSceneClick,
+  } = useDragScroll();
+
   return (
     <div className="space-y-4">
       <section className="space-y-2.5 rounded-2xl border border-white/12 bg-black/22 p-3.5 backdrop-blur-md">
         <SectionTitle title={controlCenter.sectionTitles.background} description={selectedScene?.name ?? copy.common.defaultBackground} />
         <div
+          ref={sceneContainerRef}
+          {...sceneDragEvents}
           className={cn(
-            '-mx-1 flex gap-2.5 overflow-x-auto px-1 pb-1.5 snap-x snap-mandatory scrollbar-none',
+            '-mx-1 flex gap-2.5 overflow-x-auto px-1 pb-1.5 scrollbar-none',
+            isSceneDragging ? 'cursor-grabbing' : 'cursor-grab',
             reducedMotion ? '' : 'scroll-smooth',
           )}
-          style={{ scrollBehavior: reducedMotion ? 'auto' : 'smooth' }}
+          style={{ scrollBehavior: isSceneDragging ? 'auto' : (reducedMotion ? 'auto' : 'smooth') }}
         >
           {scenes.slice(0, 6).map((scene) => {
             const selected = scene.id === selectedSceneId;
@@ -92,13 +103,16 @@ export const ControlCenterSheetWidget = ({
                 key={scene.id}
                 type="button"
                 onClick={() => {
-                  onSelectScene(scene.id);
+                  if (!shouldSuppressSceneClick) {
+                    onSelectScene(scene.id);
+                  }
                 }}
                 className={cn(
-                  'relative h-24 w-[130px] shrink-0 snap-start overflow-hidden rounded-xl border text-left',
+                  'relative h-24 w-[130px] shrink-0 overflow-hidden rounded-xl border text-left',
                   interactiveMotionClass,
                   reducedMotion ? '' : 'hover:-translate-y-0.5',
                   selected ? 'border-sky-200/44 shadow-[0_8px_16px_rgba(56,189,248,0.18)]' : 'border-white/16',
+                  isSceneDragging && 'pointer-events-none'
                 )}
               >
                 <div