refactor(css): 인라인 스타일 → Tailwind CSS 리팩토링 (3,500+ → 1,286건) #57

htlee · 2026-03-01T12:27:40+09:00

htlee 코멘트됨,

2026-03-01 12:27:40 +09:00

소유자

Summary

인라인 style={{}} 3,500+건 → 1,286건으로 63% 감소
CSS 아키텍처 구축: @layer base/components 분리, wing-* 디자인 시스템
Tailwind config 색상 불일치 수정 (t1/t2/t3 CSS 변수 값으로 통일)
cn() 유틸리티 함수 추가 (className 조합)
App.css 삭제 → components.css로 통합

변경 내역

Phase 0: CSS 인프라 구축

index.css → 7줄 엔트리포인트 (@import + @tailwind)
common/styles/base.css 생성 (@layer base 추출)
common/styles/components.css 생성 (@layer components 통합)
common/styles/wing.css 생성 (wing-* 디자인 시스템)
tailwind.config.js 색상값 CSS 변수에 맞춰 수정

Phase 1: body default 일괄 제거 (~1,055건)

fontFamily: var(--fK) 781건 삭제 (body에서 상속)
color: var(--t1) 274건 삭제 (body에서 상속)

Phase 2~3: Tailwind 유틸리티 변환 (~1,823건)

CSS 변수 색상 → text-text-2, bg-bg-1 등
flex/grid/padding/fontSize/fontWeight → Tailwind 클래스
hex 하드코딩 색상 → text-[#hex] arbitrary values
58개 TSX 파일 수정

남은 1,286건 (의도적 유지)

동적 값: color: item.color, width: ${pct}%
조건부: 삼항 연산자 포함 스타일
rgba()/gradient/boxShadow
비표준 gridTemplateColumns

Test plan

npx vite build 성공 (JS 2,884KB, CSS 144KB)
tsc -b 타입 체크 통과
ESLint 통과
각 탭 UI 수동 비교 검증 (배포 버전과 대조)
다크 테마 색상 일관성 확인
스크롤바, 호버, 애니메이션 정상 동작 확인

🤖 Generated with Claude Code

## Summary - 인라인 `style={{}}` 3,500+건 → **1,286건**으로 63% 감소 - CSS 아키텍처 구축: `@layer base/components` 분리, `wing-*` 디자인 시스템 - Tailwind config 색상 불일치 수정 (t1/t2/t3 CSS 변수 값으로 통일) - `cn()` 유틸리티 함수 추가 (className 조합) - `App.css` 삭제 → `components.css`로 통합 ## 변경 내역 ### Phase 0: CSS 인프라 구축 - `index.css` → 7줄 엔트리포인트 (@import + @tailwind) - `common/styles/base.css` 생성 (@layer base 추출) - `common/styles/components.css` 생성 (@layer components 통합) - `common/styles/wing.css` 생성 (wing-* 디자인 시스템) - `tailwind.config.js` 색상값 CSS 변수에 맞춰 수정 ### Phase 1: body default 일괄 제거 (~1,055건) - `fontFamily: var(--fK)` 781건 삭제 (body에서 상속) - `color: var(--t1)` 274건 삭제 (body에서 상속) ### Phase 2~3: Tailwind 유틸리티 변환 (~1,823건) - CSS 변수 색상 → `text-text-2`, `bg-bg-1` 등 - flex/grid/padding/fontSize/fontWeight → Tailwind 클래스 - hex 하드코딩 색상 → `text-[#hex]` arbitrary values - 58개 TSX 파일 수정 ### 남은 1,286건 (의도적 유지) - 동적 값: `color: item.color`, `width: ${pct}%` - 조건부: 삼항 연산자 포함 스타일 - rgba()/gradient/boxShadow - 비표준 gridTemplateColumns ## Test plan - [x] `npx vite build` 성공 (JS 2,884KB, CSS 144KB) - [x] `tsc -b` 타입 체크 통과 - [x] ESLint 통과 - [ ] 각 탭 UI 수동 비교 검증 (배포 버전과 대조) - [ ] 다크 테마 색상 일관성 확인 - [ ] 스크롤바, 호버, 애니메이션 정상 동작 확인 🤖 Generated with [Claude Code](https://claude.com/claude-code)

htlee added 5 commits 2026-03-01 12:27:40 +09:00

refactor(css): CSS 인프라 구축 + body default 인라인 스타일 1,055건 제거 dec066e8bb

Phase 0: CSS 인프라 구축
- Tailwind config 색상 불일치 수정 (t1/t2/t3 → CSS 변수 값으로 통일)
- index.css 1,302줄 → @import 엔트리포인트 7줄로 축소
- common/styles/base.css: @layer base 추출 (CSS 변수, 리셋, body 기본값)
- common/styles/components.css: @layer components + utilities 추출
- common/styles/wing.css: wing-* 디자인 시스템 클래스 신규 정의
- common/utils/cn.ts: className 조합 유틸리티
- App.css 삭제 (내용을 components.css로 통합)

Phase 1: body default 인라인 스타일 일괄 제거
- fontFamily: 'var(--fK)' 781건 제거 (body font-family 상속)
- color: 'var(--t1)' 274건 제거 (body color 상속)
- 빈 style={{}} 78건 정리
- 31개 파일, JS 번들 23KB 감소

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor(css): 인라인 스타일 → Tailwind 유틸리티 클래스 변환 (Phase 2, ~990건) 3fc8f03238

Phase 2: 정적 인라인 스타일을 Tailwind className으로 변환
- common/: MapView, BacktrackReplayBar, LoginPage, LayerTree, ComboBox, SubMenuBar
- hns/: HNSSubstanceView, HNSScenarioView, HNSView, HNSLeftPanel 등 8파일
- prediction/: BoomDeploymentTheoryView, OilBoomSection, RecalcModal, RightPanel 등 8파일
- incidents/: IncidentsView, IncidentsLeftPanel, IncidentsRightPanel
- rescue/: RescueScenarioView
- aerial/: SatelliteRequest, AerialTheoryView
- assets/: ShipInsurance, AssetTheory, AssetManagement 등 5파일
- board/: BoardView
- reports/: ReportsView, OilSpillReportTemplate, ReportGenerator
- weather/: WeatherMapOverlay, WeatherView, WeatherRightPanel

변환 패턴: color/background/border/borderRadius/display/flex/gap/fontSize/fontWeight → Tailwind
동적 스타일(rgba, gradient, 삼항 조건부, 런타임 변수)은 style prop에 유지
JS 번들: 2,921KB → 2,897KB (-24KB)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor(css): 인라인 스타일 → Tailwind 추가 변환 (Phase 2 계속) 1dacb22487

대형 파일 추가 변환:
- HNSSubstanceView: 275→209건 (66건 변환)
- OilSpillTheoryView: 435→417건 (18건 변환)
- IncidentsLeftPanel: 61→34건 (27건 변환)
- RescueView: 54→47건 (7건 변환)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor(css): 인라인 style → Tailwind className 일괄 변환 (229건) 628c07f4fb

안전한 패턴 매칭으로 단독 color/background/fontWeight/fontSize/flex 스타일을
Tailwind 유틸리티 클래스로 변환. 혼합 style에서 개별 속성 추출은 제외하여
시각적 회귀 방지.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor(css): Phase 3 인라인 스타일 → Tailwind 대규모 변환 (486건) b00bb56af3

대형 파일 집중 변환:
- SatelliteRequest: 134→66 (hex 색상 일괄 변환)
- IncidentsView: 141→90, MediaModal: 97→38
- HNSScenarioView: 78→38, HNSView: 49→31
- LoginPage, MapView, PredictionInputSection 등 중소 파일 8개

변환 패턴: hex 색상→text-[#hex], CSS 변수→Tailwind 유틸리티,
flex/grid/padding/fontSize/fontWeight/overflow 등 정적 속성 className 이동

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

htlee merged commit ec195c9e79 into develop

2026-03-01 12:31:17 +09:00

htlee 삭제된 브랜치 feature/css-refactoring

2026-03-01 12:31:18 +09:00

htlee 커밋

2026-03-01 12:31:19 +09:00

에서 이 이슈 언급

Merge pull request 'refactor(css): 인라인 스타일 → Tailwind CSS 리팩토링 (3,500+ → 1,286건)' (#57) from feature/css-refactoring into develop

htlee referenced this pull request

2026-03-01 13:11:52 +09:00

fix(css): CSS 회귀 버그 수정 + SCAT 우측 패널 구현 #59

"로그인하여 이 대화에 참여"