---
alwaysApply: true
---


- api 서버는 코드이그나이터4 베이스의 벡엔드 기술로 구현되어있으며
  기존 문서에사용되는 양식을 지키며 구현
- 프론트에서 api신규 생성시 백엔드 코드이그나4 기반의 기술로 구현하는 예제를 함께 제공
- 항상 페이지 구성이 완료되고 나면 제작에 필요한 쿼리를 DDL형태로 구성해서 ddl폴더에 만들어줘
- api구성후 백엔드 예제를 backend-examples에 코드이그나이터4 형태로 구성해줘
- MD파일을 생성해서 백엔드 구성과 DB생성을 하는 과정을 순서대로 작성해줘
- 프론트화면 및 UI / API 구성시에는 항상 composition api 형태로 작성 css는 항상 scss형태로 분리해서 구성

## 프론트엔드 API 호출 규칙
- **Nuxt.js server/api 사용 금지**: 프론트엔드에서 직접 백엔드 API 호출
- **useAxios() 패턴 강제**: 기존 코드베이스와 일관성 유지
- 반드시 다음 형태로 구성:
```javascript
const loadData = async () => {
  try {
    const params = {
      // 파라미터들...
    }

    useAxios()
      .post('/api/endpoint', params)
      .then((res) => {
        if (res.data.success) {
          // 성공 처리
          data.value = res.data.data
        } else {
          // 실패 처리
          error.value = res.data.message
        }
      })
      .catch((err) => {
        // 에러 처리
        error.value = err.message
      })
      .finally(() => {
        // 완료 처리
        loading.value = false
      })

  } catch (err) {
    error.value = err.message
  }
}
```

## API 구조 금지사항
- **server/api 디렉토리 생성 금지**: Nuxt.js 서버 API 사용하지 않음
- **mysql2, 데이터베이스 라이브러리 사용 금지**: 프론트엔드에서 직접 DB 연결 금지
- **$fetch 사용 금지**: useAxios() 패턴만 사용
- **async/await 패턴 지양**: .then().catch().finally() 체인 사용

## 백엔드 연동 방식
- 프론트엔드 → CodeIgniter4 백엔드 직접 호출
- useAxios()를 통한 HTTP 통신만 사용
- 응답 형태: `res.data.success`, `res.data.data`, `res.data.message`
- 백엔드는 직접 만들거야 다만 너가 backend-examples 폴더에 프론트와 수신할수는있는 형태의 api예제를 만들어