[CaesiumY]

요약

OG 이미지(링크 공유 시 뜨는 미리보기 그림)가 실제로 제대로 그려졌는지 픽셀로 검사하는 E2E 테스트를 추가합니다. 지금까지 OG 테스트(e2e/og-image.spec.ts)는 메타 태그와 응답 형식만 봤습니다. 그래서 satori 0.33 → 0.47 업그레이드(#208)가 OG 이미지 40장을 전부 깨뜨렸는데도 CI는 초록이었습니다. 이 테스트가 있으면 다음 satori 업데이트에서는 CI가 실패합니다.

무엇을 검사하나

e2e/og-image-layout.spec.ts는 dev 서버의 OG 엔드포인트에서 PNG를 받아 브라우저 canvas로 픽셀을 읽습니다. 새 의존성은 없습니다. #218에서 실제로 깨진 세 가지를 하나씩 잡습니다.

검사	잡는 회귀	기대값
앞 카드 안쪽 점(1100, 300)의 색	뒤 카드(absolute)가 앞 카드 위에 그려짐	앞 카드 배경 #fefbfb (각 채널 > 248)
앞 카드 왼쪽, 위쪽 테두리 위치	boxSizing 기본값 변경으로 카드 크기가 바뀜	x = 72, y = 63
글자 줄의 세로 위치	<p> 기본 여백 1em의 기준이 바뀜	사이트 제목 260, 시리즈 제목 229, 부제목 333, 하단 498 (±3px)

대상 이미지는 사이트 기본(/og.png), 시리즈 목록(/series/og.png), 공용 테스트 포스트(TEST_POST_URL)입니다. 앞의 둘은 글 내용과 무관한 고정 문구라서 값을 정확히 비교합니다. 포스트는 제목에 따라 글자 위쪽 y가 23px 달라지므로 105127 범위로만 봅니다. 그래서 테스트 포스트 제목을 바꿔도 깨지지 않습니다.

실제로 회귀를 잡는지 확인

satori 0.47.1에서 #218의 템플릿 수정을 하나씩 빼 가며 돌렸습니다.

상태	결과
main (satori 0.33.4)	3개 통과
satori 0.47.1, 템플릿 수정 없음	3개 실패 (앞 카드 색 238)
position: relative만 추가	3개 실패 (앞 카드 테두리 x 68)
relative + border-box, <p> 여백 미수정	2개 실패 (시리즈 제목 y 223, 기대 229. 포스트 제목 y 170, 기대 127 이하). 사이트 기본은 가운데 정렬이라 여백이 위아래로 같이 늘어 통과
#218 전체 수정	3개 통과

#218과의 관계

기대값이 main(satori 0.33.4)과 #218(0.47.1 + 템플릿 수정)에서 같아서 이 PR은 main 기준으로 따로 만들었습니다. #218보다 먼저 머지되든 나중에 머지되든 상관없습니다. 이 PR을 먼저 머지한 뒤 #218을 최신 main으로 갱신하면, #218의 템플릿 수정이 맞다는 것을 CI가 직접 확인하게 됩니다.

실행 범위

satori를 올리는 PR은 package.json을 바꾸므로 E2E 전체가 돌고, 이 스펙도 포함됩니다. node scripts/e2e-scope.mjs --check는 이 스펙을 테스트 포스트에 묶인 스펙으로 인식합니다(통과).

검증

• 새 스펙 단독 실행: main에서 3개 통과, 위 표의 각 상태에서 기대대로 실패하거나 통과
• ESLint, Prettier: 통과
• node scripts/e2e-scope.mjs --check: 통과

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[claude]

리뷰: OG 레이아웃 픽셀 회귀 테스트

전반적으로 좋습니다. #208에서 CI가 놓친 회귀(카드 z-order, boxSizing, p 여백 기준)를 정확히 겨냥했고, 새 의존성 없이 OffscreenCanvas로 구현했습니다. TEST_POST_URL을 /posts/ 전체 URL로 쓴 것도 e2e-scope 규약에 맞습니다. 변경이 스펙 파일 하나라 보안·성능 우려는 없습니다.

제안 (블로커 아님)

1. 빈 textBands 가드: 글자 밴드를 못 찾으면(예: 폰트 로딩 실패) 포스트 테스트의 m.textBands[0][0]에서 TypeError가 납니다. 회귀는 잡히지만 메시지가 불친절하니 expect(m.textBands.length).toBeGreaterThan(1)을 앞에 두면 좋습니다. 기본/시리즈는 toHaveLength가 먼저라 괜찮습니다.
2. expectNear는 < 4(즉 ±3)로 PR 본문과 일치합니다. 주석에 ±3을 적어 두면 읽기 쉽습니다.
3. grey < 80(테두리)과 grey < 200(글자) 임계값은 템플릿 색에 암묵적으로 의존합니다. 테마 색 변경 시 깨질 수 있으니 주석에 해당 색을 적어 두면 원인 찾기가 쉽습니다.
4. 같은 오리진 fetch를 위해 /robots.txt로 이동하는데, 동작엔 문제 없고 page.request.get 방식도 가능합니다. 취향 차원입니다.

테스트 커버리지

• 템플릿 5개 중 3개 경로(기본, 시리즈, 포스트)만 검사합니다. 구조가 같다는 전제는 합리적이나 다른 템플릿의 개별 회귀는 놓칠 수 있습니다.
• 정확 픽셀 비교(x=72, y=63)는 폰트가 번들되어 변동이 작을 것으로 보입니다. CI(재시도 2회)에서 안정적인지만 지켜보면 됩니다.

머지해도 좋다고 봅니다.

🤖 Generated with Claude Code