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

src/widgets/focus-dashboard/ui/FocusDashboardWidget.tsx

@@ -18,6 +18,7 @@ import { useFocusStats } from '@/features/stats';
 import { focusSessionApi } from '@/features/focus-session/api/focusSessionApi';
 import { copy } from '@/shared/i18n';
 import { cn } from '@/shared/lib/cn';
+import { useDragScroll } from '@/shared/lib/useDragScroll';
 import { FocusPlanManageSheet, type FocusPlanEditingState } from './FocusPlanManageSheet';
 
 const FREE_MAX_ITEMS = 1;
@@ -108,6 +109,13 @@ export const FocusDashboardWidget = () => {
   const microStepInputRef = useRef<HTMLInputElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
 
+  const {
+    containerRef: sceneContainerRef,
+    events: sceneDragEvents,
+    isDragging: isSceneDragging,
+    shouldSuppressClick: shouldSuppressSceneClick,
+  } = useDragScroll();
+
   const selectedScene = useMemo(() => getSceneById(selectedSceneId) ?? SCENE_THEMES[0], [selectedSceneId]);
 
   const maxItems = isPro ? PRO_MAX_ITEMS : FREE_MAX_ITEMS;
@@ -446,15 +454,27 @@ export const FocusDashboardWidget = () => {
                 {/* Scene */}
                 <div className="space-y-3">
                   <p className="text-sm font-medium text-white/80">배경 공간</p>
-                  <div className="flex gap-3 overflow-x-auto pb-2 snap-x hide-scrollbar">
+                  <div 
+                    ref={sceneContainerRef}
+                    {...sceneDragEvents}
+                    className={cn(
+                      "flex gap-3 overflow-x-auto pb-2 scrollbar-none",
+                      isSceneDragging ? "cursor-grabbing" : "cursor-grab"
+                    )}
+                  >
                     {SCENE_THEMES.map(scene => (
                       <button
                         key={scene.id}
                         type="button"
-                        onClick={() => setSelectedSceneId(scene.id)}
+                        onClick={() => {
+                          if (!shouldSuppressSceneClick) {
+                            setSelectedSceneId(scene.id);
+                          }
+                        }}
                         className={cn(
-                          'group relative h-24 min-w-[120px] rounded-xl border border-white/10 text-left snap-start transition-all overflow-hidden bg-white/5 active:scale-95 cursor-pointer',
-                          selectedSceneId === scene.id && 'border-white/40 shadow-[0_0_20px_rgba(255,255,255,0.1)]'
+                          'group relative h-24 min-w-[120px] rounded-xl border border-white/10 text-left transition-all overflow-hidden bg-white/5 active:scale-95',
+                          selectedSceneId === scene.id && 'border-white/40 shadow-[0_0_20px_rgba(255,255,255,0.1)]',
+                          isSceneDragging && 'pointer-events-none'
                         )}
                         style={getSceneStageBackgroundStyle(scene, sceneAssetMap?.[scene.id])}
                       >
@@ -559,4 +579,4 @@ export const FocusDashboardWidget = () => {
       ) : null}
     </div>
   );
-};
+};