# 인쇄 / 공유

| 항목 | 경로 |
|------|------|
| 데모 | `share.html` |
| CSS | `css/share.css` (`@media print` 포함) |
| JS | `js/common.js` — 인쇄 · URL 복사 · 공유 패널 |

---

## 구성

| 블록 | 역할 |
|------|------|
| `.page-tools` | 인쇄 · 공유 버튼 줄 |
| `.share-panel` | 공유 메뉴 (disclosure) |
| `.no-print` | 인쇄 시 숨김 |
| `.print-only` | 화면에 숨기고 인쇄만 표시 |
| `.print-url` | 인쇄 시 링크 옆 URL 표시 |

---

## 마크업

```html
<div class="page-tools no-print">
  <button type="button" class="page-tools__btn" data-print>인쇄</button>
  <div class="page-tools__share">
    <button type="button" class="page-tools__btn"
      aria-expanded="false" aria-controls="sharePanel">공유</button>
    <div id="sharePanel" class="share-panel" hidden role="region" aria-label="공유 방법">
      <ul class="share-panel__list">
        <li class="share-panel__item">
          <button type="button" data-copy-url>URL 복사</button>
        </li>
        <li class="share-panel__item">
          <a href="https://twitter.com/intent/tweet?url=…"
            target="_blank" rel="noopener noreferrer" title="새 창으로 열림">
            X(트위터) <span class="dn">(새 창)</span>
          </a>
        </li>
        <li class="share-panel__item">
          <a href="https://www.facebook.com/sharer/sharer.php?u=…"
            target="_blank" rel="noopener noreferrer" title="새 창으로 열림">
            페이스북 <span class="dn">(새 창)</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
```

---

## JS

| 속성 | 동작 |
|------|------|
| `data-print` | `window.print()` |
| `data-copy-url` | 현재 URL 복사 (값에 URL을 넣으면 그 주소) + 토스트 |
| 공유 버튼 `aria-controls` | 패널 토글 · Esc/바깥 클릭 닫기 |

URL 복사 피드백: [alert.md](./alert.md) `toastShow`

---

## 인쇄 CSS

- `.no-print` — 헤더·도구·공유 등
- `.print-only` — 인쇄용 문구
- `.print-url` — 인쇄 시 `a` 뒤에 `href` 표시

---

## 접근성 체크

- [ ] 인쇄·공유·복사는 `button` / SNS는 `a`
- [ ] 공유 패널 `aria-expanded` · Esc 닫기
- [ ] **SNS 새 창**: `title="새 창으로 열림"` + `.dn`(새 창)
- [ ] URL 복사 결과 `aria-live`(토스트)
- [ ] 아이콘만으로 버튼 의미 전달 금지
- [ ] 인쇄 미리보기로 `.no-print` 확인

---

## 복사 패키지

```
css/share.css
js/common.js
css/alert.css + toast 영역   ← 복사 완료 알림
마크업: share.html
```