[REFACTOR] 반응형 디자인 개선

[siiion]

5.1 브레이크포인트 통일

• Tailwind 설정 개선

  // tailwind.config.ts
  theme: {
    screens: {
      'sm': '640px',   // 모바일 가로
      'md': '768px',   // 태블릿
      'lg': '1024px',  // 작은 노트북
      'xl': '1280px',  // 데스크톱
      '2xl': '1536px', // 큰 데스크톱
    }
  }

• 반응형 유틸리티 클래스 통일

  • 컨테이너 최대 너비 일관성
  • 패딩/마진 스케일 통일

5.2 모바일 최적화

• 터치 인터랙션

  • 버튼 최소 터치 영역 (44x44px)
  • 스와이프 제스처 지원 검토

• 모바일 네비게이션

  • 햄버거 메뉴 개선
  • 하단 네비게이션 바 검토

• 폰트 크기 조정

  • global.css의 텍스트 클래스 검토
  • 가독성 테스트 (다양한 디바이스)

5.3 레이아웃 개선

• 그리드 시스템

  • 일관된 그리드 사용
  • Flexbox/Grid 혼용 기준 정리

• 컨테이너 너비

  • 페이지별 최대 너비 통일
  • 사이드바 레이아웃 반응형 개선

• 이미지 반응형

  • 모든 이미지에 반응형 클래스 적용
  • 아스펙트 비율 유지

5.4 테스트

• 디바이스 테스트

  • 주요 디바이스별 테스트 체크리스트 작성
  • 실제 디바이스에서 테스트

• 브라우저 호환성

  • 주요 브라우저 테스트
  • 폴리필 필요 여부 확인