mobilelisted

# Mobile-First Design Skill 모바일 퍼스트 디자인 및 앱 같은 웹 경험을 위한 종합 스킬입니다. ## Triggers - "모바일", "mobile", "앱", "app", "PWA", "반응형" --- ## Input | 항목 | 필수 | 설명 | |------|------|------| | `appType` | ✅ | 애플리케이션 유형 (pwa, hybrid, responsive) | | `targetPlatform` | ❌ | 타겟 플랫폼 (ios, android, both) | | `features` | ❌ | 필요한 기능 목록 | --- ## Mobile-First 원칙 ### 디자인 철학 ```markdown ## Mobile-First 설계 원칙 1. **콘텐츠 우선** - 핵심 콘텐츠와 기능을 먼저 정의 - 불필요한 요소 제거 - 점진적으로 데스크톱 기능 추가 2. **터치 우선** - 모든 인터랙티브 요소 44px 이상 - 충분한 여백으로 오탭 방지 - 제스처 지원 (스와이프, 핀치) 3. **성능 우선** - 초기 로딩 최소화 - 이미지 지연 로딩 - 오프라인 지원 고려 4. **네이티브 경험** - 플랫폼 관습 존중 - 익숙한 패턴 사용 - 부드러운 애니메이션 ``` --- ## Mobile Navigation ### 1. Bottom Tab Navigation ```tsx // components/mobile/bottom-nav.tsx "use client"; import { usePathname } from "next/navigation"; import Link from "next/link"; import { cn } from "@/lib/utils"; import { Home, Search, Plus, Bell, User, LucideIcon } from "lucide-react"; import { motion } from "framer-motion"; interface NavItem { icon: LucideIcon; label: string; href: string; badge?: number; } const navItems: NavItem[] = [ { icon: Home, label: "홈", href: "/" }, { icon: Search, label: "검색", href: "/search" }, { icon: Plus, label: "만들기", href: "/create" }, { icon: Bell, label: "알림", href: "/notifications", badge: 3 }, { icon: User, label: "프로필", href: "/profile" }, ]; export function BottomNav() { const pathname = usePathname(); return ( <nav clas