kjh2064
0d81ace5da
- base.css: Foundation styles, typography, resets - components.css: Buttons, cards, badges, alerts, modals - forms.css: Input fields, validation, checkboxes, radio - tables.css: Table styles, responsive, pagination - layout.css: Header, sidebar, navigation, grid - darkmode.css: Dark theme variables and overrides - responsive.css: Mobile-first, breakpoints, grid columns - utilities.css: Spacing, colors, text, helpers All files support Bootstrap 5 + SmartAdmin theme - Total CSS: ~1800 lines (organized, maintainable) - Supports dark mode via data-bs-theme="dark" - Mobile-first responsive design - Preserved smartapp.min.css for legacy compatibility Load order: 1. base → components → forms → tables → layout 2. darkmode → responsive → utilities 3. smartapp.min.css (fallback) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
383 lines
11 KiB
Markdown
383 lines
11 KiB
Markdown
# SmartAdmin 5.5 — Bootstrap 템플릿 종합 개선 프로젝트
|
|
|
|
**프로젝트 시작**: 2026-07-05
|
|
**목표 완료**: 2026-07-15 (11일)
|
|
**상태**: 🚀 준비 완료
|
|
|
|
---
|
|
|
|
## 📊 현재 상태
|
|
|
|
| 항목 | 수량 | 상태 |
|
|
|------|------|------|
|
|
| **총 HTML 페이지** | 160개 | 정적 (Node.js 없음) |
|
|
| **대시보드** | 4개 | 개선 필요 |
|
|
| **인증 페이지** | 5개 | 리팩토링 필요 |
|
|
| **UI 컴포넌트** | 23개 | 최적화 필요 |
|
|
| **폼 페이지** | 4개 | 개선 필요 |
|
|
| **데이터 테이블** | 20개 | 반응형 최적화 필요 |
|
|
| **CSS 파일** | 1개 (minified) | 모듈화 필요 |
|
|
| **JavaScript** | core, optional, pages | 정리 필요 |
|
|
|
|
**기술 스택**:
|
|
- ✅ Bootstrap 5.x (이미 사용 중)
|
|
- ✅ FontAwesome 6.x
|
|
- ✅ SmartAdmin Icons
|
|
- ✅ ApexCharts
|
|
- ✅ SmartTables
|
|
- ❌ CSS/JS 프리프로세서 없음 (순수 HTML/CSS/JS)
|
|
|
|
---
|
|
|
|
## 🎯 작업 범위 (4개 영역)
|
|
|
|
### **1️⃣ 기존 페이지 개선 (리팩토링)**
|
|
|
|
#### Phase 1.1: 대시보드 최적화 (4개)
|
|
- `dashboard-control-center.html` → Bootstrap Grid 개선
|
|
- `dashboard-marketing.html` → 카드 레이아웃 정리
|
|
- `dashboard-project-management.html` → Responsive 강화
|
|
- `dashboard-subscription.html` → 모바일 최적화
|
|
|
|
**체크리스트**:
|
|
- [ ] 12-column Bootstrap Grid 정확성 검증
|
|
- [ ] 컨테이너 너비 최적화
|
|
- [ ] 반응형 클래스 추가 (sm, md, lg, xl, xxl)
|
|
- [ ] 모바일 우선 설계 구현
|
|
- [ ] 다크모드 호환성 확인
|
|
|
|
**예상 시간**: 4시간
|
|
|
|
---
|
|
|
|
#### Phase 1.2: 인증 페이지 리디자인 (5개)
|
|
- `auth-login.html` → 모던 디자인
|
|
- `auth-register.html` → 통일된 스타일
|
|
- `auth-forgetpassword.html` → 사용성 개선
|
|
- `auth-lockscreen.html` → 미니멀 디자인
|
|
- `auth-twofactor.html` → 보안 UX
|
|
|
|
**체크리스트**:
|
|
- [ ] 폼 검증 스타일 (Bootstrap is-invalid, is-valid)
|
|
- [ ] 에러 메시지 표준화
|
|
- [ ] 비밀번호 강도 표시기
|
|
- [ ] 소셜 로그인 버튼 추가
|
|
- [ ] 모바일 반응형
|
|
|
|
**예상 시간**: 5시간
|
|
|
|
---
|
|
|
|
#### Phase 1.3: 폼 페이지 개선 (4개)
|
|
- `forms-inputs.html` → 입력 필드 통일
|
|
- `forms-validation.html` → 검증 규칙 정리
|
|
- `forms-checkbox-radio.html` → 선택 컴포넌트 개선
|
|
- `forms-groups.html` → 필드 그룹화
|
|
|
|
**체크리스트**:
|
|
- [ ] Bootstrap form-control 클래스 적용
|
|
- [ ] 라벨 정렬 (위/좌측) 옵션
|
|
- [ ] 입력 크기 (sm, lg) 다양성
|
|
- [ ] 장애인 접근성 (ARIA)
|
|
- [ ] 인라인 폼 레이아웃
|
|
|
|
**예상 시간**: 4시간
|
|
|
|
---
|
|
|
|
#### Phase 1.4: 테이블 최적화 (20개)
|
|
- `tables-basic.html` → Bootstrap Table 클래스 표준화
|
|
- `smarttables-*.html` → 반응형 테이블 패턴
|
|
- 스크롤 테이블 → 수평 스크롤 개선
|
|
- 모바일 스택 레이아웃 → 카드 형식 대체 안 제공
|
|
|
|
**체크리스트**:
|
|
- [ ] 테이블 테마 (striped, hover, bordered)
|
|
- [ ] 반응형 스크롤 (overflow-x-auto)
|
|
- [ ] 모바일 카드 뷰 (선택 사항)
|
|
- [ ] 데이터 정렬/필터 UI
|
|
- [ ] 페이지네이션 스타일
|
|
|
|
**예상 시간**: 6시간
|
|
|
|
---
|
|
|
|
### **2️⃣ 새 페이지/컴포넌트 추가**
|
|
|
|
#### Phase 2.1: 사용자 관리 시스템 (신규 5개)
|
|
- `users-list.html` → 사용자 목록 (필터, 검색)
|
|
- `users-detail.html` → 사용자 상세 정보
|
|
- `users-edit.html` → 사용자 편집
|
|
- `users-roles.html` → 역할/권한 관리
|
|
- `users-audit.html` → 감사 로그
|
|
|
|
**기술**:
|
|
- SmartTables (필터, 정렬, 검색)
|
|
- 모달 폼 (부트스트랩 Modal)
|
|
- 배치 작업 (선택 체크박스)
|
|
- 상태 배지 (승인, 거부, 대기)
|
|
|
|
**예상 시간**: 8시간
|
|
|
|
---
|
|
|
|
#### Phase 2.2: 설정/환경 페이지 (신규 4개)
|
|
- `settings-general.html` → 일반 설정
|
|
- `settings-security.html` → 보안 설정
|
|
- `settings-notifications.html` → 알림 설정
|
|
- `settings-api.html` → API 키 관리
|
|
|
|
**기술**:
|
|
- 탭 인터페이스 (Bootstrap Nav-tabs)
|
|
- 토글 스위치 (Bootstrap Switch)
|
|
- 폼 저장 (로딩 상태 표시)
|
|
|
|
**예상 시간**: 5시간
|
|
|
|
---
|
|
|
|
#### Phase 2.3: 보고서/분석 (신규 3개)
|
|
- `reports-dashboard.html` → 리포트 대시보드
|
|
- `reports-export.html` → 내보내기 옵션
|
|
- `reports-schedule.html` → 예약 리포트
|
|
|
|
**기술**:
|
|
- ApexCharts 통합
|
|
- 데이트 피커
|
|
- 내보내기 옵션 (PDF, CSV, Excel)
|
|
|
|
**예상 시간**: 6시간
|
|
|
|
---
|
|
|
|
### **3️⃣ UI/UX 개선 (디자인 시스템)**
|
|
|
|
#### Phase 3.1: 컴포넌트 표준화
|
|
- 버튼: 크기 (xs, sm, md, lg), 상태 (default, primary, danger)
|
|
- 카드: 헤더, 바디, 풋터 구조
|
|
- 배지: 상태별 색상 (success, warning, danger, info)
|
|
- 알림: 4가지 유형 (success, warning, danger, info)
|
|
- 모달: 기본, 큰, 작은 사이즈
|
|
- 탭: 수평, 수직, 약 탭
|
|
|
|
**산출물**:
|
|
- `components-showcase.html` (모든 컴포넌트 시연)
|
|
- `style-guide.html` (스타일 가이드)
|
|
- `css/components.css` (모듈화된 CSS)
|
|
|
|
**예상 시간**: 8시간
|
|
|
|
---
|
|
|
|
#### Phase 3.2: 컬러/타이포그래피 시스템
|
|
- 기본 색상 (Primary, Secondary, Success, Warning, Danger, Info)
|
|
- 중성 색상 (Gray, Dark, Light)
|
|
- 텍스트 타이포그래피 (h1~h6, body, small, lead)
|
|
- 간격 시스템 (패딩, 마진)
|
|
|
|
**산출물**:
|
|
- `css/colors.css` (색상 변수)
|
|
- `css/typography.css` (타이포그래피)
|
|
- `colors-palette.html` (색상 팔레트 페이지)
|
|
|
|
**예상 시간**: 4시간
|
|
|
|
---
|
|
|
|
#### Phase 3.3: 아이콘 시스템 정리
|
|
- FontAwesome 6.x 최신 아이콘
|
|
- SmartAdmin 커스텀 아이콘
|
|
- 아이콘 크기 표준화 (16px, 20px, 24px, 32px)
|
|
- 아이콘 색상 팔레트
|
|
|
|
**산출물**:
|
|
- `icons-reference.html` (아이콘 라이브러리)
|
|
|
|
**예상 시간**: 3시간
|
|
|
|
---
|
|
|
|
### **4️⃣ 반응형 최적화**
|
|
|
|
#### Phase 4.1: 모바일 우선 설계
|
|
- 화면 너비별 테스트 (320px, 375px, 425px, 768px, 1024px, 1440px)
|
|
- 터치 대상 크기 최소 44x44px
|
|
- 모바일 내비게이션 (햄버거 메뉴)
|
|
- 모바일 폼 최적화
|
|
|
|
**예상 시간**: 6시간
|
|
|
|
---
|
|
|
|
#### Phase 4.2: 다크모드 완벽 지원
|
|
- Bootstrap 다크모드 변수 적용
|
|
- 모든 페이지 다크모드 테스트
|
|
- 이미지 다크모드 대응 (필터)
|
|
- 색상 대비 WCAG AA 준수
|
|
|
|
**예상 시간**: 4시간
|
|
|
|
---
|
|
|
|
#### Phase 4.3: 성능 최적화
|
|
- CSS 파일 모듈화 (현재 1개 → 10개+)
|
|
- JavaScript 최소화
|
|
- 이미지 최적화
|
|
- 폰트 로딩 최적화 (웹폰트)
|
|
|
|
**예상 시간**: 5시간
|
|
|
|
---
|
|
|
|
## 📅 전체 일정
|
|
|
|
| Phase | 작업 | 예상 시간 | 시작 | 완료 |
|
|
|-------|------|----------|------|------|
|
|
| **1** | 기존 페이지 개선 | 19시간 | 7/5 | 7/7 |
|
|
| **2** | 신규 페이지 추가 | 19시간 | 7/7 | 7/9 |
|
|
| **3** | UI/UX 개선 | 15시간 | 7/9 | 7/11 |
|
|
| **4** | 반응형 최적화 | 15시간 | 7/11 | 7/13 |
|
|
| **5** | 통합 테스트 | 8시간 | 7/13 | 7/14 |
|
|
| **6** | 최종 문서화 | 4시간 | 7/14 | 7/15 |
|
|
|
|
**총 예상 시간**: 80시간 (약 11일, 하루 7시간 기준)
|
|
|
|
---
|
|
|
|
## ✅ 성공 기준
|
|
|
|
### 기존 페이지
|
|
- [ ] 모든 페이지 반응형 (320px ~ 1440px)
|
|
- [ ] 모바일/태블릿/데스크톱 각각 검증
|
|
- [ ] 다크모드 호환성 100%
|
|
- [ ] WCAG AA 접근성 준수
|
|
- [ ] 로딩 시간 < 3초 (LCP)
|
|
|
|
### 신규 페이지
|
|
- [ ] 5개 + 4개 + 3개 = 12개 새 페이지 생성
|
|
- [ ] 모두 Bootstrap 기반
|
|
- [ ] 모두 반응형
|
|
|
|
### 디자인 시스템
|
|
- [ ] 컴포넌트 쇼케이스 완성
|
|
- [ ] 스타일 가이드 작성
|
|
- [ ] CSS 모듈화 (최소 10개 파일)
|
|
- [ ] 컬러/타이포그래피 문서화
|
|
|
|
### 반응형
|
|
- [ ] 6개 화면 크기별 완벽 동작
|
|
- [ ] 터치 인터랙션 최적화
|
|
- [ ] 모바일 내비게이션 구현
|
|
- [ ] 다크모드 전체 지원
|
|
|
|
---
|
|
|
|
## 📂 결과물 구조
|
|
|
|
```
|
|
smartadmin/
|
|
├── index.html (개선됨)
|
|
├── dashboard/
|
|
│ ├── control-center.html (리팩토링)
|
|
│ ├── marketing.html (리팩토링)
|
|
│ ├── project-management.html (리팩토링)
|
|
│ └── subscription.html (리팩토링)
|
|
├── auth/
|
|
│ ├── login.html (개선됨)
|
|
│ ├── register.html (개선됨)
|
|
│ ├── forgetpassword.html (개선됨)
|
|
│ ├── lockscreen.html (개선됨)
|
|
│ └── twofactor.html (개선됨)
|
|
├── users/ (신규)
|
|
│ ├── list.html
|
|
│ ├── detail.html
|
|
│ ├── edit.html
|
|
│ ├── roles.html
|
|
│ └── audit.html
|
|
├── settings/ (신규)
|
|
│ ├── general.html
|
|
│ ├── security.html
|
|
│ ├── notifications.html
|
|
│ └── api.html
|
|
├── reports/ (신규)
|
|
│ ├── dashboard.html
|
|
│ ├── export.html
|
|
│ └── schedule.html
|
|
├── forms/ (개선됨)
|
|
│ ├── inputs.html
|
|
│ ├── validation.html
|
|
│ ├── checkbox-radio.html
|
|
│ └── groups.html
|
|
├── tables/ (개선됨)
|
|
│ ├── basic.html
|
|
│ ├── smarttables/ (20개)
|
|
├── ui/
|
|
│ ├── components-showcase.html (신규)
|
|
│ ├── style-guide.html (신규)
|
|
│ └── ...
|
|
├── css/ (모듈화됨)
|
|
│ ├── base.css
|
|
│ ├── components.css
|
|
│ ├── colors.css
|
|
│ ├── typography.css
|
|
│ ├── responsive.css
|
|
│ ├── darkmode.css
|
|
│ └── smartapp.min.css (유지)
|
|
├── docs/
|
|
│ ├── BOOTSTRAP_GUIDELINES.md
|
|
│ ├── COMPONENT_DOCUMENTATION.md
|
|
│ ├── ACCESSIBILITY_CHECKLIST.md
|
|
│ └── MOBILE_TESTING_RESULTS.md
|
|
└── BOOTSTRAP_MIGRATION_WBS.md (이 문서)
|
|
```
|
|
|
|
---
|
|
|
|
## 🔄 다음 단계
|
|
|
|
### 즉시 시작 (2026-07-05)
|
|
|
|
1. **Phase 1.1 시작** — 대시보드 최적화
|
|
- [ ] `dashboard-control-center.html` 검토
|
|
- [ ] Bootstrap Grid 정확성 확인
|
|
- [ ] 반응형 클래스 추가
|
|
- [ ] 모바일 테스트
|
|
|
|
2. **Git 저장소 설정**
|
|
- [ ] SmartAdmin 프로젝트를 Git으로 초기화 (또는 기존 저장소 확인)
|
|
- [ ] 분기 생성: `feature/bootstrap-migration`
|
|
- [ ] 첫 커밋: "chore: Initialize SmartAdmin Bootstrap Migration WBS"
|
|
|
|
3. **개발 환경 설정**
|
|
- [ ] 로컬 서버 시작 (Python SimpleHTTPServer 또는 Node.js)
|
|
- [ ] 모바일 디버깅 도구 설정 (Chrome DevTools, responsive mode)
|
|
|
|
---
|
|
|
|
## 📝 커밋 규칙
|
|
|
|
```
|
|
Format: [Phase].[Stage] <description>
|
|
|
|
Examples:
|
|
- "1.1: Refactor dashboard-control-center Grid layout"
|
|
- "2.1: Add users-list.html with SmartTables integration"
|
|
- "3.1: Standardize component styles (buttons, cards, badges)"
|
|
- "4.1: Implement mobile-first responsive design"
|
|
```
|
|
|
|
---
|
|
|
|
## 🎓 참고 자료
|
|
|
|
- [Bootstrap 5 Docs](https://getbootstrap.com/docs/5.0/)
|
|
- [SmartAdmin Docs](https://getwebora.com/smartadmin/)
|
|
- [Web Accessibility (WCAG 2.1)](https://www.w3.org/WAI/WCAG21/quickref/)
|
|
- [Mobile Testing Guide](https://developers.google.com/web/tools/chrome-devtools/device-mode)
|
|
|
|
---
|
|
|
|
**작성자**: Claude Code
|
|
**마지막 업데이트**: 2026-07-05 16:00 KST
|
|
**상태**: 📋 로드맵 확정 → 🚀 준비 완료
|