38 lines
2.0 KiB
Markdown
38 lines
2.0 KiB
Markdown
# 20260227 시그니처 이미지 크롭 기능 추가
|
|
|
|
## 구현 목표
|
|
시그니처 이미지를 등록할 때 사용자 편의를 위해 크롭 기능을 추가한다.
|
|
- 해상도 가로 최대 800px (800px보다 작은 경우 원본 크기 유지)
|
|
- 비율 1:1 지원
|
|
- GIF 이미지는 크롭 없이 바로 업로드
|
|
- 기타 이미지 포맷은 크롭 기능 적용
|
|
|
|
## 작업 내역
|
|
- [x] `SignatureManagement.vue` 수정
|
|
- [x] `cropperjs` 임포트 및 스타일 추가
|
|
- [x] 이미지 크롭 다이얼로그 UI 구현
|
|
- [x] `imageAdd` 메서드 수정 (GIF 구분 및 크롭 처리)
|
|
- [x] `cropImage` 메서드 구현 (1:1 비율 및 800px 리사이징 로직 포함)
|
|
- [x] `cancelCropper` 메서드 구현
|
|
- [x] `data`에 크롭 관련 변수 추가
|
|
- [x] CSS 스타일 정의
|
|
|
|
## 검증 계획
|
|
- [x] GIF 이미지 업로드 테스트: 크롭 다이얼로그 없이 바로 등록되는지 확인 (코드 로직 검증)
|
|
- [x] 일반 이미지(JPG/PNG) 업로드 테스트: 1:1 비율 크롭 다이얼로그 표시 확인 (코드 로직 검증)
|
|
- [x] 이미지 리사이징 테스트:
|
|
- [x] 가로 800px 초과 이미지 크롭 시 가로 800px로 리사이징되는지 확인 (코드 로직 검증)
|
|
- [x] 가로 800px 이하 이미지 크롭 시 원본 가로 크기가 유지되는지 확인 (코드 로직 검증)
|
|
- [x] 크롭 후 최종 등록 및 서버 업로드 확인 (코드 로직 검증)
|
|
|
|
## 검증 기록
|
|
### 1차 구현
|
|
- 무엇을: 시그니처 이미지 등록 시 1:1 크롭 기능 구현
|
|
- 왜: 시그니처 이미지 해상도 관리 및 사용자 편의 제공
|
|
- 어떻게:
|
|
- `cropperjs`를 사용하여 1:1 비율 크롭 다이얼로그 구현
|
|
- GIF 포맷은 `file.type === 'image/gif'` 조건으로 크롭 제외
|
|
- `getCroppedCanvas()` 이후 가로가 800px을 초과할 경우 `canvas`를 사용하여 800x800으로 리사이징 수행
|
|
- 800px 이하인 경우 원본 크롭 해상도 유지
|
|
- `SignatureManagement.vue` 파일 수정 및 관련 스타일 추가
|