feat: react-swipeable 설치 + useIsMobile/useSwipe 훅 추가

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package-lock.json

@@ -13,6 +13,7 @@
         "react-dom": "^18.2.0",
         "react-leaflet": "^4.2.1",
         "react-router-dom": "^6.30.3",
+        "react-swipeable": "^7.0.2",
         "recharts": "^3.7.0",
         "three": "^0.182.0"
       },
@@ -3088,6 +3089,15 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-swipeable": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.2.tgz",
+      "integrity": "sha512-v1Qx1l+aC2fdxKa9aKJiaU/ZxmJ5o98RMoFwUqAAzVWUcxgfHFXDDruCKXhw6zIYXm6V64JiHgP9f6mlME5l8w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17 || ^18 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/recharts": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.30.3",
+    "react-swipeable": "^7.0.2",
     "recharts": "^3.7.0",
     "three": "^0.182.0"
   },

src/hooks/useIsMobile.js

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(
+    () => window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`).matches
+  );
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, []);
+
+  return isMobile;
+}

src/hooks/useSwipe.js

@@ -0,0 +1,13 @@
+import { useSwipeable } from 'react-swipeable';
+
+export function useSwipe({ onSwipedLeft, onSwipedRight, threshold = 50 } = {}) {
+  const handlers = useSwipeable({
+    onSwipedLeft,
+    onSwipedRight,
+    delta: threshold,
+    trackMouse: false,
+    preventScrollOnSwipe: true,
+  });
+
+  return handlers;
+}