Web Component · Edu

<iso-map>

바닥 평면 위에 위치와 크기가 제각각인 칸을 배치합니다. 교실 좌석표나 학교 평면도처럼 실제 공간의 물리적 배치 자체가 데이터의 핵심 의미를 가질 때 사용합니다.

가상 예시 데이터이며 외부로 전송되지 않습니다. 학생은 번호로만 표시됩니다.

예시: 교실 좌석표

교탁(구조물 fixture)과 좌석(값 칸)이 함께 놓이며, 결석(absent) 학생은 높이 0의 점선으로 구분됩니다.

불규칙 배치와 상태 구분

크기가 제각각인 칸들이 겹치지 않는 한, 위상 정렬(order.ts)을 통해 앞뒤 순서를 정확히 계산해 렌더링합니다.

값 칸 (Value Item): v 값이 주어지면 값에 비례하는 높이로 블록이 솟아오릅니다. 호버 또는 키보드 포커스 시 번호와 수치 라벨이 나타납니다.
상태 칸 (State Item): state가 "absent"(결석), "empty"(빈자리), "closed"(사용 안 함)인 경우 높이가 0이 되며 윗면에 점선 윤곽선이 표시됩니다.
구조물 (Fixture): 값(v)과 상태(state)가 모두 없는 칸은 교탁이나 복도 같은 고정 구조물로 간주되어 높이 0.5, 진한 회색 음영으로 렌더링되며 포커스나 선택이 되지 않습니다.

속성

속성	형식	의미
`data`	JSON 객체	바닥판(`floor`)과 항목 목록(`items`). 잘못된 형식이면 `console.error` 후 오류 문구를 표시합니다
`max`	숫자	축척 최댓값. 생략 시 항목들의 최댓값
`unit`	숫자(px)	기본 등각 단위(`--iso-u`). 기본 24
`height-units`	숫자	최댓값일 때의 블록 높이 단위. 기본 5
`label`	문자열	접근성 설명(`aria-label` 및 숨김 표 `caption`)
`renderer`	`css` \| `svg` \| `auto`	렌더링 방식. 기본 `auto` (블록 200개 초과 시 SVG 자동 전환)

data 객체

키	형식	의미
`floor`	객체 · 선택	바닥 평면 크기 `{ "w": 폭, "d": 깊이 }`. 생략 시 항목 전체를 감싸는 사각형으로 자동 계산
`items`	배열 · 필수	배치할 칸들의 배열

items 항목

키	형식	의미
`k`	문자열 \| 숫자 · 필수	칸 이름 또는 학생 번호
`x`, `y`	숫자 · 필수	바닥 좌표계에서의 시작 위치 (0 이상)
`w`, `d`	양의 숫자 · 선택	칸의 가로 폭과 세로 깊이. 기본 1
`v`	0 이상 숫자 · 선택	칸의 측정값. 생략되고 `state`도 없으면 고정 구조물(fixture)
`c`	CSS 색 · 선택	블록의 테마 색상
`state`	`"absent"` \| `"empty"` \| `"closed"`	특수 상태. 높이 0과 점선 테두리로 표시

이벤트

값이나 상태가 지정된 칸을 클릭하거나 키보드로 포커스 후 Enter 또는 Space를 누르면 iso-select 커스텀 이벤트가 버블링됩니다. 구조물은 포커스 및 이벤트가 발생하지 않습니다.

document.querySelector("iso-map").addEventListener("iso-select", (e) => {
  const { index, item } = e.detail;
  console.log(`선택된 칸: ${item.k}, 값: ${item.v ?? item.state}`);
});

빈 상태와 오류

칸들의 위치가 겹치거나(overlap) 바닥 밖으로 벗어난 경우 오류 상태가 되며 메시지가 표시됩니다.

장면은 role="group"을 가지며 label이 그룹의 이름이 됩니다.
각 값 및 상태 칸은 tabindex="0"과 role="button"을 가지며 aria-label="이름: 값"이 제공됩니다.
스크린 리더를 위해 칸 이름, 값, 행 순위, 열 순위를 담은 숨김 표(.iso-sr-only)가 자동 생성됩니다.
교탁, 복도 등 구조물은 aria-hidden="true"로 설정되어 보조 기술의 탐색 혼란을 방지합니다.