# 메인 — 최신글 · 팝업존 · 레이어 팝업

| 항목 | 경로 |
|------|------|
| 데모 | `main.html` |
| CSS | `css/main.css` (+ `slide.css` · Swiper CDN · `popup.css` · `button.css` · `form.css`) |
| JS | `js/jquery` + `sectionDisplay.js` + `common.js` (`mainPopup*`) + **Swiper CDN** |

팝업존(배너 슬라이드)과 레이어 팝업은 **별개**입니다.

---

## 최신글 + 팝업존

`.main-split` 안에 최신글(왼쪽) · 팝업존(오른쪽)을 둡니다. (≤960px 1열)

### 팝업존 (`.popup-zone`)

화면을 가리지 않는 **메인 배너 슬롯**. 슬라이드는 이 킷의 `slide.html`과 같이 **Swiper 11**을 씁니다. (`slidejs` 라이브러리가 아님)

| UI | 요소 |
|----|------|
| 제목 | `.popup-zone__tit` (왼쪽 포인트 바) |
| 컨트롤 | 건수 `n / N` · 이전 · 정지/재생 · 다음 · 전체보기(`+`) |
| 슬라이드 | `#popupZoneSwiper` · 이미지 링크 배너 |

```js
// main.html 내 initPopupZone() — slide.html 패턴 재사용
// rewind · autoplay · keyboard · a11y · inert(숨김 슬라이드 Tab 제외)
```

필수 접근성: [docs/slide.md](./slide.md)

- 자동재생 → 일시정지 버튼
- `prefers-reduced-motion` → autoplay OFF
- 이미지 `alt`에 링크 목적
- Tab은 **보이는 배너만**

데모 이미지: `img/popup_zone_01.svg` ~ `_03.svg`

### 최신글

```js
$('#latestBoard').sectionDisplay({
  act: 'click',
  start: 0,
  nav: $('#latestBoard .latest-board__tabs'),
  auto: false
});
```

- 더보기: 탭 패널마다 목록 URL  
- 새 글: `.latest-board__new`는 제목 밖  

---

## 메인 레이어 팝업 (별개)

관리자 설정에 따라 `#wrap` 밖 `.layer-popup.main-popup` 을 **1건** 엽니다. 팝업존과 저장·API를 공유하지 않습니다.

| 키 | 설명 |
|----|------|
| `id` | `data-modal` · `mainPopupHide:{id}` 키 |
| `enabled` | 보이기/감추기 |
| `width` | 레이어 너비 (예: `48rem`) |
| `startDate` / `endDate` | `YYYY-MM-DD` 게시 기간 |
| `title` · `body` / `bodyHtml` | 제목·본문 |
| `imageUrl` · `imageAlt` | 배너(선택) |
| `linkUrl` · `linkLabel` · `linkNewWindow` | 상세 링크 · 새 창 고지 |
| `hideDays` | **1** = 오늘 하루 닫기 |
| `order` | 정렬 · 조건 통과 시 **1건만** 오픈 |

```js
mainPopupInit(MAIN_POPUPS, { autoOpen: true });
mainPopupOpenIfDue(MAIN_POPUPS);
mainPopupOpen(cfg);
mainPopupClearHide(id);
```

「오늘 하루 열지 않음」은 체크 후 **닫기** 시 `localStorage`에 저장. 초점·Esc: [popup.md](./popup.md)

---

## 복사 패키지

```
css/main.css · slide.css
css/popup.css · button.css · form.css
Swiper 11 CDN (css + js)
js/jquery + sectionDisplay.js + common.js
img/popup_zone_0n.svg · img/main_popup_notice.svg
마크업: .main-split · .latest-board · .popup-zone · .layer-popup.main-popup
```

---

## 접근성 체크

- [ ] 팝업존: 정지/재생 · 이전/다음 · 전체보기 이름
- [ ] 팝업존: 보이는 배너만 Tab · `alt`에 링크 목적
- [ ] 레이어: 초점 · Esc · 회귀 · 「오늘 하루」체크 후 닫기
- [ ] 최신글: 선택 탭 → 게시글 → 더보기