docs: record frontend chat dark-mode bubble fix

troubleshooting/251116_admin_frontend_chat_dark_mode_bubble.md

@@ -0,0 +1,49 @@
+# 프론트엔드 채팅 다크모드 말풍선 대비 문제
+
+## 요약
+- **문제**: 다크모드에서 사용자 말풍선이 라이트 모드용 연보라 그라데이션(`from-violet-50 to-violet-100`)이 그대로 적용되어, 거의 흰색에 가까운 배경 + 밝은 텍스트 조합으로 매우 눈부시고 배경과 동떨어진 느낌을 줌.
+- **원인**: Tailwind 클래스를 라이트 모드 기준으로 기본값으로 두고 `dark:` 프리픽스로 덮어쓰는 방식으로 구현했는데, `bg-gradient-to-r` 등 일부 속성이 다크 모드에서 완전히 제거되지 않고 섞여서 적용됨.
+- **해결**: 채팅 말풍선 스타일에서 다크 모드일 때는 라이트용 그라데이션 배경을 완전히 끄고(`dark:bg-none`), 다크 전용 네이비 팔레트 배경과 그림자만 적용하도록 수정.
+
+## 상세 현상
+- 재현 환경: `frontend-customer` (rb10508_micro 포함), 다크모드 활성화 상태.
+- 예시 DOM:
+  - `<div class="px-2.5 py-1.5 rounded-lg max-w-[280px] bg-gradient-to-r from-violet-50 to-violet-100 text-violet-950 border border-violet-200 shadow-[0_8px_24px_rgba(15,23,42,0.08)] dark:bg-[#3B1E5A] dark:text-[#F4F2…">11월 19일 대구 심사 14시부터 18시까지 적어줘 대구 창경</div>`
+- 육안으로는 다크모드인데도 말풍선이 거의 흰색에 가까운 그라데이션 + 밝은 텍스트로 보였고, 배경 네이비와 전혀 어울리지 않아 “흰 바탕에 밝은 글씨”처럼 매우 이질적인 UI로 인식됨.
+
+## 원인 분석
+- Tailwind 다크모드 전략을 **라이트 모드 기본 + `dark:` 덮어쓰기**로만 사용.
+- `bg-gradient-to-r`, `from-*`, `to-*`처럼 **그라데이션 관련 클래스는 `dark:bg-[#3B1E5A]`만으로 완전히 제거되지 않음**.
+  - 결과적으로 다크모드에서도 그라데이션이 일부 남아있고, 브라우저/렌더링 환경에 따라 밝게 보이는 현상이 발생.
+- 즉, “라이트 모드 배경을 지우지 않고 위에 다크 배경만 얹는” 식의 스타일링으로 인해 라이트/다크 속성이 섞인 상태가 되었음.
+
+## 조치 내용
+- 파일: `frontend-customer/src/components/chat-interface.tsx`
+- 함수: `getMessageStyle`
+- 변경 포인트 (사용자 말풍선):
+  - 라이트 모드:
+    - 그대로 연보라 그라데이션 유지  
+      - `bg-gradient-to-r from-violet-50 to-violet-100 text-violet-950 border border-violet-200 shadow-[0_8px_24px_rgba(15,23,42,0.08)]`
+  - 다크 모드:
+    - 라이트용 그라데이션을 **완전히 끄기 위해 `dark:bg-none` 추가**
+    - 네이비 배경 + 보라 계열 보더 + 딥 섀도우만 적용
+      - `dark:bg-none dark:bg-[#3B1E5A] dark:text-[#F4F2FF] dark:border-[#7C3AED]/40 dark:shadow-[0_12px_24px_rgba(8,8,16,0.45)]`
+- 결과:
+  - 다크모드에서 사용자 말풍선이 네이비 톤의 말풍선으로만 보이고, 흰색/연보라 그라데이션이 더 이상 섞이지 않음.
+  - 배경과 대비가 자연스러워지고, 텍스트 가독성도 확보됨.
+
+## 향후 다크모드 스타일링 원칙
+- **라이트 전용 스타일은 명시적으로 끄거나 분리한다**
+  - 특히 `bg-gradient-*`, `from-*`, `to-*` 같은 그라데이션/배경 계열은 다크 모드에서 `dark:bg-none` 등으로 **완전히 제거**할 것.
+- **다크모드 팔레트는 별도 토큰/클래스로 관리**
+  - 예시: `dark:bg-slate-900`, `dark:bg-[#020617]` 같은 다크 전용 팔레트 사용.
+- **기본값을 다크로 둘지, 라이트로 둘지 컴포넌트 단위로 명확히 결정**
+  - 현재 채팅 말풍선은 “라이트 기본 + 다크 오버레이” 전략을 사용하지만,
+  - 다크 비중이 높아질 경우 “다크 기본 + `light:` 프리픽스 or 조건부 클래스” 방식도 검토 필요.
+
+## 교훈
+- Tailwind의 `dark:` 프리픽스는 **덮어쓰기(overwrite)**이지, 라이트 스타일을 **자동으로 제거해 주지 않는다**.
+- 특히 그라데이션/배경 계열 클래스는 다크모드에서 눈으로만 보면 “그럴 듯해 보이지만” 실제로는 라이트/다크 속성이 섞여 있을 수 있으므로 **실제 DOM 클래스와 렌더링 결과를 반드시 같이 확인**해야 한다.
+- 프론트엔드 UI/UX 수정 시에는 스타일 수정과 함께 **스크린샷/DOM 캡처 + 간단한 트러블슈팅 문서화**까지 한 번에 처리하면, 나중에 동일한 실수를 반복하지 않게 된다.
+
+