쇼케이스 페이지 구현 (DS-02 시안 기반)

## 배경

DaleUI를 사용 중인 사례를 **기여자가 자기 프로젝트 URL만 등록하면**, 그 URL의 Open Graph(OG) 메타데이터를 자동으로 추출해 카드 형태로 그려주는 쇼케이스 페이지를 구현합니다. 데이터 스키마는 DS-02(#1025) 시안의 카드 props에서 도출합니다.

즉 OG는 **기여자가 손으로 채우는 입력 폼이 아니라, URL에서 긁어오는 데이터 소스**입니다. 기여 진입 장벽을 낮추는 것이 핵심입니다.

## 동작 방식 (빌드 타임 추출)

```
기여자: showcase 목록에 { url } 등록 (PR)
   ↓  (predev/prebuild)
빌드 스크립트: 각 url을 fetch → <head>의 og:* / twitter:* 파싱 → JSON 캐시로 저장
   ↓
라우트 loader: 생성된 JSON만 읽어 카드 렌더링 (런타임 외부 fetch 없음)
```

기존 `scripts/generate-og.mts`(빌드 타임에 결정적 산출물을 `public/`에 생성)와 동일한 철학입니다. 정적 배포 환경에서 런타임 CORS·타임아웃·실패 처리 부담이 없습니다.

**트레이드오프**: 대상 사이트가 OG를 바꿔도 재빌드 전까지 반영되지 않습니다. 따라서 스키마에 **수동 오버라이드 필드**와 **fallback 기본값**을 함께 둡니다.

## 데이터 스키마

`src/content/showcase/schema.ts`에 zod로 정의합니다. 기여자 입력은 최소화하고, 나머지는 빌드 타임에 채웁니다.

### 기여자 입력 (frontmatter)

| 필드 | 타입/제약 | 필수 | 설명 |
| --- | --- | --- | --- |
| `url` | `string.url()` | ✅ | 프로젝트 URL. OG 추출 대상 |
| `title` | `string.optional()` | | 수동 오버라이드. 없으면 `og:title` 사용 |
| `description` | `string.optional()` | | 수동 오버라이드. 없으면 `og:description` 사용 |
| `image` | `string.optional()` | | 수동 오버라이드. 없으면 `og:image` 사용 |

### 빌드 타임에 추출·병합되는 값

각 카드가 실제로 그릴 값은 `수동 오버라이드 ?? OG 추출값 ?? fallback` 순으로 결정합니다.

| 카드 필드 | 소스 |
| --- | --- |
| `title` | frontmatter.title ?? `og:title` ?? URL 호스트명 |
| `description` | frontmatter.description ?? `og:description` ?? "" |
| `image` | frontmatter.image ?? `og:image` ?? 기본 플레이스홀더 이미지 |
| `siteName` | `og:site_name` ?? URL 호스트명 |
| `url` | frontmatter.url (그대로) |

## 작업 내용

- [ ] OG 파싱 방식 결정 (의존성 추가: 예 `open-graph-scraper`/`metascraper`/`cheerio`, 또는 경량 정규식 파서). 현재 레포엔 OG 파서 의존성 없음
- [ ] 빌드 스크립트 신설/확장: 등록된 `url` 목록을 fetch → OG 파싱 → `public/og/showcase.json`(또는 콘텐츠 캐시)로 저장. `generate-og.mts`의 manifest 해시 캐시 패턴 참고
- [ ] fetch 실패·OG 누락 시 fallback 처리 (빌드는 깨지지 않게, 기본 카드로 대체)
- [ ] `src/content/showcase/schema.ts` zod 스키마 정의 (위 표)
- [ ] 쇼케이스 목록 라우트(`showcase._index.tsx`)를 실제 구현으로 교체 (현재 `UnderConstruction`) — 카드 그리드
- [ ] 카드 컴포넌트 (DS-02 시안 기반, 썸네일·제목·설명·외부 링크)
- [ ] 페이지 자체의 SEO 메타는 기존 `SeoMeta` 재사용 (`showcase` 정적 OG 이미지)
- [ ] 반응형·이미지 최적화 (외부 og:image 로딩 실패/사이즈 대비)

## 참고

- 빌드 타임 산출물 생성 패턴: `scripts/generate-og.mts` (manifest 해시 캐시)
- SEO 메타 컴포넌트: `src/components/SeoMeta.tsx`, OG URL 헬퍼: `src/og/ogImage.ts`
- 재사용할 콘텐츠 컬렉션 패턴: `src/content/blog/{schema,loader}.ts`
- 현재 플레이스홀더: `src/routes/showcase._index.tsx`


필드	타입/제약	필수	설명
`url`	`string.url()`	✅	프로젝트 URL. OG 추출 대상
`title`	`string.optional()`		수동 오버라이드. 없으면 `og:title` 사용
`description`	`string.optional()`		수동 오버라이드. 없으면 `og:description` 사용
`image`	`string.optional()`		수동 오버라이드. 없으면 `og:image` 사용

카드 필드	소스
`title`	frontmatter.title ?? `og:title` ?? URL 호스트명
`description`	frontmatter.description ?? `og:description` ?? ""
`image`	frontmatter.image ?? `og:image` ?? 기본 플레이스홀더 이미지
`siteName`	`og:site_name` ?? URL 호스트명
`url`	frontmatter.url (그대로)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

쇼케이스 페이지 구현 (DS-02 시안 기반) #29

배경

동작 방식 (빌드 타임 추출)

데이터 스키마

기여자 입력 (frontmatter)

빌드 타임에 추출·병합되는 값

작업 내용

참고

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Uh oh!

쇼케이스 페이지 구현 (DS-02 시안 기반) #29

Description

배경

동작 방식 (빌드 타임 추출)

데이터 스키마

기여자 입력 (frontmatter)

빌드 타임에 추출·병합되는 값

작업 내용

참고

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions