모든 화면 크기에서 일관되고 안정적인 사용자 경험을 제공하도록
UI 컴포넌트를 전면 개선했습니다.
주요 변경사항:
- 네비게이션 바: flex-wrap, rem 단위, sticky positioning 적용
- 사용자 정보 영역: max-width로 크기 제한, 텍스트 overflow 처리
- 공통 헤더: clamp()로 반응형 폰트, 반응형 패딩 적용
- 모든 관리 페이지: ES6 모듈 로딩 통일 (type="module")
- 반응형 breakpoint: 1200px, 768px, 640px, 480px
개선 효과:
✅ 모든 페이지에서 일관된 헤더 표시
✅ 사용자 정보 영역 늘어나는 문제 해결
✅ 모든 화면 크기에서 최적화된 레이아웃
✅ rem 단위 사용으로 접근성 개선
수정된 파일:
- web-ui/components/navbar.html: 전면 리팩토링
- web-ui/css/common.css: 반응형 스타일 추가
- web-ui/pages/**/*.html: 모듈 로딩 및 버전 업데이트 (13개 파일)
- web-ui/js/*.js: 모듈 시스템 개선
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit applies the modular refactoring to the web-ui,
including the new daily attendance tracking feature.
- **Modular Structure:** Re-introduced the modular files 'config.js',
'component-loader.js', and 'navigation.js' to centralize configuration,
component loading, and navigation logic.
- **Refactored Dashboard:** Refactored 'group-leader-dashboard.js' to use
the new 'apiCall' function from 'api-config.js' for API requests,
removing duplicated code and improving error handling.
- **ES6 Modules:** Updated 'group-leader.html' to load scripts as
ES6 modules ('type="module"'), ensuring compatibility with the
modular JavaScript files.
- **Clean-up:** Removed unnecessary global variables and duplicated
functions, improving code quality and maintainability.
This commit introduces a series of refactoring changes to the web-ui
to remove hardcoded values and improve page integration.
- **Centralized Configuration:** Created to
centralize API ports, paths, and navigation URLs, replacing
hardcoded values across multiple files.
- **Modular Component Loading:** Introduced
to handle dynamic loading of common HTML components (e.g., sidebar, navbar),
using paths from .
- **Modular Navigation:** Created to centralize
page redirection logic, improving maintainability and reducing direct
manipulations.
- **Refactored Existing Modules:** Updated ,
, , and
to utilize the new , ,
and modules.
- **ES6 Module Compatibility:** Ensured loads scripts
as ES6 modules () to support statements.
