47 lines
2.1 KiB
Markdown
47 lines
2.1 KiB
Markdown
# 경기별 공유 썸네일 (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`.
|