feat: console.log에서 %c 등 포맷 지정자 지원

[eunjin11]

Summary

• 브라우저 DevTools처럼 console.log의 포맷 지정자(%c, %s, %d, %i, %f, %o, %O, %%)를 파싱해 렌더링해요.
• %c는 이어지는 CSS 문자열을 파싱해서 이후 텍스트 세그먼트에 인라인 스타일로 적용해요. 새 %c가 등장하면 스타일이 교체돼요(Chrome DevTools 동작과 동일).
• 로그 캡처 로직(setupLogMonitor)과 LogEntry 타입은 건드리지 않고, 렌더링 시점(LogPanel)에서만 파싱해요. 원본 args를 그대로 보존해 호환성을 유지해요.
• example 앱에 "Test CSS Console Log" 버튼을 추가해 수동 검증할 수 있어요.

구현

• package/src/utils/parseFormat.ts — parseConsoleArgs(args) → { segments, rest }. 정규식 기반 스캔으로 포맷 지정자별 분기 처리.
• package/src/utils/parseCssStyle.ts — CSS 문자열 → Record<string, string> 변환. url()/expression()/@import 같은 위험 패턴은 drop.
• package/src/components/LogPanel.tsx — log.args.map 부분을 segments + rest 렌더링으로 교체. Lynx가 지원 안 하는 CSS 속성은 런타임에서 무시되도록 둬요.

Test plan

• yarn dev:example로 example 앱 실행 후 "Test CSS Console Log" 버튼 탭
• [Css Test] 배지가 어두운 배경 + 핑크 텍스트로 렌더되는지 확인
• 뒤의 screen:home/tab:feed는 주황 볼드로 렌더되는지 확인
• mixed format: alice got 42 points (59.95fps) 텍스트로 치환되는지 확인
• %o 예제에서 객체가 기존 토글 UI로 렌더되고 뒤의 'end'도 함께 표시되는지 확인
• escaped % percent로 %%가 리터럴 %로 표시되는지 확인
• 포맷 문자열이 없는 기존 로그가 regression 없이 동작하는지 확인

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lynx-console	Ready	Preview	Apr 21, 2026 7:48am