Floor Planner 프로젝트 진행 상황

기술 스택

• Nuxt 3 + Vue 3 + TypeScript
• vue-konva (2D 캔버스)
• TailwindCSS + Pinia

완료된 기능

기본 기능

• 방 생성 (크기 입력)
• 그리드 배경, 줌/팬
• 치수 표시

가구 시스템

• 가구 라이브러리 (10종)
• 드래그 앤 드롭 배치
• 다양한 모양: 사각형, 원형, 타원형, L자형
• L자형 가구 방향/비율 독립 조절 (가로/세로)
• 드래그 리사이즈 (Transformer)

오브젝트 편집

• 더블클릭 또는 Enter로 편집 폼 열기
• 이름, 크기, 색상, 회전, 모양 수정
• 유효성 검사

문 시스템

• 문 추가/편집
• 벽 스냅 기능
• 열림 방향, 경첩 위치 설정
• 호(arc) 렌더링

측정 도구

• 두 점 사이 거리 측정
• 측정 모드 토글 (버튼 또는 M키)
• 측정 결과 화면에 표시 (cm 단위)
• 여러 측정 지원
• 측정 초기화 기능

평면도 이미지 업로드

• 이미지 파일 업로드 (PNG, JPEG, GIF, WebP)
• 투명도 조절 슬라이더
• 크기 조절 슬라이더
• 이미지 위치 드래그 이동
• 잠금 기능 (이동 방지)
• 이미지 삭제

기타

• Undo/Redo
• 저장/불러오기 (LocalStorage)
• 이미지 내보내기 (PNG)

키보드 단축키

테스트

• Vitest 단위 테스트: 170개
• Playwright E2E 테스트: 39개