벡터 기반의 드로잉 툴 구현

사용 방법

파일 clone 후 npm run dev로 서버를 실행하여 사용하실 수 있습니다.

# 1. 저장소 클론
git clone https://github.com/mynameSumin/drawing_tool.git
cd drawing_tool

# 2. 의존성 설치
npm install

# 3. 개발 서버 실행
npm run dev

기능 설명

사용할 수 있는 기능은 다음과 같습니다.

두께 조절

• 슬라이더를 통해 두께를 조절할 수 있습니다.
• 숫자를 입력하여 두께를 조절 할 수 있습니다.

도구 지정

다각형을 제외한 나머지 도구들은 드래그앤드롭을 통해 사용이 가능합니다.
다각형은 클릭을 이용해 그리기를 시작할 수 있으며, 처음 그리기 시작한 점을 다시 클릭할 경우 그리기를 완료할 수 있습니다.

• 자유 그리기, 직선, 원형, 직사각형, 다각형

색깔 지정

• color picker를 이용하여 색깔을 지정할 수 있습니다.

도형 및 캔버스 이동

• 드래그앤드롭을 이용하여 도형 이동 및 캔버스 이동이 가능합니다.

폴더 구조

src/
├── assets/          # 이미지 및 아이콘 폴더
├── components/      # UI 컴포넌트
├── store/           # Zustand 기반 상태 관리 모듈
├── styles/          # CSS 및 스타일 관련 파일
├── types/           # PenTool, Shape 타입 정의
├── utils/           # 다른 컴포넌트에서 사용되는 함수 파일
├── App.tsx          
├── main.tsx