# 로딩화면 (loading)

| 항목 | 경로 |
|------|------|
| 데모 | `loading.html` |
| CSS | `css/loading.css` |
| JS | `js/common.js` — loading 섹션 |
| 출처 | DGK_개발소스_리포지토리 `common.css` (접근성 보강) |

---

## API

### 전체 화면

| 방법 | 설명 |
|------|------|
| `loadingShow()` | 기본 문구로 전체 로딩 표시 |
| `loadingShow('저장 중…')` | 안내 문구 변경 후 표시 |
| `loadingHide()` | 전체 로딩 숨김 |

- `#wrap`에 `aria-hidden="true"` · `body.loading-open` (스크롤 잠금)

### 섹션 단위

| 방법 | 설명 |
|------|------|
| `loadingShowIn(target)` | 해당 섹션만 로딩 |
| `loadingShowIn(target, '목록을 불러오는 중…')` | 문구 지정 |
| `loadingHideIn(target)` | 섹션 로딩 숨김 |

- `target`: 셀렉터 · Element · jQuery (`.loading-section` 또는 그 하위)
- `#wrap`을 숨기지 않음 · 해당 `.loading-section`에만 `aria-busy`
- 목록·카드·위젯 부분 갱신에 사용

---

## 기본 마크업

### 전체 화면

```html
<!-- #wrap 밖, </body> 직전 -->
<div id="loadingOverlay" class="loading-overlay" aria-hidden="true" aria-busy="false">
  <div class="loading-box" role="status" aria-live="polite">
    <div class="spinner" aria-hidden="true"></div>
    <p class="loading-msg">로딩 중입니다. 잠시만 기다려 주세요.</p>
  </div>
</div>
```

### 섹션 단위

```html
<section class="loading-section" id="boardList" aria-labelledby="boardListTit">
  <h2 id="boardListTit">공지 목록</h2>
  <!-- 본문 -->
  <div class="loading-overlay loading-overlay--section" aria-hidden="true" aria-busy="false">
    <div class="loading-box" role="status" aria-live="polite">
      <div class="spinner" aria-hidden="true"></div>
      <p class="loading-msg">목록을 불러오는 중입니다.</p>
    </div>
  </div>
</section>
```

- `.loading-section` — `position: relative` 래퍼
- `.loading-overlay--section` — 섹션만 덮는 absolute 오버레이

---

## 사용 예 (AJAX)

```javascript
/* 전체 */
loadingShow('목록을 불러오는 중입니다.');
$.ajax({ url: '/api/list', method: 'GET' }).always(function () {
  loadingHide();
});

/* 섹션만 */
loadingShowIn('#boardList', '목록을 불러오는 중입니다.');
$.ajax({ url: '/api/list', method: 'GET' })
  .done(function (html) {
    $('#boardList .loading-section__body').html(html);
  })
  .always(function () {
    loadingHideIn('#boardList');
  });
```

---

## 접근성 요약

1. `role="status"` + `aria-live="polite"` — 로딩 상태를 스크린리더에 알림
2. `.loading-msg` — 시각·청각 모두에 전달할 실제 상태 문구
3. `.spinner` — 장식(`aria-hidden="true"`)
4. **전체:** 표시 중 `#wrap`에 `aria-hidden="true"`
5. **섹션:** 해당 `.loading-section`에만 `aria-busy="true"` (`#wrap` 유지)
6. `prefers-reduced-motion` — 회전 애니메이션 속도 완화
7. 트리거 버튼은 가능하면 섹션 **밖**(툴바)에 두어 로딩 중에도 취소·재시도가 가능하도록

---

## 스타일 커스터마이즈

`.loading-overlay` CSS 변수만 수정하면 됩니다.

| 변수 | 기본값 | 설명 |
|------|--------|------|
| `--loading-bg` | `rgba(0,0,0,0.35)` | 딤 배경 |
| `--loading-spinner-size` | `4.8rem` (섹션 `3.6rem`) | 스피너 크기 |
| `--loading-spinner-color` | `#fff` | 스피너 강조색 |
| `--loading-msg-color` | `#fff` | 안내 문구 색 |

---

## z-index

- 전체 로딩: `99999`
- 섹션 로딩: 섹션 안 `10` (페이지 고정 레이어와 무관)
- 팝업: `9999`

전체 화면 로딩은 팝업 위에 표시됩니다.