feat: add mobile optimization with hooks and touch components

src/components/ui/touch-button.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useState, type ReactNode, type ButtonHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+interface TouchButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+}
+
+export function TouchButton({
+  children,
+  variant = 'primary',
+  size = 'md',
+  fullWidth = false,
+  className,
+  disabled,
+  ...props
+}: TouchButtonProps) {
+  const [isPressed, setIsPressed] = useState(false);
+
+  const baseStyles = `
+    inline-flex items-center justify-center font-medium
+    transition-all duration-150 ease-out
+    active:scale-95
+    focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
+    disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100
+    touch-manipulation
+  `;
+
+  const variants = {
+    primary: `
+      bg-[#C41E3A] text-white
+      hover:bg-[#A01830]
+      focus-visible:ring-[#C41E3A]
+      ${isPressed ? 'bg-[#8B1429]' : ''}
+    `,
+    secondary: `
+      bg-[#F5F5F5] text-[#171717]
+      hover:bg-[#E5E5E5]
+      border border-[#E5E5E5]
+      focus-visible:ring-[#C41E3A]
+      ${isPressed ? 'bg-[#D4D4D4]' : ''}
+    `,
+    ghost: `
+      bg-transparent text-[#525252]
+      hover:bg-[#FEF2F4] hover:text-[#C41E3A]
+      focus-visible:ring-[#C41E3A]
+      ${isPressed ? 'bg-[#FCE8EC] text-[#C41E3A]' : ''}
+    `,
+  };
+
+  const sizes = {
+    sm: 'text-sm px-4 py-2 rounded-md gap-1.5 min-h-[36px]',
+    md: 'text-base px-5 py-2.5 rounded-lg gap-2 min-h-[44px]',
+    lg: 'text-lg px-6 py-3 rounded-lg gap-2 min-h-[52px]',
+  };
+
+  return (
+    <button
+      className={cn(
+        baseStyles,
+        variants[variant],
+        sizes[size],
+        fullWidth && 'w-full',
+        className
+      )}
+      disabled={disabled}
+      onTouchStart={() => setIsPressed(true)}
+      onTouchEnd={() => setIsPressed(false)}
+      onTouchCancel={() => setIsPressed(false)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

src/components/ui/touch-swipe.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useState, useRef, useEffect, type ReactNode } from 'react';
+
+interface TouchSwipeProps {
+  children: ReactNode;
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  threshold?: number;
+  className?: string;
+}
+
+export function TouchSwipe({
+  children,
+  onSwipeLeft,
+  onSwipeRight,
+  threshold = 50,
+  className = '',
+}: TouchSwipeProps) {
+  const [touchStart, setTouchStart] = useState<number | null>(null);
+  const [touchEnd, setTouchEnd] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setTouchEnd(null);
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    setTouchEnd(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    if (!touchStart || !touchEnd) return;
+
+    const distance = touchStart - touchEnd;
+    const isLeftSwipe = distance > threshold;
+    const isRightSwipe = distance < -threshold;
+
+    if (isLeftSwipe && onSwipeLeft) {
+      onSwipeLeft();
+    }
+
+    if (isRightSwipe && onSwipeRight) {
+      onSwipeRight();
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+    >
+      {children}
+    </div>
+  );
+}