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

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>
   );
-};
+};