feat: User Experience Optimization Code Merge about Drawing

[dbjoung]

📂 작업 내용

closes #78

• 커서 보정 코드 병합
• 드로잉 보간법 적용 -> 최적화 필요. 미적용
• flood fill 내부 로직 변경
• 둥근 선 옵션 적용

💡 자세한 설명

커서 보정 코드 병합

• 캔버스 커서용 canvas Element 추가
• 커서와 드로잉이 함께 움직이도록 보정

드로잉 보간법 적용

• 선 리렌더링 없이 곡선으로 그려지도록 보간법 적용
• drawStroke와 연결된 메소드들에 완성된 선 구분을 위한 isLastStroke 인자 추가
• redraw 상황에서는 아래 코드에서 완성된 선인지 아닌 지 임시로 구분

notNoneStrokes.forEach(({ stroke }, idx) => {
  const points = stroke.points;
  if (notNoneStrokes.length - 1 === idx) drawStroke(stroke, true);
  else if (points.length >= notNoneStrokes[idx + 1].stroke.points.length) drawStroke(stroke, true);
  else drawStroke(stroke, false);
});

flood fill 관련 로직 변경

• 방문 배열 사용하는 방향으로 내부 로직 변경
• 로컬 페인팅은 drawStroke로 이어지지 않도록 수정

둥근 선 옵션 적용

• 선을 둥글게 만드는 옵션인 아래 두 코드 추가

ctx.lineCap = 'round';
ctx.lineJoin = 'round';

📗 참고 자료 & 구현 결과 (선택)

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (main이 아닙니다.)
• Reviewers, Labels를 등록했나요?
• 불필요한 코드는 제거했나요?

[github-actions]

📚 Storybook preview deployed to: Visit Storybook Preview

[github-actions]

📚 Storybook preview deployed to: Visit Storybook Preview

[github-actions]

📚 Storybook preview deployed to: Visit Storybook Preview

[github-actions]

📚 Storybook preview deployed to: Visit Storybook Preview

[github-actions]

📚 Storybook preview deployed to: Visit Storybook Preview

[github-actions]

🧹 Storybook preview for PR #143 has been removed.