# 백엔드-프론트엔드 완전 통합 가이드

## 📋 개요

프론트엔드 페이지 분석을 통해 백엔드 API 구조를 완전히 프론트엔드 요구사항에 맞게 수정하는 작업입니다.

## 🔍 발견된 문제점

### 1. 데이터베이스 스키마 문제
- `USER_LIST` 테이블에 `RATING` 컬럼이 없어 SQL 오류 발생
- 여러 모델에서 `u.RATING` 필드를 참조하고 있음

### 2. API 엔드포인트 불일치
- 프론트엔드: `/api/vendor-influencer/approve` 호출
- 백엔드: 해당 엔드포인트 없음 (기존에는 `process-request` 사용)

### 3. 응답 데이터 구조 불일치
- 프론트엔드에서 기대하는 응답 구조와 백엔드 실제 응답 구조 차이

## 🛠️ 작업 순서

### 1단계: 데이터베이스 스키마 수정 ⚠️ **먼저 실행 필요**

```sql
-- ddl/012_add_rating_column.sql 실행
-- USER_LIST 테이블에 RATING 컬럼 추가
```

**실행 명령:**
```bash
mysql -h [DB_HOST] -u [DB_USER] -p [DB_NAME] < ddl/012_add_rating_column.sql
```

**확인 방법:**
```sql
DESC USER_LIST;
-- RATING DECIMAL(3,1) DEFAULT 0.0 컬럼이 있는지 확인
```

### 2단계: 백엔드 API 구조 수정 ✅ **완료됨**

#### 2-1. 라우팅 추가
- [x] `backend/app/Config/Routes.php`에 `/api/vendor-influencer/approve` 엔드포인트 추가
- [x] 기존 라우팅 정리 및 그룹화

#### 2-2. 컨트롤러 메서드 추가
- [x] `VendorController::approveInfluencerRequest()` 메서드 추가
- [x] 프론트엔드 파라미터 형식에 맞춤 (`action`: 'APPROVE'/'REJECT')

### 3단계: 테스트 및 검증

#### 3-1. 기본 기능 테스트
```bash
# 1. 벤더사 로그인 후 인플루언서 요청 목록 확인
curl -X POST http://localhost:8080/api/vendor-influencer/requests \
  -H "Content-Type: application/json" \
  -d '{"vendorSeq": 1, "page": 1, "size": 20}'

# 2. 승인 처리 테스트
curl -X POST http://localhost:8080/api/vendor-influencer/approve \
  -H "Content-Type: application/json" \
  -d '{
    "mappingSeq": 1,
    "action": "APPROVE",
    "processedBy": 1,
    "responseMessage": "승인합니다"
  }'
```

#### 3-2. 프론트엔드 페이지 테스트
1. **벤더사 대시보드 테스트**
   - URL: `http://localhost:3000/view/vendor/dashboard/influencer-requests`
   - 확인사항: 
     - 인플루언서 요청 목록 로딩
     - 통계 카드 표시
     - 승인/거부 버튼 동작

2. **인플루언서 검색 페이지 테스트**
   - URL: `http://localhost:3000/view/influencer/search`
   - 확인사항:
     - 벤더사 목록 로딩
     - 승인요청 기능
     - 재승인요청 기능

## 📁 수정된 파일 목록

### DDL 스크립트
- `ddl/012_add_rating_column.sql` ✨ **신규생성**

### 백엔드 파일
- `backend/app/Config/Routes.php` ✏️ **수정완료**
- `backend/app/Controllers/VendorController.php` ✏️ **수정완료**

### 프론트엔드 파일 (이미 존재)
- `pages/view/vendor/dashboard/influencer-requests.vue`
- `pages/view/vendor/dashboard/index.vue`
- `pages/view/influencer/search.vue`
- `pages/view/influencer/[id].vue`

## 🚨 주의사항

### 1. 데이터베이스 작업 순서
**반드시 DDL 스크립트를 먼저 실행한 후 백엔드 서버를 재시작하세요.**

```bash
# 1. DDL 실행
mysql -h [HOST] -u [USER] -p [DATABASE] < ddl/012_add_rating_column.sql

# 2. 백엔드 서버 재시작
cd backend
php spark serve --host=0.0.0.0 --port=8080
```

### 2. 기존 기능 안전성 보장
- 기존 API 엔드포인트는 그대로 유지
- 새로운 엔드포인트 추가 방식으로 구현
- 호환성 라우팅을 통해 점진적 이전 가능

### 3. 에러 처리 강화
- 모든 API에서 상세한 에러 로깅
- 프론트엔드 친화적인 에러 메시지
- 상태 코드 표준화

## 🔄 롤백 방법

만약 문제가 발생할 경우:

### 데이터베이스 롤백
```sql
-- RATING 컬럼 제거 (필요시)
ALTER TABLE USER_LIST DROP COLUMN RATING;
DROP INDEX idx_user_rating ON USER_LIST;
```

### 백엔드 롤백
```bash
git checkout HEAD~1 backend/app/Config/Routes.php
git checkout HEAD~1 backend/app/Controllers/VendorController.php
```

## ✅ 검증 체크리스트

### 필수 확인사항
- [ ] DDL 스크립트 실행 완료
- [ ] 백엔드 서버 정상 시작
- [ ] 프론트엔드 컴파일 오류 없음
- [ ] 벤더사 대시보드 정상 로딩
- [ ] 인플루언서 검색 페이지 정상 로딩
- [ ] 승인/거부 기능 정상 동작

### 성능 확인사항
- [ ] API 응답 시간 300ms 이하
- [ ] 대량 데이터 처리 성능 이상 없음
- [ ] 메모리 사용량 급증 없음

## 📞 문제 발생 시 대응

1. **DDL 실행 오류**
   - 테이블 권한 확인
   - 데이터베이스 연결 상태 확인
   - 기존 RATING 컬럼 존재 여부 확인

2. **API 호출 오류**
   - 라우팅 설정 재확인
   - 컨트롤러 메서드 존재 확인
   - 로그 파일에서 상세 에러 확인

3. **프론트엔드 연동 오류**
   - 브라우저 개발자 도구 네트워크 탭 확인
   - API 응답 데이터 구조 확인
   - CORS 설정 확인

---

**작업 완료 예상 시간:** 30분 (DDL 실행 5분 + 테스트 25분)  
**리스크 레벨:** 낮음 (기존 기능 유지하며 추가만 진행)  
**우선순위:** 높음 (프론트엔드 오류 해결 필수)