refactor(view): ThemeSelector 리팩토링 및 공통 MUI 컴포넌트 정의

[nxnaxx]

Related issue

#1017

Overview

• 테마 시스템 변경에 따른 ThemeSelector 리팩토링
• MUI 컴포넌트의 인라인 스타일 제거 및 공통 스타일로 통합

Work list

1. ThemeSelect 리팩토링

• 기존 ThemeSelector.const.ts에 분산되어 있던 THEME_INFO 제거
• 테마 관련 설정을 THEME_CONFIG로 일원화하여 참조 구조 개선
• tertiary theme icon 삭제

2. Loader 테마 참조 변경

• BounceLoader의 테마 참조를 THEME_INFO → THEME_CONFIG로 변경 (App.tsx)

3. 공통 MUI 컴포넌트 스타일 정의

• IconButton, Select, Tooltip, Chip 공통 MUI 스타일 적용
• 인라인 스타일 제거 및 공통 스타일로 대체
  • IconButton: RefreshButton.tsx, ThemeSelector.tsx
  • Select: BranchSelector.tsx, AuthorBarChart.tsx
  • Chip: Author.tsx, Detail.tsx

4. SCSS 변수 토큰 추가

• 컴포넌트 간 radius/spacing 기준을 통일하여 일관성 향상
  • src/styles/_radius.scss
  • src/styles/_spacing.scss

5. 기타 UI 개선

• AuthorBarChart의 title과 select 수평 정렬

Result

[ytaek]

앗!! 코드는 완벽한것 같은데
혹시 테마의 가지수가 3개에서 2개로 줄어든 이유가 있을까요?

이게 나름대로 작년에 홍대 미대 나오신 분(!!!)과 같이 디자인 시스템 개선한 부분이거든요

[nxnaxx]

앗!! 코드는 완벽한것 같은데 혹시 테마의 가지수가 3개에서 2개로 줄어든 이유가 있을까요?

이게 나름대로 작년에 홍대 미대 나오신 분(!!!)과 같이 디자인 시스템 개선한 부분이거든요

@ytaek
기존 테마에서는 강조 색상이 3개였지만 hover나 active와 같은 인터랙션 상태를 따로 표현할 방법이 없었습니다. 보통 강조 색상을 사용하는 이유는 사용자들의 주의를 끌기 위함인데, 해당 색상이 많을수록 개발자와 사용자 모두 어떤 요소가 실제로 중요한지 판단하기 어려워집니다.
(실제로 특정 버튼 호버 시에는 tertiary → secondary로 변경되는데, 차트 호버 시에는 secondary → tertiary로 변경되는 등 일관성을 깨는 케이스들이 종종 있었습니다.)

대부분의 디자인 시스템(머터리얼, 아틀라시안 등)도 primary/secondary 중심으로 이루어져 있고 오픈소스 특성상 매번 다른 분들이 참여하다 보니 색상의 다양성보다는 개발자들이 직관적으로 이해하기 쉬운 최소 단위로 구성해야한다고 생각했습니다. 애매모호함은 결국 나중에 유지보수 리스크로 다가오니까요.

MUI 테마와 통합하는 과정에서도 MUI에서 공식적으로 지원하는 색상 구조가 primary/secondary 뿐이라 tertiary를 유지하게 되면 따로 커스텀 작업이 필요했습니다. 테마는 관리를 편하게 하기 위해서 도입한 것인데 이를 확장해서 오히려 복잡성을 증가시킬 필요가 있을까? 싶었습니다.

그래서 인터랙션 같은 부분들은 동일 색상의 ligth, dark 컬러를 사용할 수 있도록 추가하고 tertiary 색상은 제거하는 것으로 테마 구조를 단순화했습니다. 결과적으로 색상 수는 줄었지만 일관성이나 상태 피드백은 훨씬 명확해졌습니다.

사전에 디코에 공유드렸을 때는 다른 의견들이 없으신 것 같아 그대로 진행했는데, 기존 구조를 그대로 유지해야한다면 다시 복원해서 반영하도록 하겠습니다🙌

[ytaek]

그래서 인터랙션 같은 부분들은 동일 색상의 ligth, dark 컬러를 사용할 수 있도록 추가하고 tertiary 색상은 제거하는 것으로 테마 구조를 단순화했습니다. 결과적으로 색상 수는 줄었지만 일관성이나 상태 피드백은 훨씬 명확해졌습니다.

넵! core 팀에서 얘기가 된 부분이군요! 디스코드는 제가 놓쳤나 봅니다 ㅜ.ㅜ
일단은 저희 로고 베이스를 보면 아시겠지만, 기본 컬러가 아래 2가지 색입니당

그래서 저 두가지 색깔을 primary/secondary로 쓰기는 사실 애매하긴 하죠
그걸 감안해서 저렇게 컬러 조합을 만든거긴 한데. 애매하긴 하네요.
(색 조합의 이쁘고 못남은 좀 별개로 하고...)

대부분의 디자인 시스템(머터리얼, 아틀라시안 등)도 primary/secondary 중심으로 이루어져 있고 오픈소스 특성상 매번 다른 분들이 참여하다 보니 색상의 다양성보다는 개발자들이 직관적으로 이해하기 쉬운 최소 단위로 구성해야한다고 생각했습니다. 애매모호함은 결국 나중에 유지보수 리스크로 다가오니까요.

저희가 ui fw를 어떤걸 가져갈지에 따라서도 좀 다를 수 있겠구요. mui를 계속 쓸지말지도 모르기도 하고
tailwind(를 ui fw라고 해야하는지는 애매하지만) 같은 headless ui 가 요새 트렌드(?) 인것 같기도 한데 거기서는 primary, secondary 가 없긴 합니다.
그리고, 찾아보니 material이 3 color scheme을 지원하는군요 : )
https://anvil.works/docs/how-to/creating-material-3-colour-scheme?utm_source=chatgpt.com
https://m3.material.io/

MUI 테마와 통합하는 과정에서도 MUI에서 공식적으로 지원하는 색상 구조가 primary/secondary 뿐이라 tertiary를 유지하게 되면 따로 커스텀 작업이 필요했습니다. 테마는 관리를 편하게 하기 위해서 도입한 것인데 이를 확장해서 오히려 복잡성을 증가시킬 필요가 있을까? 싶었습니다.

이거는 맞는 말씀이죵!!
아래는 GPT 에서 퍼왔습니다.

그리고, 실제로 개발할 때 primary, secondary만 사용하지는 않긴 합니다. 여러가지 색을 섞어 쓰긴 하죠.
(저희는 디자이너가 없긴 해서 ㅜ.ㅜ)

결론적으로

• 2 theme vs 3 theme
• 2 theme 로 간다면, 기본 색 배열을 어떻게 가져갈 것인지
• mui를 앞으로도 쭉 계속 가져갈 것이냐 (vs shadcn, tailwind 등)
  를 좀 얘기해보고 정하면 좋을 것 같습니다.

요 얘기를 issue 에서 한번 discussion으로 등록해놔도 좋겠네요.
이 PR은 이대로 두고, 논의 후에 살펴보면 좋겠습니다.

[ytaek]

그나저나 @nxnaxx 님이 올리시는 PR이나 이슈 보면 기술적 깊이라던지, 여러가지 상황들에 대한 깊은 고려들이 많이 보여서 저도 많이 배우는 것 같습니다 : ) 이런 건설적인 토의가 많아지면 참 좋겠네요!

[nxnaxx]

넵! core 팀에서 얘기가 된 부분이군요! 디스코드는 제가 놓쳤나 봅니다 ㅜ.ㅜ 일단은 저희 로고 베이스를 보면 아시겠지만, 기본 컬러가 아래 2가지 색입니당

그래서 저 두가지 색깔을 primary/secondary로 쓰기는 사실 애매하긴 하죠 그걸 감안해서 저렇게 컬러 조합을 만든거긴 한데. 애매하긴 하네요. (색 조합의 이쁘고 못남은 좀 별개로 하고...)

두 가지로 제한하면서 좀 더 대비되는 색상을 선택하다보니 이 부분은 미처 생각하지 못했네요😅

저희가 ui fw를 어떤걸 가져갈지에 따라서도 좀 다를 수 있겠구요. mui를 계속 쓸지말지도 모르기도 하고 tailwind(를 ui fw라고 해야하는지는 애매하지만) 같은 headless ui 가 요새 트렌드(?) 인것 같기도 한데 거기서는 primary, secondary 가 없긴 합니다. 그리고, 찾아보니 material이 3 color scheme을 지원하는군요 : ) https://anvil.works/docs/how-to/creating-material-3-colour-scheme?utm_source=chatgpt.com https://m3.material.io/

맞습니다. 자유도가 커지면 커스텀하기 좋겠네요ㅎㅎ 지금보다는 더 견고한 설계가 필요하겠지만요

그리고, 실제로 개발할 때 primary, secondary만 사용하지는 않긴 합니다. 여러가지 색을 섞어 쓰긴 하죠. (저희는 디자이너가 없긴 해서 ㅜ.ㅜ)

결론적으로

• 2 theme vs 3 theme
• 2 theme 로 간다면, 기본 색 배열을 어떻게 가져갈 것인지
• mui를 앞으로도 쭉 계속 가져갈 것이냐 (vs shadcn, tailwind 등)
  를 좀 얘기해보고 정하면 좋을 것 같습니다.

요 얘기를 issue 에서 한번 discussion으로 등록해놔도 좋겠네요. 이 PR은 이대로 두고, 논의 후에 살펴보면 좋겠습니다.

넵ㅎㅎ 공감합니다. 개수 제한보다는 각 색상이 어떤 역할인지 명확히 정의되어 있는 게 더 중요한 것 같습니다. 데이터 표현이 많다보니 기본 색상 외에도 유연하게 확장할 수 있는 구조가 필요할 것 같네요.

[nxnaxx]

그나저나 @nxnaxx 님이 올리시는 PR이나 이슈 보면 기술적 깊이라던지, 여러가지 상황들에 대한 깊은 고려들이 많이 보여서 저도 많이 배우는 것 같습니다 : ) 이런 건설적인 토의가 많아지면 참 좋겠네요!

감사합니다! 저도 덕분에 많이 배우고 있습니다😄