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:
Hyungi Ahn
2026-01-19 08:54:44 +09:00
parent 344ad35651
commit d810a8b339
14 changed files with 645 additions and 131 deletions

View File

@@ -11,7 +11,7 @@ import { config } from './config.js';
export async function loadComponent(componentName, containerSelector, domProcessor = null) {
const container = document.querySelector(containerSelector);
if (!container) {
console.error(`🔴 컴포넌트를 삽입할 컨테이너를 찾을 수 없습니다: ${containerSelector}`);
console.warn(`⚠️ 컴포넌트를 삽입할 컨테이너를 찾을 수 없습니다: ${containerSelector} (선택사항일 수 있음)`);
return;
}