refactor(web-ui): 전체 UI 반응형 디자인 개선
모든 화면 크기에서 일관되고 안정적인 사용자 경험을 제공하도록 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 is contained in:
@@ -29,19 +29,20 @@ const elements = {
|
||||
// 초기화
|
||||
document.addEventListener('DOMContentLoaded', async function() {
|
||||
console.log('🚀 작업 현황 캘린더 초기화 시작');
|
||||
|
||||
// DOM 요소 초기화
|
||||
|
||||
// DOM 요소 초기화 (기존 + CalendarView)
|
||||
initializeElements();
|
||||
|
||||
CalendarView.initializeElements();
|
||||
|
||||
// 이벤트 리스너 등록
|
||||
setupEventListeners();
|
||||
|
||||
|
||||
// 작업자 데이터 로드 (한 번만)
|
||||
await loadWorkersData();
|
||||
|
||||
|
||||
// 현재 월 캘린더 렌더링
|
||||
await renderCalendar();
|
||||
|
||||
await CalendarView.renderCalendar();
|
||||
|
||||
console.log('✅ 작업 현황 캘린더 초기화 완료');
|
||||
});
|
||||
|
||||
@@ -69,17 +70,17 @@ function initializeElements() {
|
||||
function setupEventListeners() {
|
||||
elements.prevMonthBtn.addEventListener('click', () => {
|
||||
CalendarState.currentDate.setMonth(CalendarState.currentDate.getMonth() - 1);
|
||||
renderCalendar();
|
||||
CalendarView.renderCalendar();
|
||||
});
|
||||
|
||||
|
||||
elements.nextMonthBtn.addEventListener('click', () => {
|
||||
CalendarState.currentDate.setMonth(CalendarState.currentDate.getMonth() + 1);
|
||||
renderCalendar();
|
||||
CalendarView.renderCalendar();
|
||||
});
|
||||
|
||||
|
||||
elements.todayBtn.addEventListener('click', () => {
|
||||
CalendarState.currentDate = new Date();
|
||||
renderCalendar();
|
||||
CalendarView.renderCalendar();
|
||||
});
|
||||
|
||||
elements.statusFilter.addEventListener('change', filterWorkersList);
|
||||
@@ -518,9 +519,9 @@ async function deleteWorkerDayWork(workerId, date, workerName) {
|
||||
|
||||
// 모달 데이터 새로고침
|
||||
await openDailyWorkModal(CalendarState.currentModalDate);
|
||||
|
||||
|
||||
// 캘린더도 새로고침
|
||||
await renderCalendar();
|
||||
await CalendarView.renderCalendar();
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 작업 삭제 실패:', error);
|
||||
@@ -741,9 +742,9 @@ async function saveWorkEntry() {
|
||||
|
||||
// 기존 작업 탭으로 전환
|
||||
switchTab('existing');
|
||||
|
||||
|
||||
// 캘린더 새로고침
|
||||
await renderCalendar();
|
||||
await CalendarView.renderCalendar();
|
||||
|
||||
// 현재 열린 모달이 있다면 새로고침
|
||||
if (CalendarState.currentModalDate) {
|
||||
|
||||
Reference in New Issue
Block a user