Feat/dark mode #5

[citron03]

PR Type

Enhancement, Other

---

Description

• 다크/라이트 모드 토글 기능 구현

• 시스템 테마 및 로컬 저장소 설정 지원

• 루트 레이아웃에 테마 제공자 및 토글 버튼 통합

• ESLint 설정에 simple-import-sort 플러그인 추가

---

Diagram Walkthrough

flowchart LR
  A[사용자] --> B{테마 토글};
  B -- 클릭 --> C[ThemeToggle.tsx];
  C -- `useTheme` 호출 --> D[ThemeProvider.tsx];
  D -- 테마 상태 업데이트 --> E[globals.css];
  E -- `html.dark` 클래스 적용 --> F[웹 UI 테마 변경];
  D -- 로컬 저장소 저장 --> G[localStorage];
  D -- 시스템 테마 감지 --> D;
  H[RootLayout.tsx] -- `ThemeProvider` 포함 --> D;
  H -- `ThemeToggle` 포함 --> C;

Loading

File Walkthrough

	Relevant files
Enhancement	3 files ThemeProvider.tsx 다크/라이트 테마 관리 로직 구현                                                                              +101/-0  ThemeToggle.tsx 테마 전환 버튼 컴포넌트 추가                                                                                  +28/-0    layout.tsx 루트 레이아웃에 테마 기능 통합                                                                                +13/-3
Configuration changes	2 files eslint.config.js ESLint 설정에 전역 변수 및 import 정렬 규칙 추가                                              +22/-0    pnpm-workspace.yaml `eslint-plugin-simple-import-sort` 카탈로그에 추가 및 설정 정리            +17/-31
Style	1 files globals.css CSS 테마를 클래스 기반으로 변경하여 JS 제어 가능하게 함                                              +6/-11
Formatting	4 files commit.mjs 스크립트 파일의 import 및 문자열 형식 통일                                                            +27/-28  ready-script.mjs 스크립트 파일의 import 및 문자열 형식 통일                                                            +39/-39  run-lint-staged.mjs 스크립트 파일의 문자열 형식 통일                                                                              +2/-2      convert-to-catalog.mjs 스크립트 파일의 import 및 배열 형식 통일                                                              +38/-10
Dependencies	2 files package.json `eslint-plugin-simple-import-sort` 및 `globals` 의존성 추가        +2/-0      pnpm-lock.yaml 새로운 의존성 추가에 따른 lockfile 업데이트                                                          +24/-0

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review 타입 안전성 개선 window.matchMedia의 addListener와 removeListener 메서드에 handler as any로 타입 캐스팅을 사용하고 있어요. 대부분의 최신 브라우저에서는 addEventListener와 removeEventListener를 지원하므로, 이 부분을 먼저 사용하고 구형 브라우저를 위한 폴백으로 addListener를 사용하는 것이 더 타입 안전하고 명확할 것 같아요. 혹시 MediaQueryList 타입 정의를 확장하여 addListener와 removeListener를 포함하거나, handler 함수의 타입을 명시적으로 지정하는 방법을 고려해볼 수 있을까요? } catch { mq.addListener(handler as any); } return () => { try { mq.removeEventListener('change', handler); } catch { mq.removeListener(handler as any); } 스타일링 방식 일관성 ThemeToggle 컴포넌트에서 인라인 스타일을 사용하고 있네요! 🎨 물론 간단한 스타일이라 괜찮지만, 우리 프로젝트에서 vanilla-extract를 사용하고 있으니, vanilla-extract를 활용해서 스타일을 정의하면 프로젝트 전체의 스타일링 일관성을 유지하고 재사용성을 높일 수 있을 것 같아요. 어떻게 생각하세요? <button onClick={toggle} aria-pressed={theme === 'dark'} title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'} style={{ appearance: 'none', border: '1px solid rgba(0,0,0,0.12)', background: 'transparent', color: 'var(--foreground)', padding: '6px 10px', borderRadius: 8, cursor: 'pointer', fontSize: 14, }}

[github-actions]

PR Code Suggestions ✨

No code suggestions found for the PR.