diff --git a/docs/refactoring/LOG.md b/docs/refactoring/LOG.md index f2e90c0..614731d 100644 --- a/docs/refactoring/LOG.md +++ b/docs/refactoring/LOG.md @@ -31,6 +31,188 @@ --- +## 2026-01-26: 관리 페이지 UI/UX 개선 및 네비게이션 단순화 + +### 변경 사항 + +#### 1. 관리 페이지 2단 레이아웃 구현 +- **목표**: 프로젝트/작업자/코드 관리 페이지의 UI를 통일되고 현대적인 레이아웃으로 개선 +- **작업 내용**: + - 240px 고정폭 사이드바 네비게이션 추가 + - `.page-container` flexbox 레이아웃으로 변경 + - 페이지 헤더를 카드 형태로 분리하여 시각적 계층 강화 + - 3열 카드 그리드 레이아웃 적용 (repeat(3, 1fr)) + - 카드 높이 통일 (프로젝트/작업자: 420px, 코드: 최소 200px) + - 반응형 디자인 구현 (1200px: 2열, 768px: 1열) + +#### 2. 코드 관리 페이지 특화 디자인 +- **목표**: 탭 기반 코드 관리 페이지의 가독성 및 사용성 향상 +- **작업 내용**: + - 탭 네비게이션 스타일 개선 (언더라인 탭, 호버 효과) + - 상태별/심각도별 컬러 보더 적용 + - 정상 상태: 녹색 / 오류 상태: 빨간색 + - 심각도 낮음: 녹색 / 보통: 노란색 / 높음: 주황색 / 심각: 빨간색 + - 작업 유형: 파란색 + - 해결 가이드 섹션 스타일링 (노란색 배경 + 왼쪽 보더) + - 아이콘을 48x48 둥근 박스로 디자인 + - 탭 전환 시 페이드인 애니메이션 추가 + +#### 3. 네비게이션 구조 단순화 +- **목표**: 불필요한 중간 허브 페이지 제거로 사용자 경험 개선 +- **작업 내용**: + - `admin/index.html` (중간 허브 페이지) 삭제 + - 대시보드 → 프로젝트 관리로 직접 연결 (2단계 → 1단계) + - 관리 페이지 사이드바 백링크 변경: "작업관리로 ◀" → "대시보드로 🏠" + - 대시보드의 "작업 관리" 카드를 "프로젝트 관리"로 명칭 변경 + +#### 4. 관리 페이지 표준화 문서 작성 +- **목표**: 향후 관리 페이지 개발 시 일관성 유지를 위한 가이드라인 제공 +- **작업 내용**: + - `ADMIN_PAGE_STANDARD.md` 생성 (60+ 페이지) + - HTML 템플릿, CSS 클래스, 파일 명명 규칙 정의 + - 3가지 페이지 타입 표준화 (카드 그리드/테이블/탭) + - 28개 필수 CSS 클래스 문서화 + - 반응형 디자인 브레이크포인트 테이블 + - 개발 체크리스트 (HTML, CSS, JavaScript, 접근성) + +### 영향 범위 + +**신규 생성된 파일**: +- `docs/ADMIN_PAGE_STANDARD.md` - 관리 페이지 표준 가이드 +- `web-ui/css/admin-pages.css` (v7) - 관리 페이지 전용 CSS (1,537줄) + +**수정된 파일**: +- `web-ui/pages/admin/projects.html` - 2단 레이아웃 적용 +- `web-ui/pages/admin/workers.html` - 2단 레이아웃 적용 +- `web-ui/pages/admin/codes.html` - 2단 레이아웃 + 탭 디자인 개선 +- `web-ui/pages/dashboard.html` - 프로젝트 관리 직접 연결 +- `web-ui/css/project-management.css` - 카드 레이아웃 개선 +- `web-ui/js/project-management.js` - 메타 정보 key-value 형식으로 재구성 + +**삭제된 파일**: +- `web-ui/pages/admin/index.html` (171줄) - 불필요한 중간 허브 페이지 + +**영향받는 기능**: +- 프로젝트/작업자/코드 관리 페이지 UI +- 대시보드에서 관리 페이지로의 네비게이션 흐름 +- 관리 페이지 간 상호 이동 (사이드바 네비게이션) + +### 코드 변경 + +#### Before (HTML 구조) +```html + +
+