ticket-system/frontend-client/FRONTEND_ARCHITECTURE.md

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