Skip to content

Conversation

@nxnaxx
Copy link
Contributor

@nxnaxx nxnaxx commented Oct 23, 2025

Related issue

#1011

Result

CSS 변수 기반 테마 시스템을 MUI ThemeProvider와 통합하여 일관된 테마 관리 구조를 확립했습니다.

Work list

1. MUI 패키지 업그레이드

  • MUI의 CSS 변수 자동 생성 기능을 사용하기 위함
  • @mui/material: v5.16.6 -> v6.5.0(latest-v6)
  • @mui/icons-material: v5.16.6 -> v6.5.0(latest-v6)

2. 테마 시스템 구조 개선

  • 테마 설정 중앙화 (src/theme/)
    • 테마 타입 정의, 색상 팔레트 구성, MUI 테마 유틸리티 구현
    • cssVariables: true 옵션으로 MUI CSS 변수 자동 생성
    • theme path alias 추가
  • 색상 체계 개선
    • primary, secondary에 light, dark 색상 추가 (hover, active 상태 대응)
    • tertiary 제거, system colors(success, error) 공통 정의
    • grey scale colors 추가
  • App.tsx에 ThemeProvider 적용

3. SCSS 시스템 통합

  • _colors.scss에서 MUI 자동 생성 CSS 변수(--mui-palette-*) 참조
  • SCSS 변수 기반에서 CSS 변수 기반으로 전환

Test

  • 5가지 테마 전환 정상 작동 확인
  • 로딩 화면 테마 색상 정상 표시 확인
  • 기존 기능 영향 없음 확인

Improvement

  • 중앙 집중식 테마 관리
  • 일관된 스타일 적용: MUI 컴포넌트와 SCSS 컴포넌트가 동일한 색상 시스템 사용 가능
  • 참조 방식 통일 var(--color-*)

Next Task

  • 테마 시스템 변경으로 인한 ThemeSelector 리팩토링

- Reference MUI auto-generated CSS variables in _colors.scss
- Replace SCSS variables with CSS variables
- Add new CSS variables for color management
@nxnaxx nxnaxx self-assigned this Oct 23, 2025
@nxnaxx nxnaxx requested review from a team as code owners October 23, 2025 16:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant