eb70b7808d
Menu 컴포넌트와 Settlement Detail 컴포넌트의 safe area 처리를 구분하여 적용 Changes: - .full-menu-container: 기본 padding-top 50px 유지 (Menu용) - .full-menu-container.pdw-16: safe area를 포함한 padding-top 적용 (Settlement Detail용) - .full-menu-header: 기본적으로 safe area 아래 위치 (top: env(safe-area-inset-top)) - .full-menu-container.pdw-16 .full-menu-header::before: 가상 요소로 safe area 영역을 덮어 스크롤 컨텐츠가 보이지 않도록 처리 결과: - Menu: 기존 동작 유지 - Settlement Detail: 헤더는 메뉴와 같은 위치, 스크롤 컨텐츠는 safe area 위로 보이지 않음 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
웹 프론트엔드 개발 환경
1. 개발 환경
- Vite: 빠른 개발 서버 및 번들러
- TypeScript: 정적 타입 지원
- ESLint: 코드 린팅(정적 분석)
- Prettier: 코드 포매터
2. UI/UX
- TailwindCSS: 유틸리티 기반 CSS 프레임워크
- react-i18next: 다국어(i18n) 지원
3. 네트워킹 & 데이터
- Axios: HTTP 클라이언트
- openapi-typescript 또는 Orval: OpenAPI 기반 API 타입/클라이언트 코드 자동 생성
- TanStack/React Query: 서버 상태 관리 및 데이터 패칭
4. 네비게이션 & 라우팅
- TanStack/React Router: SPA 라우팅
5. 상태 관리
- Zustand: 클라이언트/로컬 상태 관리
- TanStack/React Query: 서버 상태 관리