Repository navigation
fix: 카드 폰트가 OS 기본 폰트로 대체되는 문제 수정 - #20
Merged
Merged
Conversation
Others 카테고리가 새로 생기며 Most Solved Categories 범례가 4개에서 5개로 늘어나 박스 하단이 빡빡해진 문제 수정. 범례 시작점을 위로 올리고 배경 박스를 키워 5개 항목의 상하 여백 균형을 맞춤.
SVG가 <img>로 렌더링되면(GitHub README, 메인페이지 미리보기) 브라우저가 외부 리소스를 불러오지 않아 Google Fonts @import가 무시되고, OS 기본 monospace 폰트(macOS Chrome은 Menlo, Safari는 Courier 등)로 표시되던 문제 수정. JetBrains Mono 가변 폰트를 카드에 쓰는 굵기(400~700)와 ASCII 문자만 남겨 서브셋한 뒤 base64 @font-face로 SVG에 직접 임베드하고, 서브셋 생성 스크립트와 폰트 라이선스(OFL)를 함께 추가. Claude-Session: https://claude.ai/code/session_01AGcght9Lc8cAYdvYCrdSzd
Vercel이 Node.js 20 지원을 종료해(2026-10-01) 배포가 실패하므로 package.json engines로 Vercel 빌드/함수 런타임을 24.x로 지정하고, CI 테스트도 같은 버전으로 맞춤. Claude-Session: https://claude.ai/code/session_01AGcght9Lc8cAYdvYCrdSzd
This branch was previously deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
배경
카드 SVG는
<style>안에서@import url('https://fonts.googleapis.com/...')로 JetBrains Mono를 불러오고 있었습니다. 그런데 SVG가<img>로 렌더링되면(GitHub README의 camo 프록시, 메인페이지 미리보기) 브라우저가 외부 리소스 로드를 전부 차단해서, README에서는 JetBrains Mono가 한 번도 적용되지 않고 OS 기본 monospace 폰트로 표시되고 있었습니다.또한 Vercel이 Node.js 20 지원을 종료(2026-10-01)해서, 프로젝트 설정(20.x) 그대로는 배포가 실패하는 상태였습니다.
변경 사항
카드 폰트 임베드
@font-face로 SVG에 직접 임베드scripts/generate-font-subset.sh추가: 버전을 고정해 다운로드 → SHA-256 검증 → 서브셋 →src/utils/fonts/jetbrainsMono.ts생성 (다시 실행해도 결과가 같음)src/utils/fonts/OFL.txt(SIL OFL 1.1) 추가, README License 섹션에 명시generateStatsSvg.ts,generateCategorySvg.ts:@import대신 임베드 폰트 사용Node.js 24.x 지정
package.json에engines.node: "24.x"추가 → Vercel 프로젝트 설정(20.x)보다 우선 적용되어 빌드와 함수 런타임이 24.x로 동작테스트
tsc --noEmit,next build통과next dev의 실제 API 응답을<img>로 렌더링해 Chrome / Firefox / WebKit(Safari 엔진)에서 확인<img>렌더링이 SVG를 문서로 직접 연 결과와 픽셀 단위로 동일default-src 'none'; img-src data:; style-src 'unsafe-inline')로 서빙해도<img>렌더링은 세 엔진 모두 동일next build,next start후 실제 API 호출(200, 폰트 임베드) 확인 → 지원 기간이 더 긴 24.x 선택🤖 Generated with Claude Code
https://claude.ai/code/session_01AGcght9Lc8cAYdvYCrdSzd