feat: Tailwind CSS v4 + @wing/ui 디자인 시스템 #21

병합
htlee feature/tailwind-design-system 에서 develop 로 6 commits 를 머지했습니다 2026-02-17 06:46:49 +09:00
소유자

Summary

  • Tailwind CSS v4 + @tailwindcss/vite 플러그인 설치
  • @wing/ui 모노레포 패키지 생성 (Button, IconButton, ToggleButton, Badge, Panel, Section, ListItem, TextInput)
  • 디자인 토큰 시스템 (dark/light 테마, CSS 변수 + Tailwind @theme 매핑)
  • CSS 전환: base, layout, topbar, toggles → Tailwind 유틸리티 + @wing/ui 컴포넌트
  • useTheme 훅 + Topbar 테마 토글 버튼
  • 나머지 11개 CSS 파일은 Tailwind과 공존 (점진적 전환 예정)

Changes

커밋 설명
chore: Tailwind CSS v4 + @wing/ui 인프라 packages/ui 생성, Vite/Tailwind 설정, tokens.css
feat(ui): 기본 컴포넌트 8개 Button, IconButton, ToggleButton, Badge, Panel, Section, ListItem, TextInput
refactor: base/layout/topbar CSS 전환 layout.css, topbar.css 삭제, Tailwind 인라인
refactor: toggles CSS 전환 toggles.css 삭제, @wing/ui ToggleButton 적용
feat: useTheme 훅 + 테마 토글 localStorage 기반 dark/light 전환

Test plan

  • npm run build:web 성공 (CSS 112.90KB, JS 4,205.26KB)
  • npm run lint 0 errors
  • 다크 테마 (기본) 기존과 동일한 시각
  • 라이트 테마 전환 시 모든 UI 요소 적용 확인
  • 기존 CSS로 구현된 위젯들 정상 동작 확인

🤖 Generated with Claude Code

## Summary - Tailwind CSS v4 + @tailwindcss/vite 플러그인 설치 - @wing/ui 모노레포 패키지 생성 (Button, IconButton, ToggleButton, Badge, Panel, Section, ListItem, TextInput) - 디자인 토큰 시스템 (dark/light 테마, CSS 변수 + Tailwind @theme 매핑) - CSS 전환: base, layout, topbar, toggles → Tailwind 유틸리티 + @wing/ui 컴포넌트 - useTheme 훅 + Topbar 테마 토글 버튼 - 나머지 11개 CSS 파일은 Tailwind과 공존 (점진적 전환 예정) ## Changes | 커밋 | 설명 | |------|------| | chore: Tailwind CSS v4 + @wing/ui 인프라 | packages/ui 생성, Vite/Tailwind 설정, tokens.css | | feat(ui): 기본 컴포넌트 8개 | Button, IconButton, ToggleButton, Badge, Panel, Section, ListItem, TextInput | | refactor: base/layout/topbar CSS 전환 | layout.css, topbar.css 삭제, Tailwind 인라인 | | refactor: toggles CSS 전환 | toggles.css 삭제, @wing/ui ToggleButton 적용 | | feat: useTheme 훅 + 테마 토글 | localStorage 기반 dark/light 전환 | ## Test plan - [x] `npm run build:web` 성공 (CSS 112.90KB, JS 4,205.26KB) - [x] `npm run lint` 0 errors - [x] 다크 테마 (기본) 기존과 동일한 시각 - [x] 라이트 테마 전환 시 모든 UI 요소 적용 확인 - [x] 기존 CSS로 구현된 위젯들 정상 동작 확인 🤖 Generated with [Claude Code](https://claude.com/claude-code)
htlee added 5 commits 2026-02-17 06:23:31 +09:00
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- useTheme: localStorage 기반 다크/라이트 테마 전환
- data-theme 속성으로 CSS 변수 자동 전환
- Topbar에 Light/Dark 토글 버튼 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
htlee added 1 commit 2026-02-17 06:41:36 +09:00
- @theme에서 --text-xs/sm 오버라이드 제거 (Tailwind 기본값 복원)
- 라이트 모드: bg #e2e8f0, border #94a3b8로 영역 대비 강화
- 새 토큰: --wing-glass-dense, --wing-overlay, --wing-card-alpha, --wing-subtle
- 8개 CSS 파일의 하드코딩된 rgba 값을 CSS 변수로 전환
- MapLibre 컨트롤 아이콘 라이트 모드 대응

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
htlee merged commit 255c082436 into develop 2026-02-17 06:46:49 +09:00
"로그인하여 이 대화에 참여"
No reviewers
레이블 없음
마일스톤 없음
담당자 없음
참여자 1명
알림
마감일
기한이 올바르지 않거나 범위를 벗어났습니다. 'yyyy-mm-dd'형식을 사용해주십시오.

마감일이 설정되지 않았습니다.

의존성

No dependencies set.

Reference: gc/gc-wing#21
No description provided.