o2o-triple-pick/frontend/public/assets/og/README.md

경기별 공유 썸네일 (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

세로 원본만 있으면 카드용 가로본은 아래 스크립트로 자동 합성(원본을 가운데 두고 배경은 블러로 채움 → 잘림 없음):

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 에 등록:

   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.