Feat: 탭 기능 추가 - 날짜/용도별 독립 작업 공간

- 탭바: 자유로운 이름 지정, 추가/삭제/더블클릭 이름변경
- 각 탭은 독립적인 근무자/근무지/배치 데이터 보유
- 탭 전환 시 해당 데이터로 지도/사이드바 갱신
- 내보내기 시 현재 탭 이름이 파일명에 포함됨
- API 경로 /api/* 로 통일
This commit is contained in:
user01
2026-05-12 16:01:55 +09:00
parent 078f0defe9
commit 916a0a1f57
3 changed files with 467 additions and 288 deletions

View File

@@ -31,6 +31,39 @@ body { font-family: 'Segoe UI', 'Malgun Gothic', sans-serif; height: 100vh; over
.status-badge.partial { background: #fef3c7; color: #d97706; }
.status-badge.complete { background: #d1fae5; color: #059669; }
#tabBar {
display: flex; align-items: center; background: #e8eaed; padding: 0 12px;
border-bottom: 1px solid #d0d0d0; min-height: 40px; gap: 2px; z-index: 999; flex-shrink: 0;
}
.tab-list { display: flex; align-items: stretch; flex: 1; overflow-x: auto; gap: 2px; }
.tab-list::-webkit-scrollbar { height: 3px; }
.tab-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.tab-item {
display: flex; align-items: center; gap: 6px; padding: 6px 10px;
background: #dde0e3; border-radius: 6px 6px 0 0; cursor: pointer;
font-size: 13px; color: #555; white-space: nowrap; user-select: none;
transition: all 0.15s; min-width: 0;
}
.tab-item:hover { background: #d0d3d6; }
.tab-item.active { background: #fff; color: #1a73e8; font-weight: 600; box-shadow: 0 -1px 2px rgba(0,0,0,0.06); }
.tab-name { flex: 1; min-width: 30px; }
.tab-name:hover { text-decoration: underline; }
.tab-badge { font-size: 10px; color: #888; background: #f0f0f0; padding: 1px 6px; border-radius: 8px; }
.tab-item.active .tab-badge { background: #e8f0fe; color: #1a73e8; }
.tab-del { font-size: 16px; color: #999; line-height: 1; padding: 0 2px; }
.tab-del:hover { color: #ef4444; }
.tab-add {
flex-shrink: 0; width: 30px; height: 30px; border: none; background: transparent;
border-radius: 6px; cursor: pointer; color: #666; font-size: 16px;
display: flex; align-items: center; justify-content: center; margin-left: 4px;
}
.tab-add:hover { background: #d0d3d6; color: #1a73e8; }
.empty-state {
display: flex; align-items: center; justify-content: center; height: 100%;
color: #9ca3af; font-size: 14px; text-align: center; padding: 40px;
}
#main { display: flex; flex: 1; overflow: hidden; }
#sidebar {