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

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

작업 개요

콘텐츠 등록 및 수정 시 커버 이미지를 1:1 비율로 크롭하여 등록할 수 있는 기능을 추가한다.

작업 항목

• cropperjs 라이브러리 설치
• ContentList.vue에 크롭용 다이얼로그 및 UI 추가
• cropperjs 연동 및 1:1 비율 설정 구현
• 이미지 리사이징 로직 구현 (800x800 제한)
• 콘텐츠 등록(save) 및 수정(modify) 로직에 크롭된 이미지 적용
• 기존 이미지 선택 로직(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를 통해 코드 스타일 검증 (성공)