# 프롬프트 및 대화 기록

## 작업 정보
- **날짜**: 2025-11-27
- **작업 디렉토리**: `20251127-check-tech-blog-item-count`
- **목적**: 블로그 포스트 표시 누락 문제 조사 및 해결

---

## 프롬프트 1: 작업 시작

**사용자**:
```
작업드렉토리 20251127-check-tech-blog-item-count 를 만들고 작업을 시작합시다.
PlanitAI_Inc_website 가 code base 입니다.
https://www.planitai.co.jp/blogs 의 아이템 수가 2 개 밖에 안나옵니다.
wordpress에는 3개가 있다고 생각합니다.
이 부분 체크해주세요
```

**Assistant 작업**:
- 작업 디렉토리 생성
- Todo 리스트 작성 (5개 태스크)
- 웹사이트 확인 → 2개 포스트 확인
- 코드베이스 위치 확인 시도

---

## 프롬프트 2: 코드베이스 위치 명시

**사용자**:
```
web 은 vercel 에 업로드 하고 있으며
/var/www/tkim.planitai.co.jp/blog/PlanitAI_Inc_website/nextjs 라고 생각합니다.
```

**Assistant 작업**:
- 지정된 경로에서 코드베이스 탐색
- 블로그 관련 파일 검색 (Glob 사용)
- 발견한 파일들:
  - `components/blogs-card.tsx`
  - `components/pages/top-page/blogs-section.tsx`
  - `app/blogs/page.tsx`
  - `lib/api.ts`

---

## 프롬프트 3: WordPress API 조사

**Assistant 작업**:
- `lib/api.ts` 파일 읽기
- WordPress API 호출 로직 분석
- WordPress API 직접 호출 시도
- `.env` 파일에서 API URL 찾기 시도
- Contact form URL에서 WordPress 도메인 발견:
  - `https://2025032623012012057904.onamaeweb.jp/blog/wp-json/`

**발견 사항**:
- WordPress API에서 3개 포스트 반환:
  - Post 83 (Tech Blog)
  - Post 75 (AI News)
  - Post 68 (Tech Blog)
- `/blogs` 페이지는 "テックブログ"만 필터링
- Post 75는 AI News 카테고리이므로 `/blogs/ai`에 표시됨
- **결론**: 시스템이 정상 작동 중 (의도된 동작)

---

## 프롬프트 4: 실제 문제 포스트 명시

**사용자**:
```
보이지 않는 포스트는
https://2025032623012012057904.onamaeweb.jp/blog/wp-admin/post.php?post=22
입니다. 이는
https://www.planitai.co.jp/api/revalidate?secret=LWCTd22HKmCa8uNqOvaoTYlXoNONFVlhx
을 호출했을 때, 모든 페이지가 획득되지 않기 때문인가요?
```

**Assistant 작업**:
- Post 22 개별 조회: 성공 ✅
  - Status: "publish"
  - Category: "tech-blog"
  - Title: "AIと共に働くということ"
  - Date: 2025-11-18
- WordPress API 목록 조회: Post 22 없음 ❌
- Revalidate API 코드 확인: 정상 작동 ✅

**발견 사항**:
- Post 22는 존재하지만 목록 API에서 반환되지 않음
- Revalidate API는 정상 작동
- 문제는 WordPress API가 Post 22를 반환하지 않는 것

**초기 가설**:
- Sticky Post 설정
- Featured Image 누락
- Visibility 문제
- WordPress 캐싱 플러그인

---

## 프롬프트 5: WordPress API 사양 확인

**사용자**:
```
wordpress 의 사양을 확인하고 싶습니다.
/wp-json/wp/v2/posts?_embed 에 아이템 수를 지정하거나, 다음 페이지를 요청하거나 할 수 있나요?
```

**Assistant 작업**:
- WordPress REST API 페이지네이션 테스트
- `per_page` 파라미터 테스트
- **중요 발견**: `per_page=100`으로 요청 시 13개 포스트 반환!

```bash
curl "/wp-json/wp/v2/posts?per_page=100"
# 결과: 13개 포스트 (Post 22 포함!)
```

**근본 원인 발견**:
- 기본 `per_page` 값이 10 이하
- Post 22는 11번째 포스트
- 따라서 기본 쿼리에서 제외됨

**WordPress API 헤더 확인**:
```
X-WP-Total: 13
X-WP-TotalPages: 2 (기본 per_page)
X-WP-TotalPages: 1 (per_page=100)
```

---

## 프롬프트 6: per_page 최대값 확인

**사용자**:
```
/wp-json/wp/v2/posts?_embed 에 사용할 수 있는 per_page 의 max 값은 얼마인가요?
```

**Assistant 작업**:
- `per_page=100` 테스트: 성공 ✅
- `per_page=200` 테스트: 에러 ❌
- `per_page=500` 테스트: 에러 ❌

**WordPress 에러 메시지**:
```json
{
  "code": "rest_invalid_param",
  "message": "per_page は1以上、100以下でなければなりません。"
}
```

**결론**:
- **최소값**: 1
- **최대값**: 100
- **기본값**: 10 (WordPress 설정 의존)

---

## 프롬프트 7: 코드 수정 요청

**사용자**:
```
그럼 우선
const res = await fetch(`${apiBase}/posts?_embed&per_page=100`);
으로 수정합시다
```

**Assistant 작업**:
- `/lib/api.ts:232` 수정
- 변경 내용:
  ```typescript
  // 변경 전
  const res = await fetch(`${apiBase}/posts?_embed`);

  // 변경 후
  const res = await fetch(`${apiBase}/posts?_embed&per_page=100`);
  ```

---

## 프롬프트 8: 배포 정보 확인

**사용자**:
```
commit 하고 push하면 배포됩니다.
```

**Assistant 작업**:
- Git 상태 확인
- 변경 사항 확인
- Git add, commit, push 실행

**Git 작업**:
```bash
git add lib/api.ts
git commit -m "fix: WordPress APIからすべての投稿を取得するためper_page=100を追加"
git pull --rebase  # 리모트 변경사항 머지
git push origin main  # 성공!
```

**Commit 정보**:
- SHA: 576ae20
- 브랜치: main
- 상태: Push 완료

---

## 프롬프트 9: Revalidate 수동 실행

**사용자**:
```
revalidate API 는 수동으로 호출하겠습니다.
```

**Assistant 작업**:
- 작업 요약 제공
- 다음 단계 안내
- Revalidate API 호출 명령어 제공

---

## 프롬프트 10: 문서 작성 요청

**사용자**:
```
작업디렉토리에 progress.md 와 prompts.md 를 작성해주세요
```

**Assistant 작업**:
- `progress.md` 작성 (작업 진행 상황 타임라인)
- `prompts.md` 작성 (현재 파일)

---

## 작업 흐름 요약

```
1. 문제 보고
   ↓
2. 웹사이트 확인 (2개만 표시)
   ↓
3. 코드베이스 탐색
   ↓
4. WordPress API 조사 (3개 반환)
   ↓
5. Post 22 개별 확인 (존재함)
   ↓
6. 페이지네이션 테스트 (per_page=100 → 13개!)
   ↓
7. 근본 원인 발견 (기본 per_page가 10 이하)
   ↓
8. 코드 수정 (per_page=100 추가)
   ↓
9. Git commit & push
   ↓
10. 배포 대기 & 검증 예정
```

---

## 핵심 인사이트

### 1. 문제 진단 접근법
- **Top-down 접근**: 웹사이트 → 코드 → API → 개별 리소스
- **가설 검증**: 각 단계마다 가설 수립 및 검증
- **데이터 기반**: 실제 API 응답으로 문제 확인

### 2. WordPress REST API 특성
- 기본 `per_page`가 작을 수 있음 (주의 필요)
- 헤더에 페이지네이션 정보 포함
- 최대 100개까지만 한 번에 요청 가능

### 3. Next.js 캐싱 고려사항
- Static Generation 사용 시 캐시 관리 중요
- Revalidate API로 선택적 캐시 무효화
- WordPress와 Next.js 간 데이터 동기화 전략 필요

### 4. 디버깅 팁
- API 직접 호출로 문제 범위 좁히기
- 페이지네이션 파라미터 테스트
- 헤더 정보 확인으로 전체 데이터 크기 파악

---

## 기술 스택

### Frontend
- Next.js (App Router)
- TypeScript
- Tailwind CSS

### Backend / CMS
- WordPress REST API
- WordPress (https://2025032623012012057904.onamaeweb.jp/blog/)

### Deployment
- Vercel (자동 배포)
- GitHub (버전 관리)

### APIs
- WordPress REST API v2
- Custom Revalidate API

---

## 참고 링크

### 공식 문서
- [WordPress REST API - Posts](https://developer.wordpress.org/rest-api/reference/posts/)
- [Next.js Data Fetching](https://nextjs.org/docs/app/building-your-application/data-fetching)
- [Next.js Revalidating Data](https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating)

### 프로젝트 URL
- Website: https://www.planitai.co.jp/blogs
- WordPress Admin: https://2025032623012012057904.onamaeweb.jp/blog/wp-admin/
- GitHub: https://github.com/planitaicojp/PlanitAI_Inc_website

---

## 학습한 교훈

1. **항상 페이지네이션 고려**
   - 외부 API 호출 시 기본값 확인
   - 전체 데이터 크기 파악 후 적절한 파라미터 설정

2. **캐시 전략 명확화**
   - Static Generation + Revalidation 조합
   - WordPress 업데이트 시 Next.js 캐시 무효화 필요

3. **문서화의 중요성**
   - 조사 과정 기록으로 재발 방지
   - API 사양 문서화로 팀 공유

4. **단계별 검증**
   - 각 단계마다 가설 검증
   - 작은 문제부터 해결하며 진행

---

## 다음 작업 시 체크리스트

- [ ] Vercel 배포 완료 확인
- [ ] Revalidate API 호출
- [ ] 웹사이트에서 Post 22 표시 확인
- [ ] 100개 이상 포스트 시나리오 대비 검토
- [ ] WordPress Webhook으로 자동 Revalidation 고려
- [ ] 모니터링 및 알림 설정 검토

---

**작성 완료**: 2025-11-27
**작성자**: Claude Code