다크모드 피드백 PDF 가 검은 배경으로 저장되던 문제 - #193
Merged
Merged
Conversation
html2canvas 는 '지금 화면에 보이는 대로' 캡처한다. 다크모드 사용자가 리포트를
PDF 로 내려받으면 검은 배경에 밝은 글씨인 문서가 나온다 — 인쇄하면 잉크만 먹고
남에게 보내기도 어렵다. 피드백 리포트는 면접의 최종 산출물이라 PDF 가 곧 결과물이다.
캡처하는 동안만 SEED 라이트 팔레트를 강제하고(`applyColorMode('light-only')`)
finally 로 원래 모드를 복원한다. CSS 변수 재계산이 화면에 반영되도록 한 프레임
기다린 뒤 캡처한다 — 바로 찍으면 이전 색이 그대로 들어간다.
라이트 사용자는 분기 자체를 타지 않아 불필요한 리페인트가 없다.
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
1 participant
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.
문제
피드백 리포트의 PDF 다운로드는
html2canvas로 DOM 을 래스터화한다. 이 라이브러리는 지금 화면에 보이는 대로 캡처하므로, 다크모드 사용자가 받는 PDF 는 검은 배경에 밝은 글씨다.수정
downloadElementAsPdf가 캡처하는 동안만 SEED 라이트 팔레트를 강제하고finally로 원래 모드를 되돌린다.isDarkApplied()가 false 면 분기 자체를 타지 않는다 (라이트 사용자는 리페인트 없음)applyColorMode('light-only')후 한 프레임 대기 — CSS 변수 재계산이 화면에 반영되기 전에 캡처하면 이전 색이 찍힌다finally— 캡처가 던져도 사용자 화면이 라이트로 남지 않는다readStoredColorMode()로 읽는다 (system이었으면system으로 복귀)테스트
downloadPdf.test.ts3 케이스 (jsPDF·html2canvas-pro 는 mock, 캡처 시점의<html>속성을 기록해 검증)수정 전 코드에 대해 첫 케이스만 실패하는 것을 확인했다 (나머지 둘은 원래도 통과 — 회귀 방지용).
남은 한계 (이번 범위 밖)
페이지 분할이 이미지 높이를 A4 로 균등 절단하는 방식이라 문단·표 중간이 잘릴 수 있다. 별도 이슈로 다룬다.