23 lines
2.1 KiB
Markdown
23 lines
2.1 KiB
Markdown
# Архитектура Frontend-клиента (Next.js 14)
|
||
|
||
## 1. Базовые принципы
|
||
- **Стек:** Next.js 14 (App Router), React 18, TypeScript, Tailwind CSS.
|
||
- **UI/UX:** Темная тема (`#121212`), акцентный цвет `#E32636`. Иконки — строго `lucide-react`.
|
||
- **Компоненты:** Никакого кастомного CSS. Только утилитные классы Tailwind.
|
||
|
||
## 2. Управление состоянием (State Management)
|
||
- **Глобальный стейт (Zustand):**
|
||
- `authStore`: Хранит JWT-токен и данные профиля. **Обязательно** использовать persist middleware (хранить в localStorage).
|
||
- `cartStore`: Хранит выбранные места (`CartSeat` с `ticketId`). **ЗАПРЕЩЕНО** использовать persist. Корзина живет только в памяти страницы, так как лок места на бэкенде временный (TTL в Redis).
|
||
|
||
## 3. Работа с API и Сетью (КРИТИЧЕСКИ ВАЖНО)
|
||
- **Базовый URL:** ЗАПРЕЩЕНО хардкодить `localhost` или прямые IP в исходном коде. Всегда использовать `process.env.NEXT_PUBLIC_API_URL` с фоллбэком.
|
||
- **Клиент:** Axios инстанс (`src/api/client.ts`).
|
||
- **Авторизация:** Интерсептор автоматически добавляет `Authorization: Bearer <token>` из `authStore`.
|
||
- **Обработка ошибок:** Все вызовы API оборачивать в `try/catch`. Бизнес-ошибки (например, 409 Conflict) обрабатывать локально с показом Toast-уведомлений.
|
||
|
||
## 4. Структура директорий
|
||
- `src/app/` — Роутинг (Pages, Layouts).
|
||
- `src/components/` — Переиспользуемые UI компоненты.
|
||
- `src/api/` — API-клиенты и типизация ответов бэкенда.
|
||
- `src/store/` — Zustand-хранилища. |