Initial Commit

docs/troubleshootings/2026-07-27-snap-codefence-overflow.md

@@ -0,0 +1,19 @@
+# snap 답변의 ASCII 다이어그램이 말풍선 밖으로 튀어나감
+
+## 증상
+- 챗봇 답변에 든 ASCII 다이어그램(`┌───┐` 박스 라인)이 회색 인라인 코드 배경으로 줄줄이 렌더되면서 말풍선 오른쪽 밖으로 넘침
+
+## 원인
+- `Message.tsx` 가 `pre` 를 fragment 로 언랩(`pre: ({children}) => <>{children}</>`)하고, 코드펜스는 `code` 컴포넌트의 `language-*` className 매칭으로만 CodeBlock 처리하고 있었음
+- **언어 라벨 없는 코드펜스**(LLM 이 ``` 만 쓰고 다이어그램 넣는 경우)는 className 이 없어서 인라인 `code` 분기로 떨어짐 → `<pre>` 없는 인라인 코드가 됨
+- 인라인은 공백에서만 줄바꿈되는데 `─────` 연속 문자는 줄바꿈 지점이 없어서 그대로 overflow
+- react-markdown v10 은 v8 의 `inline` prop 이 없어짐 — className 만으로 블록/인라인 구분하면 이 케이스가 샘
+
+## 수정
+- `Message.tsx`: 블록 코드 판별을 `pre` 컴포넌트로 이동 — 펜스는 언어 유무와 무관하게 전부 `CodeBlock`(overflow-auto 스크롤 컨테이너)으로. `code` 는 순수 인라인만 담당
+- 재현 테스트: `Message.test.tsx` (언어 없는 펜스 → CodeBlock, 언어 있는 펜스 유지, 인라인 유지)
+- `StreamingText.tsx` 는 `pre` 를 살려두고 `overflow-x-auto` 도 있어서 무관 — 안 건드림
+
+## 교훈
+- react-markdown 에서 "블록 코드 = pre 의 자식" 이 유일하게 안전한 구분 기준. `language-*` className 은 언어 없는 펜스에서 빠짐
+- `pre` 를 언랩할 거면 언어 없는 펜스가 어디로 떨어지는지 반드시 확인