# 자료구조·알고리즘 문서형 교안 (AI + SVG 애니메이션)

## 배치
```
edu-pro/public/datastructure/
  index.html
  css/style.css
  js/app.js
  js/lang.js          ← 포함됨 (경로 수정됨)
  js/draw-svg.js      ← 스텁 포함. 가능하면 원본으로 교체
  images/
    datastructure.svg ← 필수 (애니메이션 스프라이트)
    sequential_search.png
    fibonacci.png, fibonacci_dp.png
    binary_tree.png, full_binary_tree.png, perfect_binary_tree.png
    binary_search_tree.png
    linked_list.png
    digraph.png, adjacency_matrix.png, adjacency_list.png
    datastructure_first.png, datastructure_second.png, datastructure_third.png
    ...
```

## 이미지·SVG 복사 (필수)
원본 경로 예:
```
.../lecture/s/datastructure/images/*
→ public/datastructure/images/
```

원본 draw-svg.js (권장):
```
.../lecture/js/draw-svg.js
→ public/datastructure/js/draw-svg.js  (스텁 덮어쓰기)
```

## courses.js
```js
{ id: 'datastructure', ..., materialsUrl: '/materials/datastructure' }
```

## Vue iframe
```vue
<template>
  <div class="fixed inset-0 bg-white">
    <iframe src="/datastructure/index.html" class="w-full h-full border-0" title="자료구조" />
  </div>
</template>
```

## router
```js
{ path: '/materials/datastructure', component: () => import('../views/MaterialsDatastructure.vue') }
```

## 보완 포인트
- 삽입/선택/퀵 정렬, 이진검색 SVG 단계
- 스택·큐·연결리스트·트리·힙·DFS·BFS·해시 SVG
- 퀴즈 빈칸 + AI 질문 + 선생님 리뷰
- 확장: 우선순위큐, Trie, Union-Find, 균형트리 안내
