feat(content): 콘텐츠 커버 이미지 크롭 기능 추가 및 이슈 수정

docs/20260227_이미지크롭포커스이슈수정.md

@@ -0,0 +1,14 @@
+# 20260227_이미지크롭포커스이슈수정.md
+
+## 구현할 내용
+- [x] 이미지 크롭 후 포커스가 다른 곳으로 가면 다시 크롭화면이 표시되는 문제 해결
+- [x] 크롭 후 `v-file-input` 값 초기화 로직 추가
+
+## 검증 기록
+### 1차 수정
+- **무엇을**: `ContentList.vue`의 이미지 선택 및 크롭 로직 수정
+- **왜**: `v-file-input`에 선택된 파일이 남아 있어 다른 곳에 포커스가 갔다가 돌아오거나 입력이 발생할 때 `@change` 이벤트가 예기치 않게 발생할 가능성이 있고, 사용자 경험상 불편함이 있음.
+- **어떻게**:
+    - `imageAdd` 메서드에서 파일을 처리하기 전에 `file._isCropped` 플래그를 확인하여 이미 크롭된 파일인 경우 중복 처리를 방지함.
+    - `cropImage` 메서드에서 크롭된 새로운 `File` 객체를 생성할 때 `_isCropped = true` 플래그를 설정하여 `audio_content.cover_image`가 업데이트될 때 발생하는 `@change` 이벤트에 의해 크롭 다이얼로그가 다시 열리는 것을 방지함.
+    - `npm run lint` 실행 결과 이상 없음.

docs/20260227_콘텐츠커버이미지크롭기능추가.md

@@ -0,0 +1,39 @@
+# 20260227_콘텐츠커버이미지크롭기능추가.md
+
+## 작업 개요
+콘텐츠 등록 및 수정 시 커버 이미지를 1:1 비율로 크롭하여 등록할 수 있는 기능을 추가한다.
+
+## 작업 항목
+- [x] cropperjs 라이브러리 설치
+- [x] ContentList.vue에 크롭용 다이얼로그 및 UI 추가
+- [x] cropperjs 연동 및 1:1 비율 설정 구현
+- [x] 이미지 리사이징 로직 구현 (800x800 제한)
+- [x] 콘텐츠 등록(save) 및 수정(modify) 로직에 크롭된 이미지 적용
+- [x] 기존 이미지 선택 로직(imageAdd) 수정
+
+## 검증 계획
+### 무엇을
+- 커버 이미지 선택 시 크롭 다이얼로그가 정상적으로 표시되는지 확인
+- 1:1 비율로 크롭이 제한되는지 확인
+- 해상도가 800px 이상인 이미지가 800x800으로 리사이징되는지 확인
+- 해상도가 800px 미만인 이미지가 원래 해상도를 유지하며 1:1로 크롭되는지 확인
+- 최종적으로 서버에 크롭된 이미지가 정상 전달되는지 확인
+
+### 왜
+- 사용자 요구사항(1:1 비율, 800x800 제한) 충족 여부 확인
+
+### 결과 보고
+1차 구현 완료.
+- 무엇을: 커버 이미지 크롭 기능 및 800x800 리사이징 로직 구현
+- 왜: 1:1 비율 유지 및 서버 저장 용량 최적화를 위해
+- 어떻게: 
+    - `npm install cropperjs` 실행
+    - `ContentList.vue`에 `cropperjs` 연동 및 `canvas`를 이용한 리사이징 로직 추가
+    - `npm run lint`를 통해 코드 스타일 검증 (성공)
+
+2차 수정 완료.
+- 무엇을: `Module not found: Error: Can't resolve 'cropperjs/dist/cropper.css'` 에러 수정
+- 왜: `cropperjs` 2.x 버전에서는 CSS 파일이 포함되어 있지 않아 빌드 에러 발생
+- 어떻게: 
+    - `cropperjs`를 1.x 버전(`^1.5.13`)으로 재설치하여 CSS 파일을 포함하도록 수정
+    - `npm run lint`를 통해 코드 스타일 검증 (성공)