지도에서 ERP까지 — 4단계

회사erp 폴더의 사이트맵을 마인드맵 그림으로 바꿔줘.
HTML 파일 하나로 이 폴더에 저장하고, 다 되면 열어서 보여줘.

■ 그리는 방식
1) 가운데에 회사 이름, 큰 가지가 좌우로 뻗는 형태
2) 큰 가지 → 중간 묶음 → 각 칸 (3단계)
3) 완성된 칸과 아직 못 만든 칸을 색으로 구분
4) 못 만든 칸에는 몇 주차에 붙일지 번호 표시
5) 큰 가지마다 「완성 몇 개 / 전체 몇 개」 표시

■ 꼭 지킬 것
- 아직 못 만든 칸을 빼지 말고 그대로 그려줘. 비어 있는 게 보여야 채운다
- 글자가 서로 겹치거나 그림 밖으로 나가지 않게 좌표를 계산해서 배치해줘
- 다 그린 다음, 겹친 글자나 밖으로 나간 글자가 없는지 스스로 점검해서 알려줘

방금 만든 마인드맵을 내가 직접 고칠 수 있는 프로그램으로 바꿔줘.
이드로우 마인드(EdrawMind) 조작 방식을 모사해줘.
HTML 파일 하나로 만들고, 다 되면 열어서 보여줘.

■ 조작
1) 칸을 마우스로 끌어 다른 칸에 놓으면 그 아래로 옮겨진다
2) 칸의 위·아래 가장자리에 놓으면 순서가 바뀐다
3) Tab = 하위 칸 추가, Enter = 같은 단계 추가
4) 더블클릭 또는 F2 = 이름 수정, Delete = 삭제
5) Ctrl+Z 되돌리기, Ctrl+휠 확대·축소, 빈 곳 드래그 = 화면 이동
6) 가지 접기/펴기

■ 편집할 값
칸 이름 / 완성·진행중·미완성 / 몇 주차 / 가지 색

■ 꼭 지킬 것
- ★자유배치는 만들지 마. 구조를 바꾸면 자동으로 정렬되는 방식으로 해줘
  (칸이 많아지면 사람이 정렬을 유지할 수 없어)
- 자기 자신의 아래로는 옮기지 못하게 막아줘
- 내가 고친 내용을 저장하고, JSON으로 내보내고 다시 불러올 수 있게 해줘
- PNG로 내보내기
- 다 만든 다음, 추가·삭제·드래그·되돌리기·저장 후 불러오기가 실제로
  되는지 스스로 시험해서 결과를 표로 알려줘

이 마인드맵 구조를 우리 회사 시스템의 실제 메뉴로 만들어줘.

■ 만들 것
1) 지도의 칸 목록을 「파일 하나」로 정리해서, 그 파일이 유일한 정본이 되게 해줘
2) 메뉴(사이드바)가 그 파일을 읽어서 만들어지게 해줘
3) 완성 / 진행중 / 미완성을 메뉴에도 표시해줘
4) ★아직 안 만든 칸도 메뉴에 회색으로 보이게 해줘.
   누르면 「무엇을 붙일 칸인지 · 왜 이 순서인지 · 무엇을 재사용하는지」가 나오게
5) 지도 전체를 한 장으로 보는 화면
6) 조절 프로그램을 설정 메뉴 안에 넣어줘

■ 꼭 지킬 것
- 칸 목록을 두 군데에 적지 마. 정본은 하나여야 해
- 조절 프로그램에서 고친 게 실제 화면을 바꾸지 않는다면,
  그 사실을 화면 위에 글로 적어줘 (안 적으면 오해가 생겨)
- 민감한 숫자(자금·매출)는 화면 코드에 넣지 말고, 권한 있는 사람만 보게 해줘
- 다 만든 다음 실제로 열어서 확인하고, 결과를 알려줘