# Featured Image Display Analysis - PlanitAI_Inc_website

> 분석 날짜: 2025-11-21

---

## 1. WHERE AND HOW FEATURED IMAGES ARE RENDERED

### Blog Post List Views:

#### Blog Cards (Main Blogs Page)
- **파일 위치**: `PlanitAI_Inc_website/nextjs/app/blogs/page.tsx:36-43`
- Featured image를 고정 `h-[230px]` 컨테이너에 표시
- Next.js `Image` 컴포넌트 사용 (`fill` 레이아웃, `object-cover` 클래스)
- Hover시 105% 확대 효과 포함

#### News Cards
- **파일 위치**: `PlanitAI_Inc_website/nextjs/app/news/page.tsx:55-62`
- Blog cards와 거의 동일한 구조
- `h-[230px]` 컨테이너, hover 확대 효과 동일

#### Home Page Blog Section
- **파일 위치**: `PlanitAI_Inc_website/nextjs/components/pages/top-page/blogs-section.tsx:64-72`
- `BlogsCard` 컴포넌트에 `imageSrc` prop 전달
- `h-44` 컨테이너에 rounded border로 표시

### Blog Detail Pages:

#### Blog Detail Page
- **파일 위치**: `PlanitAI_Inc_website/nextjs/app/blogs/[slug]/page.tsx:74-85`
- **⚠️ 현재 주석 처리되어 표시되지 않음**
- 활성화시 반응형 높이: `h-[230px] md:h-[330px] lg:h-[430px]`
- `Image` 컴포넌트 사용

#### News Detail Page
- **파일 위치**: `PlanitAI_Inc_website/nextjs/app/news/[slug]/page.tsx:84-96`
- **⚠️ 현재 주석 처리되어 표시되지 않음**
- Blog detail page와 동일한 반응형 높이 설정

### Content-Embedded Images:

#### WordPressContentRenderer
- **파일 위치**: `PlanitAI_Inc_website/nextjs/components/blogs/WordPressContentRenderer.tsx:90-151`
- WordPress block editor 콘텐츠 내 이미지 처리
- 두 가지 렌더링 시나리오:
  - **Figure 태그 이미지** (lines 90-126): `wp-block-image` 클래스 지원
  - **독립 img 태그** (lines 128-151): 직접 이미지 렌더링
- 이미지 컨테이너: `my-8 w-full overflow-hidden rounded-lg`, `aspect-video` 비율

---

## 2. HOW FEATURED IMAGES ARE STORED/REFERENCED

### Data Structure:

**파일 위치**: `PlanitAI_Inc_website/nextjs/lib/api.ts:34-44`

```typescript
export type Blog = {
  id: number;
  title: string;
  excerpt?: string;
  date: string;
  category: string;
  subCategory?: string;
  imageUrl?: string;  // Featured image URL
  url: string;
  slug?: string;
};
```

### Image URL Sources (우선순위 순서):

**파일 위치**: `PlanitAI_Inc_website/nextjs/lib/api.ts` (lines 123-126, 167-170, 245-248, 292-295)

1. **WordPress Featured Media (Embedded)**: `item._embedded?.["wp:featuredmedia"]?.[0]?.source_url`
   - WordPress REST API에서 `_embed` 파라미터로 가져옴
   - `getPostsByCategory()`, `getPostById()`, `getAllPosts()`, `getPostBySlug()`에서 사용

2. **Alternative Featured Media URL**: `item.featured_media_url`
   - Embedded 데이터를 사용할 수 없을 때 대체

3. **Default Fallback**: `/images/news/news-1.jpg`
   - 두 옵션 모두 사용 불가능할 때 사용

### API Fetch Configuration:

- **모든 API 엔드포인트에 `_embed` 파라미터 포함**
- 예시:
  - Line 112: `${apiBase}/posts?categories=${categoryId}&_embed`
  - Line 160: `${apiBase}/posts/${id}?_embed`
  - Line 229: `${apiBase}/posts?_embed`
  - Line 282: `${apiBase}/posts?slug=${slug}&_embed`

---

## 3. COMPONENTS HANDLING FEATURED IMAGE DISPLAY

### Direct Featured Image Components:

1. **BlogCard**
   - **파일**: `PlanitAI_Inc_website/nextjs/components/blogs/BlogCard.tsx`
   - Props: `BlogItem` 인터페이스 (`imageUrl` 포함)
   - Lines 15-20: Next.js Image 컴포넌트로 렌더링

2. **BlogsCard**
   - **파일**: `PlanitAI_Inc_website/nextjs/components/blogs-card.tsx`
   - Props: `imageSrc` (string), `imageAlt` (string)
   - Lines 33-40: 고정 크기 렌더링 (411x180)
   - 홈페이지 블로그 섹션에서 사용

3. **NewsCard**
   - **파일**: `PlanitAI_Inc_website/nextjs/components/news-card.tsx`
   - Props: `imageSrc`, `imageAlt`
   - Lines 30-35: `fill` 레이아웃으로 동적 크기 조정
   - 홈페이지 뉴스 표시에 사용

4. **BlogDetailsCard**
   - **파일**: `PlanitAI_Inc_website/nextjs/components/blogs/BlogDetailsCard.tsx`
   - 블로그 콘텐츠 렌더링 담당
   - Featured image를 직접 표시하지 않음; `WordPressContentRenderer` 사용

5. **NewsDetailsCard**
   - **파일**: `PlanitAI_Inc_website/nextjs/components/news/NewsDetailsCard.tsx`
   - BlogDetailsCard와 유사
   - 콘텐츠 중심; `WordPressContentRenderer` 사용

### Content Rendering Component:

**WordPressContentRenderer**
- **파일**: `PlanitAI_Inc_website/nextjs/components/blogs/WordPressContentRenderer.tsx`
- WordPress Gutenberg block editor 콘텐츠 전용 컴포넌트
- `wp-block-image` 및 `wp-block-figure` 클래스 처리 (lines 45, 91)
- URL 프로토콜 변환 처리 (lines 96-97, 131-132)
- 반응형 크기: `sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1024px"` (lines 114, 146)

---

## 4. CONFIGURATION & DATA STRUCTURE

### Environment Configuration:

**파일**: `PlanitAI_Inc_website/nextjs/env.example:4`

```
NEXT_PUBLIC_WP_API_BASE=https://your-wordpress-domain.com/api/wp/v2
```

### Image Proxy/Remote Pattern Configuration:

**파일**: `PlanitAI_Inc_website/nextjs/next.config.ts:5-28`

허용된 이미지 도메인:
- `https://planitai-wp.smacon.info` (구 WordPress 서버)
- `http://planitai-wp.smacon.info` (HTTP 폴백)
- `https://2025032623012012057904.onamaeweb.jp` (현재 WordPress 서버)
- `http://2025032623012012057904.onamaeweb.jp` (HTTP 폴백)
- `https://secure.gravatar.com` (아바타 이미지)

### Image Processing Logic:

`WordPressContentRenderer` (lines 96-97, 131-132):

```typescript
// WordPress 이미지의 http를 https로 변환
if (src.startsWith("http://planitai-wp.smacon.info")) {
  src = src.replace("http://", "https://");
}
```

### Layout Specifications:

- **Blog/News List Cards**: `h-[230px]` 고정 높이
- **Blog Detail Hero Image**: 반응형 높이 (`h-[230px] md:h-[330px] lg:h-[430px]`)
- **Content-Embedded Images**: `aspect-video` 비율, `w-full`
- **BlogsCard**: `h-44` (176px)

---

## Summary

PlanitAI_Inc_website의 Featured Image는:

1. **WordPress REST API에서 가져옴**: `_embed` 파라미터로 `_embedded["wp:featuredmedia"][0].source_url` 접근
2. **URL로 저장됨**: Blog/BlogItem 타입의 `imageUrl` 속성
3. **Next.js Image 컴포넌트로 렌더링**: 최적화를 위해 `fill` 레이아웃과 `object-cover` 스타일 사용
4. **여러 위치에 표시**: 리스트 카드, 홈페이지 섹션, (활성화시) 상세 페이지
5. **임베디드 콘텐츠 이미지는 별도 처리**: `WordPressContentRenderer`가 프로토콜 변환과 함께 처리
6. **반응형 및 최적화**: 적절한 크기 조정 전략과 폴백 이미지 제공

아키텍처는 featured image(포스트 메타데이터)와 콘텐츠 임베디드 이미지(WordPress 블록 콘텐츠)를 깔끔하게 분리하여 유연성과 유지보수성을 보장합니다.

---

## 주요 발견사항

⚠️ **블로그 및 뉴스 상세 페이지에서 featured image가 현재 주석 처리되어 있어 표시되지 않습니다.**
- `app/blogs/[slug]/page.tsx:74-85`
- `app/news/[slug]/page.tsx:84-96`