🎨 vanilla figma spa

📝 프로젝트 소개

이 프로젝트는 Figma와 유사한 기능을 제공하는 웹 기반 디자인 도구로, Vite와 Vanilla JavaScript를 사용하여 SPA 구조로 구현되었으며, 사용자가 쉽게 디자인을 생성하고 편집할 수 있습니다

🚀 주요 기능

1. 캔버스 관리

• 사용자가 원하는 크기로 캔버스를 생성할 수 있습니다.
• 최대 1개의 캔버스만 지원하며, 새 캔버스를 생성하면 기존 캔버스에 덮어쓰기됩니다.

---

2. 도형 생성 및 편집

지원되는 도형

• 직선
• 원형
• 사각형
• 텍스트

주요 편집 기능

• 위치 및 크기 조정: 요소의 크기를 조절하거나 자유롭게 배치
• 드래그 앤 드롭: 캔버스 내에서 요소를 클릭 후 이동
• 색상 변경: 각 요소의 색상을 자유롭게 변경

---

3. Z축 레이어 관리

• 좌측 레이아웃에서 요소 목록을 드래그 앤 드롭하여 **Z축 순서(레이어)**를 조절 할 수 있습니다.

---

4. 파일 내보내기

• 완성된 디자인을 PNG 형식으로 내보내기가 가능합니다.

---

🌟 기술 스택

• Vanilla JavaScript
• Vite

---

예상 화면

예상 화면도