feat(responsive): 메인페이지 + 주요 페이지 모바일 반응형 최적화

[thxforall]

개요

서비스 오픈 전 모바일 반응형 최적화. 메인페이지와 핵심 페이지의 모바일 사용성 보장.

Epic: #35

현재 상태

• 기본 인프라: Tailwind breakpoints (sm/md/lg/xl/2xl), useIsMobile() 훅 구현됨 ✅
• 일부 페이지 반응형 완료:
  • Explore: mobile (180x225) / desktop (400x500) 그리드 적응 ✅
  • Profile: mobile 스택 → desktop 2컬럼 ✅
  • Request: mobile/desktop 레이아웃 분리 ✅
  • Login: 반응형 카드 ✅
• 메인페이지: lg: 미디어쿼리 2개만 사용 — 대부분 데스크톱 고정 레이아웃 ⚠️

TODO

메인페이지 (packages/web/app/page.tsx)

• HeroItemSync: 모바일에서 갤러리 이미지 크기 조정, 터치 스와이프
• DecodeShowcase: 모바일에서 bounding box UI 겹침 방지, 아이템 리스트 하단 배치
• Editorial + Trending 콤보: lg:grid-cols-[5fr_7fr] → 모바일 스택
• EditorialMagazine: 가로 스크롤 카드 크기 모바일 적응
• VirtualTryOnTeaser: Before/After 슬라이더 모바일 터치 최적화
• MasonryGrid: 모바일 2열, 데스크톱 4열
• CommunityLeaderboard: 모바일 카드 레이아웃
• DomeGallery: 모바일 성능 최적화 (이미지 수 축소)

Explore/Editorial

• 필터 시트 모바일 UX (이미 구현 — 검증 필요)
• 카드 텍스트 truncation 모바일 체크

Post 상세

• 스팟 마커 모바일 터치 영역 확보
• 솔루션 목록 하단 시트
• 이미지 핀치 줌

전반

• 100dvh (dynamic viewport height) 일관 적용
• 모바일 폰트 크기 체크 (최소 14px)
• 터치 타겟 최소 44x44px 보장
• Safe area insets (노치/홈바) 대응

참고 파일

• packages/web/lib/hooks/useMediaQuery.ts — 미디어쿼리 훅
• packages/web/app/page.tsx — 메인페이지
• packages/web/lib/components/main-renewal/ — 메인 섹션 컴포넌트

---

Epic: #35 (1차 릴리즈 — 코어 기능)

[thxforall]

1차 릴리즈 기준 완료. 메인페이지 전 섹션 + Explore + Post 상세 모바일 반응형 적용 완료.

구현 완료:

• 전 섹션 sm:/md:/lg: Tailwind 브레이크포인트 적용
• 바텀시트 모달 (모바일 상세 뷰)
• 터치 타겟 44x44px 표준화
• 100dvh, safe-area-inset 대응
• break-keep 한글 처리
• MobileHeader 로고 전용 모드

추후 개선:

• 전체 인터랙티브 요소 터치 타겟 전수 검사
• 저사양 기기 제스처 성능 QA
• DomeGallery 모바일 이미지 수 최적화
• 핀치 줌 (Post 상세 이미지)