# Blog Limit 문제 분석 작업

## 날짜
2025-11-28

## 문제 상황
- 로컬에서는 WordPress API와 잘 연결되어 static pages를 만듦
- Vercel에 업로드하면 WordPress에서 403 에러 반환
- Workaround: `/revalidate` API route를 통해 static pages 재생성
- **문제**: 10 페이지로 한정됨 (100개를 기대했으나 10개만 생성)

## 작업 목표
/revalidate route가 item count를 100으로 잘 전달하고 있는지 확인

## 진행 상황

### 1. 프로젝트 구조 파악 ✓
- 프로젝트 위치: `PlanitAI_Inc_website/nextjs`
- Next.js App Router 방식 사용
- API route: `app/api/revalidate/route.ts`
- WordPress API 호출: `lib/api.ts`

### 2. /revalidate API route 분석 ✓
파일: `PlanitAI_Inc_website/nextjs/app/api/revalidate/route.ts`

**역할**:
- Next.js 캐시를 무효화하는 역할
- `revalidateTag('posts')` 호출로 posts 태그가 달린 캐시 무효화
- `revalidatePath()` 호출로 특정 경로 캐시 무효화
- WordPress API를 직접 호출하지 않음

**문제점**:
- `/revalidate`는 캐시 무효화만 하고, WordPress API 호출은 하지 않음
- 실제 데이터 fetch는 다른 곳에서 일어남

### 3. WordPress API 호출 코드 분석 ✓
파일: `PlanitAI_Inc_website/nextjs/lib/api.ts`

**발견 사항**:

1. `fetchAllPosts()` (line 223-267):
   ```typescript
   const res = await fetch(`${apiBase}/posts?_embed&per_page=100`);
   ```
   - ✓ `per_page=100` 파라미터가 설정되어 있음
   - 이 함수는 최대 100개의 포스트를 가져오도록 설정됨

2. `getAllPosts` (line 272-276):
   ```typescript
   export const getAllPosts = unstable_cache(
     fetchAllPosts,
     ['all-posts'],
     { tags: ['posts'] }
   );
   ```
   - `unstable_cache`로 캐시됨
   - `tags: ['posts']` 설정으로 /revalidate에서 무효화 가능

3. 다른 함수들:
   - `getPostsByCategory`: per_page 파라미터 없음 (기본값 10)
   - `getPostBySlug`: 단일 포스트만 가져옴
   - `getPostById`: 단일 포스트만 가져옴

### 4. getAllPosts() 호출 위치 확인 ✓

확인한 페이지들:
- `/blogs/page.tsx` (line 77): `const allPosts = await getAllPosts();`
- `/news/page.tsx` (line 87): `const allPosts = await getAllPosts();`
- 기타 카테고리별 페이지들도 동일하게 사용

**결론**: 모든 목록 페이지에서 `getAllPosts()`를 사용하고 있음

### 5. 동적 라우트 페이지 분석 ✓

확인한 파일:
- `/blogs/[slug]/page.tsx`: **클라이언트 컴포넌트** (`"use client"`)
- `/news/[slug]/page.tsx`: **클라이언트 컴포넌트** (`"use client"`)

**문제점 발견**:
- 두 페이지 모두 클라이언트 컴포넌트로만 작성됨
- `generateStaticParams` 함수가 없음
- `useQuery`를 사용하여 런타임에 데이터를 동적으로 가져옴

### 6. 빌드 테스트 결과 ✓

빌드 로그: `20251128-check-blog-limit/build.log`

**중요 발견**:
```
Route (app)                         Size  First Load JS
├ ƒ /blogs/[slug]                2.76 kB         205 kB
├ ƒ /news/[slug]                 2.87 kB         205 kB

ƒ  (Dynamic)  server-rendered on demand
```

- 동적 라우트가 **Dynamic**으로 표시됨 (server-rendered on demand)
- 빌드 시 static pages가 생성되지 않음
- 총 16개의 static pages만 생성됨 (목록 페이지, 홈, 회사 소개 등)

## 원인 분석

### 근본 원인
1. **동적 라우트가 클라이언트 컴포넌트로만 작성됨**
   - Next.js App Router에서 static generation을 위해서는 서버 컴포넌트가 필요
   - 또는 클라이언트 컴포넌트라도 `generateStaticParams` 함수 필요

2. **빌드 시 static pages가 생성되지 않음**
   - 로컬에서는 개발 모드로 실행되어 요청 시마다 데이터를 가져옴
   - Vercel에서는 빌드 시 WordPress API 호출 시 403 에러 발생 가능

3. **"10 페이지로 한정" 문제의 실체**
   - 목록 페이지(`/blogs`, `/news`)에서 `getAllPosts()`를 호출하여 포스트 목록 표시
   - `getAllPosts()`는 `per_page=100`으로 설정되어 있으나, 실제로는 10개만 반환되는 것으로 추정

### 7. WordPress API 직접 호출 테스트 ✓

테스트 결과 파일: `20251128-check-blog-limit/api-test-per_page_100.txt`, `api-response.json`

**테스트 명령**:
```bash
curl "https://2025032623012012057904.onamaeweb.jp/blog/wp-json/wp/v2/posts?per_page=100&_embed"
```

**결과**:
- 총 **12개**의 포스트가 반환됨 (per_page=100으로 요청했지만)
- 카테고리별 분포:
  - `category-latest-ai-news`: 8개
  - `category-tech-blog`: 3개
  - `category-uncategorized`: 1개 (Hello world!)

**중요 발견**:
- WordPress에 현재 존재하는 포스트는 총 12개
- `lib/api.ts`의 `getAllPosts()`는 `per_page=100`으로 올바르게 설정되어 있음
- API는 정상적으로 12개 모두 반환함
- `uncategorized` 포스트는 `subCategory`가 없어서 필터링됨 (lib/api.ts:262)
- 결과적으로 표시되는 포스트는 **11개**

### 8. 함수 사용 현황 확인 ✓

- `getAllPosts()`: 모든 목록 페이지에서 사용 (per_page=100 설정됨)
- `getPostsByCategory()`: 정의만 되어 있고 실제로 호출되는 곳이 없음 (per_page 파라미터 없음)

## 최종 결론

### 현재 상태
1. **WordPress API 호출은 정상 작동**
   - `getAllPosts()`는 `per_page=100`으로 올바르게 설정되어 있음
   - API는 존재하는 모든 포스트(12개)를 반환함
   - 필터링 후 11개의 포스트가 표시됨

2. **"10 페이지로 한정" 문제에 대한 분석**
   - 현재 WordPress에는 12개의 포스트만 존재
   - 코드상으로는 `per_page=100` 설정이 올바르게 되어 있음
   - 사용자가 언급한 "10 페이지"가 정확히 무엇을 의미하는지 명확하지 않음

   **가능한 해석**:
   - a) 예전에 더 많은 포스트가 있었고, 그때 10개만 표시되었을 수 있음
   - b) 다른 환경(Vercel 등)에서 10개로 제한되었을 수 있음
   - c) `getPostsByCategory()` 함수가 예전에 사용되었고, 이 함수는 per_page 파라미터가 없어서 기본값 10을 사용했을 수 있음

3. **Vercel 403 에러 문제**
   - 빌드 시 WordPress API 호출 시 403 에러 발생
   - 동적 라우트가 클라이언트 컴포넌트로만 작성되어 있어 static generation이 안 됨
   - `/revalidate`는 캐시 무효화만 하고, 실제 페이지 생성은 요청 시 발생

### 9. getPostsByCategory() 함수 수정 ✓

**수정 내용**:
- `lib/api.ts:121`에 `per_page=100` 파라미터 추가
- 수정 전: `${apiBase}/posts?categories=${categoryId}&_embed`
- 수정 후: `${apiBase}/posts?categories=${categoryId}&_embed&per_page=100`

### 10. WordPress API 최대 반환 개수 확인 ✓

**테스트 결과**:
```
x-wp-total: 12
x-wp-totalpages: 1
```

- WordPress API는 `per_page=100` 요청을 정상적으로 처리
- 총 12개의 포스트를 1페이지에 모두 반환
- **로컬 환경에서는 정상 작동**

### Vercel에서 10개로 제한되는 문제

**가능한 원인**:
1. **캐시 문제**: Vercel에 캐시된 이전 데이터가 10개만 있을 수 있음
2. **빌드 시점 문제**: 빌드 당시 WordPress에 10개만 있었을 수 있음
3. **WordPress 설정**: "Settings > Reading > Blog pages show at most" 설정이 10으로 되어 있을 수 있음

**권장 조치**:
1. Vercel에서 완전 재배포 (Clean build)
2. `/revalidate` API를 호출하여 캐시 무효화
3. Vercel 배포 로그에서 빌드 시 WordPress API 호출 결과 확인
4. WordPress 관리자 페이지에서 "Settings > Reading" 설정 확인