feat(content): 시리즈 커버 이미지 크롭 기능을 추가함

docs/20260227_시리즈커버이미지크롭기능추가.md

@@ -0,0 +1,38 @@
+# 20260227_시리즈커버이미지크롭기능추가.md
+
+## 구현할 내용
+- [x] `ContentSeriesList.vue`에 `cropperjs`를 활용한 이미지 크롭 기능 추가
+    - [x] 1:1.5 비율(aspectRatio: 1/1.5) 지원
+    - [x] 가로 해상도 최대 1000px 제한 로직 추가 (1000px 미만은 원본 크기 유지)
+    - [x] 크롭 다이얼로그 및 관련 상태 관리 로직 구현
+    - [x] 크롭 후 `_isCropped` 플래그를 통한 중복 처리 방지
+- [x] 크롭 다이얼로그 내 이미지 표시 영역 높이 제한 및 스타일 수정
+- [x] 큰 이미지가 표시될 때 다이얼로그 밖으로 나가지 않도록 `max-height` 조정
+- [x] 시리즈 이미지 크롭 비율을 A4 비율(210:297)로 수정
+
+## 검증 기록
+### 1차 구현
+- **무엇을**: `ContentSeriesList.vue` 시리즈 등록/수정 시 커버 이미지 크롭 기능 추가
+- **왜**: 시리즈 커버 이미지의 비율을 1:1.5로 강제하고, 고해상도 이미지 업로드 시 가로 1000px로 리사이징하여 서버 부하 및 레이아웃 깨짐을 방지하기 위함
+- **어떻게**:
+    - `cropperjs` 라이브러리를 도입하여 `aspectRatio: 1 / 1.5` 설정
+    - `cropImage` 메서드에서 `canvas.width`가 1000px을 초과할 경우에만 리사이징 수행
+    - `file._isCropped` 플래그를 사용하여 크롭 완료 후 `v-file-input` 모델 변경 시 발생하는 `imageAdd` 중복 호출 방지
+    - `npm run lint`를 통해 코드 스타일 검증 완료
+
+### 2차 수정
+- **무엇을**: `ContentSeriesList.vue`의 크롭퍼 이미지 컨테이너 스타일 수정
+- **왜**: 이미지가 너무 클 경우 다이얼로그를 벗어나 스크롤을 해야만 '크롭 완료' 버튼을 누를 수 있는 불편함이 있음.
+- **어떻게**:
+    - `.cropper-wrapper`의 `max-height`를 `500px`에서 `70vh`로 변경하여 브라우저 높이에 대응하도록 수정.
+    - `npm run lint` 실행 결과 이상 없음 확인.
++
++### 3차 수정
++- **무엇을**: 시리즈 커버 이미지 크롭 비율 수정 (1:1.5 -> A4 비율)
++- **왜**: 시리즈 이미지 규격을 A4 비율(210:297)로 통일하기 위함
++- **어떻게**:
++    - `ContentSeriesList.vue`에서 `aspectRatio`를 `210 / 297`로 수정
++    - 크롭 다이얼로그 타이틀을 "이미지 크롭 (A4 비율)"으로 변경
++    - 리사이징 시 높이 계산 방식을 `MAX_WIDTH * (297 / 210)`으로 수정
++    - 목록의 커버 이미지 `aspect-ratio`를 `210/297`로 수정
++    - `npm run lint` 실행 결과 이상 없음 확인