24 lines
2.2 KiB
Markdown
24 lines
2.2 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. Если нужен сложный компонент (модалка, селект) — используем паттерны `shadcn/ui`.
|
||
|
||
## 2. Управление состоянием (State Management)
|
||
- **Локальный стейт:** `useState` / `useReducer` для состояния UI (открытые меню, табы).
|
||
- **Глобальный стейт:** Строго `Zustand` (директория `src/store/`).
|
||
- `authStore`: Хранит JWT-токен и данные профиля (persist in localStorage).
|
||
- `cartStore`: Хранит выбранные `seat_id` и считает итоговую сумму (totalPrice).
|
||
|
||
## 3. Работа с API и Сетью
|
||
- **Клиент:** Axios инстанс (`src/api/client.ts`).
|
||
- **Авторизация:** Интерсептор автоматически добавляет `Authorization: Bearer <token>` из `authStore`.
|
||
- **Роутинг к Бэкенду:** Base URL указывает на API-шлюз бэкенда.
|
||
- **Обработка ошибок:** Все сетевые запросы должны оборачиваться в `try/catch`. 401 ошибка должна разлогинивать юзера и чистить `authStore`. 409 ошибка (Conflict) обрабатывается локально в компонентах (например, при захвате мест).
|
||
|
||
## 4. Структура директорий
|
||
- `src/app/` — Роутинг (Pages, Layouts).
|
||
- `src/components/` — Переиспользуемые UI компоненты (Кнопки, Карточки, SVG-схемы).
|
||
- `src/api/` — API-клиенты и типизация ответов бэкенда.
|
||
- `src/store/` — Zustand-хранилища. |