문제 상황(ISSUE)

1. Toast UI Editor의 전체 배경색이 다크모드에서 변경되지 않음
2. Toast UI Editor의 다크모드 전환 시 드롭다운 메뉴의 텍스트가 보이지 않음
3. 드롭다운 메뉴의 배경색과 hover 효과가 라이트/다크모드에 맞지 않음

원인 분석(Root Cause)

1. 에디터 기본 배경색 문제

   • Toast UI Editor의 기본 배경색을 제어하는 클래스 식별 필요
   • 에디터 컨텐츠 영역과 툴바 영역의 개별 스타일링 필요

2. CSS 선택자 특정 문제

   • Toast UI Editor의 실제 클래스명인 toastui-editor-defaultUI, toastui-editor-popup 등을 정확히 타겟팅하지 못함
   • 잘못된 클래스명 사용

3. 다크모드 구현 방식 이해 부족

   • 시스템의 prefers-color-scheme 미디어 쿼리와 .dark 클래스 조합 방식 이해 필요
   • Tailwind의 다크모드 설정과의 연계 필요

결과 및 검증(Result)

/* 기본 스타일 */
.toast-editor-wrapper .toastui-editor-defaultUI {
  background-color: white;
}

.toast-editor-wrapper .toastui-editor-defaultUI-toolbar {
  background-color: #f8f9fa;
}

.toast-editor-wrapper .toastui-editor-contents {
  background-color: white;
}

/* 헤딩 드롭다운 메뉴 스타일 */
.toastui-editor-popup {
  background-color: white;
}

.toastui-editor-popup-body {
  color: black;
}

.toastui-editor-popup-body button {
  color: black;
}

.toastui-editor-popup-body button:hover {
  background-color: #f1f1f1;
}

/* 다크모드 스타일 */
@media (prefers-color-scheme: dark) {
  .dark .toast-editor-wrapper .toastui-editor-defaultUI {
    background-color: #1a1a1a;
    border-color: #404040;
  }

  .dark .toast-editor-wrapper .toastui-editor-defaultUI-toolbar {
    background-color: #262626;
    border-bottom-color: #404040;
  }

  .dark .toast-editor-wrapper .toastui-editor-contents {
    background-color: #1a1a1a;
    color: #e5e5e5;
  }

  .dark .toast-editor-wrapper .toastui-editor-toolbar-icons {
    filter: invert(1);
  }

  .dark .toastui-editor-popup {
    background-color: #262626;
  }

  .dark .toastui-editor-popup-body {
    color: #e5e5e5;
  }

  .dark .toastui-editor-popup-body button {
    color: #e5e5e5;
  }

  .dark .toastui-editor-popup-body button:hover {
    background-color: #404040;
  }
}

검증 포인트:

• 에디터 전체 배경색 다크모드 적용 확인
• 툴바 영역 다크모드 적용 확인
• 드롭다운 메뉴 스타일 정상 작동
• hover 효과 정상 작동

학습 포인트

1. CSS 선택자 특정성
   • 계층 구조를 활용한 명확한 선택자 지정
2. 다크모드 구현 패턴
   • 미디어 쿼리와 클래스 기반 다크모드의 조합
   • Tailwind CSS의 다크모드 설정 활용

darkMode: 'class'

3. 컴포넌트 스타일링 전략
   • 컴포넌트별 독립적인 스타일 정의
   • 일관된 색상 시스템 적용
4. 서드파티 라이브러리 커스터마이징
   • 라이브러리의 기본 스타일 재정의 방법
   • 개발자 도구를 통한 DOM 구조 분석의 중요성
5. 미디어 쿼리의 이해와 활용
   • 기본 구문과 동작 원리

@media (조건) {
  /* 조건이 충족될 때 적용될 스타일 */
}

• 주로 미디어 쿼리 타입

/* 화면 크기 */
@media (min-width: 768px) { }

/* 다크모드 감지 */
@media (prefers-color-scheme: dark) { }

/* 기기 방향 */
@media (orientation: portrait) { }

1. 미디어 쿼리 최적화
   • 중복 코드 최소화를 위한 구조화
   • 성능을 고려한 미디어 쿼리 작성
   • 유지보수를 위한 일관된 패턴 사용
2. 주의사항
   • 브라우저 지원 범위 확인
   • 과도한 중첩 피하기
   • 반응형 디자인과의 조화로운 사용

이번 트러블 슈팅을 통해 서드파티 라이브러리의 스타일 커스터마이징, CSS 선택자 활용, 다크모드 구현 패턴에 대한 실제적인 경험을 얻을 수 있었습니다.

Tailwind CSS의 다크모드 설정과 미디어 쿼리를 결합하여 더욱 강력한 다크모드 구현이 가능했습니다.