근무 스케줄표 (Table 2 · .sched-grid)
Hereby 표는 두 종류
이 페이지 = Table 2 — 근무 스케줄표(간호사 스케줄러)의 스프레드시트형 패턴. 일반 리스트/현황/내역 표는 Data table (Table 1)을 따르세요.
Table 1 스펙을 적용하지 마세요
Table 2는 Table 1(36px 행·12px 폰트 바닥선·중앙정렬 카드 표·풀 격자)을 의도적으로 따르지 않습니다. 셀이 더 작고(2rem·11.2px) 스프레드시트처럼 동작합니다. admin 글로벌 CSS도 table:not(.sched-grid)로 스케줄표를 명시적으로 제외합니다.
규칙 (강제) · 코딩 에이전트용 — 사람은 접힌 채로 두어도 됩니다
Table 2(근무 스케줄표 .sched-grid) 강제 규칙. 상세·데모는 아래 본문. admin·team-manager에 .sched-grid 복제본이 있고 .pref-*·.memo-corner·환자수 행은 admin 네이티브 스케줄러 전용.
- 하드 경계: Table 1 스펙(36px 행·12px 바닥선·중앙정렬 카드·풀 격자) 적용 금지. admin 글로벌 CSS는
table:not(.sched-grid)로 명시 제외 — 이 셀렉터 규약 유지. - 셀
.sched-cell:min-width:2.5rem·height:2rem·font-size:0.7rem·font-weight:600·flex 중앙,cursor:pointer; user-select:none. - 동결:
.freeze-nurse(left:0, 80px)·.freeze-type(left:80px, 80px),position:sticky흰 배경(thead 동결 셀은neutral-50). - 근무 유형
.shift-*8종(배경/글자): Dyellow-100/hr-amber-800· Ehr-emerald-100/hr-emerald-800· Nblue-100/hr-indigo-800· OFFneutral-50/hr-gray-400· 연차hr-pink-100/hr-pink-700· 경조hr-indigo-50/hr-violet-600· 교육hr-aquablue-100/hr-aquablue-700· 불가hr-red-100/hr-red-600. - 출결 배지
.att-badge5종(셀 우상단 원형,pointer-events:none): 정상hr-green-100/hr-green-600· 지각/조퇴yellow-100/hr-amber-600· 결근hr-red-100/hr-red-600· 휴가hr-indigo-50/hr-violet-600. - 코너 표식 3종(겹치지 않게 분리): 좌상단
.memo-corner(메모, 삼각 8pxneutral-900) · 우상단.att-badge(출결) · 우하단.pref-corner--*(희망근무 색 배지). - 희망근무 팔레트(공유 토큰 강제):
D=--color-yellow-500·E=--color-hr-emerald-600·N=--color-blue-500(배지.pref-corner--*·틴트.pref-tint-*·피커.pref-shift--*공통). 임의값(emerald-500/indigo-500) 금지. 피커 2종 구분: 연한 셀+어두운 글자(.shift-*, 근무 변경) vs 채움+흰 글자(.pref-shift--*, 희망근무 입력)..shift-btn은 hoverbrightness(.95)/active.9,box-shadow금지(focus ring 충돌). - 기타:
.fill-handle(선택 우하단,blue-500,cursor:crosshair). 주말.col-weekend=--color-purple-50, 공휴일.col-holiday=--color-red-50..sched-grid.is-dragging=텍스트 선택 off + crosshair. 인력부족.staffing-short=hr-red-600700. 인쇄는@pagelandscape 전용. - 인터랙션: 셀 더블클릭 또는 드래그 2칸+ 선택 완료 시 「근무 변경」 피커 팝오버(마지막 셀 위치, 인라인 순환 아님). 단일 클릭은 선택만.
- 주의: 스타일 단일 출처는
team-manager/main.css(docs 데모는 복제본)..att-badge크기 7px/10px 표기 불일치 있어 구현 전 실제 CSS 확인.
라이브 미리보기 2026-06-18
실제
.sched-grid/.sched-cell/.shift-*/.att-badge스타일을 docs 데모에 포팅해 렌더해요. 셀에 마우스를 올려 hover 링을, 클릭해 선택(우하단 fill-handle)을, 더블클릭 또는 드래그로 2칸 이상 선택 완료 시 「근무 변경」 피커(마지막 셀 위치에 뜨는 팝오버 — admin과 동일, 인라인 순환 아님)를, 일부 셀 좌상단의 메모 세모(우상단 출결 배지와 안 겹침)를 확인하세요.
근무 유형 8종D 주간E 오후N 야간OFF 휴무연차 연차(AL)경조 경조(BV)교육 교육(ED)불가 불가(UA)
출결 배지 5종✓ 정상△ 지각▽ 조퇴✗ 결근휴 휴가— 배지에 마우스 올리면 출근현황 툴팁
| 간호사 | 근무형태 | 1 월 | 2 화 | 3 수 | 4 목 | 5 금 | 6 토 | 7 일 | 8 월 | 9 화 | 10 수 | 11 목 | 12 금 | 13 토 | 14 일 | 15 월 | 16 화 | 17 수 | 18 목 | 19 금 | 20 토 | 21 일 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
김간호 2019-101 | 3교대 | D ✓ | E △ | N | OFF | D | 연차 | N | OFF | D | OFF | N | E | D | OFF | D | E | N | OFF | D | E | OFF |
이간호 2020-108 | 3교대 | OFF ✓ | D | E ▽ | N | OFF | D | OFF | N | E | D | OFF | D | E | N | OFF | D | E | OFF | D | E | N |
박간호 2021-115 | 주간 | N | OFF ✗ | D | OFF | 교육 | E | D | OFF | D | E | N | OFF | D | E | OFF | D | E | N | OFF | D | E |
최간호 2022-122 | 3교대 | OFF ✓ | N | E | D 휴 | OFF | D | E | N | OFF | D | E | OFF | D | E | 경조 | OFF | D | E | N | OFF | D |
정간호 2023-129 | 야간 | D | OFF | D ✓ | E | N | OFF | D | E | OFF | D | E | N | OFF | D | E | N | OFF | D | 연차 | N | E |
강수간 2019-136 | 3교대 | E △ | N | OFF | D | E | OFF | D | E | N | 불가 | D | E | N | OFF | D | OFF | N | E | D | OFF | D |
조간호 2020-143 | 3교대 | D | E ✓ | OFF | D | E | N | OFF | D | E | N | OFF | D | OFF | N | E | D | OFF | D | E | N | OFF |
윤간호 2021-150 | 주간 | D ✓ | E | N | OFF | D | E | N | OFF | D | OFF | N | 연차 | D | OFF | D | E | N | OFF | D | E | OFF |
장간호 2022-157 | 3교대 | OFF | D | E ▽ | N | OFF | D | OFF | N | E | D | OFF | D | E | N | OFF | D | E | OFF | D | E | N |
임간호 2023-164 | 야간 | N ✗ | OFF | 교육 | OFF | N | E | D | OFF | D | E | N | OFF | D | E | OFF | D | E | N | OFF | D | E |
한간호 2019-171 | 3교대 | OFF | N ✓ | E | D | OFF | D | E | N | 교육 | D | E | OFF | D | E | N | OFF | D | E | N | OFF | D |
오간호 2020-178 | 주간 | D 휴 | OFF | D | E | N | OFF | D | E | OFF | D | E | N | OFF | D | E | N | 경조 | D | OFF | N | E |
서간호 2021-185 | 3교대 | E | N | OFF | D | E | OFF | 불가 | E | N | OFF | D | E | N | OFF | D | OFF | N | E | D | OFF | D |
신간호 2022-192 | 3교대 | D | E | OFF | D | E | N | OFF | D | E | N | OFF | D | OFF | N | E | D | OFF | D | E | N | OFF |
| 환자 수 | 병상 32 | 22 | 27 | 32 | 26 | 31 | 25 | 30 | 24 | 29 | 23 | 28 | 22 | 27 | 32 | 26 | 31 | 25 | 30 | 24 | 29 | 23 |
| 합계 | D:6/4 E:2/3 N:2/3 | D:2/4 E:4/3 N:4/3 | D:3/4 E:4/3 N:2/3 | D:6/4 E:2/3 N:2/3 | D:2/4 E:4/3 N:3/3 | D:4/4 E:3/3 N:2/3 | D:5/4 E:2/3 N:2/3 | D:2/4 E:4/3 N:4/3 | D:4/4 E:4/3 N:2/3 | D:6/4 E:2/3 N:2/3 | D:2/4 E:4/3 N:4/3 | D:4/4 E:3/3 N:2/3 | D:6/4 E:2/3 N:2/3 | D:2/4 E:4/3 N:4/3 | D:4/4 E:4/3 N:1/3 | D:6/4 E:2/3 N:2/3 | D:2/4 E:4/3 N:4/3 | D:4/4 E:4/3 N:2/3 | D:6/4 E:2/3 N:2/3 | D:2/4 E:4/3 N:4/3 | D:4/4 E:4/3 N:2/3 | |
세로/가로로 스크롤하면 상단 헤더 · 하단 합계 · 좌측 2열(간호사/근무형태)이 고정돼요.
셀 클릭/드래그 선택(검정 사각형 + tint-12 배경 + 검정 fill-handle). 더블클릭 또는 드래그로 2칸+ 선택 완료 시 근무 변경 피커가 마지막 셀에 뜸(admin과 동일 — 다중 선택이면 선택 전체에 적용). 셀 좌상단 메모 세모(우상단 출결 배지와 안 겹침), 출결 배지 호버 시 출근현황 툴팁. 전부 admin(4001) 마크업 그대로.
ℹ️ docs 렌더 메모: 스케줄표 스타일은
team-manager/main.css에 있고 docs 테마는 이를 로드하지 않으므로, 데모 컴포넌트에 해당 규칙을 복제했습니다(색상은design-system.css토큰을 그대로 사용 → 프로덕션과 동일). 실제 동작(다중 선택·키보드·인쇄)은 앱에서 확인하세요.
단일 출처
| 파트 | 파일 |
|---|---|
| 스타일 | apps/team-manager/src/styles/main.css (/* ===== Nurse Scheduler styles ===== */ 블록) |
| 화면 | apps/team-manager/src/views/tabs/schedule.html |
| 스타일 (admin 복제 + 확장) | apps/admin/src/styles/main.css (.sched-grid·.shift-* 복제 + .pref-*·.memo-corner·.shift-btn 확장) |
| 화면 (admin 네이티브) | apps/admin/src/views/scheduler/ (schedule.html·pref-input.html 등) |
핵심 스펙
셀 .sched-cell
min-width: 2.5rem,height: 2rem,font-size: 0.7rem(≈11.2px),font-weight: 600, flex 중앙정렬.- Table 1의
h-9(36px)·12px 바닥선·카드 격자 미적용 — 스케줄표는 의도적 예외.
동결 컬럼 (sticky)
.freeze-nurse—left: 0, 80px (간호사 이름).freeze-type—left: 80px, 80px (근무 형태)position: sticky, 흰 배경. thead의 동결 셀은neutral-50.
근무 유형 색상 셀
.shift-D/.shift-E/.shift-N/.shift-OFF/.shift-AL/.shift-BV/.shift-ED/.shift-UA- 각 유형마다 토큰 배경 + 글자색. 셀 표시 라벨(실제 코드 기준):
D(주간) ·E(오후) ·N(야간) ·OFF(휴무) ·연차(AL) ·경조(BV) ·교육(ED) ·불가(UA).
출결 오버레이 배지 .att-badge
- 7px 원형, 셀 우상단(top-right) 오버레이.
- 상태:
att-ok/att-late/att-early/att-absent/att-leave.
fill-handle
- Excel식 드래그 복사 핸들 — 선택 셀 우하단 7px,
blue-500.
주말 / 공휴일 컬럼
.col-weekend—purple-50배경.col-holiday—red-50배경
sticky 하단 행
- 요약 / 환자수 행(
tr.sticky)은z-index상향으로 스크롤 시 하단 고정.
드래그 모드
.sched-grid.is-dragging— 텍스트 선택 비활성 +cursor: crosshair.
인쇄
@pagelandscape print 전용 스타일 별도.
인터랙션 & 상태 2026-06-18
스프레드시트처럼 호버·클릭·드래그로 동작하는 표라, 어떤 동작에 어떤 반응이 일어나는지가 핵심이에요. (Table 1엔 없는 인터랙션들)
| 트리거 | 대상 | 효과 | 출처 |
|---|---|---|---|
| 셀 hover | .sched-grid:not(.is-dragging) .sched-cell:hover | 셀 안쪽 1px 테두리(inset box-shadow, --color-hr-blue-300)로 호버 힌트. 드래그 중에는 성능을 위해 비활성 | main.css .sched-cell:hover |
| 셀 클릭/선택 | .sched-cell | cursor: pointer + user-select: none — 클릭으로 셀 선택, 근무 유형 입력 진입점 | main.css .sched-cell |
| 셀 더블클릭 | .sched-cell | 「근무 변경」 피커 팝오버가 셀 위치에 뜸(근무 유형 선택) — 인라인 순환이 아님. 라이브 데모도 동일 | admin scheduler.ts onCellDblClick |
| 드래그 선택 완료(2칸+) | .sched-grid | mouseup 시 마지막 셀에 근무 변경 피커가 즉시 뜸 → 고른 유형을 선택 전체에 적용. 단일 클릭(드래그 아님)은 선택만, 팝오버 없음 | admin onMouseUp 드래그 종료 분기 |
| 드래그(채우기) | .sched-grid.is-dragging | 그리드 전체 텍스트 선택 OFF + cursor: crosshair | main.css .sched-grid.is-dragging |
| fill-handle 드래그 | .fill-handle | 선택 셀 우하단 7px 핸들(blue-500)을 끌어 Excel식 복사. cursor: crosshair | main.css .fill-handle |
| 휴가일 토글 hover | .vac-date:hover | 테두리색 --color-hr-blue-300로 변경(transition: all .15s) | main.css .vac-date:hover |
| 휴가일 선택 | .vac-date-selected | 선택 상태 강조(별도 클래스 토글) | main.css .vac-date-selected |
| 세로/가로 스크롤 | .freeze-nurse·.freeze-type / tr.sticky | 좌측 2개 컬럼·하단 요약 행이 스크롤에도 고정 | main.css sticky 규칙 |
- 호버 효과가 있는 것: 근무 셀(
.sched-cell), 휴가일 토글(.vac-date). 호버 효과가 없는 것: 출결 배지(.att-badge,pointer-events: none— 표시 전용), 동결 컬럼 헤더. - 클릭/드래그가 가능한 것: 근무 셀(선택·입력), fill-handle(복사 드래그), 휴가일 토글. → 이 드래그·fill-handle·선택 동작이 Table 1과 가장 크게 다른 지점이에요.
베리에이션 2026-06-18
같은 그리드 안에서 셀·컬럼·행·배지가 상태에 따라 어떻게 나뉘는지 정리했어요.
근무 유형 셀(8종) — 각 유형마다 배경 + 글자색 토큰 한 쌍:
| 클래스 | 라벨 | 배경 / 글자 토큰 |
|---|---|---|
.shift-D | D(주간) | yellow-100 / hr-amber-800 |
.shift-E | E(오후) | hr-emerald-100 / hr-emerald-800 |
.shift-N | N(야간) | blue-100 / hr-indigo-800 |
.shift-OFF | OFF(휴무) | neutral-50 / hr-gray-400 |
.shift-AL | 연차 | hr-pink-100 / hr-pink-700 |
.shift-BV | 경조 | hr-indigo-50 / hr-violet-600 |
.shift-ED | 교육 | hr-aquablue-100 / hr-aquablue-700 |
.shift-UA | 불가 | hr-red-100 / hr-red-600 |
출결 오버레이 배지(5종) — 셀 우상단 7px 원형, 표시 전용:
| 클래스 | 의미 | 배경 / 글자 토큰 |
|---|---|---|
.att-ok | 정상 | hr-green-100 / hr-green-600 |
.att-late | 지각 | yellow-100 / hr-amber-600 |
.att-early | 조퇴 | yellow-100 / hr-amber-600 |
.att-absent | 결근 | hr-red-100 / hr-red-600 |
.att-leave | 휴가 | hr-indigo-50 / hr-violet-600 |
컬럼 / 행 / 기타 변형:
| 베리에이션 | 클래스 | 무엇이 달라지나 |
|---|---|---|
| 주말 컬럼 | .col-weekend | 배경 --color-purple-50 |
| 공휴일 컬럼 | .col-holiday | 배경 --color-red-50 |
| 동결 컬럼 | .freeze-nurse(left:0)·.freeze-type(left:80px) | 가로 스크롤에도 고정, 흰 배경(헤더는 neutral-50) |
| 하단 고정 행 | tr.sticky | 요약·환자수 행을 z-index 상향으로 하단 고정 |
| 인력 부족 | .staffing-short | 글자색 --color-hr-red-600 + font-weight: 700 |
| 초안 배지 | .badge-draft | neutral-50 / hr-gray-600 — 스케줄 상태 표시 |
| 드래그 모드 | .sched-grid.is-dragging | 선택 OFF + crosshair(위 인터랙션 참고) |
| 인쇄 | @page landscape | 화면용과 다른 인쇄 전용 레이아웃 |
관리자 네이티브 스케줄러 확장 (희망근무·메모·환자수) 2026-07-07
두 스케줄러 — admin(네이티브) vs team-manager
.sched-grid/.sched-cell/.shift-*는 admin·team-manager 두 앱에 복제돼 있어요(대부분의 admin 화면은 team-manager iframe이지만 스케줄러는 예외 — admin 네이티브 화면). 아래 희망근무 표식·셀 메모·환자수 행은 admin 네이티브 스케줄러 전용 확장입니다(team-manager sched-grid엔 없음).
셀 코너 표식 3종 — 서로 다른 코너
한 근무 셀에 최대 3개의 코너 표식이 붙고, 겹치지 않도록 코너를 나눠 씁니다.
| 표식 | 코너 | 클래스 | 조건 |
|---|---|---|---|
| 메모(사유) | 좌상단 삼각형 8px(--color-neutral-900) | .memo-corner | 희망근무 보기 + 셀 메모 있음 |
| 출결 상태 | 우상단 원형 10px | .att-badge(att-ok/late/… ) | 출근현황 보기 + 출결 있음 |
| 희망근무 종류 | 우하단 색 배지 | .pref-corner--* | 희망근무 보기 + 희망 지정 |
.memo-corner가 좌상단인 이유: 희망근무 보기·출근현황 보기는 독립 토글이라 함께 켤 수 있는데, 그러면 메모와 출결 배지가 우상단에서 겹쳤어요 → 메모를 좌상단으로 옮겨(2026-07-07) 세 표식이 각기 다른 코너를 차지하도록 정리. 삼각형은pointer-events: none(표시 전용). 간호사 이름 셀(월 단위 메모)·근무 셀(날짜별 메모) 공용.
희망근무(preferred) 표식 & 팔레트
희망근무 보기(prefShow)에서 셀별 희망/제한/불가/휴가를 세 층위로 표시해요.
| 클래스 | 위치·형태 | 용도 |
|---|---|---|
.pref-corner--* | 셀 우하단 색 배지 + 글자(D/E/N·휴·제·불·원) | 셀별 희망근무 종류 |
.pref-tint-* | 셀 배경 틴트(color-mix 35%) | 희망 종류별 옅은 배경 |
.pref-shift--* | 희망근무 입력 피커 버튼(채움 + 흰 글자) | pref-input 근무 선택 |
- 색을 근무표 D/E/N과 같은 공유 토큰으로 정렬(2026-07-07): D =
--color-yellow-500, E =--color-hr-emerald-600, N =--color-blue-500(배지·틴트·피커 공통, 틴트는-200계열). 기존emerald-500/indigo-500임의값을 이 토큰으로 교체. - 피커 두 종류: 연한 셀 + 어두운 글자(
.shift-*, entry-edit 「근무 변경」) vs 채운 배경 + 흰 글자(.pref-shift--*, 「희망근무 입력」)..shift-btn은 hoverbrightness(.95)·activebrightness(.9)—box-shadow는 Tailwind focusring과 충돌해 일부러 안 씁니다.
환자수 행 (접기/펼치기 + 열 정렬)
- 연/월 줄의 인라인 컨트롤(환자수 관리·병동 설정)과 분리해 병동별 입력을 전폭 wrap 그리드로 배치. 셰브론(
patientGridOpen)으로 요약(오늘 환자수/합계)만 남기거나 펼칩니다. - 병동 이름 슬롯을 고정폭(
w-[8rem] truncate)으로 둬서,flex-wrap으로 줄이 바뀌어도 입력칸이 세로 열로 정렬돼요(이름 길이가 달라도 어긋나지 않음). 입력은patient-count-input ds-input--32 w-12 text-center.
sticky 범례 밴드
- 희망근무 범례가
sticky top-0로 표 상단에 붙을 때 핀 상태에서만 배경 밴드(bg-white+ 하단 hairline)를 얹어요 — 0-높이 sentinel +IntersectionObserver가prefLegendStuck을 토글. 스크롤 전(범례가 흐름 안)엔 투명, 핀됐을 때만 흰 배경으로 아래 표 헤더와 겹쳐 보이지 않게 합니다.
적용 규칙
- "근무표 / 스케줄표 / 간호사 스케줄러" 작업 = Table 2. 셀 크기·격자·폰트를 일반 표(Table 1)에 맞추려 하지 마세요.
- 그 외 모든 리스트/표 = Table 1 → Data table.
콘텐츠·라이팅 (UI/UX 정책 연계) 2026-06-16
셀 크기·격자는 Table 1을 따르지 않지만, 라벨·용어·숫자 표기 라이팅은 일반 표와 동일하게 서비스 공통 UI/UX 정책을 따릅니다.
- 용어 통일: 근무 형태·상태 라벨은 정책 §2 용어표 기준. (예: 정해지지 않은 값은
미지정— 단 스케줄러의불가(UA)는 "근무 불가"라는 별개 상태이므로 그대로 둡니다.) - 숫자 표기: 환자수·요약 행의 숫자는 천 단위 쉼표 (정책 §5).
변경 이력
| 날짜 | 내용 |
|---|---|
| 2026-07-07 | 관리자 네이티브 스케줄러 확장 섹션 신설 — 셀 코너 표식 3종(좌상=메모 .memo-corner / 우상=출결 .att-badge / 우하=희망근무 .pref-corner)을 코너 분리로 정리(메모를 우상단→좌상단으로 이동해 출결 배지와 겹침 해소), 희망근무 팔레트(.pref-corner--*·.pref-tint-*·.pref-shift--*)를 근무표 D/E/N 공유 토큰(yellow-500·hr-emerald-600·blue-500)으로 정렬, 환자수 행(고정폭 라벨 슬롯 열 정렬 + 접기/펼치기)·sticky 범례 밴드 문서화. admin이 .sched-grid 복제본을 갖는다는 점을 단일 출처에 명시 (design/adjust-table) |
| 2026-06-19 | 라이브 미리보기를 페이지 최상단으로 이동(소개 tip 바로 아래, 단일 출처 위) (사용자 요청) |
| 2026-06-18 | 라이브 미리보기(<DemoScheduleTable> — shift 8색·출결 배지 5종·주말/공휴일·hover·선택+fill-handle·동결 컬럼·드래그 모드) + 인터랙션 & 상태 + 베리에이션 섹션 추가 |
| 2026-06-16 | 셀 라벨 오기 수정(출장→경조 BV, 미배정→불가 UA, 실제 코드 기준) + UI/UX 정책 연계 섹션 추가 |
| 2026-06-15 | 근무 스케줄표(Table 2 · .sched-grid) 패턴 페이지 신규 작성 |