요구사항

💡마을 지도

• 화면이 열리면, 기획서와 같은 모습의 마을들이 화면에 자동으로 만들어진다.
• 마을의 개수, 위치, 크기는 랜덤하게 정해진다.
• 마을안에 마을은 중첩되어 N개가 위치할 수 있다.
  • 마을 안에 마을은 무한대로 존재할 수 있다. 이를 해결할 수 있는 해법을 사용한다.
• 마을은 서로 위치가 겹칠 수가 없다.
• 각 마을 안에는 우체통이 있거나 없다.
• 우체통의 개수와 크기도 랜덤하게 생성된다.
  • 우체통의 크기는 각각 다르다.

💡빨간 우체통 확인 기능

• 만들어진 마을의 우체통을 탐색한 결과를 보여준다.
• 빨간 우체통 확인 버튼은 클릭 후 빨간 우체통을 확인하는 기능이 2초 후에 동작한다.
• [빨간 우체통 확인] 버튼을 클릭하면 우체통을 가진 마을을 탐색하는 작업을 시작한다.
  • Node를 탐색하기 위한 API를 직접 개발한다. querySelector, querySelectorAll, getElementById
• 빨간 우체통을 가진 마을 정보가 표시되고, 우체통 크기 순으로 정렬해서 정보를 표시한다. ex) D, I, J, K, L 총 5개의 마을에 빨간 우체통이 있습니다. 우체통의 크기는 L, K, J, I, D 순입니다.
  • 우체통 크기 정렬을 위해 정렬 알고리즘을 직접 구현하여 이를 활용하여 정렬한다.
• 빨간 우체통이 있는 마을의 테두리는 2초 뒤에 빨간색으로 변경된다.
• setTimeout을 활용해서 지연처리를 하고, Promise 패턴을 적용한다.