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

📋 개요

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

🔍 발견된 문제점

1. 데이터베이스 스키마 문제

USER_LIST 테이블에 RATING 컬럼이 없어 SQL 오류 발생
여러 모델에서 u.RATING 필드를 참조하고 있음

2. API 엔드포인트 불일치

프론트엔드: /api/vendor-influencer/approve 호출
백엔드: 해당 엔드포인트 없음 (기존에는 process-request 사용)

3. 응답 데이터 구조 불일치

프론트엔드에서 기대하는 응답 구조와 백엔드 실제 응답 구조 차이

🛠️ 작업 순서

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

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

실행 명령:

mysql -h [DB_HOST] -u [DB_USER] -p [DB_NAME] < ddl/012_add_rating_column.sql

확인 방법:

DESC USER_LIST;
-- RATING DECIMAL(3,1) DEFAULT 0.0 컬럼이 있는지 확인

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

2-1. 라우팅 추가

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

2-2. 컨트롤러 메서드 추가

VendorController::approveInfluencerRequest() 메서드 추가
프론트엔드 파라미터 형식에 맞춤 (action: 'APPROVE'/'REJECT')

3단계: 테스트 및 검증

3-1. 기본 기능 테스트

# 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. 프론트엔드 페이지 테스트

벤더사 대시보드 테스트
- URL: http://localhost:3000/view/vendor/dashboard/influencer-requests
- 확인사항:
  - 인플루언서 요청 목록 로딩
  - 통계 카드 표시
  - 승인/거부 버튼 동작
인플루언서 검색 페이지 테스트
- 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 스크립트를 먼저 실행한 후 백엔드 서버를 재시작하세요.

# 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에서 상세한 에러 로깅
프론트엔드 친화적인 에러 메시지
상태 코드 표준화

🔄 롤백 방법

만약 문제가 발생할 경우:

데이터베이스 롤백

-- RATING 컬럼 제거 (필요시)
ALTER TABLE USER_LIST DROP COLUMN RATING;
DROP INDEX idx_user_rating ON USER_LIST;

백엔드 롤백

git checkout HEAD~1 backend/app/Config/Routes.php
git checkout HEAD~1 backend/app/Controllers/VendorController.php

✅ 검증 체크리스트

필수 확인사항

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

성능 확인사항

API 응답 시간 300ms 이하
대량 데이터 처리 성능 이상 없음
메모리 사용량 급증 없음

📞 문제 발생 시 대응

DDL 실행 오류
- 테이블 권한 확인
- 데이터베이스 연결 상태 확인
- 기존 RATING 컬럼 존재 여부 확인
API 호출 오류
- 라우팅 설정 재확인
- 컨트롤러 메서드 존재 확인
- 로그 파일에서 상세 에러 확인
프론트엔드 연동 오류
- 브라우저 개발자 도구 네트워크 탭 확인
- API 응답 데이터 구조 확인
- CORS 설정 확인

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

2024-12-22-백엔드-프론트엔드-완전통합-가이드.md 5.2 KB Historia Raaka