gc/gc-wing
1
0
포크 0
코드 이슈 풀 리퀘스트 Actions 위키 활동

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

병합
htlee feature/tailwind-design-system 에서 develop 로 6 commits 를 머지했습니다 2026-02-17 06:46:49 +09:00
대화 0 커밋 6 파일 변경됨 41 +1170 -300
htlee 코멘트됨, 2026-02-17 06:23:31 +09:00
소유자
Copy Link

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
레이블
레이블 초기화
No items
레이블 없음
마일스톤
마일스톤 초기화
No items
마일스톤 없음
담당자
담당자 초기화
담당자 없음
참여자 1명
알림
마감일
기한이 올바르지 않거나 범위를 벗어났습니다. 'yyyy-mm-dd'형식을 사용해주십시오.

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

의존성

No dependencies set.

Reference: gc/gc-wing#21
No description provided.
Delete Branch "feature/tailwind-design-system"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?