🔗 Frontend ↔ Backend API 연결 맵
시스템 아키텍처
Frontend
- • Nuxt 3 (Vue 3)
- • TypeScript
- • Tailwind CSS
- • Composition API
- • Port: 3000-3003
⟷
HTTP/HTTPS
REST API
JSON
Backend
- • Laravel 11
- • PHP 8.2+
- • MariaDB
- • Sanctum Auth
- • Port: 8000
Frontend Composables (API 클라이언트)
useAuth.ts
인증 관련 API
- ✓ login() → POST /api/v1/auth/login
- ✓ register() → POST /api/v1/auth/register
- ✓ logout() → POST /api/v1/auth/logout
- ✓ getUser() → GET /api/v1/auth/user
- ✓ updateProfile() → PUT /api/v1/auth/profile
useAdmin.ts
관리자 기능 API (23 메서드)
- ✓ User Management (8개)
- ✓ Product Management (7개)
- ✓ Analytics (4개)
- ✓ System Health (4개)
🔐Authentication APIs (14개)
| Method | Endpoint | Frontend | 설명 |
|---|---|---|---|
| POST | /api/v1/auth/register | pages/auth/register.vue | 회원가입 |
| POST | /api/v1/auth/login | pages/auth/login.vue | 로그인 |
| POST | /api/v1/auth/logout | useAuth.logout() | 로그아웃 |
| GET | /api/v1/auth/user | useAuth.getUser() | 현재 사용자 정보 |
| PUT | /api/v1/auth/profile | pages/profile.vue | 프로필 수정 |
| PUT | /api/v1/auth/password | pages/profile.vue | 비밀번호 변경 |
| POST | /api/v1/auth/forgot-password | (미구현) | 비밀번호 찾기 |
| POST | /api/v1/auth/reset-password | (미구현) | 비밀번호 재설정 |
👥Admin User Management (8개)
| Method | Endpoint | Frontend | 설명 |
|---|---|---|---|
| GET | /api/v1/admin/users | pages/admin/users.vue | 사용자 목록 (페이지네이션) |
| GET | /api/v1/admin/users/statistics | useAdmin.getUserStatistics() | 사용자 통계 |
| GET | /api/v1/admin/users/:id | useAdmin.getUserById() | 사용자 상세 정보 |
| POST | /api/v1/admin/users | useAdmin.createUser() | 사용자 생성 |
| PUT | /api/v1/admin/users/:id | useAdmin.updateUser() | 사용자 수정 |
| DELETE | /api/v1/admin/users/:id | useAdmin.deleteUser() | 사용자 삭제 |
| PATCH | /api/v1/admin/users/:id/role | pages/admin/users.vue | 사용자 역할 변경 |
| PATCH | /api/v1/admin/users/:id/status | pages/admin/users.vue | 사용자 상태 변경 |
📦Admin Product Management (7개)
| Method | Endpoint | Frontend | 설명 |
|---|---|---|---|
| GET | /api/v1/admin/products | useAdmin.getProducts() | 제품 목록 (페이지네이션) |
| GET | /api/v1/admin/products/statistics | useAdmin.getProductStatistics() | 제품 통계 |
| GET | /api/v1/admin/products/:id | useAdmin.getProductById() | 제품 상세 정보 |
| POST | /api/v1/admin/products | useAdmin.createProduct() | 제품 생성 |
| PUT | /api/v1/admin/products/:id | useAdmin.updateProduct() | 제품 수정 |
| DELETE | /api/v1/admin/products/:id | useAdmin.deleteProduct() | 제품 삭제 |
| PATCH | /api/v1/admin/products/:id/status | useAdmin.updateProductStatus() | 제품 상태 변경 |
📊Analytics & System Health (4개)
| Method | Endpoint | Frontend | 설명 |
|---|---|---|---|
| GET | /api/v1/admin/analytics/overview | pages/admin/index.vue | 대시보드 개요 |
| GET | /api/v1/admin/analytics/users | useAdmin.getAnalyticsUsers() | 사용자 분석 |
| GET | /api/v1/admin/analytics/products | useAdmin.getAnalyticsProducts() | 제품 분석 |
| GET | /api/v1/admin/analytics/system-health | pages/connection-test.vue | 시스템 상태 |
🛍️Public Product APIs (6개)
| Method | Endpoint | Frontend | 설명 |
|---|---|---|---|
| GET | /api/v1/product-tree | pages/products/index.vue | 제품 트리 (카테고리+제품) |
| GET | /api/v1/categories | (공용) | 카테고리 목록 |
| GET | /api/v1/categories/:id | (공용) | 카테고리 상세 |
| GET | /api/v1/products | (공용) | 제품 목록 |
| GET | /api/v1/products/:slug | pages/products/[slug].vue | 제품 상세 |
| GET | /api/v1/product-families/:code | (공용) | 제품 패밀리 정보 |
데이터 흐름 (Data Flow)
1. 인증 흐름
로그인 페이지 → useAuth.login() → POST /api/v1/auth/login → 토큰 저장 → 대시보드 리다이렉트
2. 제품 목록 조회
제품 페이지 → GET /api/v1/product-tree → 카테고리/제품 데이터 → 화면 렌더링
3. 관리자 사용자 관리
Admin Users 페이지 → useAdmin.getUsers() → GET /api/v1/admin/users → 테이블 렌더링 → 상태 변경 → PATCH /api/v1/admin/users/:id/status
보안 (Security)
인증 (Authentication)
- • Laravel Sanctum Token 기반
- • Bearer Token in Authorization Header
- • 로그인 시 토큰 발급 및 localStorage 저장
- • 모든 보호된 API에 토큰 필수
권한 (Authorization)
- • 역할 기반 접근 제어 (RBAC)
- • super_admin, admin, editor, viewer
- • Admin 미들웨어로 관리자 전용 라우트 보호
- • 프론트엔드 라우트 가드 (middleware/admin.ts)
CORS
- • 모든 출처 허용 (개발 환경)
- • credentials: true (쿠키 허용)
- • 프로덕션에서는 특정 도메인만 허용 필요
데이터 검증
- • Laravel Request Validation
- • TypeScript 타입 체크
- • SQL Injection 방지 (Eloquent ORM)
- • XSS 방지 (자동 이스케이핑)
연결 요약
33+
Total Endpoints
2
Composables
10+
Pages/Components
100%
Connection Rate