# 경기별 공유 썸네일 (OG 이미지)

카카오톡·트위터 등에서 특정 경기 링크(`/match/:id`)를 공유할 때 뜨는 미리보기
이미지를 여기에 둔다. 미등록 경기는 기본 썸네일(`assets/bi/og-image.png`)로 폴백.

## 용도 두 가지

- **앱 안 배너**(매치 상세 페이지): 세로/원본 이미지. `pages/MatchDetail.tsx` 에서 직접 참조.
  예) `kor_mex.png` (세로 816×1456)
- **공유 카드**(카톡·트위터 미리보기): 가로 **1200 × 630** 합성본. `share.py` 의 `OG_IMAGES` 에 등록.
  예) `kor_mex_card.png`

세로 원본만 있으면 카드용 가로본은 아래 스크립트로 자동 합성(원본을 가운데 두고
배경은 블러로 채움 → 잘림 없음):
```python
from PIL import Image, ImageFilter, ImageEnhance
W, H = 1200, 630
src = Image.open("kor_mex.png").convert("RGB"); sw, sh = src.size
s = max(W/sw, H/sh); bw, bh = int(sw*s)+1, int(sh*s)+1
bg = src.resize((bw,bh), Image.LANCZOS).crop(((bw-W)//2,(bh-H)//2,(bw-W)//2+W,(bh-H)//2+H))
bg = ImageEnhance.Brightness(bg.filter(ImageFilter.GaussianBlur(22))).enhance(0.55)
fw = int(sw*(H/sh)); bg.paste(src.resize((fw,H), Image.LANCZOS), ((W-fw)//2, 0))
bg.save("kor_mex_card.png", "PNG")
```

## 적용 방법 (예: 한국-멕시코전)

1. 세로 원본을 이 폴더에 넣는다 → `kor_mex.png` (앱 배너용)
2. 위 스크립트로 가로 카드 합성 → `kor_mex_card.png` (공유 카드용)
3. `backend/app/routers/share.py` 의 `OG_IMAGES` 에 등록:
   ```python
   OG_IMAGES = {
       frozenset({"KOR", "MEX"}): "kor_mex_card.png",
   }
   ```
4. 배포: 서버에서 `git pull && docker compose up --build -d`

## 동작 원리

- nginx 가 공유 크롤러(UA)만 `/match/:id` → 백엔드 OG 프리렌더로 보낸다.
- 백엔드가 경기 ID(`{조}_{팀A}_{팀B}_{날짜}`)에서 두 팀 코드를 뽑아
  `OG_IMAGES` 에 있으면 해당 이미지를, 없으면 기본 썸네일을 단 HTML 을 반환.
- 일반 사용자는 영향 없이 기존 SPA 그대로.

팀 코드 순서는 무관(`KOR_MEX` = `MEX_KOR`). 한국-멕시코 경기 ID 는
`A_MEX_KOR_20260619`.