프로젝트 화면
그리기와 편집 기능
- 마우스 드래그로 사각형, 삼각형, 원 그리기
- 자유 드로잉과 점을 연결하는 열린 경로·닫힌 다각형 그리기
- 포인터 이동 경로를 베지어 곡선으로 표현하고, 꼭짓점과 제어점으로 경로 편집
- 점을 연결하는 도구에서 Enter로 열린 경로 확정, Escape로 입력 취소
- 면 색·선 색·선 굵기·투명도 조절
- 선택된 도형이 없을 경우 새로 그리는 도형에 적용
- 선택된 도형이 있을 경우 선택된 도형에 적용
- 도형 핸들러 구현
- 드래그 이동, 크기 조절, 회전, 꼭짓점·곡선 제어점 수정
- 컨텍스트 메뉴 기능 개발
- 삭제 및 앞뒤 순서 변경
도형과 경로의 편집 구조
도구를 선택해 도형을 추가해 보세요. 선택된 도형 없음
드래그로 이동하고 손잡이로 크기와 회전을 조절하세요.키보드: 방향키로 이동, 버튼으로 변형. 자유선은 Enter와 방향키로 그립니다.
사용 기술
언어·프레임워크
Next.jsTypeScript
상태·데이터
Recoil
화면·인터랙션
Tailwind CSS
- SVG path
- 도형과 직접 그린 경로를 같은 편집 데이터에서 표현했습니다.
좌표와 편집 동작
도형과 경로의 편집 구조 통일
기본 도형과 직접 그린 경로를 같은 방식으로 편집할 수 있도록 꼭짓점·제어점 데이터로 관리하고 SVG path로 표현했습니다. 같은 데이터에서 경로와 편집 핸들을 구성해 꼭짓점 이동과 곡선 조절을 화면에 반영했습니다.
회전한 도형의 크기 조절
회전된 도형의 크기를 조절할 때 드래그 거리와 실제 크기 변화가 일치하지 않았습니다. 중심점을 기준으로 꼭짓점의 상대 좌표를 계산하고 회전각을 적용한 벡터 연산으로 크기 조절 로직을 보정했습니다.