# Архитектура 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 ` из `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-хранилища.