From a1424a4794ccdddc7b90c6f9f4730d952666bd35 Mon Sep 17 00:00:00 2001
From: corpi <lj845854@gmail.com>
Date: Fri, 13 Mar 2026 16:22:11 +0900
Subject: [PATCH] =?UTF-8?q?fix(app):=20=EB=B0=B0=EA=B2=BD=20=EA=B3=B5?=
 =?UTF-8?q?=EA=B0=84=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=ED=81=B4=EB=A6=AD=20=EC=B6=A9=EB=8F=8C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scene-select/ui/SceneSelectCarousel.tsx   |  19 ++-
 src/shared/lib/useDragScroll.ts               | 155 ++++++++++++++++++
 .../ui/ControlCenterSheetWidget.tsx           |  22 ++-
 .../ui/FocusDashboardWidget.tsx               |  30 +++-
 4 files changed, 215 insertions(+), 11 deletions(-)
 create mode 100644 src/shared/lib/useDragScroll.ts

diff --git a/src/features/scene-select/ui/SceneSelectCarousel.tsx b/src/features/scene-select/ui/SceneSelectCarousel.tsx
index 145061e..0f585de 100644
--- a/src/features/scene-select/ui/SceneSelectCarousel.tsx
+++ b/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}`}
diff --git a/src/shared/lib/useDragScroll.ts b/src/shared/lib/useDragScroll.ts
new file mode 100644
index 0000000..ffb2da7
--- /dev/null
+++ b/src/shared/lib/useDragScroll.ts
@@ -0,0 +1,155 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type DragEvent as ReactDragEvent,
+  type PointerEvent as ReactPointerEvent,
+} from 'react';
+
+interface UseDragScrollOptions {
+  direction?: 'horizontal' | 'vertical' | 'both';
+  speed?: number;
+}
+
+export const useDragScroll = ({ direction = 'horizontal', speed = 1.5 }: UseDragScrollOptions = {}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [shouldSuppressClick, setShouldSuppressClick] = useState(false);
+  const pointerIdRef = useRef<number | null>(null);
+  const dragActiveRef = useRef(false);
+  const suppressClickTimeoutRef = useRef<number | null>(null);
+  const startPos = useRef({ x: 0, y: 0 });
+  const scrollPos = useRef({ left: 0, top: 0 });
+
+  const clearSuppressClickTimeout = useCallback(() => {
+    if (suppressClickTimeoutRef.current !== null) {
+      window.clearTimeout(suppressClickTimeoutRef.current);
+      suppressClickTimeoutRef.current = null;
+    }
+  }, []);
+
+  const handleWindowPointerUpRef = useRef<(event: PointerEvent) => void>(() => {});
+  const handleWindowPointerCancelRef = useRef<(event: PointerEvent) => void>(() => {});
+
+  const removeWindowListeners = useCallback(() => {
+    window.removeEventListener('pointerup', handleWindowPointerUpRef.current);
+    window.removeEventListener('pointercancel', handleWindowPointerCancelRef.current);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      clearSuppressClickTimeout();
+      removeWindowListeners();
+    };
+  }, [clearSuppressClickTimeout, removeWindowListeners]);
+
+  const finishInteraction = useCallback((keepClickSuppressed: boolean) => {
+    pointerIdRef.current = null;
+    dragActiveRef.current = false;
+    setIsDragging(false);
+    removeWindowListeners();
+    clearSuppressClickTimeout();
+
+    if (!keepClickSuppressed) {
+      setShouldSuppressClick(false);
+      return;
+    }
+
+    setShouldSuppressClick(true);
+    suppressClickTimeoutRef.current = window.setTimeout(() => {
+      setShouldSuppressClick(false);
+      suppressClickTimeoutRef.current = null;
+    }, 80);
+  }, [clearSuppressClickTimeout, removeWindowListeners]);
+
+  const handleWindowPointerUp = useCallback((event: PointerEvent) => {
+    if (pointerIdRef.current !== event.pointerId) {
+      return;
+    }
+
+    finishInteraction(dragActiveRef.current);
+  }, [finishInteraction]);
+
+  const handleWindowPointerCancel = useCallback((event: PointerEvent) => {
+    if (pointerIdRef.current !== event.pointerId) {
+      return;
+    }
+
+    finishInteraction(dragActiveRef.current);
+  }, [finishInteraction]);
+
+  useEffect(() => {
+    handleWindowPointerUpRef.current = handleWindowPointerUp;
+    handleWindowPointerCancelRef.current = handleWindowPointerCancel;
+  }, [handleWindowPointerCancel, handleWindowPointerUp]);
+
+  const onPointerDown = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    if (e.pointerType === 'mouse' && e.button !== 0) {
+      return;
+    }
+
+    clearSuppressClickTimeout();
+    setShouldSuppressClick(false);
+
+    pointerIdRef.current = e.pointerId;
+    dragActiveRef.current = false;
+
+    startPos.current = {
+      x: e.clientX,
+      y: e.clientY,
+    };
+
+    scrollPos.current = {
+      left: containerRef.current.scrollLeft,
+      top: containerRef.current.scrollTop,
+    };
+    removeWindowListeners();
+    window.addEventListener('pointerup', handleWindowPointerUpRef.current);
+    window.addEventListener('pointercancel', handleWindowPointerCancelRef.current);
+  }, [clearSuppressClickTimeout, removeWindowListeners]);
+
+  const onPointerMove = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
+    if (!containerRef.current || pointerIdRef.current !== e.pointerId) {
+      return;
+    }
+
+    const walkX = e.clientX - startPos.current.x;
+    const walkY = e.clientY - startPos.current.y;
+
+    if (!dragActiveRef.current && (Math.abs(walkX) > 5 || Math.abs(walkY) > 5)) {
+      dragActiveRef.current = true;
+      setIsDragging(true);
+      setShouldSuppressClick(true);
+    }
+
+    if (!dragActiveRef.current) {
+      return;
+    }
+
+    e.preventDefault();
+
+    if (direction === 'horizontal' || direction === 'both') {
+      containerRef.current.scrollLeft = scrollPos.current.left - walkX * speed;
+    }
+
+    if (direction === 'vertical' || direction === 'both') {
+      containerRef.current.scrollTop = scrollPos.current.top - walkY * speed;
+    }
+  }, [direction, speed]);
+
+  return {
+    containerRef,
+    events: {
+      onPointerDown,
+      onPointerMove,
+      onDragStart: (e: ReactDragEvent<HTMLDivElement>) => e.preventDefault(),
+    },
+    isDragging,
+    shouldSuppressClick,
+  };
+};
diff --git a/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx b/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx
index b1e1dc1..e48ee88 100644
--- a/src/widgets/control-center-sheet/ui/ControlCenterSheetWidget.tsx
+++ b/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
diff --git a/src/widgets/focus-dashboard/ui/FocusDashboardWidget.tsx b/src/widgets/focus-dashboard/ui/FocusDashboardWidget.tsx
index d657f69..f7f949e 100644
--- a/src/widgets/focus-dashboard/ui/FocusDashboardWidget.tsx
+++ b/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>
   );
-};
\ No newline at end of file
+};