photoplaces/obsidian_data/Photoplaces_data/MOC-frontend-patterns.md

MOC: Фронтенд-паттерны и компоненты PhotoPlaces

Архитектура фронтенда

graph TB
    Next[Next.js 14 App Router] --> Pages[Pages]
    Next --> Components[Shared Components]
    Next --> Hooks[Custom Hooks]
    Components --> Modal[Modal]
    Components --> MapView[MapView + Leaflet]
    Components --> PlaceForm[PlaceForm]
    Hooks --> useAuth[AuthProvider + Context]
    Hooks --> useWebSocket[WebSocket]
    Pages --> API[api.ts: fetch wrapper]
    API --> Auth[Auto-refresh 401]
    API --> Backend[Go API :8080]

Ключевые компоненты

Компонент	Файл	Назначение
Modal (общий)	components/Modal.tsx	Переиспользуемая модалка, скроллбар внутри контента
MapView	components/MapView.tsx	Карта Leaflet + PlaceCardModal
PlaceForm	components/PlaceForm.tsx	Форма места / студии / услуги
PlaceCardModal	MapView.tsx (встроен)	Bottom-panel карточка места
LoginModal	components/LoginModal.tsx	Форма входа
RegisterModal	components/RegisterModal.tsx	Форма регистрации
AddLocationModal	components/AddLocationModal.tsx	Добавление места
ErrorBoundary	components/ErrorBoundary.tsx	Отлов ошибок рендера
ErrorReporter	components/ErrorReporter.tsx	Панель ошибок (debug)
MapPicker	components/MapPicker.tsx	Полноэкранный выбор координат
Header	components/Header.tsx	Навигация

Паттерны

Паттерн	Где	Заметка
Shared Modal с overflow-y-auto внутри	components/Modal.tsx	[[atomic-modal-scrollbar-inside]]
Ad-hoc модалки → общий компонент (DRY)	decision record	[[decision-modal-component-extraction]]
Auth через Context + custom hook	hooks/useAuth.tsx	[[frontend-api-client]]
Ghost markers для гостей	MapView.tsx:82-83	[[atomic-ghost-markers]]
Inline-редактирование + анимация кнопок	app/admin/tags/page.tsx	[[atomic-tag-admin-edit-delete]]
Diff-обновление маркеров (markerIdsRef)	MapView.tsx:70-87	[[architecture-overview]]
API client с auto-refresh токена	lib/api.ts	[[frontend-api-client]]
Error suppression (антипаттерн)	PlaceForm.tsx:42-43	[[atomic-error-swallowing-frontend]]
Fetch retry infinite loop (антипаттерн)	lib/api.ts:87	[[atomic-fetch-retry-infinite-loop]]
Координаты [lat,lng] консистентность	lib/map.ts	[[atomic-map-coordinates-inconsistency]]

Стек

• Фреймворк: Next.js 14 App Router
• Стили: Tailwind CSS (без CSS-модулей)
• Карты: Leaflet + OSM dark tiles
• Состояние: React Context (AuthProvider)
• API: Custom fetch wrapper (lib/api.ts)
• Тесты: Vitest + @testing-library/react

Code style

• Все компоненты — 'use client' (прямые функции, не классы)
• Нет выделенных CSS/SCSS-файлов — только Tailwind utility классы в JSX
• Импорты: @/ алиас → ./src/
• Комментарии на русском языке
• Нет сторонних UI-библиотек (MUI, Radix, Headless UI)

Антипаттерны (исправленные)

Проблема	Заметка
7 ad-hoc модалок	[[atomic-modal-scrollbar-inside]]
Подавление ошибок	[[atomic-error-swallowing-frontend]]
Retry loop на /auth/logout	[[atomic-fetch-retry-infinite-loop]]
Ghost markers — стиль разный от logged-in	[[atomic-ghost-markers]]
Типы не синхронизированы с backend	[[atomic-frontend-types-backend-sync]]

Связанные заметки

• [[architecture-overview]] — общий обзор
• [[frontend-api-client]] — API client и auth flow
• [[atomic-modal-scrollbar-inside]] — модалка со скроллбаром
• [[decision-modal-component-extraction]] — решение об извлечении Modal
• [[atomic-error-swallowing-frontend]] — подавление ошибок
• [[atomic-ghost-markers]] — ghost-маркеры на карте
• [[atomic-tag-admin-edit-delete]] — inline-редактирование и анимация кнопок в админке
• [[MOC-backend-patterns]] — бэкенд-паттерны
• [[MOC-security-patterns]] — безопасность

#frontend #react #nextjs #MOC #best-practice #components